diff --git a/_layouts/ikrpg.html b/_layouts/ikrpg.html
index f0e8478..885424d 100644
--- a/_layouts/ikrpg.html
+++ b/_layouts/ikrpg.html
@@ -15,6 +15,10 @@
         <script type="text/javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
         <script type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
         <script type="text/javascript" src="/static/javascripts/lz-string-1.3.3-min.js"></script>
+        <script src="//cdn.jsdelivr.net/pouchdb/3.3.1/pouchdb.min.js"></script>
+        <script type="text/javascript">
+            var db = new PouchDB('ikrpg');
+        </script>
     </head>
     <body>
         <article itemscope itemtype="http://schema.org/Article">
@@ -42,7 +46,8 @@
             </header>
             <section class="content" itemprop="articleBody">{{ content }}</section>
             <footer id="foot">
-                <p>Images originating from the <a href="http://privateerpress.com">Privateer Press website</a> are © 2001—2013 Privateer Press, Inc. All Rights Reserved. Privateer Press ®, WARMACHINE ®, Cryx, Cygnar, Khador, Protectorate of Menoth, Retribution of Scryah, Steam-powered Miniatures Combat, warcaster, warjack, WARMACHINE: Prime, WARMACHINE: Escalation, WARMACHINE: Apotheosis, WARMACHINE: Superiority, WARMACHINE: Prime Remix, WARMACHINE: Legends, Forces of WARMACHINE: Pirates of the Broken Coast, Forces of WARMACHINE: Retribution of Scyrah, Forces of WARMACHINE: Cygnar, Forces of WARMACHINE: Khador, Forces of WARMACHINE: Cryx, Forces of WARMACHINE: Protectorate of Menoth, HORDES, Circle Orboros, Legion of Everblight, Skorne, Trollbloods, Trollblood, Monsterous Miniatures Combat, warbeast, HORDES: Primal, HORDES: Evolution, HORDES: Metamorphosis, Forces of HORDES: Circle Orboros, Forces of HORDES: Legion of Everblight, Forces of HORDES: Skorne, Forces of HORDES: Trollbloods, Iron Kingdoms, Immoren, The Witchfire Trilogy, Monsternomicon, Five Fingers: The Port of Deceit, Formula P3, Formula P3 Hobby Series, No Quarter Magazine and their logos are trademarks of Privateer Press, Inc. Images and trademarks used without permission. This website is unofficial and is not endorsed by Privateer Press. The background image is taken from the warmachine video game's <a href="http://whitemoondreams.com/warmachine/media/webkit-2">Webkit</a>.</p>
+                <div class="banner"></div>
+                <p>Images originating from the <a href="http://privateerpress.com">Privateer Press website</a> are © 2001—2013 Privateer Press, Inc. All Rights Reserved. Privateer Press ®, WARMACHINE ®, Cryx, Cygnar, Khador, Protectorate of Menoth, Retribution of Scryah, Steam-powered Miniatures Combat, warcaster, warjack, WARMACHINE: Prime, WARMACHINE: Escalation, WARMACHINE: Apotheosis, WARMACHINE: Superiority, WARMACHINE: Prime Remix, WARMACHINE: Legends, Forces of WARMACHINE: Pirates of the Broken Coast, Forces of WARMACHINE: Retribution of Scyrah, Forces of WARMACHINE: Cygnar, Forces of WARMACHINE: Khador, Forces of WARMACHINE: Cryx, Forces of WARMACHINE: Protectorate of Menoth, HORDES, Circle Orboros, Legion of Everblight, Skorne, Trollbloods, Trollblood, Monsterous Miniatures Combat, warbeast, HORDES: Primal, HORDES: Evolution, HORDES: Metamorphosis, Forces of HORDES: Circle Orboros, Forces of HORDES: Legion of Everblight, Forces of HORDES: Skorne, Forces of HORDES: Trollbloods, Iron Kingdoms, Immoren, The Witchfire Trilogy, Monsternomicon, Five Fingers: The Port of Deceit, Formula P3, Formula P3 Hobby Series, No Quarter Magazine and their logos are trademarks of Privateer Press, Inc. Images and trademarks used without permission. This website is unofficial and is not endorsed by Privateer Press. The background images are taken from the warmachine video game's <a href="http://whitemoondreams.com/warmachine/media/webkit-2">Webkit</a> and the free <a href="http://www.drivethrurpg.com/product/146332/Iron-Kingdoms-Unleashed-An-Introduction-to-Savagery">Iron Kingdoms Unleashed Adventure Kit PDF</a>.</p>
             </footer>
         </article>
         <script type="text/javascript">
@@ -53,5 +58,38 @@
                 }
             })();
         </script>
+        <script type="text/javascript">
+            function changeBackground(imageName, topX) {
+                $("body").css('background-image', 'url(/static/images/'+imageName+')');
+                $("body").css('background-position', '50% '+topX+'px');
+                $("#head").css('background-image', 'url(/static/images/'+imageName+')');
+                $("#head").css('background-position', '50% '+(topX-66)+'px');
+                $("#foot > div.banner").css('background-image', 'url(/static/images/'+imageName+')');
+            }
+            
+            function setBackground(imageName, topX) {
+                changeBackground(imageName, topX);
+                
+                db.get("bg", function(error, bg) {
+                    if(!error) {
+                        bg.name = imageName;
+                        bg.topX = topX;
+                        db.put(bg);
+                    }
+                });
+            }
+        
+            db.get("bg", function(error, bg) {
+                if(error) {
+                    bg = {
+                        _id: "bg",
+                        name: "bg-FMF.jpg",
+                        topX: -370
+                    };
+                    db.put(bg);
+                }
+                changeBackground(bg.name, bg.topX);
+            });
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/_posts/0000-01-01-Character-Generator.html b/_posts/0000-01-01-Character-Generator.html
new file mode 100644
index 0000000..71c120c
--- /dev/null
+++ b/_posts/0000-01-01-Character-Generator.html
@@ -0,0 +1,300 @@
+---
+layout: ikrpg
+tags: [Character Generator]
+---
+
+<style>
+    
+</style>
+
+
+<div id="generator">
+    
+    <h2>Race</h2>
+    <ol>
+        <li>
+            <select id="race">
+                <option value="human">Human</option>
+                <option value="dwarf">Dwarf</option>
+            </select>
+        </li>
+    </ol>
+    
+    <h2>Archetype</h2>
+    <ol>
+        <li>
+            <select id="archetype">
+                <option value="gifted">Gifted</option>
+                <option value="mighty">Mighty</option>
+            </select>
+        </li>
+    </ol>
+    
+    <h2>Career 1</h2>
+    <ol>
+        <li>
+            <select>
+                <option value="alchemist">Alchemist</option>
+                <option value="cutthroat">Cutthroat</option>
+            </select>
+        </li>
+    </ol>
+    
+    <h2>Career 2</h2>
+    <ol>
+        <li>
+            <select>
+                <option value="alchemist">Alchemist</option>
+                <option value="cutthroat">Cutthroat</option>
+            </select>
+        </li>
+    </ol>
+    
+    <h2>Choices</h2>
+    <ol id="choices">
+    </ol>
+    
+</div>
+
+
+<script type="text/javascript" src="/static/javascripts/index.js"></script>
+<script type="text/javascript">
+    // global
+    // var ikrpg
+
+    var ikrpg = ikrpg || {};
+    
+    function ch00se(number, choices, description) {
+        return function() {
+            var li = "";
+            li += "<li><select>"
+            choices.forEach(function(choice) {
+                
+                '<option value="alchemist">Alchemist</option>'
+                '<option value="cutthroat">Cutthroat</option>'
+                
+            });
+            li += "</select></li>"
+            $("#choices").append(li);
+        };
+    }
+    
+    (function () {
+    //'use strict';
+        
+        // helpers
+               
+        function eq(a) {
+            return function(elem) { return elem == a; };
+        }
+        
+        function is_in(array) {
+            return function(elem) { return array.some(eq(elem)); };
+        }
+        
+        function add(a) {
+            return function(b) { return a + b; };
+        }
+        
+        function become(a) {
+            return function(b) { return a; };
+        }
+        
+        function append(a) {
+            return function(array) { return array.concat([a]); };
+        }
+        
+        function concat(array1) {
+            return function(array2) { return array1.concat(array2); };
+        }
+        
+        function add_all(new_obj) {
+            return function(old_obj) {
+                for(var key in new_obj) {
+                    if(!old_obj[key]) old_obj[key] = 0;
+                    old_obj[key] = old_obj[key] + new_obj[key];
+                }
+                return old_obj;
+            };
+        }
+        
+        function take_best(new_obj) {
+            return function(old_obj) {
+                for(var key in new_obj) {
+                    if(!old_obj[key]) old_obj[key] = new_obj[key];
+                    else if(old_obj[key] < new_obj[key]) old_obj[key] = new_obj[key];
+                }
+                return old_obj;
+            };
+        }
+        
+        // type can be: "one of"
+        function choices(amount, choices, description) {
+            // TODO
+        }
+        
+        function choose(number, property, choices, modifier, description) {
+            // TODO
+        }
+        
+        // choices: [[1, "PHY", add], ["Llaelese", "languages", append], ...]
+        
+        
+        
+        // data
+        
+        var all_archetypes = ikrpg.index.data.reduce(function(acc, obj) {
+            return obj["category"] == "Character Creation" && obj["subcategory"] == "Archetype" ? acc.concat([obj["name"]]) : acc;
+        }, []);
+        
+        var all_levels = ["hero", "veteran", "epic"];
+        
+        var all_races = ikrpg.index.data.reduce(function(acc, obj) {
+            return obj["category"] == "Character Creation" && obj["subcategory"] == "Race" ? acc.concat([obj["name"]]) : acc;
+        }, []);
+        
+        var all_careers = ikrpg.index.data.reduce(function(acc, obj) {
+            return []; // TODO obj["category"] == "Character Creation" && ["Career", "Career Option"].some(obj["subcategory"]) ? acc.concat([obj["name"]]) : acc;
+        }, []);
+        
+        var all_languages = [
+            "Aeric", "Caspian", "Cygnaran", "Gobberish", "Idrian", "Khadoran", "Khurzic", "Kossite", "Llelese",
+            "Molgur", "Molgur-Og", "Molgur-Trul", "Morridane", "Ordic", "Rhulic", "Satyx", "Scharde", "Shyr",
+            "Sulese", "Telgesh", "Thurian", "Umbrean"
+        ];
+        
+        var races = {
+            "Human": {
+                race: become("Human"),
+                PHY: add(5),
+                SPD: add(6),
+                STR: add(4),
+                AGL: add(3),
+                PRW: add(4),
+                POI: add(4),
+                INT: add(3),
+                ARC: add(0),
+                PER: add(3),
+                
+                choices: [
+                    ch00se(2, all_languages.map(function(lang) { return [lang, "languages", append]; }), "Choose two languages:"),
+                    ch00se(1, [ [1, "PHY", add], [1, "AGL", add], [1, "INT", add] ], "Choose one additional stat:")
+                ],
+                
+                choices: [
+                    choices(1, [ choose(2, "languages", all_languages, append, "Choose two languages:") ], "Choose one of the following:"),
+                    choices(1, [ choose(1, "PHY", [1], add, "Choose 1 PHY."), choose(1, "AGL", [1], add), choose(1, "INT", [1], add) ])
+                ],
+                
+                constraints: [
+                    [function(hero) { return hero.archetypes.every(is_in(["Gifted", "Intellectual", "Mighty", "Skilled"])); }, "Archetype must be one of: Gifted, Intellectual, Mighty, Skilled."],
+                    [function(hero) { return hero.level == "hero"    && hero.PHY <= 7; }, "Hero level for PHY can be at most 7."],
+                    [function(hero) { return hero.level == "veteran" && hero.PHY <= 8; }, "Veteran level for PHY can be at most 8."],
+                    [function(hero) { return hero.level == "epic"    && hero.PHY <= 8; }, "Epic level for PHY can be at most 8."],
+                    [function(hero) { return hero.level == "hero"    && hero.SPD <= 7; }, "Hero level for SPD can be at most 7."],
+                    [function(hero) { return hero.level == "veteran" && hero.SPD <= 7; }, "Veteran level for SPD can be at most 7."],
+                    [function(hero) { return hero.level == "epic"    && hero.SPD <= 7; }, "Epic level for SPD can be at most 7."],
+                    [function(hero) { return hero.level == "hero"    && hero.STR <= 6; }, "Hero level for STR can be at most 6."],
+                    [function(hero) { return hero.level == "veteran" && hero.STR <= 7; }, "Veteran level for STR can be at most 7."],
+                    [function(hero) { return hero.level == "epic"    && hero.STR <= 8; }, "Epic level for STR can be at most 8."],
+                    [function(hero) { return hero.level == "hero"    && hero.AGL <= 5; }, "Hero level for AGL can be at most 5."],
+                    [function(hero) { return hero.level == "veteran" && hero.AGL <= 6; }, "Veteran level for AGL can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.AGL <= 7; }, "Epic level for AGL can be at most 7."],
+                    [function(hero) { return hero.level == "hero"    && hero.PRW <= 5; }, "Hero level for PRW can be at most 5."],
+                    [function(hero) { return hero.level == "veteran" && hero.PRW <= 6; }, "Veteran level for PRW can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.PRW <= 7; }, "Epic level for PRW can be at most 7."],
+                    [function(hero) { return hero.level == "hero"    && hero.POI <= 5; }, "Hero level for POI can be at most 5."],
+                    [function(hero) { return hero.level == "veteran" && hero.POI <= 6; }, "Veteran level for POI can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.POI <= 7; }, "Epic level for POI can be at most 7."],
+                    [function(hero) { return hero.level == "hero"    && hero.INT <= 5; }, "Hero level for INT can be at most 5."],
+                    [function(hero) { return hero.level == "veteran" && hero.INT <= 6; }, "Veteran level for INT can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.INT <= 7; }, "Epic level for INT can be at most 7."],
+                    [function(hero) { return hero.level == "hero"    && hero.ARC <= 4; }, "Hero level for ARC can be at most 4."],
+                    [function(hero) { return hero.level == "veteran" && hero.ARC <= 6; }, "Veteran level for ARC can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.ARC <= 8; }, "Epic level for ARC can be at most 8."],
+                    [function(hero) { return hero.level == "hero"    && hero.PER <= 5; }, "Hero level for PER can be at most 5."],
+                    [function(hero) { return hero.level == "veteran" && hero.PER <= 6; }, "Veteran level for PER can be at most 6."],
+                    [function(hero) { return hero.level == "epic"    && hero.PER <= 7; }, "Epic level for PER can be at most 7."],
+                ]
+            }
+        };
+        
+        var archetypes = {
+          //"Gifted": {
+          //    archetype: become("Gifted"),
+          //    "possible benefits": concat(["Additional Studies", "Combat Caster", "Fast Caster", "Feat: Dominator", "Feat: Powerful Caster", "Feat: Quick Cast", "Feat: Strength of Will", "Magic Sensitivity", "Rune Reader", "Warding Circle"]),
+          //    
+          //    choices: [
+          //        choices(1, [ choose(1, "benefits", archetypes["Gifted"]["possible benefits"]([]), append) ])
+          //    ],
+          //    
+          //    constraints: [
+          //        [function(hero) { return hero.benefits.every(is_in(hero["possible benefits"])); }, ""]
+          //    ]
+          //}
+        };
+        
+        var careers = {
+          //"Alchemist": {
+          //    careers: append("Alchemist"),
+          //    abilities: concat(["Grenadier", "Poison Resistance"]),
+          //    "military skills": add_all({ "Hand Weapon": 1, "Thrown Weapon": 1 }),
+          //    "occupational skills": add_all({ "Alchemy": 1, "Medicine": 1 }),
+          //    "gold coins": add(50),
+          //    "starting assets": concat(["alchemist's leather", "gas mask", "traveling alchemist's kit, any five alchemical grenades", "grenadier's bandolier"]),
+          //    "possible abilities": concat(["Bomber", "Brew Master", "Fast Cook", "Field Alchemist", "Fire in the Hole!", "Free Style", "Grenadier", "Poison Resistance"]),
+          //    "possible connections": append("alchemical order"),
+          //    "possible military skills": take_best({ "Hand Weapon": 2, "Thrown Weapon": 4, "Unarmed Combat": 2 }),
+          //    "possible occupational skills": take_best({ "Alchemy": 4 }) // CONTINUE HERE WITH CRAFT(ANY)
+          //}
+        };
+        
+        
+        
+        
+        // generator
+        ikrpg.generator = {
+            
+            hero: {
+                race: "",
+                archetype: "",
+                careers: [],
+                level: "hero",
+                PHY: 0,
+                SPD: 0,
+                STR: 0,
+                AGL: 0,
+                PRW: 0,
+                POI: 0,
+                INT: 0,
+                ARC: 0,
+                PER: 0,
+                languages: [],
+                "possible benefits": [],
+                benefits: [],
+                careers: [],
+                "possible abilities": [],
+                abilities: [],
+                "possible military skills": {},
+                "military skills": {},
+                "possible connections": [],
+                connections: [],
+                "possible occupational skills": {},
+                "occupational skills": {},
+                "gold coins": 0,
+                "starting assets": [],
+                
+                constraints: [
+                  //[function(hero) { return is_in(all_races)(hero.race); },            "Hero race must be one of: "+all_races.join(", ")+"."],
+                  //[function(hero) { return is_in(all_archetypes)(hero.archetype); },  "Hero archetype must be one of: "+all_archetypes.join(", ")+"."],
+                  //[function(hero) { return hero.careers.every(is_in(all_careers)); }, "Hero careers must be in: "+all_careers.join(", ")+"."],
+                  //[function(hero) { return is_in(all_levels)(hero.level); },          "Hero level must be one of: "+all_levels.join(", ")+"."],
+                  //// all_benefits
+                  //// Ability level constraint (hero -> 2, veteran -> 3, epic -> 4)
+                ]
+            }
+            
+        };
+        
+    })();
+</script>
\ No newline at end of file
diff --git a/_posts/0000-01-01-Generator.html b/_posts/0000-01-01-Generator.html
new file mode 100644
index 0000000..9079088
--- /dev/null
+++ b/_posts/0000-01-01-Generator.html
@@ -0,0 +1,169 @@
+---
+layout: ikrpg
+tags: [Character Generator]
+---
+
+<div id="generator">
+    
+    <h2>Race</h2>
+    
+    <select id="race">
+        <option value="0">&nbsp;</option>
+        <option value="1" selected>Human</option>
+    </select>
+    
+    <ul data-id="race">
+        <li data-mod='modify("set", "race", "Human")'>race: Human</li>
+        <li data-key="race" data-modifier="set" data-value='"Human"'>race: Human</li>
+        <!--li data-key="PHY" data-modifier="set" data-value='5'>PHY: 5</li-->
+        <li data-key="stats" data-modifier="add" data-value='["PHY","PHY","PHY","PHY","PHY"]'>PHY: 5</li>
+        <!--li data-key="SPD" data-modifier="set" data-value='6'>SPD: 6</li>
+        <li data-key="STR" data-modifier="set" data-value='4'>STR: 4</li>
+        <li data-key="AGL" data-modifier="set" data-value='3'>AGL: 3</li>
+        <li data-key="PRW" data-modifier="set" data-value='4'>PRW: 4</li>
+        <li data-key="POI" data-modifier="set" data-value='4'>POI: 4</li>
+        <li data-key="INT" data-modifier="set" data-value='3'>INT: 3</li>
+        <li data-key="ARC" data-modifier="set" data-value='0'>ARC: 0</li>
+        <li data-key="PER" data-modifier="set" data-value='3'>PER: 3</li-->
+        <li data-key="constraints" data-modifier="add" data-value='if (hero.level == "hero" && hero.PHY > 7) "Hero level for PHY can be at most 7."'>hero limit PHY: 7</li>
+        <!--li data-key="hero-limit-SPD" data-modifier="set" data-value='7'>hero limit SPD: 7</li>
+        <li data-key="hero-limit-STR" data-modifier="set" data-value='6'>hero limit STR: 6</li>
+        <li data-key="hero-limit-AGL" data-modifier="set" data-value='5'>hero limit AGL: 5</li>
+        <li data-key="hero-limit-PRW" data-modifier="set" data-value='5'>hero limit PRW: 5</li>
+        <li data-key="hero-limit-POI" data-modifier="set" data-value='5'>hero limit POI: 5</li>
+        <li data-key="hero-limit-INT" data-modifier="set" data-value='5'>hero limit INT: 5</li>
+        <li data-key="hero-limit-ARC" data-modifier="set" data-value='4'>hero limit ARC: 4</li>
+        <li data-key="hero-limit-PER" data-modifier="set" data-value='5'>hero limit PER: 5</li>
+        <li data-key="veteran-limit-PHY" data-modifier="set" data-value='8'>veteran limit PHY: 8</li>
+        <li data-key="veteran-limit-SPD" data-modifier="set" data-value='7'>veteran limit SPD: 7</li>
+        <li data-key="veteran-limit-STR" data-modifier="set" data-value='7'>veteran limit STR: 7</li>
+        <li data-key="veteran-limit-AGL" data-modifier="set" data-value='6'>veteran limit AGL: 6</li>
+        <li data-key="veteran-limit-PRW" data-modifier="set" data-value='6'>veteran limit PRW: 6</li>
+        <li data-key="veteran-limit-POI" data-modifier="set" data-value='6'>veteran limit POI: 6</li>
+        <li data-key="veteran-limit-INT" data-modifier="set" data-value='6'>veteran limit INT: 6</li>
+        <li data-key="veteran-limit-ARC" data-modifier="set" data-value='6'>veteran limit ARC: 6</li>
+        <li data-key="veteran-limit-PER" data-modifier="set" data-value='6'>veteran limit PER: 6</li>
+        <li data-key="epic-limit-PHY" data-modifier="set" data-value='8'>epic limit PHY: 8</li>
+        <li data-key="epic-limit-SPD" data-modifier="set" data-value='7'>epic limit SPD: 7</li>
+        <li data-key="epic-limit-STR" data-modifier="set" data-value='8'>epic limit STR: 8</li>
+        <li data-key="epic-limit-AGL" data-modifier="set" data-value='7'>epic limit AGL: 7</li>
+        <li data-key="epic-limit-PRW" data-modifier="set" data-value='7'>epic limit PRW: 7</li>
+        <li data-key="epic-limit-POI" data-modifier="set" data-value='7'>epic limit POI: 7</li>
+        <li data-key="epic-limit-INT" data-modifier="set" data-value='7'>epic limit INT: 7</li>
+        <li data-key="epic-limit-ARC" data-modifier="set" data-value='8'>epic limit ARC: 8</li>
+        <li data-key="epic-limit-PER" data-modifier="set" data-value='7'>epic limit PER: 7</li-->
+    </ul>
+    
+    
+    
+    <input type="number" />
+    
+    
+    
+    <h2>Archetype</h2>
+    
+    <select id="archetype">
+        <option value="0" selected>&nbsp;</option>
+        <option value="1">Gifted</option>
+    </select>
+    
+    <ul data-id="archetype">
+    </ul>
+    
+    
+    <h2>Career 1</h2>
+    
+    <select id="career1">
+        <option value="0" selected>&nbsp;</option>
+        <option value="1">Aristocrat</option>
+        <option value="2">Gun Mage (Amethyst Rose)</option>
+    </select>
+    
+    <ul data-id="career1">
+    </ul>
+    
+    
+    <h2>Career 2</h2>
+    
+    <select id="career2">
+        <option value="0" selected>&nbsp;</option>
+        <option value="1">Aristocrat</option>
+        <option value="2">Gun Mage (Amethyst Rose)</option>
+    </select>
+    
+    <ul data-id="career2">
+    </ul>
+    
+</div>
+
+<script type="text/javascript">
+    var hero = {
+        "race": "",
+        "stats": [], // ["PHY", "STR", "INT", "PHY", "PHY", "STR"] => { "PHY": 3, "STR": 2, "INT": 1 }
+        "languages": [],
+        "occupational skills": [] // ["Negotiation", "Detection", "Negotiation"] => { "Negotiation": 2, "Detection": 1 }
+    };
+    
+    
+    // helpers
+    
+    function clone(obj) {
+        return $.extend(true, {}, obj);
+    }
+    
+    // obj = { "PHY": 3, "STR": 2, "INT": 1 }, output = ["PHY", "PHY", "PHY", "STR", "STR", "INT"]
+    function as_array(obj) {
+        var acc = [];
+        for(var key in obj) {
+            var val = obj[key];
+            for(var i = 0; i < val; i++) {
+                acc.push(key);
+            }
+        }
+        return acc;
+    }
+    
+    function modify(modifier, key, value) {
+        return function(hero) {
+            return modifier(key, value)(hero);
+        };
+    }
+    
+    
+    // modifiers
+    
+    function set(key, value) {
+        return function(hero) {
+            var hero_clone = clone(hero);
+            hero_clone[key] = value;
+            return hero_clone;
+        };
+    }
+    
+    function add(key, values) {
+        return function(hero) {
+            var hero_clone = clone(hero);
+            hero_clone[key] = hero_clone[key].concat(values);
+            return hero_clone;
+        };
+    }
+    
+    
+    // data
+    
+    var races = {
+        "Human": [
+            'modify("set", "race", "Human")',
+            'modify("add", "stats", as_array({ "PHY": 5, "SPD": 6, "STR": 4, "AGL": 3, "PRW": 4, "POI": 4, "INT": 3, "PER": 3 }))'
+        ]
+    }
+    
+    
+    // program
+    
+    var modifications = [modify(set, "race", "Human"), modify(add, "PHY", 4)];
+    var h = modifications.reduce(function(acc, f) { return f(acc); }, hero);
+    console.log(h);
+    
+    //$("#foo").change(function() { console.log($("#foo").val()); });
+</script>
\ No newline at end of file
diff --git a/ikrpg.appcache b/ikrpg.appcache
index 844331c..d43fec1 100644
--- a/ikrpg.appcache
+++ b/ikrpg.appcache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 2015-03-24.v3
+# 2015-04-05v41
 
 CACHE:
 
@@ -103,7 +103,8 @@ CACHE:
 /static/fonts/typicons.woff
 
 # images
-static/images/bg.jpg
+static/images/bg-FMF.jpg
+static/images/bg-Unleashed.jpg
 static/images/ppforums/colbie.png
 static/images/ppforums/index.png
 static/images/progress/cygnar.png
diff --git a/index.html b/index.html
index 7649fbc..f117cf5 100644
--- a/index.html
+++ b/index.html
@@ -5,19 +5,26 @@ tags: [ IKRPG ]
 ---
 
 <p>
-    Welcome to the Unofficial <a href="http://privateerpress.com/iron-kingdoms">Iron Kingdoms Role
-    Playing Game</a> (IKRPG) Resources. <strong>We aim at providing helpful resources and tools for
-    players and GMs of the IKRPG</strong> and believe that the best possible way to provide them
-    to most devices is a webpage. The rest of the page will introduce you to the tools we offer.
+    Welcome to the Unofficial <a href="http://privateerpress.com/iron-kingdoms">Iron Kingdoms Role Playing Game</a> (IKRPG) Resources.
+    <strong>We aim at providing helpful resources and tools for players and GMs of the IKRPG</strong> and
+    believe that the best possible way to provide them to most devices is a web application.
 </p>
 <p>
-    <strong>Please Note:</strong> The following tools are meant to complement but not replace the
-    official rules and tools provided by <a href="http://privateerpress.com/">Privateer Press</a>.
+    <strong>Please Note:</strong> The following tools are meant to complement but not replace the official rules and tools provided by <a href="http://privateerpress.com/">Privateer Press</a>.
 </p>
 
+<h2 id="application-settings">Application Settings</h2>
+<p>
+    Starting at version 3, we migrated ikrpg.info from a static webpage to a web application.
+    This means we are using coockies to store user settings in your browser.
+    These settings are limited to your chosen webpage background only.
+</p>
+<p>
+    Please choose your favourite webpage background (click to change Background):
+</p>
 <ol>
-    <li><a href="#publication-index">Publication Index</a></li>
-    <li><a href="#character-cards">Fillable Character Cards</a></li>
+    <li><a href="javascript:setBackground('bg-FMF.jpg', -370);">Full Metal Fantasy</a> (click for the classic background)</li>
+    <li><a href="javascript:setBackground('bg-Unleashed.jpg', -250);">Unleashed</a> (click for the new background)</li>
 </ol>
 
 <h2 id="publication-index">Publication Index</h2>
@@ -93,7 +100,7 @@ tags: [ IKRPG ]
             <li><a href="/index/publication/No-Quarter-56/">#56</a></li>
             <li><a href="/index/publication/No-Quarter-57/">#57</a></li>
             <li><a href="/index/publication/No-Quarter-58/">#58</a></li>
-            <li><a href="/index/publication/No-Quarter-59/">#59</a></li>
+            <li><a href="/index/publication/No-Quarter-59z/">#59</a></li>
         </ul>)</li>
         <li><a href="/index/publication/Path-of-Devastation-Season-1/">Path of Devastation Season 1</a></li>
         <li>Unleashed Adventure Kit <a href="/index/publication/Unleashed-Adventure-Kit-Rulebook/">Rulebook</a>/<a href="/index/publication/Unleashed-Adventure-Kit-Scenario/">Scenario</a></li>
diff --git a/static/images/bg.jpg b/static/images/bg-FMF.jpg
similarity index 100%
rename from static/images/bg.jpg
rename to static/images/bg-FMF.jpg
diff --git a/static/images/bg-Unleashed.jpg b/static/images/bg-Unleashed.jpg
new file mode 100755
index 0000000..e728a5b
Binary files /dev/null and b/static/images/bg-Unleashed.jpg differ
diff --git a/static/javascripts/index.js b/static/javascripts/index.js
index 4c05f12..d0f2455 100644
--- a/static/javascripts/index.js
+++ b/static/javascripts/index.js
@@ -3572,7 +3572,7 @@ var ikrpg = ikrpg || {};
       subcategory: "Career"
     },
     {
-      name:        "Seaforge Trader",
+      name:        "Searforge Trader",
       publication: "Urban Adventure",
       page:        "7",
       category:    "Character Creation",
diff --git a/static/stylesheets/content/lists.css b/static/stylesheets/content/lists.css
index 0ff62a4..68bdfa9 100644
--- a/static/stylesheets/content/lists.css
+++ b/static/stylesheets/content/lists.css
@@ -20,6 +20,7 @@ section.content ul.inline {
 section.content ul.inline,
 section.content ul.inline > li {
     display: inline;
+    margin: 0;
     padding: 0; }
 section.content ul.inline > li {
     font-size: 16px; }
diff --git a/static/stylesheets/foot.css b/static/stylesheets/foot.css
index c22b32b..d562a32 100644
--- a/static/stylesheets/foot.css
+++ b/static/stylesheets/foot.css
@@ -1,7 +1,5 @@
 footer#foot {
-    /*padding-bottom: 1.5em;*/
     padding-bottom: 0.5em;
-    /*color: #666;*/
     font-style: italic;
     clear: both; }
 footer#foot a {
@@ -19,16 +17,14 @@ footer#foot > ul > li:last-of-type:after {
 footer#foot > p {
     font-size: 0.8em;
     text-align: justify; }
-footer#foot > p:before,
-footer#foot > ul:after {
-    content: "\A0";
+footer#foot > div.banner {
     display: inline-block;
+    margin-bottom: 1em;
     width: 100%;
     height: 24px;
-    background-image: url(/static/images/bg.jpg);
+    background-image: none;
     background-repeat: no-repeat;
-    background-position: 50% -852px;
-    /*background-position: 50% -1002px;*/ }
+    background-position: 50% -897px; }
 footer#foot > p:before {
     margin-bottom: 24px; }
 footer#foot > ul:after {
diff --git a/static/stylesheets/global.css b/static/stylesheets/global.css
index 603730a..14223e2 100644
--- a/static/stylesheets/global.css
+++ b/static/stylesheets/global.css
@@ -3,7 +3,7 @@ body {
     font-size: 16px;
     font-family: Helvetica, Arial, sans-serif;
     color: #666;
-    background-image: url(/static/images/bg.jpg);
+    background-image: none;
     background-repeat: no-repeat;
     background-position: 50% -370px;
     background-attachment: fixed;
diff --git a/static/stylesheets/head.css b/static/stylesheets/head.css
index 8bbd738..47231ba 100644
--- a/static/stylesheets/head.css
+++ b/static/stylesheets/head.css
@@ -1,6 +1,6 @@
 header#head {
     background-color: #1A1A1A;
-    background-image: url(/static/images/bg.jpg);
+    background-image: none;
     background-repeat: no-repeat;
     background-position: 50% -436px; }
 header#head a {
