diff --git a/bower.json b/bower.json
index 0cef822..5e3f5e3 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "civil.css",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "homepage": "https://github.com/CivilApp/civil.css",
   "authors": [
     "Ian Lai <os@fyianlai.com>"
diff --git a/dist/civil.css b/dist/civil.css
index 4ef01cc..a7a618c 100644
--- a/dist/civil.css
+++ b/dist/civil.css
@@ -1,2 +1,2 @@
-/*! civil.css | MIT License | github.com/CivilApp/civil.css */html{box-sizing:border-box;font-size:20px}*,:after,:before{box-sizing:inherit}body{color:#454553;font-family:Lora,Georgia,Cambria,Times New Roman,Times,serif;line-height:1.5}.wrapper{margin:0 auto;max-width:100%;width:37.5rem}h1,h2,h3,h4,h5,h6{color:#4b4b58;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-weight:400;margin:0 0 1.5rem}h1{font-size:2.61792rem;font-weight:300;line-height:1.14595}h2{font-size:2.09007rem;line-height:1.43536}h3{font-size:1.618rem;line-height:1.85414}h4{font-size:1.29176rem;line-height:1.16121}h5,time{font-size:1rem;line-height:1.5}h6,small{font-size:.61805rem;line-height:2.427;text-transform:uppercase}h4,h5,h6,small{font-weight:700}h1,h2,h3{color:#4e4e5c;text-rendering:optimizeLegibility}small,time{font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #ccc}mark{background:rgba(255,255,0,.4);padding:.23608rem .38198rem}dl,ol,p,ul{margin:0 0 1.5rem;text-rendering:optimizeLegibility}code,pre{font-family:Bitstream Vera Sans Mono,Consolas,Courier,monospace;font-size:.8rem}pre{border:1px solid #ccc;margin:0 0 1.5rem;padding:.75rem 1.5rem}pre code{background:none;padding:0}code{background:#eee;padding:.23608rem .38198rem}figure{margin:0}blockquote{font-style:italic;margin:0 0 1.5rem;padding:.75rem 1.5rem;position:relative}blockquote:after{content:"";border-bottom:1px solid #4b4b58;position:absolute;bottom:0;left:50%;width:6.85353rem;-webkit-transform:translateX(-50%);transform:translateX(-50%)}blockquote footer{color:#6a6a75;font-size:.8rem;font-style:normal;line-height:1.875}blockquote footer:before{content:"\2014 \00A0"}dl ol,dl ul,ol ol,ol ul,ul ol,ul ul{margin:0}dt{font-weight:700}dd{margin:0 0 1.5rem}hr{background:#eee;border:0;height:.23608rem;margin:2.13196rem auto;width:50%}a{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent;background-image:-webkit-linear-gradient(bottom,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);background-image:linear-gradient(0deg,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);text-decoration:none;color:#eb586f}a:focus,a:hover{background:none;color:#c84b5e}.btn{font-size:1rem;line-height:1.5;padding:.75rem 1.5rem;background:none;border:none;cursor:pointer;display:inline-block;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;vertical-align:middle;white-space:nowrap}.btn:focus,.btn:hover{outline:none;text-decoration:none}.btn-primary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#eb586f;color:#fefefe}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#ed697d;color:#fefefe;outline:3px solid #f5acb7}.btn-secondary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#4aa0d5;color:#fefefe}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background:#5caad9;color:#fefefe;outline:3px solid #a5d0ea}.btn-primary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#eb586f;outline:1px solid #eb586f}.btn-primary-ghost:active,.btn-primary-ghost:focus,.btn-primary-ghost:hover{color:#ed697d;outline:3px solid #f5acb7}.btn-secondary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#4aa0d5;outline:1px solid #4aa0d5}.btn-secondary-ghost:active,.btn-secondary-ghost:focus,.btn-secondary-ghost:hover{color:#5caad9;outline:3px solid #a5d0ea}img{display:block;height:auto;margin-bottom:1.5rem;max-width:100%}.img-responsive{min-width:100%}table{width:100%;max-width:100%;margin:0 0 1.5rem}th{text-align:left}td,th{border-top:1px solid #ccc;padding:.75rem}thead th{border-bottom:2px solid #ccc}tbody tr:nth-of-type(odd){background:#eee}.block{position:relative}.block:after,.block:before{content:" ";display:table}.block:after{clear:both}ol em,ol small,ol strong,ol time,p em,p small,p strong,p time,ul em,ul small,ul strong,ul time{line-height:100%}h1,h2,h3{line-height:3rem}h4,h5,h6,small,time{line-height:1.5rem}
+/*! civil.css | MIT License | github.com/CivilApp/civil.css */html{box-sizing:border-box;font-size:20px}*,:after,:before{box-sizing:inherit}body{color:#454553;font-family:Lora,Georgia,Cambria,Times New Roman,Times,serif;line-height:1.5}.wrapper{margin:0 auto;max-width:100%;width:37.5rem}h1,h2,h3,h4,h5,h6{color:#4b4b58;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-weight:400;margin:0 0 1.5rem}h1{font-size:2.61792rem;font-weight:300;line-height:1.14595}h2{font-size:2.09007rem;line-height:1.43536}h3{font-size:1.618rem;line-height:1.85414}h4{font-size:1.29176rem;line-height:1.16121}h5,time{font-size:1rem;line-height:1.5}h6,small{font-size:.61805rem;line-height:2.427;text-transform:uppercase}h4,h5,h6,small{font-weight:700}h1,h2,h3{color:#4e4e5c;text-rendering:optimizeLegibility}small,time{font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #ccc}mark{background:rgba(255,255,0,.4);padding:.23608rem .38198rem}dl,ol,p,ul{margin:0 0 1.5rem;text-rendering:optimizeLegibility}blockquote{font-style:italic;margin:0 0 1.5rem;padding:.75rem 1.5rem;position:relative}blockquote:after{content:"";border-bottom:1px solid #4b4b58;position:absolute;bottom:0;left:50%;width:6.85353rem;-webkit-transform:translateX(-50%);transform:translateX(-50%)}blockquote footer{color:#6a6a75;font-size:.8rem;font-style:normal;line-height:1.875}blockquote footer:before{content:"\2014 \00A0"}dl ol,dl ul,ol ol,ol ul,ul ol,ul ul{margin:0}dt{font-weight:700}dd{margin:0 0 1.5rem}hr{background:#eee;border:0;height:.23608rem;margin:2.13196rem auto;width:50%}a{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent;background-image:-webkit-linear-gradient(bottom,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);background-image:linear-gradient(0deg,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);text-decoration:none;color:#eb586f}a:focus,a:hover{background:none;color:#c84b5e}.btn{font-size:1rem;line-height:1.5;padding:.75rem 1.5rem;background:none;border:none;cursor:pointer;display:inline-block;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;vertical-align:middle;white-space:nowrap}.btn:focus,.btn:hover{outline:none;text-decoration:none}.btn-primary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#eb586f;color:#fefefe}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#ed697d;color:#fefefe;outline:3px solid #f5acb7}.btn-secondary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#4aa0d5;color:#fefefe}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background:#5caad9;color:#fefefe;outline:3px solid #a5d0ea}.btn-primary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#eb586f;outline:1px solid #eb586f}.btn-primary-ghost:active,.btn-primary-ghost:focus,.btn-primary-ghost:hover{color:#ed697d;outline:3px solid #f5acb7}.btn-secondary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#4aa0d5;outline:1px solid #4aa0d5}.btn-secondary-ghost:active,.btn-secondary-ghost:focus,.btn-secondary-ghost:hover{color:#5caad9;outline:3px solid #a5d0ea}code,pre{font-family:Bitstream Vera Sans Mono,Consolas,Courier,monospace;font-size:.8rem}pre{border:1px solid #ccc;margin:0 0 1.5rem;padding:.75rem 1.5rem}pre table{max-width:100%;width:100%}pre table td:not(:first-child){padding-left:1.5rem}pre pre{border:0;margin:0;padding:0}pre code{background:none;padding:0}code{background:#eee;padding:.23608rem .38198rem}figure{margin:0}img{display:block;height:auto;margin-bottom:1.5rem;max-width:100%}.img-responsive{min-width:100%}.tbl{margin:0 0 1.5rem;max-width:100%;width:100%}.tbl th{text-align:left}.tbl thead th{border-bottom:2px solid #ccc}.tbl td,.tbl th{border-top:1px solid #ccc;padding:.75rem}.tbl-striped tbody tr:nth-of-type(odd){background:#eee}.block{position:relative}.block:after,.block:before{content:" ";display:table}.block:after{clear:both}ol em,ol small,ol strong,ol time,p em,p small,p strong,p time,ul em,ul small,ul strong,ul time{line-height:100%}h1,h2,h3{line-height:3rem}h4,h5,h6,small,time{line-height:1.5rem}
 /*# sourceMappingURL=civil.css.map */
diff --git a/dist/civil.css.map b/dist/civil.css.map
index cb31445..d2134d0 100644
--- a/dist/civil.css.map
+++ b/dist/civil.css.map
@@ -1 +1 @@
-{"version":3,"sources":["civil.scss","modules/_base.scss","modules/_variables.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_font-stacks.scss","modules/_typography.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_tint.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_modular-scale.scss","modules/_functions.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_px-to-rem.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_prefixer.scss","../bower_components/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","modules/_mixins.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_shade.scss","modules/_buttons.scss","modules/_images.scss","modules/_tables.scss","modules/_utilities.scss","modules/_fixes.scss"],"names":[],"mappings":"AAAA,8DAA8D,ACE9D,KACI,sBAAuB,AACvB,cCHiB,CDIpB,AAED,iBAGI,kBAAoB,CACvB,AAED,KACI,cCmBiB,ADlBjB,6DET6D,AFU7D,eAAiB,CACpB,AAGD,SACI,cAAe,AACf,eAAgB,AAChB,aCvBwB,CDwB3B,AGED,kBACI,cCLS,ADMT,oEDhBoE,ACiBpE,gBAAiB,AACjB,iBFvBoC,CEwBvC,AAED,GACI,qBEUa,AFTb,gBAAiB,AACjB,mBG5Bc,CH6BjB,AAED,GACI,qBEEa,AFDb,mBGjCc,CHkCjB,AAED,GACI,mBEDa,AFEb,mBGtCc,CHuCjB,AAED,GACI,qBElBS,AFmBT,mBG3Cc,CH4CjB,AAED,QACI,eFpDiB,AEqDjB,eGhDc,CHiDjB,AAED,SACI,oBECa,AFAb,kBGrDc,AHsDd,wBAA0B,CAC7B,AAID,eACI,eAAiB,CACpB,AAID,SACI,cCpDS,ADqDT,iCAAmC,CACtC,AAYD,WAEI,mED9EoE,CC+EvE,AAGD,sCACI,YAAa,AACb,6BFxDoB,CEyDvB,AAED,KACI,8BAAgB,AAChB,2BExCa,CFyChB,AAOD,WAEI,kBFxGoC,AEyGpC,iCAAmC,CACtC,AAID,SACI,gED9FoE,AC+FpE,eI1Ga,CJ2GhB,AAED,IACI,sBFnFoB,AEoFpB,kBFrHoC,AEsHpC,qBFtHoC,CE6HvC,AAVD,SAOQ,gBAAiB,AACjB,SAAW,CACd,AAGL,KACI,gBF5FsB,AE6FtB,2BE3Ea,CF4EhB,AAGD,OACI,QAAU,CACb,AAGD,WACI,kBAAmB,AACnB,kBF5IoC,AE6IpC,sBF7IoC,AE8IpC,iBAAmB,CA2BtB,AA/BD,iBAQQ,WAAY,AACZ,gCCpIK,ADqIL,kBAAmB,AACnB,SAAU,AACV,SAAU,AACV,iBElHS,AFmHT,mCAA6B,AAE7B,0BAAqB,CACxB,AAjBL,kBAqBQ,cChJK,ADiJL,gBI1JS,AJ2JT,kBAAmB,AACnB,iBGjKU,CHuKb,AA9BL,yBA4BY,qBAAuB,CAC1B,AAOT,oCAIQ,QAAU,CACb,AAGL,GACI,eAAiB,CACpB,AAED,GACI,iBF3LoC,CE4LvC,AAID,GAII,gBFhKsB,AEiKtB,SAAU,AACV,iBEhJa,AFiJb,uBAA8B,AAC9B,SAAW,CACd,AAKD,EKlLQ,mDLmLqC,AKnKrC,2CLmKqC,AMpL3C,6BChC8C,ADiC9C,iHAAyC,AACzC,uGAAyB,AChCvB,qBAAsB,APqNtB,aFtLoB,CE2LvB,AATD,gBO9MQ,gBAAiB,APqNjB,aQtMK,CDdR,AENL,KFYI,eTXiB,ASYjB,gBTXkB,ASYlB,sBTToC,AWFpC,gBAAiB,AACjB,YAAa,AACb,eAAgB,AAChB,qBAAsB,AACtB,oEVGoE,AUFpE,sBAAuB,AACvB,kBAAoB,CAMvB,AAfD,sBAYQ,aAAc,AACd,oBAAsB,CACzB,AAKL,aJcQ,mDEfqC,AF+BrC,2CE/BqC,AAEzC,mBTaoB,ASZpB,aTWyB,CWX5B,AAFD,0DFKQ,mBNJK,AMKL,cTOqB,ASNrB,yBNNK,CMOR,AEHL,eJSQ,mDEfqC,AF+BrC,2CE/BqC,AAEzC,mBTcsB,ASbtB,aTWyB,CWN5B,AAFD,gEFAQ,mBNJK,AMKL,cTOqB,ASNrB,yBNNK,CMOR,AEGL,mBJGQ,mDEFqC,AFkBrC,2CElBqC,AAEzC,cTAoB,ASEpB,yBTFoB,CWDvB,AAFD,4EFQQ,cNlBK,AMmBL,yBNnBK,CMoBR,AENL,qBJDQ,mDEFqC,AFkBrC,2CElBqC,AAEzC,cTCsB,ASCtB,yBTDsB,CWEzB,AAFD,kFFIQ,cNlBK,AMmBL,yBNnBK,CMoBR,AGtCL,IACI,cAAe,AACf,YAAa,AACb,qBZAoC,AYCpC,cAAgB,CACnB,AAED,gBACI,cAAgB,CACnB,ACVD,MACI,WAAY,AACZ,eAAgB,AAChB,iBbCoC,CaAvC,AAED,GACI,eAAiB,CACpB,AAGD,MACI,0BbyBoB,AaxBpB,cbR8B,CaSjC,AAED,SACI,4BboBoB,CanBvB,AAED,0BACI,ebmBsB,CalBzB,ACvBD,OACI,iBAAmB,CACtB,AAED,2BACI,YAAa,AACb,aAAe,CAClB,AAED,aACI,UAAY,CACf,ACXD,+FAGQ,gBAAkB,CACrB,AAKL,SACI,gBfD4B,CeE/B,AAED,oBACI,kBfToC,CeUvC","file":"civil.css","sourcesContent":["/*! civil.css | MIT License | github.com/CivilApp/civil.css */\n@import \"bourbon\";\n@import \"modules/variables\";\n@import \"modules/functions\";\n@import \"modules/mixins\";\n@import \"modules/base\";\n@import \"modules/typography\";\n@import \"modules/buttons\";\n@import \"modules/images\";\n@import \"modules/tables\";\n@import \"modules/utilities\";\n@import \"modules/fixes\";","// 1. Base defaults\n// Leave body font-size alone: https://goo.gl/KtKtEi\nhtml {\n    box-sizing: border-box;\n    font-size: $root-font-size;\n}\n\n*,\n*:before,\n*:after {\n    box-sizing: inherit;\n}\n\nbody {\n    color: $base-font-colour;\n    font-family: $serif;\n    line-height: 1.5;\n}\n\n// 2. Layout\n.wrapper {\n    margin: 0 auto;\n    max-width: 100%;\n    width: $base-content-width;\n}","$base-content-width: 37.5rem !default; // 750px\n$root-font-size: 20px !default; // in px\n$em-base: $root-font-size;\n$base-font-size: 1rem !default; // 20px\n$base-line-height: 1.5 !default;\n\n// Keyline increments are used for establishing vertical rhythm\n$base-keyline-increment: $base-font-size * $base-line-height;\n$kl-i-1-2: $base-keyline-increment / 2;\n$kl-i-1: $base-keyline-increment;\n$kl-i-3-2: $kl-i-1-2 * 3;\n$kl-i-2: $base-keyline-increment * 2;\n\n// Create a modular scale using $base-font-size and $base-width\n$civil-ms-ratio: $golden !default;\n$modular-scale-ratio: $civil-ms-ratio;\n$modular-scale-base-1: $base-font-size !default;\n$modular-scale-base-2: $base-content-width !default;\n\n// Font sizes for headings\n$h1-font-size: modular-scale(4, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h2-font-size: modular-scale(3, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h3-font-size: modular-scale(2, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h4-font-size: modular-scale(1, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h5-font-size: modular-scale(0, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h6-font-size: modular-scale(-2, $modular-scale-base-1 $modular-scale-base-2) !default;\n\n// Fonts\n$serif: \"Lora\", $georgia !default;\n$sans-serif: \"Nunito\", $helvetica !default;\n$monospace: \"Source Code Pro\", $monospace !default;\n\n// Palette\n$base-colour: #454553 !default;\n$base-colour-inverse: #FEFEFE !default;\n$primary-colour: #EB586F !default;\n$secondary-colour: #4AA0D5 !default;\n$base-font-colour: $base-colour !default;\n\n// Thin lines\n$grey-light-colour: #CCC !default;\n\n// Thick lines, and highlights\n$grey-lighter-colour: #EEE !default;","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","/*\n Typography\n\n Core principles:-\n - Modular scale: 20px and 750px at 1.618 (golden ratio)\n   For more info. http://www.modularscale.com/?20,750&px&1.618&web&text\n\n - Vertical rhythm: 1rem (of 20px, root) * 1.5 = 30px\n   Resulting rem spacing 0.9375 (2x), 1.875, 2.8125 (req: margins), 3.75\n\n Contents\n 1. Headings\n 2. Inline elements\n 3. Paragraphs\n 4. Code blocks\n 5. Quote blocks\n 6. Lists\n 7. Thematic break / divider\n 8. Links\n */\n\n// 1. Headings\n// Reset:\n// (a) color -> reduce \"heaviness\" of headings through contrast\n// (b) font-weight -> sets it to normal, as the default (bold) is too overwhelming\n// (c) margin -> sets vertical rhythm for the bottom margin only\nh1, h2, h3, h4, h5, h6 {\n    color: tint($base-font-colour, 3%); // (a)\n    font-family: $sans-serif;\n    font-weight: 400; // (b)\n    margin: 0 0 $kl-i-1; // (c)\n}\n\nh1 {\n    font-size: $h1-font-size;\n    font-weight: 300;\n    line-height: calc-line-height($h1-font-size);\n}\n\nh2 {\n    font-size: $h2-font-size;\n    line-height: calc-line-height($h2-font-size);\n}\n\nh3 {\n    font-size: $h3-font-size;\n    line-height: calc-line-height($h3-font-size);\n}\n\nh4 {\n    font-size: $h4-font-size;\n    line-height: calc-line-height($h4-font-size);\n}\n\nh5, %h5 {\n    font-size: $h5-font-size;\n    line-height: calc-line-height($h5-font-size);\n}\n\nh6, %h6 {\n    font-size: $h6-font-size;\n    line-height: calc-line-height($h6-font-size);\n    text-transform: uppercase; // Improves visibility\n}\n\n// Legibility for smaller headings\n// Ideally, these [level of headings] should never be used\nh4, h5, h6, %h6 {\n    font-weight: 700;\n}\n\n// (a) color -> creating hierarchies (differentiation) through shading\n// (b) text-rendering -> optimise text-rendering for key elements\nh1, h2, h3 {\n    color: tint($base-font-colour, 5%); // (a)\n    text-rendering: optimizeLegibility; // (b)\n}\n\n// 2. Inline elements\n// Inherits heading styles (h5, and h6 respectively)\ntime {\n    @extend %h5;\n}\n\nsmall {\n    @extend %h6;\n}\n\ntime, small {\n    // For <small>, it is theoretically the same as h6\n    font-family: $sans-serif;\n}\n\n// Source: Bootstrap's Reboot\nabbr[title], abbr[data-original-title] {\n    cursor: help;\n    border-bottom: 1px dotted $grey-light-colour;\n}\n\nmark {\n    background: rgba(255, 255, 0, 0.4);\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// 3. Paragraphs\n// Reset:\n// (a) font-size -> sets the REAL $base-font-size (i.e. not the body's one)\n// (b) margin -> 1 keyline increment bottom (similar to headings)\n// (c) text-rendering -> removes kerning added by the browser\np, %p {\n    //font-size: $base-font-size; // (a)\n    margin: 0 0 $kl-i-1; // (b)\n    text-rendering: optimizeLegibility; // (c)\n}\n\n// 4. Code blocks\n// Much like <img>, it's likely to break vertical rhythm, but we'll ignore it\npre, code {\n    font-family: $monospace;\n    font-size: rem(16); // 16px (code shouldn't be read like paragraphs)\n}\n\npre {\n    border: 1px solid $grey-light-colour;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n\n    // Set a background and padding for <code> only when it's used in isolation\n    code {\n        background: none;\n        padding: 0;\n    }\n}\n\ncode {\n    background: $grey-lighter-colour;\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// Remove normalize.css margin\nfigure {\n    margin: 0;\n}\n\n// 5. Quote blocks\nblockquote {\n    font-style: italic;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n    position: relative;\n\n    // Add a divider at the middle bottom\n    &:after {\n        content: \"\";\n        border-bottom: 1px solid tint($base-font-colour, 3%);\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: modular-scale(8, $modular-scale-base-1 $modular-scale-base-2);\n        -webkit-transform: translateX(-50%);\n        -ms-transform: translateX(-50%);\n        transform: translateX(-50%);\n    }\n\n    // Sources\n    footer {\n        color: tint($base-font-colour, 20%);\n        font-size: rem(16);\n        font-style: normal;\n        line-height: calc-line-height(rem(16));\n        //margin-bottom: $kl-i-1;\n\n        &:before {\n            content: \"\\2014 \\00A0\";\n        }\n    }\n}\n\n// 6. Lists\n// Same as paragraphs\n// Source (<dl>, <dt>, and <dd>): Bootstrap's Reboot\nul, ol, dl {\n    @extend %p;\n\n    ul, ol {\n        margin: 0;\n    }\n}\n\ndt {\n    font-weight: 700;\n}\n\ndd {\n    margin: 0 0 $kl-i-1;\n}\n\n// 7. Thematic break / divider\n// Source: Lingonberry, a WordPress theme by Anders Noren\nhr {\n    $hr-height: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2);\n    $adjusted-keyline: ($kl-i-1 - $hr-height) / 2 + $kl-i-1;\n\n    background: $grey-lighter-colour;\n    border: 0;\n    height: $hr-height;\n    margin: $adjusted-keyline auto;\n    width: 50%;\n}\n\n// 8. Links\n// Keep underline for links because we are using an \"accent\" colour that is likely to be used on another element\n// It might not be as clean, but it's much easier to distinguish IMHO\na {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n    @include underline;\n\n    color: $primary-colour;\n\n    &:hover, &:focus {\n        color: shade($primary-colour, 15%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of white to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: tint(#6ecaa6, 40%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #a8dfc9;\n///   }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n  @return mix(#fff, $color, $percent);\n}\n","// Scaling Variables\n$golden:           1.618;\n$minor-second:     1.067;\n$major-second:     1.125;\n$minor-third:      1.2;\n$major-third:      1.25;\n$perfect-fourth:   1.333;\n$augmented-fourth: 1.414;\n$perfect-fifth:    1.5;\n$minor-sixth:      1.6;\n$major-sixth:      1.667;\n$minor-seventh:    1.778;\n$major-seventh:    1.875;\n$octave:           2;\n$major-tenth:      2.5;\n$major-eleventh:   2.667;\n$major-twelfth:    3;\n$double-octave:    4;\n\n$modular-scale-ratio: $perfect-fourth !default;\n$modular-scale-base: em($em-base) !default;\n\n@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {\n  $v1: nth($value, 1);\n  $v2: nth($value, length($value));\n  $value: $v1;\n\n  // scale $v2 to just above $v1\n  @while $v2 > $v1 {\n    $v2: ($v2 / $ratio); // will be off-by-1\n  }\n  @while $v2 < $v1 {\n    $v2: ($v2 * $ratio); // will fix off-by-1\n  }\n\n  // check AFTER scaling $v2 to prevent double-counting corner-case\n  $double-stranded: $v2 > $v1;\n\n  @if $increment > 0 {\n    @for $i from 1 through $increment {\n      @if $double-stranded and ($v1 * $ratio) > $v2 {\n        $value: $v2;\n        $v2: ($v2 * $ratio);\n      } @else {\n        $v1: ($v1 * $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @if $increment < 0 {\n    // adjust $v2 to just below $v1\n    @if $double-stranded {\n      $v2: ($v2 / $ratio);\n    }\n\n    @for $i from $increment through -1 {\n      @if $double-stranded and ($v1 / $ratio) < $v2 {\n        $value: $v2;\n        $v2: ($v2 / $ratio);\n      } @else {\n        $v1: ($v1 / $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @return $value;\n}\n","/*\n 1. Line height calculator\n Uses a font-size input to calculate the ideal line-height\n The ideal line-height maintains vertical rhythm\n */\n@function calc-line-height($s) {\n    $ratio: ceil($s / $base-keyline-increment);\n\n    @return $ratio * $base-keyline-increment / $s;\n}","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","@charset \"UTF-8\";\n\n/// A mixin for generating vendor prefixes on non-standardized properties.\n///\n/// @param {String} $property\n///   Property to prefix\n///\n/// @param {*} $value\n///   Value to use\n///\n/// @param {List} $prefixes\n///   Prefixes to define\n///\n/// @example scss - Usage\n///   .element {\n///     @include prefixer(border-radius, 10px, webkit ms spec);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     -webkit-border-radius: 10px;\n///     -moz-border-radius: 10px;\n///     border-radius: 10px;\n///   }\n///\n/// @require {variable} $prefix-for-webkit\n/// @require {variable} $prefix-for-mozilla\n/// @require {variable} $prefix-for-microsoft\n/// @require {variable} $prefix-for-opera\n/// @require {variable} $prefix-for-spec\n\n@mixin prefixer($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if $prefix == webkit {\n      @if $prefix-for-webkit {\n        -webkit-#{$property}: $value;\n      }\n    } @else if $prefix == moz {\n      @if $prefix-for-mozilla {\n        -moz-#{$property}: $value;\n      }\n    } @else if $prefix == ms {\n      @if $prefix-for-microsoft {\n        -ms-#{$property}: $value;\n      }\n    } @else if $prefix == o {\n      @if $prefix-for-opera {\n        -o-#{$property}: $value;\n      }\n    } @else if $prefix == spec {\n      @if $prefix-for-spec {\n        #{$property}: $value;\n      }\n    } @else  {\n      @warn \"Unrecognized prefix: #{$prefix}\";\n    }\n  }\n}\n\n@mixin disable-prefix-for-all() {\n  $prefix-for-webkit:    false !global;\n  $prefix-for-mozilla:   false !global;\n  $prefix-for-microsoft: false !global;\n  $prefix-for-opera:     false !global;\n  $prefix-for-spec:      false !global;\n}\n","@mixin linear-gradient($pos, $g1, $g2: null,\n                       $g3: null, $g4: null,\n                       $g5: null, $g6: null,\n                       $g7: null, $g8: null,\n                       $g9: null, $g10: null,\n                       $fallback: null) {\n  // Detect what type of value exists in $pos\n  $pos-type: type-of(nth($pos, 1));\n  $pos-spec: null;\n  $pos-degree: null;\n\n  // If $pos is missing from mixin, reassign vars and add default position\n  @if ($pos-type == color) or (nth($pos, 1) == \"transparent\")  {\n    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;\n    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;\n    $pos: null;\n  }\n\n  @if $pos {\n    $positions: _linear-positions-parser($pos);\n    $pos-degree: nth($positions, 1);\n    $pos-spec:   nth($positions, 2);\n  }\n\n  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;\n\n  // Set $g1 as the default fallback color\n  $fallback-color: nth($g1, 1);\n\n  // If $fallback is a color use that color as the fallback color\n  @if (type-of($fallback) == color) or ($fallback == \"transparent\") {\n    $fallback-color: $fallback;\n  }\n\n  background-color: $fallback-color;\n  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome\n  background-image: unquote(\"linear-gradient(#{$pos-spec}#{$full})\");\n}\n","// 1. Medium-style underlines\n@mixin underline($color: $primary-colour, $weight: 1px, $offset: 1px) {\n    @include linear-gradient(to top, transparent, transparent $offset, $color $offset, $color ($offset + $weight), transparent ($offset + $weight));\n\n    text-decoration: none;\n\n    &:hover, &:focus {\n        background: none;\n    }\n}\n\n\n// 2. Buttons\n@mixin btn-size($fs: $base-font-size, $lh: $base-line-height, $py: $kl-i-1-2, $px: $kl-i-1) {\n    font-size: $fs;\n    line-height: $lh;\n    padding: $py $px;\n}\n\n@mixin btn-style($fc: $base-colour-inverse, $bg: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    background: $bg;\n    color: $fc;\n\n    &:hover, &:focus, &:active {\n        background: tint($bg, 10%);\n        color: $fc;\n        outline: 3px solid tint($bg, 50%);\n    }\n}\n\n@mixin btn-style-ghost($fc: $primary-colour, $bc: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    color: $fc;\n    // We are using outline instead of border as it will not increase the height\n    outline: 1px solid $bc;\n\n    &:hover, &:focus, &:active {\n        color: tint($bc, 10%);\n        outline: 3px solid tint($bc, 50%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of black to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: shade(#ffbb52, 60%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #664a20;\n///   }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n  @return mix(#000, $color, $percent);\n}\n","// 1. Base button\n// Source (adapted): Bootstrap and Basscss\n.btn {\n    @include btn-size;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n    font-family: $sans-serif;\n    vertical-align: middle;\n    white-space: nowrap;\n\n    &:hover, &:focus {\n        outline: none;\n        text-decoration: none;\n    }\n}\n\n// 2. Button styles\n// Primary\n.btn-primary {\n    @include btn-style;\n}\n\n// Secondary\n.btn-secondary {\n    @include btn-style($bg: $secondary-colour);\n}\n\n\n// 3. Ghost buttons\n.btn-primary-ghost {\n    @include btn-style-ghost;\n}\n\n.btn-secondary-ghost {\n    @include btn-style-ghost($secondary-colour, $secondary-colour);\n}","// 1. Responsive images\n// They're likely to break vertical rhythm when stretched\n// There's no real around this besides JavaScript\n// .stretch can be used to stretch small images to the container's width\nimg {\n    display: block;\n    height: auto;\n    margin-bottom: $kl-i-1; // 1 keyline increment bottom\n    max-width: 100%;\n}\n\n.img-responsive {\n    min-width: 100%;\n}","// 1. Basic table\n// Inspired by Bootstrap 4\n// Striped with horizontal borders\ntable {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 0 $kl-i-1;\n}\n\nth {\n    text-align: left;\n}\n\n// Breaks vertical alignment (JavaScript plugin required)\nth, td {\n    border-top: 1px solid $grey-light-colour;\n    padding: $kl-i-1-2;\n}\n\nthead th {\n    border-bottom: 2px solid $grey-light-colour;\n}\n\ntbody tr:nth-of-type(odd) {\n    background: $grey-lighter-colour;\n}","// 1. Clearfix\n// Source: HTML5 Boilerplate\n.block {\n    position: relative;\n}\n\n.block:before, .block:after {\n    content: \" \";\n    display: table;\n}\n\n.block:after {\n    clear: both;\n}","// 1. Fix line-height for inline elements in p (for vertical rhythm)\n// Otherwise, the ACTUAL height won't match the COMPUTED height\np, ul, ol {\n    small, time,\n    em, strong {\n        line-height: 100%;\n    }\n}\n\n// 2. Temporary fix for unusual line-height behaviour\n// Computed line-height isn't the same as the displayed line-height\nh1, h2, h3 {\n    line-height: $kl-i-2;\n}\n\nh4, h5, h6, time, small {\n    line-height: $kl-i-1;\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["civil.scss","modules/_base.scss","modules/_variables.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_font-stacks.scss","modules/_typography.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_tint.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_modular-scale.scss","modules/_functions.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_px-to-rem.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_prefixer.scss","../bower_components/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","modules/_mixins.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_shade.scss","modules/_buttons.scss","modules/_code.scss","modules/_images.scss","modules/_tables.scss","modules/_utilities.scss","modules/_fixes.scss"],"names":[],"mappings":"AAAA,8DAA8D,ACE9D,KACI,sBAAuB,AACvB,cCHiB,CDIpB,AAED,iBAGI,kBAAoB,CACvB,AAED,KACI,cCmBiB,ADlBjB,6DET6D,AFU7D,eAAiB,CACpB,AAGD,SACI,cAAe,AACf,eAAgB,AAChB,aCvBwB,CDwB3B,AGCD,kBACI,cCJS,ADKT,oEDfoE,ACgBpE,gBAAiB,AACjB,iBFtBoC,CEuBvC,AAED,GACI,qBEWa,AFVb,gBAAiB,AACjB,mBG3Bc,CH4BjB,AAED,GACI,qBEGa,AFFb,mBGhCc,CHiCjB,AAED,GACI,mBEAa,AFCb,mBGrCc,CHsCjB,AAED,GACI,qBEjBS,AFkBT,mBG1Cc,CH2CjB,AAED,QACI,eFnDiB,AEoDjB,eG/Cc,CHgDjB,AAED,SACI,oBEEa,AFDb,kBGpDc,AHqDd,wBAA0B,CAC7B,AAID,eACI,eAAiB,CACpB,AAID,SACI,cCnDS,ADoDT,iCAAmC,CACtC,AAYD,WAEI,mED7EoE,CC8EvE,AAGD,sCACI,YAAa,AACb,6BFvDoB,CEwDvB,AAED,KACI,8BAAgB,AAChB,2BEvCa,CFwChB,AAOD,WAEI,kBFvGoC,AEwGpC,iCAAmC,CACtC,AAGD,WACI,kBAAmB,AACnB,kBF9GoC,AE+GpC,sBF/GoC,AEgHpC,iBAAmB,CA2BtB,AA/BD,iBAQQ,WAAY,AACZ,gCCtGK,ADuGL,kBAAmB,AACnB,SAAU,AACV,SAAU,AACV,iBEpFS,AFqFT,mCAA6B,AAE7B,0BAAqB,CACxB,AAjBL,kBAqBQ,cClHK,ADmHL,gBI5HS,AJ6HT,kBAAmB,AACnB,iBGnIU,CHyIb,AA9BL,yBA4BY,qBAAuB,CAC1B,AAOT,oCAIQ,QAAU,CACb,AAGL,GACI,eAAiB,CACpB,AAED,GACI,iBF7JoC,CE8JvC,AAID,GAII,gBFlIsB,AEmItB,SAAU,AACV,iBElHa,AFmHb,uBAA8B,AAC9B,SAAW,CACd,AAKD,EKpJQ,mDLqJqC,AKrIrC,2CLqIqC,AMtJ3C,6BChC8C,ADiC9C,iHAAyC,AACzC,uGAAyB,AChCvB,qBAAsB,APuLtB,aFxJoB,CE6JvB,AATD,gBOhLQ,gBAAiB,APuLjB,aQxKK,CDdR,AENL,KFWI,eTViB,ASWjB,gBTVkB,ASWlB,sBTRoC,AWFpC,gBAAiB,AACjB,YAAa,AACb,eAAgB,AAChB,qBAAsB,AACtB,oEVGoE,AUFpE,sBAAuB,AACvB,kBAAoB,CAMvB,AAfD,sBAYQ,aAAc,AACd,oBAAsB,CACzB,AAKL,aJcQ,mDEhBqC,AFgCrC,2CEhCqC,AAEzC,mBTcoB,ASbpB,aTYyB,CWX5B,AAFD,0DFIQ,mBNHK,AMIL,cTQqB,ASPrB,yBNLK,CMMR,AEFL,eJSQ,mDEhBqC,AFgCrC,2CEhCqC,AAEzC,mBTesB,ASdtB,aTYyB,CWN5B,AAFD,gEFDQ,mBNHK,AMIL,cTQqB,ASPrB,yBNLK,CMMR,AEKL,mBJEQ,mDEHqC,AFmBrC,2CEnBqC,AAEzC,cTCoB,ASCpB,yBTDoB,CWAvB,AAFD,4EFMQ,cNjBK,AMkBL,yBNlBK,CMmBR,AEHL,qBJHQ,mDEHqC,AFmBrC,2CEnBqC,AAEzC,cTEsB,ASAtB,yBTAsB,CWIzB,AAFD,kFFCQ,cNjBK,AMkBL,yBNlBK,CMmBR,AGvCL,SACI,gEXqBoE,AWpBpE,eNSa,CMRhB,AAED,IACI,sBZgCoB,AY/BpB,kBZFoC,AYGpC,qBZHoC,CY0BvC,AA1BD,UAOQ,eAAgB,AAChB,UAAY,CAKf,AAbL,+BAWY,mBZX4B,CYY/B,AAZT,QAgBQ,SAAU,AACV,SAAU,AACV,SAAW,CACd,AAnBL,SAuBQ,gBAAiB,AACjB,SAAW,CACd,AAGL,KACI,gBZOsB,AYNtB,2BRwBa,CQvBhB,AAGD,OACI,QAAU,CACb,ACtCD,IACI,cAAe,AACf,YAAa,AACb,qBbDoC,AaEpC,cAAgB,CACnB,AAID,gBACI,cAAgB,CACnB,ACdD,KACI,kBdIoC,AcHpC,eAAgB,AAChB,UAAY,CAcf,AAjBD,QAMQ,eAAiB,CACpB,AAPL,cAUQ,4Bd4BgB,Cc3BnB,AAXL,gBAcQ,0BdwBgB,AcvBhB,cdT0B,CcU7B,AAIL,uCAEQ,edmBkB,CclBrB,ACvBL,OACI,iBAAmB,CACtB,AAED,2BACI,YAAa,AACb,aAAe,CAClB,AAED,aACI,UAAY,CACf,ACXD,+FAGQ,gBAAkB,CACrB,AAKL,SACI,gBhBD4B,CgBE/B,AAED,oBACI,kBhBToC,CgBUvC","file":"civil.css","sourcesContent":["/*! civil.css | MIT License | github.com/CivilApp/civil.css */\n@import \"bourbon\";\n@import \"modules/variables\";\n@import \"modules/functions\";\n@import \"modules/mixins\";\n\n@import \"modules/base\";\n@import \"modules/typography\";\n\n@import \"modules/buttons\";\n@import \"modules/code\";\n@import \"modules/images\";\n@import \"modules/tables\";\n\n@import \"modules/utilities\";\n@import \"modules/fixes\";","// 1. Base defaults\n// Leave body font-size alone: https://goo.gl/KtKtEi\nhtml {\n    box-sizing: border-box;\n    font-size: $root-font-size;\n}\n\n*,\n*:before,\n*:after {\n    box-sizing: inherit;\n}\n\nbody {\n    color: $base-font-colour;\n    font-family: $serif;\n    line-height: 1.5;\n}\n\n// 2. Layout\n.wrapper {\n    margin: 0 auto;\n    max-width: 100%;\n    width: $base-content-width;\n}","$base-content-width: 37.5rem !default; // 750px\n$root-font-size: 20px !default; // in px\n$em-base: $root-font-size;\n$base-font-size: 1rem !default; // 20px\n$base-line-height: 1.5 !default;\n\n// Keyline increments are used for establishing vertical rhythm\n$base-keyline-increment: $base-font-size * $base-line-height;\n$kl-i-1-2: $base-keyline-increment / 2;\n$kl-i-1: $base-keyline-increment;\n$kl-i-3-2: $kl-i-1-2 * 3;\n$kl-i-2: $base-keyline-increment * 2;\n\n// Create a modular scale using $base-font-size and $base-width\n$civil-ms-ratio: $golden !default;\n$modular-scale-ratio: $civil-ms-ratio;\n$modular-scale-base-1: $base-font-size !default;\n$modular-scale-base-2: $base-content-width !default;\n\n// Font sizes for headings\n$h1-font-size: modular-scale(4, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h2-font-size: modular-scale(3, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h3-font-size: modular-scale(2, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h4-font-size: modular-scale(1, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h5-font-size: modular-scale(0, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h6-font-size: modular-scale(-2, $modular-scale-base-1 $modular-scale-base-2) !default;\n\n// Fonts\n$serif: \"Lora\", $georgia !default;\n$sans-serif: \"Nunito\", $helvetica !default;\n$monospace: \"Source Code Pro\", $monospace !default;\n\n// Palette\n$base-colour: #454553 !default;\n$base-colour-inverse: #FEFEFE !default;\n$primary-colour: #EB586F !default;\n$secondary-colour: #4AA0D5 !default;\n$base-font-colour: $base-colour !default;\n\n// Thin lines\n$grey-light-colour: #CCC !default;\n\n// Thick lines, and highlights\n$grey-lighter-colour: #EEE !default;","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","/*\n Typography\n\n Core principles:-\n - Modular scale: 20px and 750px at 1.618 (golden ratio)\n   For more info. http://www.modularscale.com/?20,750&px&1.618&web&text\n\n - Vertical rhythm: 1rem (of 20px, root) * 1.5 = 30px\n   Resulting rem spacing 0.9375 (2x), 1.875, 2.8125 (req: margins), 3.75\n\n Contents\n 1. Headings\n 2. Inline elements\n 3. Paragraphs\n 4. Quote blocks\n 5. Lists\n 6. Thematic break / divider\n 7. Links\n */\n\n// 1. Headings\n// Reset:\n// (a) color -> reduce \"heaviness\" of headings through contrast\n// (b) font-weight -> sets it to normal, as the default (bold) is too overwhelming\n// (c) margin -> sets vertical rhythm for the bottom margin only\nh1, h2, h3, h4, h5, h6 {\n    color: tint($base-font-colour, 3%); // (a)\n    font-family: $sans-serif;\n    font-weight: 400; // (b)\n    margin: 0 0 $kl-i-1; // (c)\n}\n\nh1 {\n    font-size: $h1-font-size;\n    font-weight: 300;\n    line-height: calc-line-height($h1-font-size);\n}\n\nh2 {\n    font-size: $h2-font-size;\n    line-height: calc-line-height($h2-font-size);\n}\n\nh3 {\n    font-size: $h3-font-size;\n    line-height: calc-line-height($h3-font-size);\n}\n\nh4 {\n    font-size: $h4-font-size;\n    line-height: calc-line-height($h4-font-size);\n}\n\nh5, %h5 {\n    font-size: $h5-font-size;\n    line-height: calc-line-height($h5-font-size);\n}\n\nh6, %h6 {\n    font-size: $h6-font-size;\n    line-height: calc-line-height($h6-font-size);\n    text-transform: uppercase; // Improves visibility\n}\n\n// Legibility for smaller headings\n// Ideally, these [level of headings] should never be used\nh4, h5, h6, %h6 {\n    font-weight: 700;\n}\n\n// (a) color -> creating hierarchies (differentiation) through shading\n// (b) text-rendering -> optimise text-rendering for key elements\nh1, h2, h3 {\n    color: tint($base-font-colour, 5%); // (a)\n    text-rendering: optimizeLegibility; // (b)\n}\n\n// 2. Inline elements\n// Inherits heading styles (h5, and h6 respectively)\ntime {\n    @extend %h5;\n}\n\nsmall {\n    @extend %h6;\n}\n\ntime, small {\n    // For <small>, it is theoretically the same as h6\n    font-family: $sans-serif;\n}\n\n// Source: Bootstrap's Reboot\nabbr[title], abbr[data-original-title] {\n    cursor: help;\n    border-bottom: 1px dotted $grey-light-colour;\n}\n\nmark {\n    background: rgba(255, 255, 0, 0.4);\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// 3. Paragraphs\n// Reset:\n// (a) font-size -> sets the REAL $base-font-size (i.e. not the body's one)\n// (b) margin -> 1 keyline increment bottom (similar to headings)\n// (c) text-rendering -> removes kerning added by the browser\np, %p {\n    //font-size: $base-font-size; // (a)\n    margin: 0 0 $kl-i-1; // (b)\n    text-rendering: optimizeLegibility; // (c)\n}\n\n// 4. Quote blocks\nblockquote {\n    font-style: italic;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n    position: relative;\n\n    // Add a divider at the middle bottom\n    &:after {\n        content: \"\";\n        border-bottom: 1px solid tint($base-font-colour, 3%);\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: modular-scale(8, $modular-scale-base-1 $modular-scale-base-2);\n        -webkit-transform: translateX(-50%);\n        -ms-transform: translateX(-50%);\n        transform: translateX(-50%);\n    }\n\n    // Sources\n    footer {\n        color: tint($base-font-colour, 20%);\n        font-size: rem(16);\n        font-style: normal;\n        line-height: calc-line-height(rem(16));\n        //margin-bottom: $kl-i-1;\n\n        &:before {\n            content: \"\\2014 \\00A0\";\n        }\n    }\n}\n\n// 5. Lists\n// Same as paragraphs\n// Source (<dl>, <dt>, and <dd>): Bootstrap's Reboot\nul, ol, dl {\n    @extend %p;\n\n    ul, ol {\n        margin: 0;\n    }\n}\n\ndt {\n    font-weight: 700;\n}\n\ndd {\n    margin: 0 0 $kl-i-1;\n}\n\n// 6. Thematic break / divider\n// Source: Lingonberry, a WordPress theme by Anders Noren\nhr {\n    $hr-height: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2);\n    $adjusted-keyline: ($kl-i-1 - $hr-height) / 2 + $kl-i-1;\n\n    background: $grey-lighter-colour;\n    border: 0;\n    height: $hr-height;\n    margin: $adjusted-keyline auto;\n    width: 50%;\n}\n\n// 7. Links\n// Keep underline for links because we are using an \"accent\" colour that is likely to be used on another element\n// It might not be as clean, but it's much easier to distinguish IMHO\na {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n    @include underline;\n\n    color: $primary-colour;\n\n    &:hover, &:focus {\n        color: shade($primary-colour, 15%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of white to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: tint(#6ecaa6, 40%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #a8dfc9;\n///   }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n  @return mix(#fff, $color, $percent);\n}\n","// Scaling Variables\n$golden:           1.618;\n$minor-second:     1.067;\n$major-second:     1.125;\n$minor-third:      1.2;\n$major-third:      1.25;\n$perfect-fourth:   1.333;\n$augmented-fourth: 1.414;\n$perfect-fifth:    1.5;\n$minor-sixth:      1.6;\n$major-sixth:      1.667;\n$minor-seventh:    1.778;\n$major-seventh:    1.875;\n$octave:           2;\n$major-tenth:      2.5;\n$major-eleventh:   2.667;\n$major-twelfth:    3;\n$double-octave:    4;\n\n$modular-scale-ratio: $perfect-fourth !default;\n$modular-scale-base: em($em-base) !default;\n\n@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {\n  $v1: nth($value, 1);\n  $v2: nth($value, length($value));\n  $value: $v1;\n\n  // scale $v2 to just above $v1\n  @while $v2 > $v1 {\n    $v2: ($v2 / $ratio); // will be off-by-1\n  }\n  @while $v2 < $v1 {\n    $v2: ($v2 * $ratio); // will fix off-by-1\n  }\n\n  // check AFTER scaling $v2 to prevent double-counting corner-case\n  $double-stranded: $v2 > $v1;\n\n  @if $increment > 0 {\n    @for $i from 1 through $increment {\n      @if $double-stranded and ($v1 * $ratio) > $v2 {\n        $value: $v2;\n        $v2: ($v2 * $ratio);\n      } @else {\n        $v1: ($v1 * $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @if $increment < 0 {\n    // adjust $v2 to just below $v1\n    @if $double-stranded {\n      $v2: ($v2 / $ratio);\n    }\n\n    @for $i from $increment through -1 {\n      @if $double-stranded and ($v1 / $ratio) < $v2 {\n        $value: $v2;\n        $v2: ($v2 / $ratio);\n      } @else {\n        $v1: ($v1 / $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @return $value;\n}\n","/*\n 1. Line height calculator\n Uses a font-size input to calculate the ideal line-height\n The ideal line-height maintains vertical rhythm\n */\n@function calc-line-height($s) {\n    $ratio: ceil($s / $base-keyline-increment);\n\n    @return $ratio * $base-keyline-increment / $s;\n}","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","@charset \"UTF-8\";\n\n/// A mixin for generating vendor prefixes on non-standardized properties.\n///\n/// @param {String} $property\n///   Property to prefix\n///\n/// @param {*} $value\n///   Value to use\n///\n/// @param {List} $prefixes\n///   Prefixes to define\n///\n/// @example scss - Usage\n///   .element {\n///     @include prefixer(border-radius, 10px, webkit ms spec);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     -webkit-border-radius: 10px;\n///     -moz-border-radius: 10px;\n///     border-radius: 10px;\n///   }\n///\n/// @require {variable} $prefix-for-webkit\n/// @require {variable} $prefix-for-mozilla\n/// @require {variable} $prefix-for-microsoft\n/// @require {variable} $prefix-for-opera\n/// @require {variable} $prefix-for-spec\n\n@mixin prefixer($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if $prefix == webkit {\n      @if $prefix-for-webkit {\n        -webkit-#{$property}: $value;\n      }\n    } @else if $prefix == moz {\n      @if $prefix-for-mozilla {\n        -moz-#{$property}: $value;\n      }\n    } @else if $prefix == ms {\n      @if $prefix-for-microsoft {\n        -ms-#{$property}: $value;\n      }\n    } @else if $prefix == o {\n      @if $prefix-for-opera {\n        -o-#{$property}: $value;\n      }\n    } @else if $prefix == spec {\n      @if $prefix-for-spec {\n        #{$property}: $value;\n      }\n    } @else  {\n      @warn \"Unrecognized prefix: #{$prefix}\";\n    }\n  }\n}\n\n@mixin disable-prefix-for-all() {\n  $prefix-for-webkit:    false !global;\n  $prefix-for-mozilla:   false !global;\n  $prefix-for-microsoft: false !global;\n  $prefix-for-opera:     false !global;\n  $prefix-for-spec:      false !global;\n}\n","@mixin linear-gradient($pos, $g1, $g2: null,\n                       $g3: null, $g4: null,\n                       $g5: null, $g6: null,\n                       $g7: null, $g8: null,\n                       $g9: null, $g10: null,\n                       $fallback: null) {\n  // Detect what type of value exists in $pos\n  $pos-type: type-of(nth($pos, 1));\n  $pos-spec: null;\n  $pos-degree: null;\n\n  // If $pos is missing from mixin, reassign vars and add default position\n  @if ($pos-type == color) or (nth($pos, 1) == \"transparent\")  {\n    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;\n    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;\n    $pos: null;\n  }\n\n  @if $pos {\n    $positions: _linear-positions-parser($pos);\n    $pos-degree: nth($positions, 1);\n    $pos-spec:   nth($positions, 2);\n  }\n\n  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;\n\n  // Set $g1 as the default fallback color\n  $fallback-color: nth($g1, 1);\n\n  // If $fallback is a color use that color as the fallback color\n  @if (type-of($fallback) == color) or ($fallback == \"transparent\") {\n    $fallback-color: $fallback;\n  }\n\n  background-color: $fallback-color;\n  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome\n  background-image: unquote(\"linear-gradient(#{$pos-spec}#{$full})\");\n}\n","// 1. Medium-style underlines\n@mixin underline($color: $primary-colour, $weight: 1px, $offset: 1px) {\n    @include linear-gradient(to top, transparent, transparent $offset, $color $offset, $color ($offset + $weight), transparent ($offset + $weight));\n\n    text-decoration: none;\n\n    &:hover, &:focus {\n        background: none;\n    }\n}\n\n// 2. Buttons\n@mixin btn-size($fs: $base-font-size, $lh: $base-line-height, $py: $kl-i-1-2, $px: $kl-i-1) {\n    font-size: $fs;\n    line-height: $lh;\n    padding: $py $px;\n}\n\n@mixin btn-style($fc: $base-colour-inverse, $bg: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    background: $bg;\n    color: $fc;\n\n    &:hover, &:focus, &:active {\n        background: tint($bg, 10%);\n        color: $fc;\n        outline: 3px solid tint($bg, 50%);\n    }\n}\n\n@mixin btn-style-ghost($fc: $primary-colour, $bc: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    color: $fc;\n    // We are using outline instead of border as it will not increase the height\n    outline: 1px solid $bc;\n\n    &:hover, &:focus, &:active {\n        color: tint($bc, 10%);\n        outline: 3px solid tint($bc, 50%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of black to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: shade(#ffbb52, 60%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #664a20;\n///   }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n  @return mix(#000, $color, $percent);\n}\n","// 1. Base button\n// Source (adapted): Bootstrap and Basscss\n.btn {\n    @include btn-size;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n    font-family: $sans-serif;\n    vertical-align: middle;\n    white-space: nowrap;\n\n    &:hover, &:focus {\n        outline: none;\n        text-decoration: none;\n    }\n}\n\n// 2. Button styles\n// Primary\n.btn-primary {\n    @include btn-style;\n}\n\n// Secondary\n.btn-secondary {\n    @include btn-style($bg: $secondary-colour);\n}\n\n\n// 3. Ghost buttons\n// Primary\n.btn-primary-ghost {\n    @include btn-style-ghost;\n}\n\n// Secondary\n.btn-secondary-ghost {\n    @include btn-style-ghost($secondary-colour, $secondary-colour);\n}","// 1. Code blocks\n// Much like <img>, it's likely to break vertical rhythm, but we'll ignore it\npre, code {\n    font-family: $monospace;\n    font-size: rem(16); // 16px (code shouldn't be read like paragraphs)\n}\n\npre {\n    border: 1px solid $grey-light-colour;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n\n    // Support for line numbers\n    table {\n        max-width: 100%;\n        width: 100%;\n\n        td:not(:first-child) {\n            padding-left: $kl-i-1;\n        }\n    }\n\n    pre {\n        border: 0;\n        margin: 0;\n        padding: 0;\n    }\n\n    // Set a background and padding for <code> only when it's used in isolation\n    code {\n        background: none;\n        padding: 0;\n    }\n}\n\ncode {\n    background: $grey-lighter-colour;\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// Remove normalize.css margin\nfigure {\n    margin: 0;\n}","// 1. Basic image\n// Scales down to fit the container's width\n//\n// It's likely to break vertical rhythm when stretched\n// There's no real around this besides JavaScript\nimg {\n    display: block;\n    height: auto;\n    margin-bottom: $kl-i-1; // 1 keyline increment bottom\n    max-width: 100%;\n}\n\n// 2. Responsive image\n// Scales up to fit the container's width\n.img-responsive {\n    min-width: 100%;\n}","// 1. Base table\n// Inspired by Bootstrap 4\n.tbl {\n    margin: 0 0 $kl-i-1;\n    max-width: 100%;\n    width: 100%;\n\n    th {\n        text-align: left;\n    }\n\n    thead th {\n        border-bottom: 2px solid $grey-light-colour;\n    }\n\n    th, td {\n        border-top: 1px solid $grey-light-colour;\n        padding: $kl-i-1-2;\n    }\n}\n\n// 2. Striped table\n.tbl-striped {\n    tbody tr:nth-of-type(odd) {\n        background: $grey-lighter-colour;\n    }\n}","// 1. Clearfix\n// Source: HTML5 Boilerplate\n.block {\n    position: relative;\n}\n\n.block:before, .block:after {\n    content: \" \";\n    display: table;\n}\n\n.block:after {\n    clear: both;\n}","// 1. Fix line-height for inline elements in p (for vertical rhythm)\n// Otherwise, the ACTUAL height won't match the COMPUTED height\np, ul, ol {\n    small, time,\n    em, strong {\n        line-height: 100%;\n    }\n}\n\n// 2. Temporary fix for unusual line-height behaviour\n// Computed line-height isn't the same as the displayed line-height\nh1, h2, h3 {\n    line-height: $kl-i-2;\n}\n\nh4, h5, h6, time, small {\n    line-height: $kl-i-1;\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/docs/css/civil.css b/docs/css/civil.css
index 4ef01cc..a7a618c 100644
--- a/docs/css/civil.css
+++ b/docs/css/civil.css
@@ -1,2 +1,2 @@
-/*! civil.css | MIT License | github.com/CivilApp/civil.css */html{box-sizing:border-box;font-size:20px}*,:after,:before{box-sizing:inherit}body{color:#454553;font-family:Lora,Georgia,Cambria,Times New Roman,Times,serif;line-height:1.5}.wrapper{margin:0 auto;max-width:100%;width:37.5rem}h1,h2,h3,h4,h5,h6{color:#4b4b58;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-weight:400;margin:0 0 1.5rem}h1{font-size:2.61792rem;font-weight:300;line-height:1.14595}h2{font-size:2.09007rem;line-height:1.43536}h3{font-size:1.618rem;line-height:1.85414}h4{font-size:1.29176rem;line-height:1.16121}h5,time{font-size:1rem;line-height:1.5}h6,small{font-size:.61805rem;line-height:2.427;text-transform:uppercase}h4,h5,h6,small{font-weight:700}h1,h2,h3{color:#4e4e5c;text-rendering:optimizeLegibility}small,time{font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #ccc}mark{background:rgba(255,255,0,.4);padding:.23608rem .38198rem}dl,ol,p,ul{margin:0 0 1.5rem;text-rendering:optimizeLegibility}code,pre{font-family:Bitstream Vera Sans Mono,Consolas,Courier,monospace;font-size:.8rem}pre{border:1px solid #ccc;margin:0 0 1.5rem;padding:.75rem 1.5rem}pre code{background:none;padding:0}code{background:#eee;padding:.23608rem .38198rem}figure{margin:0}blockquote{font-style:italic;margin:0 0 1.5rem;padding:.75rem 1.5rem;position:relative}blockquote:after{content:"";border-bottom:1px solid #4b4b58;position:absolute;bottom:0;left:50%;width:6.85353rem;-webkit-transform:translateX(-50%);transform:translateX(-50%)}blockquote footer{color:#6a6a75;font-size:.8rem;font-style:normal;line-height:1.875}blockquote footer:before{content:"\2014 \00A0"}dl ol,dl ul,ol ol,ol ul,ul ol,ul ul{margin:0}dt{font-weight:700}dd{margin:0 0 1.5rem}hr{background:#eee;border:0;height:.23608rem;margin:2.13196rem auto;width:50%}a{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent;background-image:-webkit-linear-gradient(bottom,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);background-image:linear-gradient(0deg,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);text-decoration:none;color:#eb586f}a:focus,a:hover{background:none;color:#c84b5e}.btn{font-size:1rem;line-height:1.5;padding:.75rem 1.5rem;background:none;border:none;cursor:pointer;display:inline-block;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;vertical-align:middle;white-space:nowrap}.btn:focus,.btn:hover{outline:none;text-decoration:none}.btn-primary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#eb586f;color:#fefefe}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#ed697d;color:#fefefe;outline:3px solid #f5acb7}.btn-secondary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#4aa0d5;color:#fefefe}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background:#5caad9;color:#fefefe;outline:3px solid #a5d0ea}.btn-primary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#eb586f;outline:1px solid #eb586f}.btn-primary-ghost:active,.btn-primary-ghost:focus,.btn-primary-ghost:hover{color:#ed697d;outline:3px solid #f5acb7}.btn-secondary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#4aa0d5;outline:1px solid #4aa0d5}.btn-secondary-ghost:active,.btn-secondary-ghost:focus,.btn-secondary-ghost:hover{color:#5caad9;outline:3px solid #a5d0ea}img{display:block;height:auto;margin-bottom:1.5rem;max-width:100%}.img-responsive{min-width:100%}table{width:100%;max-width:100%;margin:0 0 1.5rem}th{text-align:left}td,th{border-top:1px solid #ccc;padding:.75rem}thead th{border-bottom:2px solid #ccc}tbody tr:nth-of-type(odd){background:#eee}.block{position:relative}.block:after,.block:before{content:" ";display:table}.block:after{clear:both}ol em,ol small,ol strong,ol time,p em,p small,p strong,p time,ul em,ul small,ul strong,ul time{line-height:100%}h1,h2,h3{line-height:3rem}h4,h5,h6,small,time{line-height:1.5rem}
+/*! civil.css | MIT License | github.com/CivilApp/civil.css */html{box-sizing:border-box;font-size:20px}*,:after,:before{box-sizing:inherit}body{color:#454553;font-family:Lora,Georgia,Cambria,Times New Roman,Times,serif;line-height:1.5}.wrapper{margin:0 auto;max-width:100%;width:37.5rem}h1,h2,h3,h4,h5,h6{color:#4b4b58;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-weight:400;margin:0 0 1.5rem}h1{font-size:2.61792rem;font-weight:300;line-height:1.14595}h2{font-size:2.09007rem;line-height:1.43536}h3{font-size:1.618rem;line-height:1.85414}h4{font-size:1.29176rem;line-height:1.16121}h5,time{font-size:1rem;line-height:1.5}h6,small{font-size:.61805rem;line-height:2.427;text-transform:uppercase}h4,h5,h6,small{font-weight:700}h1,h2,h3{color:#4e4e5c;text-rendering:optimizeLegibility}small,time{font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #ccc}mark{background:rgba(255,255,0,.4);padding:.23608rem .38198rem}dl,ol,p,ul{margin:0 0 1.5rem;text-rendering:optimizeLegibility}blockquote{font-style:italic;margin:0 0 1.5rem;padding:.75rem 1.5rem;position:relative}blockquote:after{content:"";border-bottom:1px solid #4b4b58;position:absolute;bottom:0;left:50%;width:6.85353rem;-webkit-transform:translateX(-50%);transform:translateX(-50%)}blockquote footer{color:#6a6a75;font-size:.8rem;font-style:normal;line-height:1.875}blockquote footer:before{content:"\2014 \00A0"}dl ol,dl ul,ol ol,ol ul,ul ol,ul ul{margin:0}dt{font-weight:700}dd{margin:0 0 1.5rem}hr{background:#eee;border:0;height:.23608rem;margin:2.13196rem auto;width:50%}a{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent;background-image:-webkit-linear-gradient(bottom,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);background-image:linear-gradient(0deg,transparent,transparent 1px,#eb586f 0,#eb586f 2px,transparent 0);text-decoration:none;color:#eb586f}a:focus,a:hover{background:none;color:#c84b5e}.btn{font-size:1rem;line-height:1.5;padding:.75rem 1.5rem;background:none;border:none;cursor:pointer;display:inline-block;font-family:Nunito,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;vertical-align:middle;white-space:nowrap}.btn:focus,.btn:hover{outline:none;text-decoration:none}.btn-primary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#eb586f;color:#fefefe}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#ed697d;color:#fefefe;outline:3px solid #f5acb7}.btn-secondary{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);background:#4aa0d5;color:#fefefe}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background:#5caad9;color:#fefefe;outline:3px solid #a5d0ea}.btn-primary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#eb586f;outline:1px solid #eb586f}.btn-primary-ghost:active,.btn-primary-ghost:focus,.btn-primary-ghost:hover{color:#ed697d;outline:3px solid #f5acb7}.btn-secondary-ghost{-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1);color:#4aa0d5;outline:1px solid #4aa0d5}.btn-secondary-ghost:active,.btn-secondary-ghost:focus,.btn-secondary-ghost:hover{color:#5caad9;outline:3px solid #a5d0ea}code,pre{font-family:Bitstream Vera Sans Mono,Consolas,Courier,monospace;font-size:.8rem}pre{border:1px solid #ccc;margin:0 0 1.5rem;padding:.75rem 1.5rem}pre table{max-width:100%;width:100%}pre table td:not(:first-child){padding-left:1.5rem}pre pre{border:0;margin:0;padding:0}pre code{background:none;padding:0}code{background:#eee;padding:.23608rem .38198rem}figure{margin:0}img{display:block;height:auto;margin-bottom:1.5rem;max-width:100%}.img-responsive{min-width:100%}.tbl{margin:0 0 1.5rem;max-width:100%;width:100%}.tbl th{text-align:left}.tbl thead th{border-bottom:2px solid #ccc}.tbl td,.tbl th{border-top:1px solid #ccc;padding:.75rem}.tbl-striped tbody tr:nth-of-type(odd){background:#eee}.block{position:relative}.block:after,.block:before{content:" ";display:table}.block:after{clear:both}ol em,ol small,ol strong,ol time,p em,p small,p strong,p time,ul em,ul small,ul strong,ul time{line-height:100%}h1,h2,h3{line-height:3rem}h4,h5,h6,small,time{line-height:1.5rem}
 /*# sourceMappingURL=civil.css.map */
diff --git a/docs/css/civil.css.map b/docs/css/civil.css.map
index 33f0718..d2134d0 100644
--- a/docs/css/civil.css.map
+++ b/docs/css/civil.css.map
@@ -1 +1 @@
-{"version":3,"sources":["civil.scss","modules/_base.scss","modules/_variables.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_font-stacks.scss","modules/_typography.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_tint.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_modular-scale.scss","modules/_functions.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_px-to-rem.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_prefixer.scss","../bower_components/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","modules/_mixins.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_shade.scss","modules/_buttons.scss","modules/_images.scss","modules/_utilities.scss","modules/_fixes.scss"],"names":[],"mappings":"AAAA,8DAA8D,ACE9D,KACI,sBAAuB,AACvB,cCHiB,CDCf,AAOL,iBACG,kBAAoB,CADf,AAIT,KACI,cCmBiB,ADlBjB,6DET6D,AFU7D,eAAiB,CAHf,AAON,SACI,cAAe,AACf,eAAgB,AAChB,aCvBwB,CDoBlB,AGMU,kBAChB,cCLS,ADMT,oEDhBoE,ACiBpE,gBAAiB,AACjB,iBFvBoC,CEmBhB,AAOxB,GACI,qBEUa,AFTb,gBAAiB,AACjB,mBG5Bc,CHyBd,AAMJ,GACI,qBEEa,AFDb,mBGjCc,CH+Bd,AAKJ,GACI,mBEDa,AFEb,mBGtCc,CHoCd,AAKJ,GACI,qBElBS,AFmBT,mBG3Cc,CHyCd,AAKA,QACA,eFpDiB,AEqDjB,eGhDc,CH8CT,AAKL,SACA,oBECa,AFAb,kBGrDc,AHsDd,wBAA0B,CAHrB,AAQG,eACR,eAAiB,CADJ,AAMT,SACJ,cCpDS,ADqDT,iCAAmC,CAF3B,AAeN,WAEF,mED9EoE,CC4E3D,AAMwB,sCACjC,YAAa,AACb,6BFxDoB,CEsDgB,AAKxC,KACI,8BAAgB,AAChB,2BExCa,CFsCX,AAUH,WAEC,kBFxGoC,AEyGpC,iCAAmC,CAHhC,AAQF,SACD,gED9FoE,AC+FpE,eI1Ga,CJwGN,AAKX,IACI,sBFnFoB,AEoFpB,kBFrHoC,AEsHpC,qBFtHoC,CEmHnC,AAMD,SACI,gBAAiB,AACjB,SAAW,CAFT,AAMV,KACI,gBF5FsB,AE6FtB,2BE3Ea,CFyEX,AAMN,WACI,kBAAmB,AACnB,kBFvIoC,AEwIpC,sBFxIoC,AEyIpC,iBAAmB,CAJX,AAOP,iBACG,WAAY,AACZ,gCC/HK,ADgIL,kBAAmB,AACnB,SAAU,AACV,SAAU,AACV,iBE7GS,AF8GT,mCAA6B,AAC7B,+BAAyB,AACzB,0BAAqB,CAThB,AAaT,kBACI,cC3IK,AD4IL,gBIrJS,AJsJT,kBAAmB,AACnB,iBG5JU,CHwJN,AAOH,yBACG,qBAAuB,CADjB,AAYV,oCACA,QAAU,CADN,AAKZ,GACI,eAAiB,CADjB,AAIJ,GACI,iBFtLoC,CEqLpC,AAMJ,GAII,gBF3JsB,AE4JtB,SAAU,AACV,iBE3Ia,AF4Ib,uBAA8B,AAC9B,SAAW,CARX,AAcJ,EK7KQ,mDL8KqC,AK9JrC,2CL8JqC,AM/K3C,6BChC8C,ADiC9C,qHAAyC,AACzC,kHAAyB,AChCvB,qBAAsB,APgNtB,aFjLoB,CE6KrB,AO1MW,gBACN,gBAAiB,APgNjB,aQjMK,CDhBS,AEJtB,KFYI,eTXiB,ASYjB,gBTXkB,ASYlB,sBTToC,AWFpC,gBAAiB,AACjB,YAAa,AACb,eAAgB,AAChB,qBAAsB,AACtB,oEVGoE,AUFpE,sBAAuB,AACvB,kBAAoB,CATlB,AAWQ,sBACN,aAAc,AACd,oBAAsB,CAFR,AAQtB,aJcQ,mDEfqC,AF+BrC,2CE/BqC,AAEzC,mBTaoB,ASZpB,aTWyB,CWbf,AFIS,0DACf,mBNJK,AMKL,cTOqB,ASNrB,yBNNK,CMGmB,AEChC,eJSQ,mDEfqC,AF+BrC,2CE/BqC,AAEzC,mBTcsB,ASbtB,aTWyB,CWRb,AFDO,gEACf,mBNJK,AMKL,cTOqB,ASNrB,yBNNK,CMGmB,AEOhC,mBJGQ,mDEFqC,AFkBrC,2CElBqC,AAEzC,cTAoB,ASEpB,yBTFoB,CWHJ,AFOG,4EACf,cNlBK,AMmBL,yBNnBK,CMiBmB,AEHhC,qBJDQ,mDEFqC,AFkBrC,2CElBqC,AAEzC,cTCsB,ASCtB,yBTDsB,CWAJ,AFGC,kFACf,cNlBK,AMmBL,yBNnBK,CMiBmB,AGnChC,IACI,cAAe,AACf,YAAa,AACb,qBZAoC,AYCpC,cAAgB,CAJf,AAOL,gBACI,cAAgB,CADH,ACTjB,OACI,iBAAmB,CADf,AAIa,2BACjB,YAAa,AACb,aAAe,CAFU,AAKvB,aACF,UAAY,CADF,ACPN,+FACA,gBAAkB,CADV,AAOR,SACJ,gBdD4B,CcApB,AAIM,oBACd,kBdToC,CcQf","file":"civil.css","sourcesContent":["/*! civil.css | MIT License | github.com/CivilApp/civil.css */\n// Build command:\n// `sass --load-path bower_components/bourbon/app/assets/stylesheets/ --style compressed --watch sass:dist`\n// Or, `gulp sass`\n@import \"bourbon\";\n@import \"modules/variables\";\n@import \"modules/functions\";\n@import \"modules/mixins\";\n@import \"modules/base\";\n@import \"modules/typography\";\n@import \"modules/buttons\";\n@import \"modules/images\";\n@import \"modules/utilities\";\n@import \"modules/fixes\";","// 1. Base defaults\n// Leave body font-size alone: https://goo.gl/KtKtEi\nhtml {\n    box-sizing: border-box;\n    font-size: $root-font-size;\n}\n\n*,\n*:before,\n*:after {\n    box-sizing: inherit;\n}\n\nbody {\n    color: $base-font-colour;\n    font-family: $serif;\n    line-height: 1.5;\n}\n\n// 2. Layout\n.wrapper {\n    margin: 0 auto;\n    max-width: 100%;\n    width: $base-content-width;\n}","$base-content-width: 37.5rem !default; // 750px\n$root-font-size: 20px !default; // in px\n$em-base: $root-font-size;\n$base-font-size: 1rem !default; // 20px\n$base-line-height: 1.5 !default;\n\n// Keyline increments are used for establishing vertical rhythm\n$base-keyline-increment: $base-font-size * $base-line-height;\n$kl-i-1-2: $base-keyline-increment / 2;\n$kl-i-1: $base-keyline-increment;\n$kl-i-3-2: $kl-i-1-2 * 3;\n$kl-i-2: $base-keyline-increment * 2;\n\n// Create a modular scale using $base-font-size and $base-width\n$civil-ms-ratio: $golden !default;\n$modular-scale-ratio: $civil-ms-ratio;\n$modular-scale-base-1: $base-font-size !default;\n$modular-scale-base-2: $base-content-width !default;\n\n// Font sizes for headings\n$h1-font-size: modular-scale(4, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h2-font-size: modular-scale(3, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h3-font-size: modular-scale(2, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h4-font-size: modular-scale(1, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h5-font-size: modular-scale(0, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h6-font-size: modular-scale(-2, $modular-scale-base-1 $modular-scale-base-2) !default;\n\n// Fonts\n$serif: \"Lora\", $georgia !default;\n$sans-serif: \"Nunito\", $helvetica !default;\n$monospace: \"Source Code Pro\", $monospace !default;\n\n// Palette\n$base-colour: #454553 !default;\n$base-colour-inverse: #FEFEFE !default;\n$primary-colour: #EB586F !default;\n$secondary-colour: #4AA0D5 !default;\n$base-font-colour: $base-colour !default;\n\n// Thin lines\n$grey-light-colour: #CCC !default;\n\n// Thick lines, and highlights\n$grey-lighter-colour: #EEE !default;","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","/*\n Typography\n\n Core principles:-\n - Modular scale: 20px and 750px at 1.618 (golden ratio)\n   For more info. http://www.modularscale.com/?20,750&px&1.618&web&text\n\n - Vertical rhythm: 1rem (of 20px, root) * 1.5 = 30px\n   Resulting rem spacing 0.9375 (2x), 1.875, 2.8125 (req: margins), 3.75\n\n Contents\n 1. Headings\n 2. Inline elements\n 3. Paragraphs\n 4. Code blocks\n 5. Quote blocks\n 6. Lists\n 7. Thematic break / divider\n 8. Links\n */\n\n// 1. Headings\n// Reset:\n// (a) color -> reduce \"heaviness\" of headings through contrast\n// (b) font-weight -> sets it to normal, as the default (bold) is too overwhelming\n// (c) margin -> sets vertical rhythm for the bottom margin only\nh1, h2, h3, h4, h5, h6 {\n    color: tint($base-font-colour, 3%); // (a)\n    font-family: $sans-serif;\n    font-weight: 400; // (b)\n    margin: 0 0 $kl-i-1; // (c)\n}\n\nh1 {\n    font-size: $h1-font-size;\n    font-weight: 300;\n    line-height: calc-line-height($h1-font-size);\n}\n\nh2 {\n    font-size: $h2-font-size;\n    line-height: calc-line-height($h2-font-size);\n}\n\nh3 {\n    font-size: $h3-font-size;\n    line-height: calc-line-height($h3-font-size);\n}\n\nh4 {\n    font-size: $h4-font-size;\n    line-height: calc-line-height($h4-font-size);\n}\n\nh5, %h5 {\n    font-size: $h5-font-size;\n    line-height: calc-line-height($h5-font-size);\n}\n\nh6, %h6 {\n    font-size: $h6-font-size;\n    line-height: calc-line-height($h6-font-size);\n    text-transform: uppercase; // Improves visibility\n}\n\n// Legibility for smaller headings\n// Ideally, these [level of headings] should never be used\nh4, h5, h6, %h6 {\n    font-weight: 700;\n}\n\n// (a) color -> creating hierarchies (differentiation) through shading\n// (b) text-rendering -> optimise text-rendering for key elements\nh1, h2, h3 {\n    color: tint($base-font-colour, 5%); // (a)\n    text-rendering: optimizeLegibility; // (b)\n}\n\n// 2. Inline elements\n// Inherits heading styles (h5, and h6 respectively)\ntime {\n    @extend %h5;\n}\n\nsmall {\n    @extend %h6;\n}\n\ntime, small {\n    // For <small>, it is theoretically the same as h6\n    font-family: $sans-serif;\n}\n\n// Source: Bootstrap's Reboot\nabbr[title], abbr[data-original-title] {\n    cursor: help;\n    border-bottom: 1px dotted $grey-light-colour;\n}\n\nmark {\n    background: rgba(255, 255, 0, 0.4);\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// 3. Paragraphs\n// Reset:\n// (a) font-size -> sets the REAL $base-font-size (i.e. not the body's one)\n// (b) margin -> 1 keyline increment bottom (similar to headings)\n// (c) text-rendering -> removes kerning added by the browser\np, %p {\n    //font-size: $base-font-size; // (a)\n    margin: 0 0 $kl-i-1; // (b)\n    text-rendering: optimizeLegibility; // (c)\n}\n\n// 4. Code blocks\n// Much like <img>, it's likely to break vertical rhythm, but we'll ignore it\npre, code {\n    font-family: $monospace;\n    font-size: rem(16); // 16px (code shouldn't be read like paragraphs)\n}\n\npre {\n    border: 1px solid $grey-light-colour;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n\n    // Set a background and padding for <code> only when it's used in isolation\n    code {\n        background: none;\n        padding: 0;\n    }\n}\n\ncode {\n    background: $grey-lighter-colour;\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// 5. Quote blocks\nblockquote {\n    font-style: italic;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n    position: relative;\n\n    // Add a divider at the middle bottom\n    &:after {\n        content: \"\";\n        border-bottom: 1px solid tint($base-font-colour, 3%);\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: modular-scale(8, $modular-scale-base-1 $modular-scale-base-2);\n        -webkit-transform: translateX(-50%);\n        -ms-transform: translateX(-50%);\n        transform: translateX(-50%);\n    }\n\n    // Sources\n    footer {\n        color: tint($base-font-colour, 20%);\n        font-size: rem(16);\n        font-style: normal;\n        line-height: calc-line-height(rem(16));\n        //margin-bottom: $kl-i-1;\n\n        &:before {\n            content: \"\\2014 \\00A0\";\n        }\n    }\n}\n\n// 6. Lists\n// Same as paragraphs\n// Source (<dl>, <dt>, and <dd>): Bootstrap's Reboot\nul, ol, dl {\n    @extend %p;\n\n    ul, ol {\n        margin: 0;\n    }\n}\n\ndt {\n    font-weight: 700;\n}\n\ndd {\n    margin: 0 0 $kl-i-1;\n}\n\n// 7. Thematic break / divider\n// Source: Lingonberry, a WordPress theme by Anders Noren\nhr {\n    $hr-height: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2);\n    $adjusted-keyline: ($kl-i-1 - $hr-height) / 2 + $kl-i-1;\n\n    background: $grey-lighter-colour;\n    border: 0;\n    height: $hr-height;\n    margin: $adjusted-keyline auto;\n    width: 50%;\n}\n\n// 8. Links\n// Keep underline for links because we are using an \"accent\" colour that is likely to be used on another element\n// It might not be as clean, but it's much easier to distinguish IMHO\na {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n    @include underline;\n\n    color: $primary-colour;\n\n    &:hover, &:focus {\n        color: shade($primary-colour, 15%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of white to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: tint(#6ecaa6, 40%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #a8dfc9;\n///   }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n  @return mix(#fff, $color, $percent);\n}\n","// Scaling Variables\n$golden:           1.618;\n$minor-second:     1.067;\n$major-second:     1.125;\n$minor-third:      1.2;\n$major-third:      1.25;\n$perfect-fourth:   1.333;\n$augmented-fourth: 1.414;\n$perfect-fifth:    1.5;\n$minor-sixth:      1.6;\n$major-sixth:      1.667;\n$minor-seventh:    1.778;\n$major-seventh:    1.875;\n$octave:           2;\n$major-tenth:      2.5;\n$major-eleventh:   2.667;\n$major-twelfth:    3;\n$double-octave:    4;\n\n$modular-scale-ratio: $perfect-fourth !default;\n$modular-scale-base: em($em-base) !default;\n\n@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {\n  $v1: nth($value, 1);\n  $v2: nth($value, length($value));\n  $value: $v1;\n\n  // scale $v2 to just above $v1\n  @while $v2 > $v1 {\n    $v2: ($v2 / $ratio); // will be off-by-1\n  }\n  @while $v2 < $v1 {\n    $v2: ($v2 * $ratio); // will fix off-by-1\n  }\n\n  // check AFTER scaling $v2 to prevent double-counting corner-case\n  $double-stranded: $v2 > $v1;\n\n  @if $increment > 0 {\n    @for $i from 1 through $increment {\n      @if $double-stranded and ($v1 * $ratio) > $v2 {\n        $value: $v2;\n        $v2: ($v2 * $ratio);\n      } @else {\n        $v1: ($v1 * $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @if $increment < 0 {\n    // adjust $v2 to just below $v1\n    @if $double-stranded {\n      $v2: ($v2 / $ratio);\n    }\n\n    @for $i from $increment through -1 {\n      @if $double-stranded and ($v1 / $ratio) < $v2 {\n        $value: $v2;\n        $v2: ($v2 / $ratio);\n      } @else {\n        $v1: ($v1 / $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @return $value;\n}\n","/*\n 1. Line height calculator\n Uses a font-size input to calculate the ideal line-height\n The ideal line-height maintains vertical rhythm\n */\n@function calc-line-height($s) {\n    $ratio: ceil($s / $base-keyline-increment);\n\n    @return $ratio * $base-keyline-increment / $s;\n}","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","@charset \"UTF-8\";\n\n/// A mixin for generating vendor prefixes on non-standardized properties.\n///\n/// @param {String} $property\n///   Property to prefix\n///\n/// @param {*} $value\n///   Value to use\n///\n/// @param {List} $prefixes\n///   Prefixes to define\n///\n/// @example scss - Usage\n///   .element {\n///     @include prefixer(border-radius, 10px, webkit ms spec);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     -webkit-border-radius: 10px;\n///     -moz-border-radius: 10px;\n///     border-radius: 10px;\n///   }\n///\n/// @require {variable} $prefix-for-webkit\n/// @require {variable} $prefix-for-mozilla\n/// @require {variable} $prefix-for-microsoft\n/// @require {variable} $prefix-for-opera\n/// @require {variable} $prefix-for-spec\n\n@mixin prefixer($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if $prefix == webkit {\n      @if $prefix-for-webkit {\n        -webkit-#{$property}: $value;\n      }\n    } @else if $prefix == moz {\n      @if $prefix-for-mozilla {\n        -moz-#{$property}: $value;\n      }\n    } @else if $prefix == ms {\n      @if $prefix-for-microsoft {\n        -ms-#{$property}: $value;\n      }\n    } @else if $prefix == o {\n      @if $prefix-for-opera {\n        -o-#{$property}: $value;\n      }\n    } @else if $prefix == spec {\n      @if $prefix-for-spec {\n        #{$property}: $value;\n      }\n    } @else  {\n      @warn \"Unrecognized prefix: #{$prefix}\";\n    }\n  }\n}\n\n@mixin disable-prefix-for-all() {\n  $prefix-for-webkit:    false !global;\n  $prefix-for-mozilla:   false !global;\n  $prefix-for-microsoft: false !global;\n  $prefix-for-opera:     false !global;\n  $prefix-for-spec:      false !global;\n}\n","@mixin linear-gradient($pos, $g1, $g2: null,\n                       $g3: null, $g4: null,\n                       $g5: null, $g6: null,\n                       $g7: null, $g8: null,\n                       $g9: null, $g10: null,\n                       $fallback: null) {\n  // Detect what type of value exists in $pos\n  $pos-type: type-of(nth($pos, 1));\n  $pos-spec: null;\n  $pos-degree: null;\n\n  // If $pos is missing from mixin, reassign vars and add default position\n  @if ($pos-type == color) or (nth($pos, 1) == \"transparent\")  {\n    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;\n    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;\n    $pos: null;\n  }\n\n  @if $pos {\n    $positions: _linear-positions-parser($pos);\n    $pos-degree: nth($positions, 1);\n    $pos-spec:   nth($positions, 2);\n  }\n\n  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;\n\n  // Set $g1 as the default fallback color\n  $fallback-color: nth($g1, 1);\n\n  // If $fallback is a color use that color as the fallback color\n  @if (type-of($fallback) == color) or ($fallback == \"transparent\") {\n    $fallback-color: $fallback;\n  }\n\n  background-color: $fallback-color;\n  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome\n  background-image: unquote(\"linear-gradient(#{$pos-spec}#{$full})\");\n}\n","// 1. Medium-style underlines\n@mixin underline($color: $primary-colour, $weight: 1px, $offset: 1px) {\n    @include linear-gradient(to top, transparent, transparent $offset, $color $offset, $color ($offset + $weight), transparent ($offset + $weight));\n\n    text-decoration: none;\n\n    &:hover, &:focus {\n        background: none;\n    }\n}\n\n\n// 2. Buttons\n@mixin btn-size($fs: $base-font-size, $lh: $base-line-height, $py: $kl-i-1-2, $px: $kl-i-1) {\n    font-size: $fs;\n    line-height: $lh;\n    padding: $py $px;\n}\n\n@mixin btn-style($fc: $base-colour-inverse, $bg: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    background: $bg;\n    color: $fc;\n\n    &:hover, &:focus, &:active {\n        background: tint($bg, 10%);\n        color: $fc;\n        outline: 3px solid tint($bg, 50%);\n    }\n}\n\n@mixin btn-style-ghost($fc: $primary-colour, $bc: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    color: $fc;\n    // We are using outline instead of border as it will not increase the height\n    outline: 1px solid $bc;\n\n    &:hover, &:focus, &:active {\n        color: tint($bc, 10%);\n        outline: 3px solid tint($bc, 50%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of black to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: shade(#ffbb52, 60%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #664a20;\n///   }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n  @return mix(#000, $color, $percent);\n}\n","// 1. Base button\n// Source (adapted): Bootstrap and Basscss\n.btn {\n    @include btn-size;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n    font-family: $sans-serif;\n    vertical-align: middle;\n    white-space: nowrap;\n\n    &:hover, &:focus {\n        outline: none;\n        text-decoration: none;\n    }\n}\n\n// 2. Button styles\n// Primary\n.btn-primary {\n    @include btn-style;\n}\n\n// Secondary\n.btn-secondary {\n    @include btn-style($bg: $secondary-colour);\n}\n\n\n// 3. Ghost buttons\n.btn-primary-ghost {\n    @include btn-style-ghost;\n}\n\n.btn-secondary-ghost {\n    @include btn-style-ghost($secondary-colour, $secondary-colour);\n}","// 1. Responsive images\n// They're likely to break vertical rhythm when stretched\n// There's no real around this besides JavaScript\n// .stretch can be used to stretch small images to the container's width\nimg {\n    display: block;\n    height: auto;\n    margin-bottom: $kl-i-1; // 1 keyline increment bottom\n    max-width: 100%;\n}\n\n.img-responsive {\n    min-width: 100%;\n}","// 1. Clearfix\n// Source: HTML5 Boilerplate\n.block {\n    position: relative;\n}\n\n.block:before, .block:after {\n    content: \" \";\n    display: table;\n}\n\n.block:after {\n    clear: both;\n}","// 1. Fix line-height for inline elements in p (for vertical rhythm)\n// Otherwise, the ACTUAL height won't match the COMPUTED height\np, ul, ol {\n    small, time,\n    em, strong {\n        line-height: 100%;\n    }\n}\n\n// 2. Temporary fix for unusual line-height behaviour\n// Computed line-height isn't the same as the displayed line-height\nh1, h2, h3 {\n    line-height: $kl-i-2;\n}\n\nh4, h5, h6, time, small {\n    line-height: $kl-i-1;\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["civil.scss","modules/_base.scss","modules/_variables.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_font-stacks.scss","modules/_typography.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_tint.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_modular-scale.scss","modules/_functions.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_px-to-rem.scss","../bower_components/bourbon/app/assets/stylesheets/addons/_prefixer.scss","../bower_components/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","modules/_mixins.scss","../bower_components/bourbon/app/assets/stylesheets/functions/_shade.scss","modules/_buttons.scss","modules/_code.scss","modules/_images.scss","modules/_tables.scss","modules/_utilities.scss","modules/_fixes.scss"],"names":[],"mappings":"AAAA,8DAA8D,ACE9D,KACI,sBAAuB,AACvB,cCHiB,CDIpB,AAED,iBAGI,kBAAoB,CACvB,AAED,KACI,cCmBiB,ADlBjB,6DET6D,AFU7D,eAAiB,CACpB,AAGD,SACI,cAAe,AACf,eAAgB,AAChB,aCvBwB,CDwB3B,AGCD,kBACI,cCJS,ADKT,oEDfoE,ACgBpE,gBAAiB,AACjB,iBFtBoC,CEuBvC,AAED,GACI,qBEWa,AFVb,gBAAiB,AACjB,mBG3Bc,CH4BjB,AAED,GACI,qBEGa,AFFb,mBGhCc,CHiCjB,AAED,GACI,mBEAa,AFCb,mBGrCc,CHsCjB,AAED,GACI,qBEjBS,AFkBT,mBG1Cc,CH2CjB,AAED,QACI,eFnDiB,AEoDjB,eG/Cc,CHgDjB,AAED,SACI,oBEEa,AFDb,kBGpDc,AHqDd,wBAA0B,CAC7B,AAID,eACI,eAAiB,CACpB,AAID,SACI,cCnDS,ADoDT,iCAAmC,CACtC,AAYD,WAEI,mED7EoE,CC8EvE,AAGD,sCACI,YAAa,AACb,6BFvDoB,CEwDvB,AAED,KACI,8BAAgB,AAChB,2BEvCa,CFwChB,AAOD,WAEI,kBFvGoC,AEwGpC,iCAAmC,CACtC,AAGD,WACI,kBAAmB,AACnB,kBF9GoC,AE+GpC,sBF/GoC,AEgHpC,iBAAmB,CA2BtB,AA/BD,iBAQQ,WAAY,AACZ,gCCtGK,ADuGL,kBAAmB,AACnB,SAAU,AACV,SAAU,AACV,iBEpFS,AFqFT,mCAA6B,AAE7B,0BAAqB,CACxB,AAjBL,kBAqBQ,cClHK,ADmHL,gBI5HS,AJ6HT,kBAAmB,AACnB,iBGnIU,CHyIb,AA9BL,yBA4BY,qBAAuB,CAC1B,AAOT,oCAIQ,QAAU,CACb,AAGL,GACI,eAAiB,CACpB,AAED,GACI,iBF7JoC,CE8JvC,AAID,GAII,gBFlIsB,AEmItB,SAAU,AACV,iBElHa,AFmHb,uBAA8B,AAC9B,SAAW,CACd,AAKD,EKpJQ,mDLqJqC,AKrIrC,2CLqIqC,AMtJ3C,6BChC8C,ADiC9C,iHAAyC,AACzC,uGAAyB,AChCvB,qBAAsB,APuLtB,aFxJoB,CE6JvB,AATD,gBOhLQ,gBAAiB,APuLjB,aQxKK,CDdR,AENL,KFWI,eTViB,ASWjB,gBTVkB,ASWlB,sBTRoC,AWFpC,gBAAiB,AACjB,YAAa,AACb,eAAgB,AAChB,qBAAsB,AACtB,oEVGoE,AUFpE,sBAAuB,AACvB,kBAAoB,CAMvB,AAfD,sBAYQ,aAAc,AACd,oBAAsB,CACzB,AAKL,aJcQ,mDEhBqC,AFgCrC,2CEhCqC,AAEzC,mBTcoB,ASbpB,aTYyB,CWX5B,AAFD,0DFIQ,mBNHK,AMIL,cTQqB,ASPrB,yBNLK,CMMR,AEFL,eJSQ,mDEhBqC,AFgCrC,2CEhCqC,AAEzC,mBTesB,ASdtB,aTYyB,CWN5B,AAFD,gEFDQ,mBNHK,AMIL,cTQqB,ASPrB,yBNLK,CMMR,AEKL,mBJEQ,mDEHqC,AFmBrC,2CEnBqC,AAEzC,cTCoB,ASCpB,yBTDoB,CWAvB,AAFD,4EFMQ,cNjBK,AMkBL,yBNlBK,CMmBR,AEHL,qBJHQ,mDEHqC,AFmBrC,2CEnBqC,AAEzC,cTEsB,ASAtB,yBTAsB,CWIzB,AAFD,kFFCQ,cNjBK,AMkBL,yBNlBK,CMmBR,AGvCL,SACI,gEXqBoE,AWpBpE,eNSa,CMRhB,AAED,IACI,sBZgCoB,AY/BpB,kBZFoC,AYGpC,qBZHoC,CY0BvC,AA1BD,UAOQ,eAAgB,AAChB,UAAY,CAKf,AAbL,+BAWY,mBZX4B,CYY/B,AAZT,QAgBQ,SAAU,AACV,SAAU,AACV,SAAW,CACd,AAnBL,SAuBQ,gBAAiB,AACjB,SAAW,CACd,AAGL,KACI,gBZOsB,AYNtB,2BRwBa,CQvBhB,AAGD,OACI,QAAU,CACb,ACtCD,IACI,cAAe,AACf,YAAa,AACb,qBbDoC,AaEpC,cAAgB,CACnB,AAID,gBACI,cAAgB,CACnB,ACdD,KACI,kBdIoC,AcHpC,eAAgB,AAChB,UAAY,CAcf,AAjBD,QAMQ,eAAiB,CACpB,AAPL,cAUQ,4Bd4BgB,Cc3BnB,AAXL,gBAcQ,0BdwBgB,AcvBhB,cdT0B,CcU7B,AAIL,uCAEQ,edmBkB,CclBrB,ACvBL,OACI,iBAAmB,CACtB,AAED,2BACI,YAAa,AACb,aAAe,CAClB,AAED,aACI,UAAY,CACf,ACXD,+FAGQ,gBAAkB,CACrB,AAKL,SACI,gBhBD4B,CgBE/B,AAED,oBACI,kBhBToC,CgBUvC","file":"civil.css","sourcesContent":["/*! civil.css | MIT License | github.com/CivilApp/civil.css */\n@import \"bourbon\";\n@import \"modules/variables\";\n@import \"modules/functions\";\n@import \"modules/mixins\";\n\n@import \"modules/base\";\n@import \"modules/typography\";\n\n@import \"modules/buttons\";\n@import \"modules/code\";\n@import \"modules/images\";\n@import \"modules/tables\";\n\n@import \"modules/utilities\";\n@import \"modules/fixes\";","// 1. Base defaults\n// Leave body font-size alone: https://goo.gl/KtKtEi\nhtml {\n    box-sizing: border-box;\n    font-size: $root-font-size;\n}\n\n*,\n*:before,\n*:after {\n    box-sizing: inherit;\n}\n\nbody {\n    color: $base-font-colour;\n    font-family: $serif;\n    line-height: 1.5;\n}\n\n// 2. Layout\n.wrapper {\n    margin: 0 auto;\n    max-width: 100%;\n    width: $base-content-width;\n}","$base-content-width: 37.5rem !default; // 750px\n$root-font-size: 20px !default; // in px\n$em-base: $root-font-size;\n$base-font-size: 1rem !default; // 20px\n$base-line-height: 1.5 !default;\n\n// Keyline increments are used for establishing vertical rhythm\n$base-keyline-increment: $base-font-size * $base-line-height;\n$kl-i-1-2: $base-keyline-increment / 2;\n$kl-i-1: $base-keyline-increment;\n$kl-i-3-2: $kl-i-1-2 * 3;\n$kl-i-2: $base-keyline-increment * 2;\n\n// Create a modular scale using $base-font-size and $base-width\n$civil-ms-ratio: $golden !default;\n$modular-scale-ratio: $civil-ms-ratio;\n$modular-scale-base-1: $base-font-size !default;\n$modular-scale-base-2: $base-content-width !default;\n\n// Font sizes for headings\n$h1-font-size: modular-scale(4, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h2-font-size: modular-scale(3, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h3-font-size: modular-scale(2, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h4-font-size: modular-scale(1, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h5-font-size: modular-scale(0, $modular-scale-base-1 $modular-scale-base-2) !default;\n$h6-font-size: modular-scale(-2, $modular-scale-base-1 $modular-scale-base-2) !default;\n\n// Fonts\n$serif: \"Lora\", $georgia !default;\n$sans-serif: \"Nunito\", $helvetica !default;\n$monospace: \"Source Code Pro\", $monospace !default;\n\n// Palette\n$base-colour: #454553 !default;\n$base-colour-inverse: #FEFEFE !default;\n$primary-colour: #EB586F !default;\n$secondary-colour: #4AA0D5 !default;\n$base-font-colour: $base-colour !default;\n\n// Thin lines\n$grey-light-colour: #CCC !default;\n\n// Thick lines, and highlights\n$grey-lighter-colour: #EEE !default;","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","/*\n Typography\n\n Core principles:-\n - Modular scale: 20px and 750px at 1.618 (golden ratio)\n   For more info. http://www.modularscale.com/?20,750&px&1.618&web&text\n\n - Vertical rhythm: 1rem (of 20px, root) * 1.5 = 30px\n   Resulting rem spacing 0.9375 (2x), 1.875, 2.8125 (req: margins), 3.75\n\n Contents\n 1. Headings\n 2. Inline elements\n 3. Paragraphs\n 4. Quote blocks\n 5. Lists\n 6. Thematic break / divider\n 7. Links\n */\n\n// 1. Headings\n// Reset:\n// (a) color -> reduce \"heaviness\" of headings through contrast\n// (b) font-weight -> sets it to normal, as the default (bold) is too overwhelming\n// (c) margin -> sets vertical rhythm for the bottom margin only\nh1, h2, h3, h4, h5, h6 {\n    color: tint($base-font-colour, 3%); // (a)\n    font-family: $sans-serif;\n    font-weight: 400; // (b)\n    margin: 0 0 $kl-i-1; // (c)\n}\n\nh1 {\n    font-size: $h1-font-size;\n    font-weight: 300;\n    line-height: calc-line-height($h1-font-size);\n}\n\nh2 {\n    font-size: $h2-font-size;\n    line-height: calc-line-height($h2-font-size);\n}\n\nh3 {\n    font-size: $h3-font-size;\n    line-height: calc-line-height($h3-font-size);\n}\n\nh4 {\n    font-size: $h4-font-size;\n    line-height: calc-line-height($h4-font-size);\n}\n\nh5, %h5 {\n    font-size: $h5-font-size;\n    line-height: calc-line-height($h5-font-size);\n}\n\nh6, %h6 {\n    font-size: $h6-font-size;\n    line-height: calc-line-height($h6-font-size);\n    text-transform: uppercase; // Improves visibility\n}\n\n// Legibility for smaller headings\n// Ideally, these [level of headings] should never be used\nh4, h5, h6, %h6 {\n    font-weight: 700;\n}\n\n// (a) color -> creating hierarchies (differentiation) through shading\n// (b) text-rendering -> optimise text-rendering for key elements\nh1, h2, h3 {\n    color: tint($base-font-colour, 5%); // (a)\n    text-rendering: optimizeLegibility; // (b)\n}\n\n// 2. Inline elements\n// Inherits heading styles (h5, and h6 respectively)\ntime {\n    @extend %h5;\n}\n\nsmall {\n    @extend %h6;\n}\n\ntime, small {\n    // For <small>, it is theoretically the same as h6\n    font-family: $sans-serif;\n}\n\n// Source: Bootstrap's Reboot\nabbr[title], abbr[data-original-title] {\n    cursor: help;\n    border-bottom: 1px dotted $grey-light-colour;\n}\n\nmark {\n    background: rgba(255, 255, 0, 0.4);\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// 3. Paragraphs\n// Reset:\n// (a) font-size -> sets the REAL $base-font-size (i.e. not the body's one)\n// (b) margin -> 1 keyline increment bottom (similar to headings)\n// (c) text-rendering -> removes kerning added by the browser\np, %p {\n    //font-size: $base-font-size; // (a)\n    margin: 0 0 $kl-i-1; // (b)\n    text-rendering: optimizeLegibility; // (c)\n}\n\n// 4. Quote blocks\nblockquote {\n    font-style: italic;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n    position: relative;\n\n    // Add a divider at the middle bottom\n    &:after {\n        content: \"\";\n        border-bottom: 1px solid tint($base-font-colour, 3%);\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: modular-scale(8, $modular-scale-base-1 $modular-scale-base-2);\n        -webkit-transform: translateX(-50%);\n        -ms-transform: translateX(-50%);\n        transform: translateX(-50%);\n    }\n\n    // Sources\n    footer {\n        color: tint($base-font-colour, 20%);\n        font-size: rem(16);\n        font-style: normal;\n        line-height: calc-line-height(rem(16));\n        //margin-bottom: $kl-i-1;\n\n        &:before {\n            content: \"\\2014 \\00A0\";\n        }\n    }\n}\n\n// 5. Lists\n// Same as paragraphs\n// Source (<dl>, <dt>, and <dd>): Bootstrap's Reboot\nul, ol, dl {\n    @extend %p;\n\n    ul, ol {\n        margin: 0;\n    }\n}\n\ndt {\n    font-weight: 700;\n}\n\ndd {\n    margin: 0 0 $kl-i-1;\n}\n\n// 6. Thematic break / divider\n// Source: Lingonberry, a WordPress theme by Anders Noren\nhr {\n    $hr-height: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2);\n    $adjusted-keyline: ($kl-i-1 - $hr-height) / 2 + $kl-i-1;\n\n    background: $grey-lighter-colour;\n    border: 0;\n    height: $hr-height;\n    margin: $adjusted-keyline auto;\n    width: 50%;\n}\n\n// 7. Links\n// Keep underline for links because we are using an \"accent\" colour that is likely to be used on another element\n// It might not be as clean, but it's much easier to distinguish IMHO\na {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n    @include underline;\n\n    color: $primary-colour;\n\n    &:hover, &:focus {\n        color: shade($primary-colour, 15%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of white to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: tint(#6ecaa6, 40%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #a8dfc9;\n///   }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n  @return mix(#fff, $color, $percent);\n}\n","// Scaling Variables\n$golden:           1.618;\n$minor-second:     1.067;\n$major-second:     1.125;\n$minor-third:      1.2;\n$major-third:      1.25;\n$perfect-fourth:   1.333;\n$augmented-fourth: 1.414;\n$perfect-fifth:    1.5;\n$minor-sixth:      1.6;\n$major-sixth:      1.667;\n$minor-seventh:    1.778;\n$major-seventh:    1.875;\n$octave:           2;\n$major-tenth:      2.5;\n$major-eleventh:   2.667;\n$major-twelfth:    3;\n$double-octave:    4;\n\n$modular-scale-ratio: $perfect-fourth !default;\n$modular-scale-base: em($em-base) !default;\n\n@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {\n  $v1: nth($value, 1);\n  $v2: nth($value, length($value));\n  $value: $v1;\n\n  // scale $v2 to just above $v1\n  @while $v2 > $v1 {\n    $v2: ($v2 / $ratio); // will be off-by-1\n  }\n  @while $v2 < $v1 {\n    $v2: ($v2 * $ratio); // will fix off-by-1\n  }\n\n  // check AFTER scaling $v2 to prevent double-counting corner-case\n  $double-stranded: $v2 > $v1;\n\n  @if $increment > 0 {\n    @for $i from 1 through $increment {\n      @if $double-stranded and ($v1 * $ratio) > $v2 {\n        $value: $v2;\n        $v2: ($v2 * $ratio);\n      } @else {\n        $v1: ($v1 * $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @if $increment < 0 {\n    // adjust $v2 to just below $v1\n    @if $double-stranded {\n      $v2: ($v2 / $ratio);\n    }\n\n    @for $i from $increment through -1 {\n      @if $double-stranded and ($v1 / $ratio) < $v2 {\n        $value: $v2;\n        $v2: ($v2 / $ratio);\n      } @else {\n        $v1: ($v1 / $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @return $value;\n}\n","/*\n 1. Line height calculator\n Uses a font-size input to calculate the ideal line-height\n The ideal line-height maintains vertical rhythm\n */\n@function calc-line-height($s) {\n    $ratio: ceil($s / $base-keyline-increment);\n\n    @return $ratio * $base-keyline-increment / $s;\n}","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","@charset \"UTF-8\";\n\n/// A mixin for generating vendor prefixes on non-standardized properties.\n///\n/// @param {String} $property\n///   Property to prefix\n///\n/// @param {*} $value\n///   Value to use\n///\n/// @param {List} $prefixes\n///   Prefixes to define\n///\n/// @example scss - Usage\n///   .element {\n///     @include prefixer(border-radius, 10px, webkit ms spec);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     -webkit-border-radius: 10px;\n///     -moz-border-radius: 10px;\n///     border-radius: 10px;\n///   }\n///\n/// @require {variable} $prefix-for-webkit\n/// @require {variable} $prefix-for-mozilla\n/// @require {variable} $prefix-for-microsoft\n/// @require {variable} $prefix-for-opera\n/// @require {variable} $prefix-for-spec\n\n@mixin prefixer($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if $prefix == webkit {\n      @if $prefix-for-webkit {\n        -webkit-#{$property}: $value;\n      }\n    } @else if $prefix == moz {\n      @if $prefix-for-mozilla {\n        -moz-#{$property}: $value;\n      }\n    } @else if $prefix == ms {\n      @if $prefix-for-microsoft {\n        -ms-#{$property}: $value;\n      }\n    } @else if $prefix == o {\n      @if $prefix-for-opera {\n        -o-#{$property}: $value;\n      }\n    } @else if $prefix == spec {\n      @if $prefix-for-spec {\n        #{$property}: $value;\n      }\n    } @else  {\n      @warn \"Unrecognized prefix: #{$prefix}\";\n    }\n  }\n}\n\n@mixin disable-prefix-for-all() {\n  $prefix-for-webkit:    false !global;\n  $prefix-for-mozilla:   false !global;\n  $prefix-for-microsoft: false !global;\n  $prefix-for-opera:     false !global;\n  $prefix-for-spec:      false !global;\n}\n","@mixin linear-gradient($pos, $g1, $g2: null,\n                       $g3: null, $g4: null,\n                       $g5: null, $g6: null,\n                       $g7: null, $g8: null,\n                       $g9: null, $g10: null,\n                       $fallback: null) {\n  // Detect what type of value exists in $pos\n  $pos-type: type-of(nth($pos, 1));\n  $pos-spec: null;\n  $pos-degree: null;\n\n  // If $pos is missing from mixin, reassign vars and add default position\n  @if ($pos-type == color) or (nth($pos, 1) == \"transparent\")  {\n    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;\n    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;\n    $pos: null;\n  }\n\n  @if $pos {\n    $positions: _linear-positions-parser($pos);\n    $pos-degree: nth($positions, 1);\n    $pos-spec:   nth($positions, 2);\n  }\n\n  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;\n\n  // Set $g1 as the default fallback color\n  $fallback-color: nth($g1, 1);\n\n  // If $fallback is a color use that color as the fallback color\n  @if (type-of($fallback) == color) or ($fallback == \"transparent\") {\n    $fallback-color: $fallback;\n  }\n\n  background-color: $fallback-color;\n  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome\n  background-image: unquote(\"linear-gradient(#{$pos-spec}#{$full})\");\n}\n","// 1. Medium-style underlines\n@mixin underline($color: $primary-colour, $weight: 1px, $offset: 1px) {\n    @include linear-gradient(to top, transparent, transparent $offset, $color $offset, $color ($offset + $weight), transparent ($offset + $weight));\n\n    text-decoration: none;\n\n    &:hover, &:focus {\n        background: none;\n    }\n}\n\n// 2. Buttons\n@mixin btn-size($fs: $base-font-size, $lh: $base-line-height, $py: $kl-i-1-2, $px: $kl-i-1) {\n    font-size: $fs;\n    line-height: $lh;\n    padding: $py $px;\n}\n\n@mixin btn-style($fc: $base-colour-inverse, $bg: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    background: $bg;\n    color: $fc;\n\n    &:hover, &:focus, &:active {\n        background: tint($bg, 10%);\n        color: $fc;\n        outline: 3px solid tint($bg, 50%);\n    }\n}\n\n@mixin btn-style-ghost($fc: $primary-colour, $bc: $primary-colour) {\n    @include transition(all 0.2s cubic-bezier(0.4, 0, 0.2, 1));\n\n    color: $fc;\n    // We are using outline instead of border as it will not increase the height\n    outline: 1px solid $bc;\n\n    &:hover, &:focus, &:active {\n        color: tint($bc, 10%);\n        outline: 3px solid tint($bc, 50%);\n    }\n}","@charset \"UTF-8\";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of black to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: shade(#ffbb52, 60%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #664a20;\n///   }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n  @return mix(#000, $color, $percent);\n}\n","// 1. Base button\n// Source (adapted): Bootstrap and Basscss\n.btn {\n    @include btn-size;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n    font-family: $sans-serif;\n    vertical-align: middle;\n    white-space: nowrap;\n\n    &:hover, &:focus {\n        outline: none;\n        text-decoration: none;\n    }\n}\n\n// 2. Button styles\n// Primary\n.btn-primary {\n    @include btn-style;\n}\n\n// Secondary\n.btn-secondary {\n    @include btn-style($bg: $secondary-colour);\n}\n\n\n// 3. Ghost buttons\n// Primary\n.btn-primary-ghost {\n    @include btn-style-ghost;\n}\n\n// Secondary\n.btn-secondary-ghost {\n    @include btn-style-ghost($secondary-colour, $secondary-colour);\n}","// 1. Code blocks\n// Much like <img>, it's likely to break vertical rhythm, but we'll ignore it\npre, code {\n    font-family: $monospace;\n    font-size: rem(16); // 16px (code shouldn't be read like paragraphs)\n}\n\npre {\n    border: 1px solid $grey-light-colour;\n    margin: 0 0 $kl-i-1;\n    padding: $kl-i-1-2 $kl-i-1;\n\n    // Support for line numbers\n    table {\n        max-width: 100%;\n        width: 100%;\n\n        td:not(:first-child) {\n            padding-left: $kl-i-1;\n        }\n    }\n\n    pre {\n        border: 0;\n        margin: 0;\n        padding: 0;\n    }\n\n    // Set a background and padding for <code> only when it's used in isolation\n    code {\n        background: none;\n        padding: 0;\n    }\n}\n\ncode {\n    background: $grey-lighter-colour;\n    padding: modular-scale(-6, $modular-scale-base-1 $modular-scale-base-2) modular-scale(-4, $modular-scale-base-1 $modular-scale-base-2);\n}\n\n// Remove normalize.css margin\nfigure {\n    margin: 0;\n}","// 1. Basic image\n// Scales down to fit the container's width\n//\n// It's likely to break vertical rhythm when stretched\n// There's no real around this besides JavaScript\nimg {\n    display: block;\n    height: auto;\n    margin-bottom: $kl-i-1; // 1 keyline increment bottom\n    max-width: 100%;\n}\n\n// 2. Responsive image\n// Scales up to fit the container's width\n.img-responsive {\n    min-width: 100%;\n}","// 1. Base table\n// Inspired by Bootstrap 4\n.tbl {\n    margin: 0 0 $kl-i-1;\n    max-width: 100%;\n    width: 100%;\n\n    th {\n        text-align: left;\n    }\n\n    thead th {\n        border-bottom: 2px solid $grey-light-colour;\n    }\n\n    th, td {\n        border-top: 1px solid $grey-light-colour;\n        padding: $kl-i-1-2;\n    }\n}\n\n// 2. Striped table\n.tbl-striped {\n    tbody tr:nth-of-type(odd) {\n        background: $grey-lighter-colour;\n    }\n}","// 1. Clearfix\n// Source: HTML5 Boilerplate\n.block {\n    position: relative;\n}\n\n.block:before, .block:after {\n    content: \" \";\n    display: table;\n}\n\n.block:after {\n    clear: both;\n}","// 1. Fix line-height for inline elements in p (for vertical rhythm)\n// Otherwise, the ACTUAL height won't match the COMPUTED height\np, ul, ol {\n    small, time,\n    em, strong {\n        line-height: 100%;\n    }\n}\n\n// 2. Temporary fix for unusual line-height behaviour\n// Computed line-height isn't the same as the displayed line-height\nh1, h2, h3 {\n    line-height: $kl-i-2;\n}\n\nh4, h5, h6, time, small {\n    line-height: $kl-i-1;\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/docs/css/syntax.css.map b/docs/css/syntax.css.map
index af246f5..99ca127 100644
--- a/docs/css/syntax.css.map
+++ b/docs/css/syntax.css.map
@@ -1 +1 @@
-{"version":3,"sources":["syntax.scss"],"names":[],"mappings":"AAOI,gBAAO,qBAA2B,CAA5B,AACN,cAAK,UAAgB,CAAjB,AACJ,gBAAO,cAAe,AAAE,wBAA2B,CAA7C,AACN,cAAK,WAAe,AAAE,eAAmB,CAArC,AACJ,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,gBAAkB,AAAE,wBAA2B,CAAjE,AACL,eAAM,WAAe,AAAE,qBAA2B,CAA7C,AACL,eAAM,iBAAoB,CAArB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,aAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,qBAA2B,CAA7C,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,eAAmB,CAApB,AACL,eAAM,aAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AAGL,6CAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,cAAK,WAAe,AAAE,eAAmB,CAArC,AACJ,cAAK,WAAe,AAAE,wBAA2B,CAA7C,AACJ,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,iBAAoB,CAAtC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,cAAK,UAAgB,CAAjB,AAIJ,4DAAM,WAAe,AAAE,eAAmB,CAArC,AAIL,4DAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,WAAe,AAAE,wBAA2B,CAA7C,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,UAAgB,CAAjB,AACL,eAAM,WAAe,AAAE,eAAmB,CAArC","file":"syntax.css","sourcesContent":["/*\n Syntax highlighting\n\n Pastie theme\n Taken from https://github.com/richleland/pygments-css/blob/master/pastie.css\n*/\n.highlight {\n    .hll { background-color: #ffffcc }\n    .c { color: #888888 } /* Comment */\n    .err { color: #a61717; background-color: #e3d2d2 } /* Error */\n    .k { color: #008800; font-weight: bold } /* Keyword */\n    .cm { color: #888888 } /* Comment.Multiline */\n    .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */\n    .c1 { color: #888888 } /* Comment.Single */\n    .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */\n    .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */\n    .ge { font-style: italic } /* Generic.Emph */\n    .gr { color: #aa0000 } /* Generic.Error */\n    .gh { color: #303030 } /* Generic.Heading */\n    .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */\n    .go { color: #888888 } /* Generic.Output */\n    .gp { color: #555555 } /* Generic.Prompt */\n    .gs { font-weight: bold } /* Generic.Strong */\n    .gu { color: #606060 } /* Generic.Subheading */\n    .gt { color: #aa0000 } /* Generic.Traceback */\n    .kc { color: #008800; font-weight: bold } /* Keyword.Constant */\n    .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */\n    .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */\n    .kp { color: #008800 } /* Keyword.Pseudo */\n    .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */\n    .kt { color: #888888; font-weight: bold } /* Keyword.Type */\n    .m { color: #0000DD; font-weight: bold } /* Literal.Number */\n    .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */\n    .na { color: #336699 } /* Name.Attribute */\n    .nb { color: #003388 } /* Name.Builtin */\n    .nc { color: #bb0066; font-weight: bold } /* Name.Class */\n    .no { color: #003366; font-weight: bold } /* Name.Constant */\n    .nd { color: #555555 } /* Name.Decorator */\n    .ne { color: #bb0066; font-weight: bold } /* Name.Exception */\n    .nf { color: #0066bb; font-weight: bold } /* Name.Function */\n    .nl { color: #336699; font-style: italic } /* Name.Label */\n    .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */\n    .py { color: #336699; font-weight: bold } /* Name.Property */\n    .nt { color: #bb0066; font-weight: bold } /* Name.Tag */\n    .nv { color: #336699 } /* Name.Variable */\n    .ow { color: #008800 } /* Operator.Word */\n    .w { color: #bbbbbb } /* Text.Whitespace */\n    .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */\n    .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */\n    .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */\n    .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */\n    .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */\n    .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */\n    .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */\n    .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */\n    .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */\n    .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */\n    .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */\n    .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */\n    .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */\n    .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */\n    .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */\n    .bp { color: #003388 } /* Name.Builtin.Pseudo */\n    .vc { color: #336699 } /* Name.Variable.Class */\n    .vg { color: #dd7700 } /* Name.Variable.Global */\n    .vi { color: #3333bb } /* Name.Variable.Instance */\n    .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["syntax.scss"],"names":[],"mappings":"AAMA,gBACW,qBAA2B,CAAE,AADxC,cAES,UAAgB,CAAE,AAF3B,gBAGW,cAAe,AAAE,wBAA2B,CAAE,AAHzD,cAIS,WAAe,AAAE,eAAmB,CAAE,AAJ/C,eAKU,UAAgB,CAAE,AAL5B,eAMU,WAAe,AAAE,eAAmB,CAAE,AANhD,eAOU,UAAgB,CAAE,AAP5B,eAQU,WAAe,AAAE,gBAAkB,AAAE,wBAA2B,CAAE,AAR5E,eASU,WAAe,AAAE,qBAA2B,CAAE,AATxD,eAUU,iBAAoB,CAAE,AAVhC,eAWU,UAAgB,CAAE,AAX5B,eAYU,aAAgB,CAAE,AAZ5B,eAaU,WAAe,AAAE,qBAA2B,CAAE,AAbxD,eAcU,UAAgB,CAAE,AAd5B,eAeU,UAAgB,CAAE,AAf5B,eAgBU,eAAmB,CAAE,AAhB/B,eAiBU,aAAgB,CAAE,AAjB5B,eAkBU,UAAgB,CAAE,AAlB5B,6CAqBU,WAAe,AAAE,eAAmB,CAAE,AArBhD,eAsBU,UAAgB,CAAE,AAtB5B,eAuBU,WAAe,AAAE,eAAmB,CAAE,AAvBhD,eAwBU,WAAe,AAAE,eAAmB,CAAE,AAxBhD,cAyBS,WAAe,AAAE,eAAmB,CAAE,AAzB/C,cA0BS,WAAe,AAAE,wBAA2B,CAAE,AA1BvD,eA2BU,UAAgB,CAAE,AA3B5B,eA4BU,UAAgB,CAAE,AA5B5B,eA6BU,WAAe,AAAE,eAAmB,CAAE,AA7BhD,eA8BU,WAAe,AAAE,eAAmB,CAAE,AA9BhD,eA+BU,UAAgB,CAAE,AA/B5B,eAgCU,WAAe,AAAE,eAAmB,CAAE,AAhChD,eAiCU,WAAe,AAAE,eAAmB,CAAE,AAjChD,eAkCU,WAAe,AAAE,iBAAoB,CAAE,AAlCjD,eAmCU,WAAe,AAAE,eAAmB,CAAE,AAnChD,eAoCU,WAAe,AAAE,eAAmB,CAAE,AApChD,eAqCU,WAAe,AAAE,eAAmB,CAAE,AArChD,eAsCU,UAAgB,CAAE,AAtC5B,eAuCU,UAAgB,CAAE,AAvC5B,cAwCS,UAAgB,CAAE,AAxC3B,4DA4CU,WAAe,AAAE,eAAmB,CAAE,AA5ChD,4DAgDU,WAAe,AAAE,wBAA2B,CAAE,AAhDxD,eAiDU,WAAe,AAAE,wBAA2B,CAAE,AAjDxD,eAkDU,WAAe,AAAE,wBAA2B,CAAE,AAlDxD,eAmDU,WAAe,AAAE,wBAA2B,CAAE,AAnDxD,eAoDU,WAAe,AAAE,wBAA2B,CAAE,AApDxD,eAqDU,WAAe,AAAE,wBAA2B,CAAE,AArDxD,eAsDU,WAAe,AAAE,wBAA2B,CAAE,AAtDxD,eAuDU,WAAe,AAAE,wBAA2B,CAAE,AAvDxD,eAwDU,UAAgB,CAAE,AAxD5B,eAyDU,UAAgB,CAAE,AAzD5B,eA0DU,UAAgB,CAAE,AA1D5B,eA2DU,UAAgB,CAAE,AA3D5B,eA4DU,WAAe,AAAE,eAAmB,CAAE","file":"syntax.css","sourcesContent":["/*\n Syntax highlighting\n\n Pastie theme\n Taken from https://github.com/richleland/pygments-css/blob/master/pastie.css\n*/\n.highlight {\n    .hll { background-color: #ffffcc }\n    .c { color: #888888 } /* Comment */\n    .err { color: #a61717; background-color: #e3d2d2 } /* Error */\n    .k { color: #008800; font-weight: bold } /* Keyword */\n    .cm { color: #888888 } /* Comment.Multiline */\n    .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */\n    .c1 { color: #888888 } /* Comment.Single */\n    .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */\n    .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */\n    .ge { font-style: italic } /* Generic.Emph */\n    .gr { color: #aa0000 } /* Generic.Error */\n    .gh { color: #303030 } /* Generic.Heading */\n    .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */\n    .go { color: #888888 } /* Generic.Output */\n    .gp { color: #555555 } /* Generic.Prompt */\n    .gs { font-weight: bold } /* Generic.Strong */\n    .gu { color: #606060 } /* Generic.Subheading */\n    .gt { color: #aa0000 } /* Generic.Traceback */\n    .kc { color: #008800; font-weight: bold } /* Keyword.Constant */\n    .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */\n    .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */\n    .kp { color: #008800 } /* Keyword.Pseudo */\n    .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */\n    .kt { color: #888888; font-weight: bold } /* Keyword.Type */\n    .m { color: #0000DD; font-weight: bold } /* Literal.Number */\n    .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */\n    .na { color: #336699 } /* Name.Attribute */\n    .nb { color: #003388 } /* Name.Builtin */\n    .nc { color: #bb0066; font-weight: bold } /* Name.Class */\n    .no { color: #003366; font-weight: bold } /* Name.Constant */\n    .nd { color: #555555 } /* Name.Decorator */\n    .ne { color: #bb0066; font-weight: bold } /* Name.Exception */\n    .nf { color: #0066bb; font-weight: bold } /* Name.Function */\n    .nl { color: #336699; font-style: italic } /* Name.Label */\n    .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */\n    .py { color: #336699; font-weight: bold } /* Name.Property */\n    .nt { color: #bb0066; font-weight: bold } /* Name.Tag */\n    .nv { color: #336699 } /* Name.Variable */\n    .ow { color: #008800 } /* Operator.Word */\n    .w { color: #bbbbbb } /* Text.Whitespace */\n    .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */\n    .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */\n    .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */\n    .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */\n    .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */\n    .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */\n    .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */\n    .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */\n    .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */\n    .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */\n    .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */\n    .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */\n    .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */\n    .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */\n    .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */\n    .bp { color: #003388 } /* Name.Builtin.Pseudo */\n    .vc { color: #336699 } /* Name.Variable.Class */\n    .vg { color: #dd7700 } /* Name.Variable.Global */\n    .vi { color: #3333bb } /* Name.Variable.Instance */\n    .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index ce5a4bf..717c438 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -66,7 +66,7 @@ gulp.task("build:docs:watch", ["build:docs"], function () {
 gulp.task("prepare:docs", ["copy:css", "copy:js"]);
 
 gulp.task("copy:css", function () {
-    return gulp.src("./dist/*.css")
+    return gulp.src("./dist/*.css*")
         .pipe(gulp.dest("./docs/css"));
 });
 
diff --git a/package.json b/package.json
index 53078ca..704b753 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "civil.css",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "A minimal, opinionated, and content-centric CSS library designed for perfectionists by harnessing the magic of modular scale, and vertical rhythm.",
   "main": "gulpfile.js",
   "devDependencies": {