New: Ability, Adventuring Company, Alchemy, Archetype, Career, Character Creation, Equipment, Markup, Mechanika, Monsternomicon, Organization, Race, Skill, Spell, Steamjack, Thrall

static/javascripts/expandable.js

@@ -0,0 +1,58 @@
+(function() {
+  function addListener(elem, event, f) {
+    if (elem.addEventListener) elem.addEventListener(event, f, false);
+    else elem.attachEvent("on"+event, f);
+  }
+  
+  function expand() {
+    var jsOnloads = document.querySelectorAll("a.js-expandable");
+    
+    for(var index = 0; index < jsOnloads.length; index++) {
+      var jsOnload = jsOnloads.item(index)
+        , body = document.querySelector("body")
+        , availableWidth = parseFloat(window.getComputedStyle(body)["width"], 10)
+        , article = body.querySelector("article")
+        , style = window.getComputedStyle(article)
+        , iniWidth = parseFloat(style["width"], 10)
+        , paddingLeft = parseFloat(style["paddingLeft"], 10)
+        , maxWidth = availableWidth - 2 * paddingLeft;
+      
+      function resize(event) {
+        event.preventDefault();
+        var width = parseFloat(style["width"], 10)
+          , newWidth = (width >= maxWidth-30) ? iniWidth : maxWidth
+          , text = (width >= maxWidth-30) ? "&#xE012;" : "&#xE014;";
+        
+        article.style["width"] = newWidth.toString()+"px";
+        jsOnload.innerHTML = text;
+      }
+      
+      function over(event) {
+        event.preventDefault();
+        var width = parseFloat(style["width"], 10);
+        
+        if (width == iniWidth)
+          article.style["width"] = (iniWidth+30).toString()+"px";
+        else if (width == maxWidth)
+          article.style["width"] = (maxWidth-30).toString()+"px";
+      }
+      
+      function out(event) {
+        event.preventDefault();
+        var width = parseFloat(style["width"], 10);
+        
+        if (width == iniWidth+30)
+          article.style["width"] = iniWidth.toString()+"px";
+        else if (width == maxWidth-30)
+          article.style["width"] = maxWidth.toString()+"px";
+      }
+      
+      addListener(jsOnload, "mouseover", over);
+      addListener(jsOnload, "mouseout", out);
+      addListener(jsOnload, "click", resize);
+    }
+  }
+  
+  if (window.addEventListener) window.addEventListener("DOMContentLoaded", expand, false);
+  else window.attachEvent("onload", expand);
+}());

static/javascripts/opaquable.js

@@ -0,0 +1,70 @@
+(function() {
+  function addListener(elem, event, f) {
+    if (elem.addEventListener) elem.addEventListener(event, f, false);
+    else elem.attachEvent("on"+event, f);
+  }
+  
+  function opaque() {
+    var jsOnloads = document.querySelectorAll("a.js-opaquable");
+    
+    for(var index = 0; index < jsOnloads.length; index++) {
+      var jsOnload = jsOnloads.item(index)
+        , body = document.querySelector("body")
+        , article = body.querySelector("article")
+        , content = article.querySelector("section.content")
+        , style = window.getComputedStyle(article)
+        , iniColor = style["color"]
+        , minColor = "#2C2C2C"
+        , iniBackgroundColor = style["backgroundColor"]
+        , minBackgroundColor = "rgba(252, 253, 246, 0.50)";
+      
+      function recolor(event) {
+        event.preventDefault();
+        var backgroundColor = style["backgroundColor"]
+          , alpha = parseFloat(backgroundColor.replace(/^.*,(.+)\)/,'$1'), 10)
+          , newBackgroundColor = (alpha > 0.7) ? minBackgroundColor : iniBackgroundColor
+          , newColor = (alpha > 0.7) ? minColor : iniColor
+          , text = (alpha > 0.7) ? "&#xE05C;" : "&#xE05D;";
+        
+        article.style["backgroundColor"] = newBackgroundColor;
+        body.style["color"] = newColor;
+        jsOnload.innerHTML = text;
+      }
+      
+      function over(event) {
+        event.preventDefault();
+        var backgroundColor = style["backgroundColor"];
+        var minus = "rgba(252, 253, 246, 0.75)";
+        var plus = "rgba(252, 253, 246, 0.60)";
+        
+        var alpha = parseFloat(backgroundColor.replace(/^.*,(.+)\)/,'$1'), 10);
+        
+        if (alpha > 0.8)
+          article.style["backgroundColor"] = minus;
+        else if (alpha < 0.7)
+          article.style["backgroundColor"] = plus;
+      }
+      
+      function out(event) {
+        event.preventDefault();
+        var backgroundColor = style["backgroundColor"];
+        var minus = "rgba(252, 253, 246, 0.75)";
+        var plus = "rgba(252, 253, 246, 0.60)";
+        
+        var alpha = parseFloat(backgroundColor.replace(/^.*,(.+)\)/,'$1'), 10);
+        
+        if (alpha > 0.7)
+          article.style["backgroundColor"] = iniBackgroundColor;
+        else if (alpha > 0.55)
+          article.style["backgroundColor"] = minBackgroundColor;
+      }
+      
+      addListener(jsOnload, "mouseover", over);
+      addListener(jsOnload, "mouseout", out);
+      addListener(jsOnload, "click", recolor);
+    }
+  }
+  
+  if (window.addEventListener) window.addEventListener("DOMContentLoaded", opaque, false);
+  else window.attachEvent("onload", expand);
+}());

static/javascripts/resizable.js

@@ -0,0 +1,59 @@
+(function() {
+  function addListener(elem, event, f) {
+    if (elem.addEventListener) elem.addEventListener(event, f, false);
+    else elem.attachEvent("on"+event, f);
+  }
+  
+  function resizing() {
+    var jsOnloads = document.querySelectorAll("a.js-resizable");
+    
+    for(var index = 0; index < jsOnloads.length; index++) {
+      var jsOnload = jsOnloads.item(index)
+        , article = document.querySelector("body > article")
+        , style = window.getComputedStyle(article)
+        , fontSize0 = parseFloat(style["fontSize"], 10)
+        , fontSize1 = fontSize0 * 1.1
+        , fontSize15 = fontSize0 * 1.15
+        , fontSize2 = fontSize0 * 1.2
+        , fontSize25 = fontSize0 * 1.25
+        , fontSize3 = fontSize0 * 1.3;
+      
+      function resize(event) {
+        event.preventDefault();
+        var fontSize = parseFloat(style["fontSize"], 10)
+          , newFontSize = (fontSize < fontSize15) ? fontSize3 : fontSize0
+          , text = (fontSize < fontSize15) ? "&#xE0EB;" : "&#xE0EA;";
+        
+        article.style["fontSize"] = newFontSize+"px";
+        jsOnload.innerHTML = text;
+      }
+      
+      function over(event) {
+        event.preventDefault();
+        var fontSize = parseFloat(style["fontSize"], 10);
+        
+        if (fontSize < fontSize15)
+          article.style["fontSize"] = fontSize1+"px";
+        else if (fontSize > fontSize25)
+          article.style["fontSize"] = fontSize2+"px";
+      }
+      
+      function out(event) {
+        event.preventDefault();
+        var fontSize = parseFloat(style["fontSize"], 10);
+        
+        if (fontSize < fontSize25)
+          article.style["fontSize"] = fontSize0+"px";
+        else if (fontSize > fontSize15)
+          article.style["fontSize"] = fontSize3+"px";
+      }
+      
+      addListener(jsOnload, "mouseover", over);
+      addListener(jsOnload, "mouseout", out);
+      addListener(jsOnload, "click", resize);
+    }
+  }
+  
+  if (window.addEventListener) window.addEventListener("DOMContentLoaded", resizing, false);
+  else window.attachEvent("onload", expand);
+}());

static/stylesheets/content.css

@@ -0,0 +1,31 @@
+section.content {
+    font-size: 1em;
+    padding-bottom: 1.5em;
+    line-height: 1.6em;
+    font-weight: 300; }
+section.content > p {
+    margin: 1.5em 0;
+    text-align: justify; }
+section.content > h2 {
+    font-size: 1.5em;
+    margin-bottom: -0.5em;
+    font-family: 'Cabin', sans-serif;
+    text-transform: uppercase;
+    color: #2C2C2C;
+    font-weight: bold; }
+section.content > h3 {
+    font-size: 1.2em;
+    margin: 1em 0 -0.5em 0;
+    font-family: 'Cabin', sans-serif;
+    color: #2C2C2C;
+    font-weight: bold; }
+section.content a {
+    color: #3B8DBD; }
+section.content strong {
+    color: #D24D33; }
+section.content em {
+    color: #82B964; }
+section.content > h2 + table,
+section.content > h2 + table.left + table.right,
+section.content > h2 + table.right + table.left {
+    margin-top: 2em; }

static/stylesheets/content/lists.css

@@ -0,0 +1,16 @@
+section.content > ol,
+section.content > ul {
+    margin: 1.8em 0; }
+section.content ol,
+section.content ul {
+    padding-left: 2em; }
+section.content > ol {
+    list-style-type: decimal; }
+section.content > ol ol,
+section.content > ul ol {
+    list-style-type: lower-roman; }
+section.content > ul {
+    list-style-type: disc; }
+section.content > ol ul,
+section.content > ul ul {
+    list-style-type: square; }

static/stylesheets/content/tables.css

@@ -0,0 +1,200 @@
+section.content > table.full {
+    width: 100%; }
+section.content > table.right {
+    float: right;
+    margin-left: 1em;
+    margin-right: 0; }
+section.content > table.left {
+    float: left;
+    margin-left: 0;
+    margin-right: 1em; }
+section.content > table {
+    margin: 0.5em auto 1em auto;
+    text-align: center;
+    outline-style: solid;
+    outline-width: 0.15em; }
+section.content > table th,
+section.content > table td {
+    padding: 0.7em 0.5em 0.5em 0.5em;
+    line-height: 1em;
+    vertical-align: middle; }
+section.content > table tr > td:not(:first-of-type) {
+    border-left-style: solid;
+    border-left-width: 0.15em; }
+section.content > table:not(.col-menu) td,
+section.content > table.col-menu td:not(:first-of-type) {
+    border-top-style: solid;
+    border-top-width: 0.15em; }
+section.content > table th:not(:first-of-type) {
+    border-left-style: solid;
+    border-left-width: 0.15em; }
+section.content > table th,
+section.content > table.col-menu td:first-of-type {
+    text-transform: uppercase; }
+section.content > table th,
+section.content > table.col-menu td:first-of-type {
+    font-size: 0.9em; }
+section.content > table > thead > tr:not(:first-of-type),
+section.content > table.col-menu td:first-of-type {
+    border-top-style: solid;
+    border-top-width: 0.15em; }
+
+section.content > table.race {
+    outline: none; }
+section.content > table.race > thead > tr:first-of-type > th {
+    padding-top: 0;
+    font-size: 1.3em;
+    font-weight: bold; }
+section.content > table.race tr:nth-of-type(3n+1) > td:first-of-type {
+    font-weight: bold; }
+section.content > table.race th:not(:first-of-type),
+section.content > table.race td {
+    width: 3em;
+    border-style: solid; 
+    border-width: 0.15em; }
+section.content > table.race th:nth-of-type(7),
+section.content > table.race td:nth-of-type(7),
+section.content > table.race th:nth-of-type(3),
+section.content > table.race td:nth-of-type(3) {
+    width: 0.5em;
+    padding: 0;
+    border: 0; }
+
+
+
+/* CAREER */
+
+section.content > table.career {
+    outline: 0; }
+section.content > table.career tr:not(:nth-of-type(3)):not(:nth-of-type(8)) {
+    border-style: solid;
+    border-width: 0.15em; }
+section.content > table.career tr:nth-of-type(3) > td,
+section.content > table.career tr:nth-of-type(8) > td {
+    font-size: 0.5em;
+    padding: 0; }
+section.content > table.career tr > td:nth-of-type(2) {
+    text-align: left; }
+section.content > table.career tr:nth-of-type(n):not(:nth-of-type(3)):not(:nth-of-type(8)) > td:not(:first-of-type) {
+    border-style: solid;
+    border-width: 0.15em; }
+section.content > table.career tr:nth-of-type(n):not(:nth-of-type(3)):not(:nth-of-type(8)) > td:first-of-type {
+    font-size: 0.9em;
+    text-transform: uppercase; }
+section.content > table.career tr:nth-of-type(n+5) > td:first-of-type,
+section.content > table.career tr:nth-of-type(2) > td:first-of-type {
+    border-top-style: solid;
+    border-top-width: 0.15em; }
+section.content > table.career tr:nth-of-type(9) > td:nth-of-type(n) {
+    border-top-style: solid;
+    border-top-width: 0.15em; }
+
+
+/* COLORS */
+
+section.content > table {
+    color: #1A1A1A;
+    outline-color: #1A1A1A; }
+section.content > table:not(.col-menu) td,
+section.content > table.col-menu td:not(:first-of-type) {
+    border-color: #1A1A1A; }
+section.content > table.col-menu th:not(:first-of-type) {
+    border-color: #FCFDF6; }
+section.content > table th,
+section.content > table.col-menu td:first-of-type {
+    color: #FCFDF6;
+    background-color: #1A1A1A; }
+section.content > table > thead > tr:not(:first-of-type),
+section.content > table.col-menu > thead + tbody td:first-of-type {
+    border-top-color: #FCFDF6; }
+
+.hero-dark {
+    background-color: #CEE4BD !important; }
+section.content > table.hero > tbody > tr:nth-of-type(2n+1) {
+    background-color: #CEE4BD; }
+.hero-light {
+    background-color: #F0F7EB !important; }
+section.content > table.hero > tbody > tr:nth-of-type(2n) {
+    background-color: #F0F7EB; }
+
+.veteran-dark {
+    background-color: #DEBDAD !important; }
+section.content > table.veteran > tbody > tr:nth-of-type(2n+1) {
+    background-color: #DEBDAD; }
+.veteran-light {
+    background-color: #F5EBE6 !important; }
+section.content > table.veteran > tbody > tr:nth-of-type(2n) {
+    background-color: #F5EBE6; }
+
+.epic-dark {
+    background-color: #D4E2FF !important; }
+section.content > table.epic > tbody > tr:nth-of-type(2n+1) {
+    background-color: #D4E2FF; }
+.epic-light {
+    background-color: #F2F6FF !important; }
+section.content > table.epic > tbody > tr:nth-of-type(2n) {
+    background-color: #F2F6FF; }
+
+section.content > table.levels > tbody > tr:nth-of-type(4n+2) {
+    background-color: #CEE4BD; }
+section.content > table.levels > tbody > tr:nth-of-type(4n+3) {
+    background-color: #DEBDAD; }
+section.content > table.levels > tbody > tr:nth-of-type(4n) {
+    background-color: #D4E2FF; }
+
+section.content > table.race > thead > tr:first-of-type > th {
+    color: #1A1A1A; }
+section.content > table.race th:first-of-type {
+    background-color: transparent;
+    border-color: #1A1A1A; }
+section.content > table.race td:first-of-type {
+    color: #FCFDF6;
+    background-color: #1A1A1A; }
+section.content > table.race tr:nth-of-type(3n+1) > td:nth-of-type(2) {
+    background-color: #CEE4BD; }
+section.content > table.race tr:nth-of-type(3n+2) > td:nth-of-type(2),
+section.content > table.race tr:nth-of-type(3n) > td:nth-of-type(2) {
+    background-color: #F0F7EB; }
+section.content > table.race tr:nth-of-type(3n+1) > td:nth-of-type(n+4):nth-of-type(-n+6) {
+    background-color: #DEBDAD; }
+section.content > table.race tr:nth-of-type(3n+2) > td:nth-of-type(n+4):nth-of-type(-n+6),
+section.content > table.race tr:nth-of-type(3n) > td:nth-of-type(n+4):nth-of-type(-n+6) {
+    background-color: #F5EBE6; }
+section.content > table.race tr:nth-of-type(3n+1) > td:nth-of-type(8) {
+    background-color: #D4E2FF; }
+section.content > table.race tr:nth-of-type(3n+2) > td:nth-of-type(8),
+section.content > table.race tr:nth-of-type(3n) > td:nth-of-type(8) {
+    background-color: #F2F6FF; }
+section.content > table.race th:not(:first-of-type),
+section.content > table.race td {
+    border-color: #1A1A1A; }
+section.content > table.race th:nth-of-type(7),
+section.content > table.race td:nth-of-type(7),
+section.content > table.race th:nth-of-type(3),
+section.content > table.race td:nth-of-type(3) {
+    background-color: transparent; }
+
+section.content > table.career tr:not(:nth-of-type(3)):not(:nth-of-type(8)) {
+    border-color: #1A1A1A; }
+section.content > table.career tr:nth-of-type(n):not(:nth-of-type(3)):not(:nth-of-type(8)) > td:not(:first-of-type) {
+    border-color: #1A1A1A; }
+section.content > table.career tr:nth-of-type(n):not(:nth-of-type(3)):not(:nth-of-type(8)) > td:first-of-type {
+    color: #FCFDF6;
+    background-color: #1A1A1A; }
+section.content > table.career tr:nth-of-type(n+5) > td:first-of-type,
+section.content > table.career tr:nth-of-type(2) > td:first-of-type {
+    border-top-color: #FCFDF6; }
+section.content > table.career tr:nth-of-type(1) > td:nth-of-type(2) {
+    background-color: #CEE4BD; }
+section.content > table.career tr:nth-of-type(2) > td:nth-of-type(2) {
+    background-color: #F0F7EB; }
+section.content > table.career tr:nth-of-type(2n+4):nth-of-type(-2n+8) > td:nth-of-type(2) {
+    background-color: #DEBDAD; }
+section.content > table.career tr:nth-of-type(2n+5):nth-of-type(-2n+7) > td:nth-of-type(2) {
+    background-color: #F5EBE6; }
+section.content > table.career tr:nth-of-type(2n+9) > td:nth-of-type(2) {
+    background-color: #D4E2FF; }
+section.content > table.career tr:nth-of-type(2n+10) > td:nth-of-type(2) {
+    background-color: #F2F6FF; }
+section.content > table.career tr:nth-of-type(9) > td:nth-of-type(n) {
+    border-top-color: #1A1A1A; }

static/stylesheets/fonts.css

@@ -0,0 +1,10 @@
+@import url(http://fonts.googleapis.com/css?family=Cabin:700);
+@font-face {
+  font-family: "typicons";
+  src: url("/static/fonts/typicons.eot");
+  src: url("/static/fonts/typicons.eot?#iefix") format('embedded-opentype'),
+       url("/static/fonts/typicons.woff") format('woff'),
+       url("/static/fonts/typicons.ttf") format('truetype'),
+       url("/static/fonts/typicons.svg#typicons") format('svg');
+  font-weight: normal;
+  font-style: normal; }

static/stylesheets/foot.css

@@ -0,0 +1,26 @@
+footer#foot {
+    padding-bottom: 1.5em;
+    /*color: #666;*/
+    font-style: italic;
+    clear: both; }
+footer#foot a {
+    color: #3B8DBD; }
+footer#foot > ul,
+footer#foot > ul > li {
+    display: inline; }
+footer#foot > ul > li:after {
+    display: inline-block;
+    margin-left: -3px; }
+footer#foot > ul > li:not(:last-of-type):after {
+    content: ","; }
+footer#foot > ul > li:last-of-type:after {
+    content: "."; }
+footer#foot > ul:after {
+    content: "\A0";
+    margin-top: 24px;
+    display: inline-block;
+    width: 100%;
+    height: 24px;
+    background-image: url(/static/images/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% -1002px; }

static/stylesheets/global.css

@@ -0,0 +1,19 @@
+body {
+    max-width: 2000px;
+    font-size: 16px;
+    font-family: Helvetica, Arial, sans-serif;
+    color: #666;
+    background-image: url(/static/images/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 100%;
+    background-attachment: fixed;
+    background-color: #1A1A1A;
+    transition: color 1s; -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; }
+article {
+    margin: 0 auto;
+    padding: 18px 40px 25px 40px;
+    width: 980px;
+    background-color: rgba(252, 253, 246, 0.85);
+    transition: width 1s, background-color 1s; -webkit-transition: width 1s, background-color 1s; -moz-transition: width 1s, background-color 1s; -ms-transition: width 1s, background-color 1s; }
+a {
+    text-decoration: none; }

static/stylesheets/head.css

@@ -0,0 +1,34 @@
+header#head {
+    background-color: #1A1A1A;
+    background-image: url(/static/images/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%; }
+header#head a {
+    color: #FCFDF6;
+    border-bottom: 1px solid #DDDDDB; }
+header#head a:hover {
+    border-bottom-color: #FCFDF6; }
+header#head h1 {
+    font-size: 3em;
+    padding: 54px 24px 19px 24px;
+    font-family: 'Cabin', sans-serif;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.85);
+    /*color: #FCFDF6;*/
+    font-weight: bold; }
+header#head nav {
+    padding: 0 0 30px 24px;
+    font-weight: bold; }
+header#head nav li {
+    display: inline-block; }
+header#head nav li:not(:first-of-type):before {
+    content: "●";
+    display: inline-block;
+    margin: 0 10px 0 6px;
+    color: #DDDDDB; }
+header#head nav li:nth-of-type(1) > a {
+    color: #3B8DBD; }
+header#head nav li:nth-of-type(2) > a {
+    color: #82B964; }
+header#head nav li:nth-of-type(3) > a {
+    color: #D24D33; }

static/stylesheets/index.css

@@ -0,0 +1,9 @@
+@import url("/static/stylesheets/reset.css") all;
+@import url("/static/stylesheets/fonts.css") all;
+@import url("/static/stylesheets/global.css") all;
+@import url("/static/stylesheets/menu.css") all;
+@import url("/static/stylesheets/head.css") all;
+@import url("/static/stylesheets/content.css") all;
+@import url("/static/stylesheets/content/tables.css") all;
+@import url("/static/stylesheets/content/lists.css") all;
+@import url("/static/stylesheets/foot.css") all;

static/stylesheets/menu.css

@@ -0,0 +1,22 @@
+nav#menu a.blue {
+    color: #3B8DBD; }
+nav#menu a.green {
+    color: #82B964; }
+nav#menu a.red {
+    color: #D24D33; }
+nav#menu > ol {
+    padding-bottom: 20px; }
+nav#menu > ol > li {
+    display: inline-block; }
+nav#menu > ol > li:not(:last-of-type) {
+    margin-left: 1em;
+    float: right; }
+nav#menu > ol > li > a {
+    color: #3B8DBD; }
+nav#menu > ol > li:last-of-type {
+    margin-top: 5px; }
+nav#menu > ol > li:last-of-type > a {
+    font-weight: bold; }
+nav#menu > ol > li:not(:last-of-type) > a {
+    font-size: 28px;
+    font-family: "typicons"; }

static/stylesheets/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}