diff --git a/_posts/Character-Sheet/0000-01-01-Details.html b/_posts/Character-Sheet/0000-01-01-Details.html
new file mode 100644
index 0000000..2de8a52
--- /dev/null
+++ b/_posts/Character-Sheet/0000-01-01-Details.html
@@ -0,0 +1,102 @@
+---
+layout: ikrpg
+tags: [ Character Sheet, None, None ]
+categories: [ Character-Sheet ]
+---
+
+<p>
+    <a href="/portal/Character-Sheet">Back to the Character Sheet main page</a>.
+</p>
+
+<h2>Usage</h2>
+<ol>
+    <li><strong>Fill out</strong> the input fields of the character sheet.</li>
+    <li>Click the <strong>Save sheet to URL</strong> link below the sheet.</li>
+    <li><strong>Copy the URL</strong> and share it with your friends!</li>
+</ol>
+
+<div class="sheet">
+    <form id="details" class="card">
+        <input id="name" type="text" />
+        <div id="attributes">
+            <input id="playerName" type="text" />
+            <input id="careers" type="text" />
+            <input id="sex" type="text" />
+            <input id="archetype" type="text" />
+            <input id="race" type="text" />
+            <input id="definingCharacteristics" type="text" />
+            <input id="faith" type="text" />
+            <input id="weight" type="text" />
+            <input id="height" type="text" />
+        </div>
+        <div id="injuries">
+            <input id="injury1" type="text" />
+            <input id="injury2" type="text" />
+            <input id="injury3" type="text" />
+        </div>
+        <div id="beliefs">
+            <input id="belief1" type="text" />
+            <input id="belief2" type="text" />
+            <input id="belief3" type="text" />
+        </div>
+        <div id="connections">
+            <input id="connection1" type="text" />
+            <input id="connection2" type="text" />
+            <input id="connection3" type="text" />
+            <input id="connection4" type="text" />
+        </div>
+        <div id="languages">
+            <input id="language1" type="text" />
+            <input id="language2" type="text" />
+            <input id="language3" type="text" />
+            <input id="language4" type="text" />
+            <input id="language5" type="text" />
+            <input id="language6" type="text" />
+            <input id="language7" type="text" />
+            <input id="language8" type="text" />
+        </div>
+    </form>
+</div>
+
+<p>
+    <a href="javascript:hero.url();">Save sheet to URL</a>
+</p>
+
+<p class="right">
+    Thanks to XYZ for the Sheet!
+</p>
+
+<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
+<script type="text/javascript">
+    var hero = new Heroic({
+        "name": "Hero's name",
+        "archetype": "Archetype",
+        "race": "Race",
+        "careers": "Careers",
+        "playerName": "Player's Name",
+        "sex":"sex",
+        "definingCharacteristics": "Defining Characteristics",
+        "faith": "Faith",
+        "weight": "Weight",
+        "height": "Height",
+        "injury1": "Injury 1",
+        "injury2": "Injury 2",
+        "injury3": "...",
+        "belief1": "Religious Belief 1",
+        "belief2": "Religious Belief 2",
+        "belief3": "...",
+        "connection1": "Connection 1",
+        "connection2": "Connection 2",
+        "connection3": "...",
+        "connection4": "",
+        "language1": "Language 1",
+        "language2": "Language 2",
+        "language3": "...",
+        "language4": "",
+        "language5": "",
+        "language6": "",
+        "language7": "",
+        "language8": ""
+    });
+    hero.bind();
+</script>
\ No newline at end of file
diff --git a/_posts/Character-Sheet/0000-01-01-Stats.html b/_posts/Character-Sheet/0000-01-01-Stats.html
index 1694a8f..ffa4e00 100644
--- a/_posts/Character-Sheet/0000-01-01-Stats.html
+++ b/_posts/Character-Sheet/0000-01-01-Stats.html
@@ -105,9 +105,11 @@ categories: [ Character-Sheet ]
         <input title="XP" id="xp" type="text" />
     </form>
 </div>
+
 <p>
     <a href="javascript:hero.url();">Save sheet to URL</a>
 </p>
+
 <script type="text/javascript" src="/static/javascripts/heroic.js"></script>
 <script type="text/javascript">
     var hero = new Heroic({
@@ -142,7 +144,6 @@ categories: [ Character-Sheet ]
         "arm_mod": 0,
         "cmd_mod": 0,
         "xp": 0,
-        "hash": "stats",
         "r1m1": true,
         "r2m1": false,
         "r1m2": false,
diff --git a/_posts/Portal/0000-01-01-Character-Sheet.html b/_posts/Portal/0000-01-01-Character-Sheet.html
index 64a6f96..799c5e2 100644
--- a/_posts/Portal/0000-01-01-Character-Sheet.html
+++ b/_posts/Portal/0000-01-01-Character-Sheet.html
@@ -9,9 +9,9 @@ tags:
 ---
 
 <p>
-    The character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the
-    <em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em>
-    and the <em>Notes page</em>.
+    Our custom character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the
+    <em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em>,
+    the <em>Notes page</em> and the <em>Details page</em>.
 </p>
 
 <h2>Character sheets</h2>
@@ -23,6 +23,7 @@ tags:
     <li><a href="/character-sheet/Spells">Spells</a></li>
     <li><a href="/character-sheet/Gear">Gear</a></li>
     <li><a href="/character-sheet/Notes">Notes</a></li>
+    <li><a href="/character-sheet/Details">Details</a></li>
 </ul>
 
 <h2>Example</h2>
diff --git a/static/images/sheet/Details.png b/static/images/sheet/Details.png
new file mode 100644
index 0000000..1ffff1e
Binary files /dev/null and b/static/images/sheet/Details.png differ
diff --git a/static/javascripts/heroic.js b/static/javascripts/heroic.js
index 753d791..5c7aef7 100644
--- a/static/javascripts/heroic.js
+++ b/static/javascripts/heroic.js
@@ -66,142 +66,144 @@ function Heroic(Hero) {
     };
 
     var initialize = function() {
-        var textareas = document.querySelectorAll("textarea");
-        var fillOut = function(attribute, value) {
-            if (isString(value) || isNumber(value)) {
-                var element = document.querySelector("input#"+attribute);
-                if (element != null && isDefined(element.value)) {
-                    element.value = value;
-                    if (element.nodeName == "TEXTAREA") resizeTextarea(element)();
-                }
-            } else if (isObject(value)) {
-                var parent = document.querySelector("#"+attribute);
-                for (key in value) {
-                    var child = parent.querySelector("input."+key+", textarea."+key);
-                    if (child != null && isDefined(child.value)) {
-                        child.value = value[key];
-                        if (child.nodeName == "TEXTAREA") resizeTextarea(child)();
-                    }
-                }
-            }
-        };
-        var saveOnChange = function(attribute, value) {
-            var updateSearchString;
-            if (isString(value) || isNumber(value)) {
-                var input = document.querySelector("input#"+attribute);
-                updateSearchString = function() {
-                    Hero[attribute] = input.value;
-                    Hero["focus"] = attribute;
-                    redirect();
-                };
-                if (isDefined(input)) {
-                //input.addEventListener("change", updateSearchString, false);
-                  addListener(input, "change", updateSearchString);
-                }
-            } else if (isObject(value)) {
-                var parent = document.querySelector("#"+attribute);
-                updateSearchString = function(key, input) {
-                    return function() {
-                        Hero[attribute][key] = input.value;
-                        Hero["focus"] = attribute;
-                        redirect();
-                    };
-                };
-                for (key in value) {
-                    var child = parent.querySelector("input."+key+", textarea."+key);
-                    if (isDefined(child)) { observe(child, "change", updateSearchString(key, child)); }
-                }
-            }
-        };
-        var showWeapons = function(hero) {
-            var setDisplay = function(element, bool) { if (isDefined(element.style)) element.style.display = (bool) ? "block" : "none"; };
-            var showElement = function(element) { setDisplay(element, true); };
-            var hideElement = function(element) { setDisplay(element, false); };
-            var showElements = function(array) { if (isDefined(array.forEach)) array.forEach(showElement); };
-            var hideElements = function(array) { if (isDefined(array.forEach)) array.forEach(hideElement); };
-            var r1m1 = document.querySelector("div#r1m1");
-            var r2m1 = document.querySelector("div#r2m1");
-            var r1m2 = document.querySelector("div#r1m2");
-            var r2 = document.querySelector("div#r2");
-            var m2 = document.querySelector("div#m2");
-            var rat1 = document.querySelector("div#rat1");
-            var rat2 = document.querySelector("div#rat2");
-            var mat1 = document.querySelector("div#mat1");
-            var mat2 = document.querySelector("div#mat2");
-            var mat3 = document.querySelector("div#mat3");
-            if (isBoolean(hero.r1m1) && hero.r1m1 == true) {
-                showElements([ r1m1, rat1, mat2 ]);
-                hideElements([ r2m1, r1m2, r2, m2, mat1, rat2, mat3 ]);
-            } else if (isBoolean(hero.r2m1) && hero.r2m1 == true) {
-                showElements([ r2m1, rat1, rat2, mat3 ]);
-                hideElements([ r1m1, r1m2, r2, m2, mat1, mat2 ]);
-            } else if (isBoolean(hero.r1m2) && hero.r1m2 == true) {
-                showElements([ r1m2, rat1, mat2, mat3 ]);
-                hideElements([ r1m1, r2m1, r2, m2, mat1, rat2 ]);
-            } else if (isBoolean(hero.r2) && hero.r2 == true) {
-                showElements([ r2, rat1, rat2 ]);
-                hideElements([ r1m1, r2m1, r1m2, m2, mat1, mat2, mat3 ]);
-            } else if (isBoolean(hero.m2) && hero.m2 == true) {
-                showElements([ m2, mat1, mat2 ]);
-                hideElements([ r1m1, r2m1, r1m2, r2, rat1, rat2, mat3 ]);
-            }
-        };
-        var focusLastInput = function(hero) {
-            if (isDefined(hero["focus"])) {
-                var input = document.querySelector("input#"+hero["focus"]);
-                if (input == null) input = document.querySelector("#"+hero["focus"]+" input");
-                if (input != null) { input.focus(); input.scrollIntoView(); }
-            }
-        };
-        var setPortrait = function(hero) {
-          var portrait = hero["portrait"]
-            , portraitDiv = document.querySelector("#portrait");
-          if (portrait && portraitDiv) {
-            var url = portrait["url"]
-              , x = portrait["x"]
-              , y = portrait["y"]
-              , size = portrait["size"];
-            if (url != null && x != null && y != null && size != null) {
-              var sheet = document.querySelector("div.sheet");
-              if (sheet) {
-                sheet.style["backgroundImage"] = "url("+url+")";
-                sheet.style["backgroundPosition"] = x+"px "+y+"px";
-                sheet.style["backgroundSize"] = size == "auto" ? "auto" : size+"px";
+      var textareas = document.querySelectorAll("textarea");
+      var fillOut = function(attribute, value) {
+          if (isString(value) || isNumber(value)) {
+              var element = document.querySelector("input#"+attribute);
+              if (element != null && isDefined(element.value)) {
+                  element.value = value;
+                  if (element.nodeName == "TEXTAREA") resizeTextarea(element)();
               }
+          } else if (isObject(value)) {
+              var parent = document.querySelector("#"+attribute);
+              for (key in value) {
+                  var child = parent.querySelector("input."+key+", textarea."+key);
+                  if (child != null && isDefined(child.value)) {
+                      child.value = value[key];
+                      if (child.nodeName == "TEXTAREA") resizeTextarea(child)();
+                  }
+              }
+          }
+      };
+      var saveOnChange = function(attribute, value) {
+          var updateSearchString;
+          if (isString(value) || isNumber(value)) {
+              var input = document.querySelector("input#"+attribute);
+              updateSearchString = function() {
+                  Hero[attribute] = input.value;
+                  Hero["focus"] = attribute;
+                  redirect();
+              };
+              if (isDefined(input)) {
+              //input.addEventListener("change", updateSearchString, false);
+                addListener(input, "change", updateSearchString);
+              }
+          } else if (isObject(value)) {
+              var parent = document.querySelector("#"+attribute);
+              updateSearchString = function(key, input) {
+                  return function() {
+                      Hero[attribute][key] = input.value;
+                      Hero["focus"] = attribute;
+                      redirect();
+                  };
+              };
+              for (key in value) {
+                  var child = parent.querySelector("input."+key+", textarea."+key);
+                  if (isDefined(child)) { observe(child, "change", updateSearchString(key, child)); }
+              }
+          }
+      };
+      var showWeapons = function(hero) {
+          var setDisplay = function(element, bool) { if (isDefined(element.style)) element.style.display = (bool) ? "block" : "none"; };
+          var showElement = function(element) { setDisplay(element, true); };
+          var hideElement = function(element) { setDisplay(element, false); };
+          var showElements = function(array) { if (isDefined(array.forEach)) array.forEach(showElement); };
+          var hideElements = function(array) { if (isDefined(array.forEach)) array.forEach(hideElement); };
+          var r1m1 = document.querySelector("div#r1m1");
+          var r2m1 = document.querySelector("div#r2m1");
+          var r1m2 = document.querySelector("div#r1m2");
+          var r2 = document.querySelector("div#r2");
+          var m2 = document.querySelector("div#m2");
+          var rat1 = document.querySelector("div#rat1");
+          var rat2 = document.querySelector("div#rat2");
+          var mat1 = document.querySelector("div#mat1");
+          var mat2 = document.querySelector("div#mat2");
+          var mat3 = document.querySelector("div#mat3");
+          if (isBoolean(hero.r1m1) && hero.r1m1 == true) {
+              showElements([ r1m1, rat1, mat2 ]);
+              hideElements([ r2m1, r1m2, r2, m2, mat1, rat2, mat3 ]);
+          } else if (isBoolean(hero.r2m1) && hero.r2m1 == true) {
+              showElements([ r2m1, rat1, rat2, mat3 ]);
+              hideElements([ r1m1, r1m2, r2, m2, mat1, mat2 ]);
+          } else if (isBoolean(hero.r1m2) && hero.r1m2 == true) {
+              showElements([ r1m2, rat1, mat2, mat3 ]);
+              hideElements([ r1m1, r2m1, r2, m2, mat1, rat2 ]);
+          } else if (isBoolean(hero.r2) && hero.r2 == true) {
+              showElements([ r2, rat1, rat2 ]);
+              hideElements([ r1m1, r2m1, r1m2, m2, mat1, mat2, mat3 ]);
+          } else if (isBoolean(hero.m2) && hero.m2 == true) {
+              showElements([ m2, mat1, mat2 ]);
+              hideElements([ r1m1, r2m1, r1m2, r2, rat1, rat2, mat3 ]);
+          }
+      };
+      var focusLastInput = function(hero) {
+          if (isDefined(hero["focus"])) {
+              var input = document.querySelector("input#"+hero["focus"]);
+              if (input == null) input = document.querySelector("#"+hero["focus"]+" input");
+              if (input != null) { input.focus(); input.scrollIntoView(); }
+          }
+      };
+      var setPortrait = function(hero) {
+        var portrait = hero["portrait"]
+          , portraitDiv = document.querySelector("#portrait");
+        if (portrait && portraitDiv) {
+          var url = portrait["url"]
+            , x = portrait["x"]
+            , y = portrait["y"]
+            , size = portrait["size"];
+          if (url != null && x != null && y != null && size != null) {
+            var sheet = document.querySelector("div.sheet");
+            if (sheet) {
+              sheet.style["backgroundImage"] = "url("+url+")";
+              sheet.style["backgroundPosition"] = x+"px "+y+"px";
+              sheet.style["backgroundSize"] = isNaN(parseInt(size, 10)) ? size : size+"px";
             }
           }
-        };
-        
-        for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
-        showWeapons(Hero);
-        for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
-        for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
-        setPortrait(Hero);
-        focusLastInput(Hero);
-        
-      //var names = document.querySelectorAll("section > input.name");
-      //for (name in names) { names[name].value = Hero["name"]; }
+        }
+      };
       
-        var displayPortrait = function(portrait, value, pointerEvent) {
-          return function(event) {
-            event.preventDefault();
-            event.stopPropagation();
-            var inputs = portrait.querySelectorAll("input");
-            
-            for (var index = 0; index < inputs.length; index++) {
-              var input = inputs.item(index);
-              input.style["display"] = value;              
-              portrait.style["pointerEvents"] = pointerEvent;
-            }
-          };
+      for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
+      showWeapons(Hero);
+      for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
+      for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
+      setPortrait(Hero);
+      focusLastInput(Hero);
+      
+    //var names = document.querySelectorAll("section > input.name");
+    //for (name in names) { names[name].value = Hero["name"]; }
+    
+      var displayPortrait = function(portrait, value, pointerEvent) {
+        return function(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          var inputs = portrait.querySelectorAll("input");
+          
+          for (var index = 0; index < inputs.length; index++) {
+            var input = inputs.item(index);
+            input.style["display"] = value;              
+            portrait.style["pointerEvents"] = pointerEvent;
+          }
         };
-        var portrait = document.querySelector("#portrait")
-          , button = portrait.querySelector("input[type='button']");
-        
+      };
+      
+      var portrait = document.querySelector("#portrait");
+      if (portrait != null) {
         addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
+        var button = portrait.querySelector("input[type='button']");
         addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
+      }
       
-        redirect();
+      redirect();
     };
 
     document.addEventListener("DOMContentLoaded", initialize, false);
diff --git a/static/stylesheets/content.css b/static/stylesheets/content.css
index 1b45a26..39cdc80 100644
--- a/static/stylesheets/content.css
+++ b/static/stylesheets/content.css
@@ -6,6 +6,8 @@ section.content {
 section.content > p {
     margin: 1.5em 0;
     text-align: justify; }
+section.content > p.right {
+    text-align: right; }
 section.content > h2 {
     font-size: 1.5em;
     margin-bottom: -0.5em;
diff --git a/static/stylesheets/content/character-sheet.css b/static/stylesheets/content/character-sheet.css
index c235560..6e999ff 100644
--- a/static/stylesheets/content/character-sheet.css
+++ b/static/stylesheets/content/character-sheet.css
@@ -121,6 +121,41 @@ div.sheet > form#notes div.content div.note { position: relative; }
 div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
 div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
 
+div.sheet > form#details { padding-top: 66px; background-image: url(/static/images/sheet/Details.png); background-size: contain; }
+div.sheet > form#details input#name { top: 46px; left: 180px; height: 45px; width: 485px; font-size: 37px; text-transform: uppercase; }
+div.sheet > form#details div#attributes { top: 143px; left: 275px; }
+div.sheet > form#details div#attributes > input#playerName { width: 375px; }
+div.sheet > form#details div#attributes > input#careers { top: 57px; width: 270px; }
+div.sheet > form#details div#attributes > input#sex { top: 57px; left: 288px; width: 73px; }
+div.sheet > form#details div#attributes > input#archetype { top: 112px; width: 190px; }
+div.sheet > form#details div#attributes > input#race { top: 112px; left: 210px; width: 150px; }
+div.sheet > form#details div#attributes > input#definingCharacteristics { top: 167px; width: 350px; }
+div.sheet > form#details div#attributes > input#faith { top: 222px; width: 190px; }
+div.sheet > form#details div#attributes > input#weight { top: 222px; left: 200px; width: 190px; }
+div.sheet > form#details div#attributes > input#height { top: 277px; width: 190px; }
+div.sheet > form#details div#injuries { top: 500px; left: 270px; }
+div.sheet > form#details div#injuries > input { width: 390px; }
+div.sheet > form#details div#injuries > input#injury2 { top: 31px; }
+div.sheet > form#details div#injuries > input#injury3 { top: 62px; }
+div.sheet > form#details div#beliefs { top: 642px; left: 270px; }
+div.sheet > form#details div#beliefs > input { width: 390px; }
+div.sheet > form#details div#beliefs > input#belief2 { top: 31px; }
+div.sheet > form#details div#beliefs > input#belief3 { top: 62px; }
+div.sheet > form#details div#connections { top: 805px; left: 270px; }
+div.sheet > form#details div#connections > input { width: 390px; }
+div.sheet > form#details div#connections > input#connection2 { top: 28px; }
+div.sheet > form#details div#connections > input#connection3 { top: 56px; }
+div.sheet > form#details div#connections > input#connection4 { top: 84px; }
+div.sheet > form#details div#languages { top: 205px; left: 33px; }
+div.sheet > form#details div#languages > input { width: 230px; }
+div.sheet > form#details div#languages > input#language2 { top: 31px; }
+div.sheet > form#details div#languages > input#language3 { top: 62px; }
+div.sheet > form#details div#languages > input#language4 { top: 93px; }
+div.sheet > form#details div#languages > input#language5 { top: 124px; }
+div.sheet > form#details div#languages > input#language6 { top: 155px; }
+div.sheet > form#details div#languages > input#language7 { top: 186px; }
+div.sheet > form#details div#languages > input#language8 { top: 217px; }
+
 @media print {
     section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
 }
\ No newline at end of file