diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..69fad35
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}
diff --git a/.gitignore b/.gitignore
index eb7089b..0ba24f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /*.html
 /.sass-cache/
 /Gemfile.lock
+/bower_components/
 /stylesheets/
diff --git a/Gemfile b/Gemfile
index d3c6da7..c82005e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,4 +1,3 @@
 source 'https://rubygems.org'
 
-gem 'compass', '0.12.7'
-gem 'zurb-foundation', '4.3.2'
+gem 'compass', '~> 1.0.1'
diff --git a/LICENSE b/LICENSE
index 5f4d18e..09cc04a 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,7 +1,6 @@
-Asciidoctor styles
-------------------
+= Asciidoctor styles
 
-Copyright (c) 2013 Dan Allen
+Copyright (c) 2013-2015 Dan Allen
 
 MIT License
 
@@ -28,13 +27,13 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 Other licensed work
 -------------------
 
-- Foundation 4 by Zurb, on which the themes are built, is licensed under the
+- Foundation 5 by Zurb, on which the themes are built, is licensed under the
   Apache License, v2.0:
 
   http://apache.org/licenses/LICENSE-2.0
   http://foundation.zurb.com
 
-- The riak theme is derived from the Riak documentation theme by Basho,
+- The stone theme is derived from the old Riak documentation theme by Basho,
   licensed under the Creative Commons Attribution 3.0 Unported License:
 
   http://creativecommons.org/licenses/by/3.0/us
diff --git a/README.adoc b/README.adoc
index afec631..fddf434 100644
--- a/README.adoc
+++ b/README.adoc
@@ -1,6 +1,7 @@
 = Asciidoctor stylesheet factory
 Dan Allen
 :toc:
+:toc-placement: preamble
 :source: https://github.com/asciidoctor/asciidoctor-stylesheet-factory
 
 This project is a factory for stylesheets that can be used to style the HTML generated by an AsciiDoc processor (specifically the html5 backend).
@@ -9,19 +10,20 @@ In addition to being a general purpose AsciiDoc stylesheet generator, it is used
 == Foundation
 
 The stylesheets in this project are built using http://compass-style.org[Compass], a CSS authoring framework that uses http://sass-lang.com[Sass] to generate CSS files.
-The styles and components are generated by http://foundation.zurb.com[Foundation 4], an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser friendly and mobile friendly.
+The styles and components are generated by http://foundation.zurb.com[Foundation 5], an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser friendly and mobile friendly.
 
 == Setup and compilation
 
-To setup the project, make sure you have Ruby, RubyGems and, optionally, Bundler.
-Next, run Bundler to install the required gems:
+To setup the project, make sure you have Ruby, RubyGems, Bundler and http://bower.io[Bower].
+Next, run Bower to install the required web components:
 
- $ bundle install
+ $ bower install
 
-That command is equivalent to executing:
+Then, run Bundler to install the required gems:
 
- $ gem install --version '0.12.3' compass
- $ gem install --version '4.3.2' zurb-foundation
+ $ bundle
+
+NOTE: The `bundle` command installs all the gems listed in Gemfile.
 
 Once you have the gems installed, you can build the stylesheets.
 
@@ -57,7 +59,7 @@ TIP: Alternatively, you can use this README as an example.
 
 Then, use AsciiDoc or Asciidoctor to generate HTML that uses one of the stylesheets from the +stylesheets/+ directory:
 
- $ asciidoctor -a stylesheet=./stylesheets/asciidoctor.css sample.adoc
+ $ asciidoctor -a stylesheet=./stylesheets/readthedocs.css sample.adoc
 
 If you want to activate syntax highlighting in the code, add this argument:
 
@@ -83,7 +85,7 @@ To create a new theme (e.g., +hipster+), start by creating two new files:
   * Imports the AsciiDoc components
   * Defines any explicit customizations
 +sass/settings/_hipster.scss+::
-  * Sets variables that customize Foundation 4 and the AsciiDoc CSS components
+  * Sets variables that customize Foundation 5 and the AsciiDoc CSS components
 
 Here's a minimal version of +sass/hipster.scss+:
 
@@ -96,10 +98,10 @@ Here's a minimal version of +sass/hipster.scss+:
 
 NOTE: You don't have to include the underscore prefix when importing files.
 
-NOTE: The +awesome-icons+ component is only applicable to HTML generated by Asciidoctor >= 0.1.2 with the +icons+ attribute set to +awesome+.
+NOTE: The +awesome-icons+ component is only applicable to HTML generated by Asciidoctor >= 0.1.2 with the +icons+ attribute set to +font+.
 
 You can add any explicit customizations below the import lines.
 
-The variables you can set in +sass/settings/_hipster.scss+ are a combination of the {source}/blob/master/sass/settings/_settings.scss.dist[Foundation 4 built-in global settings] and {source}/blob/master/sass/settings/_defaults.scss[global settings and imports for the AsciiDoc components].
+The variables you can set in +sass/settings/_hipster.scss+ are a combination of the https://github.com/zurb/foundation/blob/v5.5.0/scss/foundation/_settings.scss[Foundation 5 global settings] and {source}/blob/master/sass/settings/_defaults.scss[default settings and imports for the AsciiDoc components].
 
 Happy theming!
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..3e56bdc
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,8 @@
+{
+  "name": "asciidoctor-stylesheet-factory",
+  "version": "1.0.0-dev",
+  "private": "true",
+  "dependencies": {
+    "foundation": "zurb/bower-foundation#5.5.0"
+  }
+}
diff --git a/build-stylesheet.sh b/build-stylesheet.sh
index 3a046ee..1de293e 100755
--- a/build-stylesheet.sh
+++ b/build-stylesheet.sh
@@ -10,19 +10,28 @@ compass compile -s compact
 LINES=`wc -l stylesheets/$STYLESHEET_NAME.css | cut -d" " -f1`
 echo '/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */' > $STYLESHEET_NAME.css
 cat stylesheets/$STYLESHEET_NAME.css | \
+  # strip comments (cssshrink now handles this operation)
   sed 's/ *\/\*\+!\? [^*]\+\($\| \*\/\)//g' | \
   sed 's/^\/\*\* .* \*\/$//' | \
   sed '/^\(*\/\|\) *$/d' | \
+  # remove some unused class names
   sed '/\(meta\.\|\.vcard\|\.vevent\)/d' | \
-  grep -v 'font-awesome' >> $STYLESHEET_NAME.css
+  # remove font-awesome @import if present
+  grep -v 'font-awesome' > $STYLESHEET_NAME-raw.css
 
 # see https://www.npmjs.org/package/cssshrink
-cssshrink $STYLESHEET_NAME.css | \
+cssshrink $STYLESHEET_NAME-raw.css | \
   sed '1i\
 /* Remove the comments around the @import statement below when using this as a custom stylesheet */\
 /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400";*/' | \
+  # add license header
   sed '1i\
 /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */' | \
+  # quote font names
   sed 's/\(Open Sans\|DejaVu Sans\|Noto Serif\|DejaVu Serif\|Droid Sans Mono\|DejaVu Sans Mono\|Ubuntu Mono\|Liberation Mono\|Varela Round\)/"\1"/g' | \
+  # allow browser to map bold to font-weight 600 from Open Sans (maybe not the best solution)
   sed 's/font-weight:700/font-weight:bold/g' | \
-  sed 's/\([^}]\)}\([^}]\)/\1}\n\2/g' > $STYLESHEET_NAME.min.css
+  # put endlines after every } that precedes a non-} character
+  sed 's/}\([^}]\)/}\n\1/g' | \
+  # remove the responsive alignment classes
+  sed '/-text-\(left\|right\|center\|justify\)/d' > $STYLESHEET_NAME.css
diff --git a/config.rb b/config.rb
index 6fe1cee..2e4bc5c 100644
--- a/config.rb
+++ b/config.rb
@@ -1,5 +1,5 @@
-require 'zurb-foundation'
-require './lib/functions'
+add_import_path 'bower_components/foundation/scss'
+require_relative 'lib/functions'
 
 http_path = '/'
 css_dir = 'stylesheets'
diff --git a/images/golo/body-bg.png b/images/golo/body-bg.png
deleted file mode 100644
index 0e43a16..0000000
Binary files a/images/golo/body-bg.png and /dev/null differ
diff --git a/images/golo/pre-bg.png b/images/golo/pre-bg.png
deleted file mode 100644
index bd9ab78..0000000
Binary files a/images/golo/pre-bg.png and /dev/null differ
diff --git a/images/maker/body-bg.png b/images/maker/body-bg.png
deleted file mode 100644
index c0a8f36..0000000
Binary files a/images/maker/body-bg.png and /dev/null differ
diff --git a/images/riak/body-bg.jpg b/images/stone/body-bg.jpg
similarity index 100%
rename from images/riak/body-bg.jpg
rename to images/stone/body-bg.jpg
diff --git a/images/riak/footer-bg.jpg b/images/stone/footer-bg.jpg
similarity index 100%
rename from images/riak/footer-bg.jpg
rename to images/stone/footer-bg.jpg
diff --git a/images/riak/info-bg.jpg b/images/stone/info-bg.jpg
similarity index 100%
rename from images/riak/info-bg.jpg
rename to images/stone/info-bg.jpg
diff --git a/images/riak/pre-bg.jpg b/images/stone/pre-bg.jpg
similarity index 100%
rename from images/riak/pre-bg.jpg
rename to images/stone/pre-bg.jpg
diff --git a/images/riak/sidebar-bg.jpg b/images/stone/sidebar-bg.jpg
similarity index 100%
rename from images/riak/sidebar-bg.jpg
rename to images/stone/sidebar-bg.jpg
diff --git a/lib/functions.rb b/lib/functions.rb
index a78fb13..ce99f16 100644
--- a/lib/functions.rb
+++ b/lib/functions.rb
@@ -7,6 +7,7 @@ def string_to_color(name)
     # FIXME check to see if a color could be found, don't just assume
     Sass::Script::Color.new Sass::Script::Color::COLOR_NAMES[name.value]
   end
+  declare :string_to_color, [:name]
 
   # background_noise from https://gist.github.com/aaronrussell/856571 by Aaron Russell
   def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false)
@@ -43,4 +44,5 @@ def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false)
     Sass::Script::String.new("url('data:image/png;base64,#{data}')")
      
   end
+  declare :background_noise, [:c, :noise, :opaciy, :size, :mono]
 end
diff --git a/sass/asciidoctor.scss b/sass/asciidoctor.scss
index cea6246..32bf4b7 100644
--- a/sass/asciidoctor.scss
+++ b/sass/asciidoctor.scss
@@ -1,4 +1,4 @@
-//@import "fonts/asciidoctor";
+//@import "fonts/asciidoctor-collection";
 @import "settings/asciidoctor";
 @import "components/asciidoc";
 @import "components/awesome-icons";
@@ -19,30 +19,45 @@ p, td.content {
   }
 }
 
+// FIXME add variable and move this to asciidoc component
 // NOTE include blockquote for when it doesn't have a nested p
 p, blockquote, dt, td.content {
-  font-size: 1.0625rem;
+  font-size: rem-calc(17px);
 }
 
-p {
-  margin-bottom: 1.25rem;
-}
-
-// restore font size in sidebar block and regular table cells
-.sidebarblock p, .sidebarblock dt, .sidebarblock td.content, p.tableblock {
+// restore font size in sidebar block
+.sidebarblock p, .sidebarblock dt, .sidebarblock td.content {
   font-size: 1em;
 }
 
 .exampleblock > .content {
   // white
-  //background-color: #fff;
-  //border-color: $panel-border-color;
-  //@include single-box-shadow($panel-border-color, 0, 1px, 2px);
+  background-color: #fff;
+  border-color: $panel-border-color;
+  @include single-box-shadow(0, 1px, 4px, null, $panel-border-color);
 
   // light yellow
-  background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7
-  border-color: $panel-border-color;
-  @include single-box-shadow($panel-border-color, 0, 1px, 4px);
+  //background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7
+  //border-color: $panel-border-color;
+  //@include single-box-shadow(0, 1px, 4px, null, $panel-border-color);
+}
+
+// FIXME make this situation simpler
+// we're trying to accomodate highlight themes that have background colors
+// if "highlight" is in first position, then a source highlighter is not in use
+.literalblock pre,
+.listingblock pre:not(.highlight),
+.listingblock pre[class="highlight"],
+.listingblock pre[class^="highlight "],
+.listingblock pre.CodeRay,
+.listingblock pre.prettyprint {
+  .sidebarblock & {
+    // FIXME make me a variable
+    // FIXME what about inline code?
+    //background: #ededef;
+    //background: #f2f1f1;
+    background: #fff;
+  }
 }
 
 @import "components/print";
diff --git a/sass/colony.scss b/sass/colony.scss
deleted file mode 100644
index 9855560..0000000
--- a/sass/colony.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import "settings/colony";
-@import "components/asciidoc";
-@import "components/awesome-icons";
-
-h1, h2, h3, h4, h5, h6 {
-  border-bottom: 1px solid $sect-divider-color;
-}
-
-.sect1 {
-  padding-bottom: 0;
-}
-
-#toctitle {
-  color: #00406F;
-  font-weight: normal;
-  margin-top: 1.5em;
-}
-
-.sidebarblock {
-  border-color: #aaa; // why is this not honoring variable?
-}
-
-code {
-  @include radius(4px);
-}
-
-p.tableblock.header {
-  color: $table-row-font-color;
-}
-
-.literalblock,
-.listingblock {
-  & pre {
-    background: $pre-bg;
-  }
-}
diff --git a/sass/components/_asciidoc.scss b/sass/components/_asciidoc.scss
index d999c07..3fb130b 100644
--- a/sass/components/_asciidoc.scss
+++ b/sass/components/_asciidoc.scss
@@ -19,7 +19,7 @@ $footer-font-color: invert($body-font-color) !default;
 // NOTE: border-collapse: separate allows us to control border sides independently
 
 body {
-  //-webkit-font-smoothing: $font-smoothing;
+  // NOTE: only applies to webkit-based desktop browsers and Firefox 25 (and later) on OSX
   @extend .antialiased;
 }
 
@@ -38,45 +38,40 @@ body {
   }
 }
 
-@if $anchor-text-decoration-hover {
-  a:hover, a:focus {
-    text-decoration: $anchor-text-decoration-hover;
-  }
-}
-
-.clearfix,
 .float-group {
-  &:before, &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
+  @include clearfix;
 }
 
 *:not(pre) > code {
   font-size: $code-font-size;
+  line-height: $code-line-height;
+  // NOTE prevent inline code from being italized
   font-style: normal !important;
+  @if $code-text-rendering != inherit {
+    text-rendering: $code-text-rendering;
+  }
+  //white-space: nowrap;
+  //text-shadow: none;
   letter-spacing: 0;
-  padding: $code-padding;
   @if $code-word-spacing != 0 {
     word-spacing: $code-word-spacing;
   }
-  //white-space: nowrap;
-  @if $code-bg-color != inherit {
-    background-color: $code-bg-color;
+  @if $code-background-color != inherit or $code-border-size != 0 {
+    @include radius;
   }
-  @if $code-border-size != 0 {
-    border: $code-border-size $code-border-style $code-border-color;
+}
+
+// NOTE override code settings from Foundation (see components/_type.scss)
+pre > code {
+  // QUESTION should we use "transparent" instead of "initial"?
+  @if $code-background-color != initial {
+    background-color: initial;
   }
-  @if $code-bg-color != inherit or $code-border-size != 0 {
-    @include radius;
+  @if $code-border-size != 0 {
+    border: none;
   }
-  //text-shadow: none;
-  line-height: $code-line-height;
-  @if $code-text-rendering != inherit {
-    text-rendering: $code-text-rendering;
+  @if $code-padding != 0 {
+    padding: 0;
   }
 }
 
@@ -91,96 +86,66 @@ pre, pre > code {
   }
 }
 
-// if we need to trump the code settings
-//pre > code {
-//  font-size: 1em;
-//  white-space: inherit;
-//  color: $pre-font-color;
-//  font-family: $pre-font-family;
-//  padding: 0;
-//  background: none;
-//  font-weight: normal;
-//  border: 0;
-//}
-
-.keyseq {
-  color: lighten($body-font-color, 20%);
+mark {
+  background-color: scale-color(rgb(255, 255, 0), $lightness: 50%);
 }
 
 kbd {
   display: inline-block;
   color: $body-font-color;
-  font-size: emCalc(12px);
+  font-size: rem-calc-to-em(12px);
   line-height: 1.4;
   background-color: #f7f7f7;
   //border: 1px solid $pre-border-color;
   border: 1px solid #ccc;
   @include radius(3px);
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, .2), 0 0 0 0.1em white inset);
+  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 0.1em white inset);
   margin: -0.15em 0.15em 0 0.15em;
   padding: 0.2em 0.6em 0.2em 0.5em;
   vertical-align: middle;
   white-space: nowrap;
 }
 
-.keyseq kbd:first-child {
-  margin-left: 0;
-}
-
-.keyseq kbd:last-child {
-  margin-right: 0;
+.keyseq {
+  color: lighten($body-font-color, 20%);
+  kbd:first-child {
+    margin-left: 0;
+  }
+  kbd:last-child {
+    margin-right: 0;
+  }
 }
 
 .menuseq, .menu {
   color: darken($body-font-color, 10%);
 }
 
-b.button:before, b.button:after {
-  position: relative;
-  top: -1px;
-  font-weight: normal;
-}
-
-b.button:before {
-  content: "[";
-  padding: 0 3px 0 2px;
-}
-
-b.button:after {
-  content: "]";
-  padding: 0 2px 0 3px;
+b.button {
+  &:before, &:after {
+    position: relative;
+    top: -1px;
+    font-weight: normal;
+  }
+  &:before {
+    content: "[";
+    padding: 0 3px 0 2px;
+  }
+  &:after {
+    content: "]";
+    padding: 0 2px 0 3px;
+  }
 }
 
 @if $anchor-text-decoration != none {
-  // this makes the underline the same as the text color
+  // make underline same as text color
   p a > code {
     //text-decoration: $anchor-text-decoration;
 
-    // this makes the color darken to act like other links
+    // make color darken to act like other links
     &:hover {
       color: darken($code-color, 5%);
     }
   }
-
-  // hack to prevent text from being underlined when inside a link
-  // can be replaced with a! > code in CSS 4
-  //p a > code {
-  //  display: inline-block;
-  //  height: 1.45em;
-  //  padding-top: 0;
-  //  padding-bottom: 0;
-  //}
-
-  //@if $code-bg-color != inherit {
-  //  a > code {
-  //    border-bottom: 1px solid $anchor-font-color;
-  //  }
-
-  //  a > code:hover {
-  //    //background-color: darken($code-bg-color, 5%);
-  //    border-bottom: 1px solid $anchor-font-color-hover;
-  //  }
-  //}
 }
 
 #header,
@@ -192,11 +157,10 @@ b.button:after {
 }
 
 #content {
-  margin-top: 1.25em;
-}
-
-#content:before {
-  content: none;
+  margin-top: rem-calc(20px);
+  &:before {
+    content: none;
+  }
 }
 
 #header {
@@ -205,7 +169,7 @@ b.button:after {
     @if $title-font-weight and $title-font-weight != $header-font-weight {
       font-weight: $title-font-weight;
     }
-    margin-top: 2.25rem;
+    margin-top: rem-calc(36px);
     margin-bottom: 0;
 
     & + #toc {
@@ -219,15 +183,13 @@ b.button:after {
   body.toc2 & > h1:nth-last-child(2) {
     // FIXME shouldn't this be sect-divider?
     border-bottom: $hr-border-width $hr-border-style $hr-border-color;
-    padding-bottom: 8px; // dependent on $header-line-height
+    padding-bottom: 8px; // FIXME dependent on $header-line-height, set accordingly
   }
 
   .details {
     border-bottom: $hr-border-width $hr-border-style $hr-border-color;
     line-height: 1.45;
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
-    padding-left: 0.25em;
+    padding: 0.25rem 0 0.25rem 0.25rem;
     // FIXME use $aside-font-color
     color: $blockquote-cite-font-color;
     // flex collapses all space between items
@@ -239,8 +201,8 @@ b.button:after {
     flex-flow: row wrap;
 
     span:first-child {
-      //margin-left: -0.25em;
-      margin-left: -0.125em;
+      //margin-left: -0.25rem;
+      margin-left: -0.125rem;
     }
 
     span.email a {
@@ -286,24 +248,24 @@ b.button:after {
   border-bottom: $hr-border-width $hr-border-style $hr-border-color;
   padding-bottom: 8px; // dependent on $header-line-height
   margin-top: 0;
-  padding-top: 1rem;
-  margin-bottom: 1.25rem; // should match margin-top of #content
+  padding-top: rem-calc($rem-base);
+  margin-bottom: rem-calc(20px); // should match margin-top of #content
 }
 
 #toc {
   //margin-bottom: $panel-margin-bottom * 2;
   border-bottom: $sect-divider-size $sect-divider-style $sect-divider-color;
-  padding-bottom: 0.5em;
+  padding-bottom: rem-calc(8px);
   & > ul {
     //margin-left: 0;
-    //margin-left: emCalc(4px);
-    margin-left: emCalc(2px);
+    //margin-left: rem-calc(4px);
+    margin-left: rem-calc(2px);
   }
   ul.sectlevel0 > li > a {
     font-style: italic; 
   }
   ul.sectlevel0 ul.sectlevel1 {
-    margin: 0.5em 0;
+    margin: 0.5rem 0;
   }
   ul {
     font-family: $header-font-family;
@@ -315,24 +277,24 @@ b.button:after {
       text-decoration: underline;
     }
   }
-}
 
-#toctitle {
-  @extend h3;
-  color: $subheader-font-color;
-  // shrink font-size below breakpoint
-  font-size: 1.2em;
+  @at-root #toctitle {
+    @extend h3;
+    color: $subheader-font-color;
+    // shrink font-size below breakpoint
+    font-size: rem-calc(20px);
+  }
 }
 
 // IMPORTANT below this breakpoint, toc2 acts as the header toc!!
 @media #{$small} {
   #toctitle {
     // restore font size above breakpoint
-    font-size: 1.375em;
+    font-size: rem-calc(22px);
   }
 
   body.toc2 {
-    padding-left: 15em;
+    padding-left: 15rem;
     padding-right: 0;
   }
 
@@ -340,7 +302,7 @@ b.button:after {
     margin-top: 0 !important;
     background-color: $panel-bg;
     position: fixed;
-    width: 15em;
+    width: 15rem;
     left: 0;
     top: 0;
     // why not panel border color?
@@ -348,12 +310,12 @@ b.button:after {
     border-top-width: 0 !important;
     border-bottom-width: 0 !important;
     z-index: 1000;
-    padding: 1.25em 1em;
+    padding: rem-calc(20px) rem-calc($rem-base);
     height: 100%;
     overflow: auto;
     #toctitle {
       margin-top: 0;
-      font-size: 1.2em;
+      font-size: rem-calc(20px);
     }
     & > ul {
       font-size: 0.9em;
@@ -362,18 +324,18 @@ b.button:after {
     }
     ul ul {
       margin-left: 0;
-      padding-left: $list-nested-margin * .8;
+      padding-left: $list-nested-margin * 0.8;
     }
     ul.sectlevel0 ul.sectlevel1 {
       padding-left: 0;
-      margin-top: 0.5em;
-      margin-bottom: 0.5em;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
     }
   }
 
   body.toc2.toc-right {
     padding-left: 0;
-    padding-right: 15em;
+    padding-right: 15rem;
 
     #toc.toc2 {
       border-right-width: 0;
@@ -386,15 +348,15 @@ b.button:after {
 
 @media #{$medium} {
   body.toc2 {
-    padding-left: 20em;
+    padding-left: 20rem;
     padding-right: 0;
   }
 
   #toc.toc2 {
-    width: 20em;
+    width: 20rem;
 
     #toctitle {
-      font-size: 1.375em;
+      font-size: rem-calc-to-em(22px);
     }
 
     & > ul {
@@ -408,7 +370,7 @@ b.button:after {
 
   body.toc2.toc-right {
     padding-left: 0;
-    padding-right: 20em;
+    padding-right: 20rem;
   }
 }
 
@@ -420,30 +382,32 @@ b.button:after {
 }
 
 #footer {
-  max-width: 100%;
+  // FIXME make max-width a variable since it can't be reverted
+  @if $stretch-footer {
+    max-width: 100%;
+  }
   //margin-top: $panel-margin-bottom * 2;
   background-color: $footer-bg;
   padding: $panel-padding;
-}
 
-#footer-text {
-  color: $footer-font-color;
-  line-height: $paragraph-line-height * 0.9;
+  @at-root #footer-text {
+    color: $footer-font-color;
+    line-height: $paragraph-line-height * 0.9;
+  }
 }
 
 .sect1 {
   // reduce padding below small breakpoint to match header font size change
-  padding-bottom: $panel-margin-bottom - em-calc(10);
-}
-
-@media #{$small} {
-  .sect1 {
+  padding-bottom: $panel-margin-bottom - rem-calc(10px);
+  @media #{$small} {
     padding-bottom: $panel-margin-bottom;
   }
 }
 
-.sect1 + .sect1 {
-  border-top: $sect-divider-size $sect-divider-style $sect-divider-color;
+@if $sect-divider-size != 0 {
+  .sect1 + .sect1 {
+    border-top: $sect-divider-size $sect-divider-style $sect-divider-color;
+  }
 }
 
 // QUESTION why #content here?
@@ -464,7 +428,7 @@ b.button:after {
       content: "\00A7";
       font-size: 0.85em;
       display: block;
-      // padding-top highly dependent on font
+      // padding-top highly dependent on font (and line-height of heading)
       padding-top: 0.1em;
     }
   }
@@ -485,6 +449,13 @@ b.button:after {
 
 // AsciiDoc block styles
 
+.paragraph {
+  margin-bottom: $paragraph-margin-bottom;
+  & > p {
+    margin-bottom: 0;
+  }
+}
+
 // these blocks that don't inherit panel styles
 .audioblock,
 .imageblock,
@@ -514,7 +485,7 @@ table.tableblock,
 .qlist,
 .hdlist {
   & > .title {
-    @extend %subheader;
+    @include subheader;
     text-rendering: $subheader-text-rendering;
     text-align: left;
     @if $subheader-font-family {
@@ -550,7 +521,7 @@ table.tableblock > caption.title {
 
 .paragraph.lead > p,
 #preamble > .sectionbody > .paragraph:first-of-type p {
-  @extend %lead;
+  @include lead;
   color: $title-font-color;
   // QUESTION remove or reduce letter-spacing?
 }
@@ -567,8 +538,7 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
   width: 100%;
   td.icon {
     text-align: center;
-    // FIXME use ems!
-    width: 80px;
+    width: 5rem;
     img {
       max-width: none;
     }
@@ -581,16 +551,15 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
   }
 
   td.content {
-    padding-left: emCalc(18px);
-    padding-right: emCalc(20px);
+    padding-left: rem-calc(18px);
+    padding-right: rem-calc(20px);
     border-left: $hr-border-width $hr-border-style $hr-border-color; 
     // FIXME use $aside-font-color
     color: $blockquote-cite-font-color;
     // QUESTION use opacity instead of blockquote-cite-font-color?
     //opacity: 0.75;
 
-    //& > .paragraph:last-child > p {
-    & > :last-child > :last-child {
+    & > :last-child {
       margin-bottom: 0;
     }
   }
@@ -600,13 +569,6 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
   // FIXME add variable for $example-bg
   @include panel($body-bg, $panel-padding, false);
   @include radius;
-  //& > :last-child > :last-child,
-  //// argh, review!
-  //.olist > ol > li:last-child > :last-child,
-  //.ulist > ul > li:last-child > :last-child,
-  //.qlist > ol > li:last-child > :last-child {
-  //  margin-bottom: 0;
-  //}
 }
 
 .sidebarblock {
@@ -629,17 +591,9 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
         border-color: $sidebar-header-border-color;
       }
     }
-  }
-}
-
-.exampleblock > .content,
-.sidebarblock > .content {
-  // FIXME argh, review!
-  & > :last-child > :last-child,
-  .olist > ol > li:last-child > :last-child,
-  .ulist > ul > li:last-child > :last-child,
-  .qlist > ol > li:last-child > :last-child {
-    margin-bottom: 0;
+    & > :last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -653,13 +607,6 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
 .listingblock pre.CodeRay,
 .listingblock pre.prettyprint {
   background: $pre-bg;
-
-  .sidebarblock & {
-    // FIXME make me a variable
-    // FIXME what about inline code?
-    //background: #ededef;
-    background: #f2f1f1;
-  }
 }
 
 .literalblock,
@@ -671,6 +618,7 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
     }
     // FIXME make border radius on listing blocks configurable!
     @include radius;
+    white-space: pre-wrap;
     word-wrap: break-word;
 
     &.nowrap {
@@ -679,16 +627,18 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
       word-wrap: normal;
     }
     
-    // screens below breakpoint
     padding: $pre-padding;
-    font-size: emCalc(13px);
+
+    // FIXME scale the $pre-font-size variable; perhaps a variable to disable outright
+    // screens below breakpoint
+    font-size: rem-calc-to-em(13px);
 
     @media #{$small} {
-      font-size: emCalc(14.5px);
+      font-size: rem-calc-to-em(14.5px);
     }
 
     @media #{$medium} {
-      font-size: emCalc(16px);
+      font-size: rem-calc-to-em(16px);
     }
   }
 }
@@ -724,7 +674,7 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
   display: none;
   content: attr(data-lang);
   position: absolute;
-  font-size: emCalc(12px);
+  font-size: rem-calc-to-em(12px);
   //top: 0.5rem; // 0.67em
   top: 0.425rem;
   right: 0.5rem; // 0.67em
@@ -753,17 +703,22 @@ table.pyhltable {
   border: 0;
   margin-bottom: 0;
   background: none;
-}
 
-table.pyhltable td {
-  vertical-align: top;
-  padding-top: 0;
-  padding-bottom: 0;
-}
+  td {
+    vertical-align: top;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &.code {
+      padding-left: 0.75em;
+      padding-right: 0;
+    }
+  }
 
-table.pyhltable td.code {
-  padding-left: .75em;
-  padding-right: 0;
+  .linenodiv {
+    background: none !important;
+    padding-right: 0 !important;
+  }
 }
 
 // QUESTION can't td:not(.code) be written as td.linenos?
@@ -771,24 +726,19 @@ pre.pygments .lineno,
 table.pyhltable td:not(.code) {
   color: #999;
   padding-left: 0;
-  padding-right: .5em;
+  padding-right: 0.5em;
   border-right: 1px solid $hr-border-color;
 }
 
 pre.pygments .lineno {
   display: inline-block;
-  margin-right: .25em;
-}
-
-table.pyhltable .linenodiv {
-  background: none !important;
-  padding-right: 0 !important;
+  margin-right: 0.25em;
 }
 
 // TODO
 // - add centered option using margin-left: auto; margin-right: auto; padding-left: 1.5em;
 .quoteblock {
-  margin: 0 1em $paragraph-margin-bottom 1.5em;
+  margin: 0 rem-calc($rem-base) $paragraph-margin-bottom rem-calc(24px);
   display: table; // enables auto width
   & > .title {
     margin-left: -1.5em;
@@ -823,7 +773,7 @@ table.pyhltable .linenodiv {
       text-shadow: 0 1px 2px rgba(0,0,0,0.1);
     }
 
-    & > .paragraph:last-child p {
+    & > :last-child {
       margin-bottom: 0;
     }
   }
@@ -851,8 +801,7 @@ table.pyhltable .linenodiv {
 }
 
 .verseblock {
-  //margin: 0 0.5em $paragraph-margin-bottom 0.5em;
-  margin: 0 1em $paragraph-margin-bottom 1em;
+  margin: 0 rem-calc($rem-base) $paragraph-margin-bottom rem-calc($rem-base);
   pre {
     // FIXME make me a variable
     font-family: "Open Sans", "DejaVu Sans", sans;
@@ -882,7 +831,7 @@ table.pyhltable .linenodiv {
     }
     cite {
       display: block;
-      letter-spacing: -0.05em;
+      letter-spacing: -0.04em;
       color: $blockquote-cite-font-color;
     }
   }
@@ -912,10 +861,12 @@ table.pyhltable .linenodiv {
 table.tableblock {
   max-width: 100%;
   border-collapse: separate;
-  // QUESTION should this be any last-child?
-  td > .paragraph:last-child p,
+  // trim last child in AsciiDoc content cell
+  td.tableblock > div > :last-child {
+    margin-bottom: 0;
+  }
   th, td {
-    & > p:last-child {
+    &.tableblock > p:last-child {
       margin-bottom: 0;
     }
   }
@@ -997,20 +948,13 @@ table.frame-topbot {
   }
 }
 
-// NOTE Fix required in Foundation, user-agent stylesheet is overriding
-table thead th,
-table tfoot th {
-  font-weight: $table-head-font-weight;
-}
-
-// vertical table header (block)
+// vertical table header (tbody only)
+// QUESTION are we sure we want to decorate body header cells with a background?
 tbody tr th {
-  display: $table-display;
-  line-height: $table-line-height;
   background: $table-head-bg;
 }
 
-// vertical table header (content)
+// vertical table header (tbody & tfoot)
 tbody tr th,
 tfoot tr th {
   &, p {
@@ -1024,6 +968,7 @@ p.tableblock > code:only-child {
   padding: 0;
 }
 
+// restore font size in tableblock p (don't enlargen like normal p)
 p.tableblock {
   font-size: 1em;
 }
@@ -1034,59 +979,73 @@ td > div.verse {
 
 // AsciiDoc list styles
 
-ol {
-  margin-left: $list-side-margin + emCalc(4px);
+dl dd {
+  margin-left: $definition-list-content-margin-left;
+  // NOTE: allow $definition-list-margin-bottom to take effect (margin between entries)
+  & > :last-child {
+    margin-bottom: 0;
+  }
 }
 
-ul li ol {
-  margin-left: $list-side-margin;
+// TODO apply all permutations for .hdlist
+.colist,
+.ulist,
+.olist,
+.dlist {
+  margin-bottom: $list-margin-bottom; 
 }
 
-dl dd {
-  margin-left: $definition-list-content-margin-left;
+.colist > table,
+.ulist > ul,
+.olist > ol,
+.dlist > dl {
+  margin-bottom: 0;
 }
 
-// argh
-dl dd:last-child,
-dl dd:last-child > :last-child {
+.olist > ol > li:not(:first-of-type) > p,
+.ulist > ul > li:not(:first-of-type) > p {
+  margin-top: $paragraph-margin-bottom / -2;
+}
+
+.dlist > dl > dd:last-child,
+.dlist > dl > dd:last-child > :last-child,
+.olist > ol > li:last-child > :last-child,
+.ulist > ul > li:last-child > :last-child {
   margin-bottom: 0;
 }
 
-ol > li p,
-ul > li p,
-ul dd,
-ol dd,
 .olist .olist,
+.olist .ulist,
+.olist .dlist,
 .ulist .ulist,
 .ulist .olist,
-.olist .ulist {
-  margin-bottom: $paragraph-margin-bottom / 2;
+.ulist .dlist {
+  margin-top: $list-margin-bottom / -2;
 }
 
 ul.unstyled,
 ol.unnumbered,
-ul.checklist,
-ul.none {
+ul.checklist {
+  margin-left: rem-calc(10px);
   list-style-type: none;
 }
 
-ul.unstyled,
-ol.unnumbered,
-ul.checklist {
-  margin-left: emCalc(10px);
+ul.node {
+  list-style-type: none;
 }
 
 // use consistent size for checkbox
-ul.checklist li > p:first-child > .fa-square-o:first-child,
-ul.checklist li > p:first-child > .fa-check-square-o:first-child {
-  width: 1em;
-  font-size: 0.85em;
-}
-
-ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
-  width: 1em;
-  position: relative;
-  top: 1px;
+ul.checklist li > p:first-child {
+  & > .fa-square-o:first-child,
+  & > .fa-check-square-o:first-child {
+    width: 1em;
+    font-size: 0.85em;
+  }
+  & > input[type="checkbox"]:first-child {
+    width: 1em;
+    position: relative;
+    top: 1px;
+  }
 }
 
 ul.inline {
@@ -1116,17 +1075,19 @@ ul.inline {
 //@include ordered-list-type(armenian, armenian);
 //@include ordered-list-type(georgian, georgian);
 
-.hdlist > table,
-.colist > table {
-  border: 0;
-  background: none;
-  & > tbody > tr {
+.hdlist,
+.colist {
+  & > table {
+    border: 0;
     background: none;
+    & > tbody > tr {
+      background: none;
+    }
   }
 }
 
 td.hdlist1 {
-  padding-right: .75em;
+  padding-right: 0.75em;
   font-weight: bold;
 }
 
@@ -1135,19 +1096,21 @@ td.hdlist2 {
   vertical-align: top;
 }
 
-.literalblock + .colist,
-.listingblock + .colist {
-  margin-top: -0.5em;
+.literalblock,
+.listingblock {
+  & + .colist {
+    margin-top: -0.5em;
+  }
 }
 
-.colist > table {
-  tr > td:first-of-type {
+.colist > table tr > td {
+  &:first-of-type {
     padding: 0 0.75em;
     line-height: 1;
   }
 
-  tr > td:last-of-type {
-    padding: emCalc(4px) 0;
+  &:last-of-type {
+    padding: rem-calc(4px) 0;
   }
 }
 
@@ -1157,36 +1120,29 @@ td.hdlist2 {
 //}
 
 // picked from foundation/components/_thumbs.css
-.thumb,
-.th {
+.th, .thumb {
   line-height: 0;
   display: inline-block;
   border: $thumb-border-style $thumb-border-width $thumb-border-color;
-  @if $experimental {
-    -webkit-box-shadow: $thumb-box-shadow;
-  }
-  box-shadow: $thumb-box-shadow;
+  @include box-shadow($thumb-box-shadow);
 }
 
 .imageblock {
-  &.left,
-  &[style*="float: left"] {
-    margin: emCalc(4px) emCalc(10px) $panel-margin-bottom 0;
+  &.left, &[style*="float: left"] {
+    margin: rem-calc(4px) rem-calc(10px) $panel-margin-bottom 0;
   }
-  &.right,
-  &[style*="float: right"] {
-    margin: emCalc(4px) 0 $panel-margin-bottom emCalc(10px);
+  &.right, &[style*="float: right"] {
+    margin: rem-calc(4px) 0 $panel-margin-bottom rem-calc(10px);
   }
 
   & > .title {
     margin-bottom: 0;
   }
 
-  &.thumb,
-  &.th {
-    border-width: $thumb-border-width + ($thumb-border-width * .5);
+  &.th, &.thumb {
+    border-width: $thumb-border-width + ($thumb-border-width * 0.5);
     & > .title {
-      padding: 0 emCalc(2px);
+      padding: 0 rem-calc(2px);
     }
   }
 }
@@ -1198,20 +1154,19 @@ td.hdlist2 {
   //&.rel {
   //}
 
-  &.left,
-  &.right {
-    margin-top: emCalc(4px);
-    margin-bottom: emCalc(4px);
+  &.left, &.right {
+    margin-top: rem-calc(4px);
+    margin-bottom: rem-calc(4px);
     display: inline-block;
     line-height: 0;
   }
 
   &.left {
-    margin-right: emCalc(10px);
+    margin-right: rem-calc(10px);
   }
 
   &.right {
-    margin-left: emCalc(10px);
+    margin-left: rem-calc(10px);
   }
 }
 
@@ -1223,7 +1178,7 @@ a.image {
 span.footnote,
 span.footnoteref {
   vertical-align: super;
-  font-size: emCalc(14px);
+  font-size: rem-calc(14px);
   a {
     text-decoration: none;
     &:active {
@@ -1233,30 +1188,29 @@ span.footnoteref {
 }
 
 #footnotes {
-  padding-top: emCalc(12px);
-  padding-bottom: emCalc(12px);
+  padding-top: rem-calc(12px);
+  padding-bottom: rem-calc(12px);
   margin-bottom: $panel-margin-bottom / 2;
   hr {
     width: 20%;
-    min-width: emCalc(100px);
-    margin: -.25em 0 .75em 0;
+    min-width: rem-calc(100px);
+    margin: -0.25rem 0 0.75rem 0;
     border-width: 1px 0 0 0;
   }
   .footnote {
-    padding: 0 emCalc(6px);
+    padding: 0 rem-calc-to-em(6px);
     line-height: 1.3;
-    font-size: emCalc(14px);
+    font-size: rem-calc-to-em(14px);
     margin-left: 1.2em;
     text-indent: -1.2em;
-    margin-bottom: .2em;
+    margin-bottom: 0.2em;
     a:first-of-type {
       font-weight: bold;
       text-decoration: none;
     }
-  }
-
-  .footnote:last-of-type {
-    margin-bottom: 0;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -1264,7 +1218,7 @@ span.footnoteref {
 #content #footnotes {
   margin-top: -$panel-margin-bottom / 2;
   margin-bottom: 0;
-  padding: emCalc(12px) 0;
+  padding: rem-calc(12px) 0;
 }
 
 // for embedded gists
@@ -1308,8 +1262,4 @@ span.footnoteref {
       background-color: scale-color(string-to-color($color), $lightness: $rainbow-bg-lightness);
     }
   }
-
-  //*:not(code) > .comment {
-  //  background: yellow;
-  //}
 }
diff --git a/sass/components/_awesome-icons.scss b/sass/components/_awesome-icons.scss
index 0840963..29dbcb6 100644
--- a/sass/components/_awesome-icons.scss
+++ b/sass/components/_awesome-icons.scss
@@ -6,7 +6,7 @@ span.icon > .fa {
 
 .admonitionblock td.icon {
   [class^="fa icon-"] {
-    font-size: 2.5em;
+    font-size: 2.5rem;
     text-shadow: $icon-text-shadow;
     cursor: default;
   }
@@ -32,7 +32,7 @@ span.icon > .fa {
     //color: scale-color(yellow, $lightness: $rainbow-lightness);
     //color: scale-color(yellow, $saturation: -15%);
     //color: $primary-color;
-    text-shadow: 1px 1px 2px rgba(155, 155, 0, .8);
+    text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8);
     color: #111;
   }
   
diff --git a/sass/components/_print.scss b/sass/components/_print.scss
index b6ee6df..75311b3 100644
--- a/sass/components/_print.scss
+++ b/sass/components/_print.scss
@@ -38,7 +38,7 @@
   }
   // QUESTION should we reduce size of lead paragraph too?
   p, blockquote, dt, td.content {
-    font-size: 1em;
+    font-size: 1rem;
     orphans: 3;
     widows: 3;
   }
@@ -116,7 +116,7 @@
   }
   #footer-text {
     color: $blockquote-cite-font-color !important;
-    font-size: 0.9em;
+    font-size: 0.9rem;
   }
   .hide-on-print { display: none !important; }
   .print-only { display: block !important; }
diff --git a/sass/fonts/_asciidoctor.scss b/sass/fonts/_asciidoctor-collection.scss
similarity index 100%
rename from sass/fonts/_asciidoctor.scss
rename to sass/fonts/_asciidoctor-collection.scss
diff --git a/sass/fonts/_glegoo.scss b/sass/fonts/_glegoo.scss
deleted file mode 100644
index fd1c23a..0000000
--- a/sass/fonts/_glegoo.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Glegoo);
diff --git a/sass/fonts/_motion-collection.scss b/sass/fonts/_motion-collection.scss
new file mode 100644
index 0000000..55f0502
--- /dev/null
+++ b/sass/fonts/_motion-collection.scss
@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic|Hind:400,700);
diff --git a/sass/fonts/_overpass.scss b/sass/fonts/_overpass.scss
deleted file mode 100644
index 86de737..0000000
--- a/sass/fonts/_overpass.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import url(http://openshift.redhat.com/app/assets-20130701203230/overpass.css);
diff --git a/sass/fonts/_lato.scss b/sass/fonts/_readthedocs-collection.scss
similarity index 50%
rename from sass/fonts/_lato.scss
rename to sass/fonts/_readthedocs-collection.scss
index aa81eca..89dedb0 100644
--- a/sass/fonts/_lato.scss
+++ b/sass/fonts/_readthedocs-collection.scss
@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
diff --git a/sass/fonts/_rocket-panda-collection.scss b/sass/fonts/_rocket-panda-collection.scss
new file mode 100644
index 0000000..a72ee84
--- /dev/null
+++ b/sass/fonts/_rocket-panda-collection.scss
@@ -0,0 +1,2 @@
+@import url(http://openshift.redhat.com/app/assets/overpass.css);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
diff --git a/sass/fonts/_noticia-text.scss b/sass/fonts/_stone-collection.scss
similarity index 62%
rename from sass/fonts/_noticia-text.scss
rename to sass/fonts/_stone-collection.scss
index 5033a27..7b9f8f2 100644
--- a/sass/fonts/_noticia-text.scss
+++ b/sass/fonts/_stone-collection.scss
@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Noticia+Text:400,400italic);
+@import url(https://fonts.googleapis.com/css?family=Noticia+Text:400,400italic|Titillium+Web:400,700);
diff --git a/sass/fonts/_titillium-web.scss b/sass/fonts/_titillium-web.scss
deleted file mode 100644
index ef619de..0000000
--- a/sass/fonts/_titillium-web.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700);
diff --git a/sass/foundation-lime.scss b/sass/foundation-lime.scss
index 1d89e53..62b8454 100644
--- a/sass/foundation-lime.scss
+++ b/sass/foundation-lime.scss
@@ -3,10 +3,6 @@
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
-#header > h1 {
-  border-bottom-style: solid;
-}
-
 #toctitle {
   color: $header-font-color;
 }
diff --git a/sass/foundation-potion.scss b/sass/foundation-potion.scss
index 07cc89a..f7949f0 100644
--- a/sass/foundation-potion.scss
+++ b/sass/foundation-potion.scss
@@ -3,10 +3,6 @@
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
-#header > h1 {
-  border-bottom-style: solid;
-}
-
 #toctitle {
   color: $header-font-color;
 }
diff --git a/sass/foundation.scss b/sass/foundation.scss
index 6df0726..c3c3a22 100644
--- a/sass/foundation.scss
+++ b/sass/foundation.scss
@@ -2,9 +2,44 @@
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
+// FIXME make preamble color a variable!
+#preamble > .sectionbody > .paragraph:first-of-type p {
+  color: $subheader-font-color;
+}
+
+.admonitionblock td.content,
+.audioblock,
+.exampleblock,
+.imageblock,
+.listingblock,
 .literalblock,
-.listingblock {
-  & pre {
-    background: $pre-bg;
+.stemblock,
+.openblock,
+.paragraph,
+.quoteblock,
+table.tableblock,
+.verseblock,
+.videoblock,
+.dlist,
+.olist,
+.ulist,
+.qlist,
+.hdlist {
+  & > .title {
+    color: $header-font-color;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: rem-calc(12px);
+  }
+}
+
+.exampleblock > .content {
+  @include panel(scale-color($primary-color, $lightness: 94%));
+  a:not(.button) {
+    color: $callout-panel-link-color;
+    &:hover,
+    &:focus {
+      color: $callout-panel-link-color-hover;
+    }
   }
 }
diff --git a/sass/golo.scss b/sass/golo.scss
index e09e636..35aa309 100644
--- a/sass/golo.scss
+++ b/sass/golo.scss
@@ -3,9 +3,14 @@
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
+#toc ul {
+  // FIXME make this a variable
+  font-family: $body-font-family;
+}
+
 #toc.toc2 ul ul {
   list-style-type: circle;
-  padding-left: emCalc(16px) * 2;
+  padding-left: $rem-base * 2;
 }
 
 .sect1 {
@@ -15,15 +20,16 @@
 
 // shift heading text slightly to left to account for font appearance
 #header h1 {
-  font-weight: bold;
-  position: relative;
-  left: emCalc(-1px);
+  margin-left: rem-calc(-1px);
 }
 
 #content {
-  h2, h3, h4, h5, #toctitle {
-    position: relative;
-    left: emCalc(-1px);
+  #{headers()} {
+    margin-left: rem-calc(-1px);
+    a.anchor:before {
+      // FIXME make this a variable or otherwise calculate
+      padding-top: 0.05em;
+    }
   }
 
   h2 {
@@ -33,7 +39,8 @@
 
 .paragraph.lead > p,
 #preamble > .sectionbody > .paragraph:first-of-type p {
-  color: black;
+  // FIXME make this a variable
+  color: rgba(0, 0, 0, 0.9);
 }
 
 // recommended pygments-style values: bw, colorful
@@ -49,3 +56,7 @@ pre.pygments.highlight {
 .pygments .tok-c {
   color: #999 !important;
 }
+
+#footer-text {
+  font-size: rem-calc(14.5px);
+}
diff --git a/sass/iconic.scss b/sass/iconic.scss
deleted file mode 100644
index 54b91f2..0000000
--- a/sass/iconic.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-/* Inspired by the O'Reilly typography and the Atlas user manual | http://oreilly.com */
-@import "fonts/lato";
-@import "settings/iconic";
-@import "components/asciidoc";
-@import "components/awesome-icons";
-@import "compass/css3/border-radius";
-
-%stretch {
-  margin-left: -($column-gutter/2);
-  margin-right: -($column-gutter/2);
-}
-
-body {
-  background: linear-gradient(270deg, #333 0, #333 100%) no-repeat 0 0 / 100% 178px;
-  background: -webkit-linear-gradient(270deg, #333 0, #333 100%) no-repeat 0 0 / 100% 178px;
-  //background: #595959 image-url('iconic/header-bg.png');
-}
-
-#header {
-  margin-bottom: 4em;
-
-  & > h1 {
-    border-bottom: none;
-    margin-bottom: -28px;
-    margin-top: 2em;
-  }
-
-  span {
-    color: $white;
-  }
-
-  #toc {
-    padding-top: 2em;
-    margin-bottom: -4em;
-  }
-}
-
-.sect1:not(:last-child) {
-  padding-bottom: 0;
-}
-
-#toc {
-  ol li {
-    ol, ul {
-      padding-left: $list-side-padding;
-    }
-  }
-}
-
-#toctitle {
-  letter-spacing: -1px;
-}
-
-#content {
-  h2, h3, h4, h5 {
-    letter-spacing: -1px;
-  }
-}
-
-dl dt {
-  font-style: italic;
-}
-
-.ulist > ul,
-.olist > ol, {
-  margin-left: 0;
-  padding-left: $list-side-padding;
-}
-
-.admonitionblock > table {
-  border: 0 solid $panel-border-color;
-  border-width: 1px 0;
-  background-color: $pale-grey;
-
-  td.icon {
-    padding-top: 15px;
-    padding-bottom: 20px;
-  }
-
-  td.content {
-    border-left: 0;
-    padding: 15px 25px 20px 15px;
-  }
-}
-
-.imageblock {
-  @extend %stretch;
-  border: 1px solid $table-border-color;
-  margin-top: emCalc(50px);
-  margin-bottom: emCalc(50px);
-  padding: 15px 15px 5px 15px;
-  & > .content {
-    text-align: center;
-  }
-  & > .title {
-    font-weight: normal;
-    font-style: italic;
-    letter-spacing: 0.5px;
-    margin-top: emCalc(6px);
-    margin-bottom: 0;
-  }
-}
-
-.literalblock,
-.listingblock {
-  @extend %stretch;
-  & pre {
-    background: $pre-bg;
-    @include border-radius($global-radius $global-radius 0 0);
-    border: 0;
-  }
-}
-
-pre .conum {
-  background: white;
-  color: $body-font-color !important;
-
-  & * {
-    color: $body-font-color !important;
-  }
-}
-
-.sidebarblock {
-  @extend %stretch;
-  border-color: $panel-border-color;
-}
-
-table.tableblock.grid-all {
-  @include radius(0);
-  border: 0;
-  border-collapse: collapse;
-
-  & > thead > tr {
-    border-bottom: 2px solid $table-border-color;
-  }
-
-  & > tbody > tr {
-    border-bottom: 1px solid $table-border-color;
-  }
-}
-
-#footer {
-  border-top: 1px dashed $table-border-color;
-}
diff --git a/sass/maker.scss b/sass/maker.scss
deleted file mode 100644
index d08e7eb..0000000
--- a/sass/maker.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@import "fonts/glegoo";
-@import "settings/maker";
-@import "components/asciidoc";
-@import "components/awesome-icons";
-@import "compass/css3/border-radius";
-
-body {
-  background-image: image-url('maker/body-bg.png');
-  padding-bottom: 5em;
-}
-
-#header,
-#content {
-  background-color: #fff;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, .15));
-}
-
-#content {
-  @include border-radius(0 0 6px 6px);
-}
-
-#header {
-  @include border-radius(6px 6px 0 0);
-  margin-top: 2em;
-  margin-bottom: 0;
-  padding-bottom: $panel-margin-bottom / 2;
-}
-
-#footer-text {
-  text-align: center;
-}
-
-#toc {
-  margin-top: 2em;
-}
-
-#toctitle {
-  color: $header-font-color;
-}
-
-.imageblock {
-  & > .content {
-    text-align: center;
-  }
-
-  & > .title {
-    text-align: center;
-    font-style: italic;
-    font-weight: normal;
-    color: $body-font-color;
-  }
-}
diff --git a/sass/motion.scss b/sass/motion.scss
new file mode 100644
index 0000000..386c206
--- /dev/null
+++ b/sass/motion.scss
@@ -0,0 +1,58 @@
+@import "fonts/motion-collection";
+@import "settings/motion";
+@import "components/asciidoc";
+@import "components/awesome-icons";
+
+p, blockquote, dt, td.content {
+  font-size: rem-calc(17px);
+}
+
+.paragraph.lead > p,
+#preamble > .sectionbody > .paragraph:first-of-type p {
+  color: $body-font-color;
+}
+
+.sect2 > h3 {
+  text-decoration: underline;
+}
+
+#toctitle {
+  color: $header-font-color;
+}
+
+#toc > ul {
+  a {
+    color: $body-font-color;
+    &:hover {
+      color: $anchor-font-color;
+    }
+  }
+}
+
+#toc ul.sectlevel1 > li {
+  margin-bottom: 1em;
+  & > a {
+    font-weight: bold;
+  }
+}
+
+.admonitionblock {
+  margin-bottom: 1.25rem;
+  padding: 0.5rem 0;
+  background-color: #f1f1f1;
+  & > table {
+    margin: 0;
+    td.content {
+      padding-left: 0;
+      border-left: none;
+    }
+  }
+}
+
+.literalblock,
+.listingblock {
+  pre, pre[class] {
+    // FIXME asciidoc component should support multiple border widths
+    border-width: 0 0 0 6px;
+  }
+}
diff --git a/sass/readthedocs.scss b/sass/readthedocs.scss
index 1e765fb..0b07332 100644
--- a/sass/readthedocs.scss
+++ b/sass/readthedocs.scss
@@ -1,67 +1,136 @@
+@import "fonts/readthedocs-collection";
 @import "settings/readthedocs";
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
-h4 {
-  color: $subheader-font-color;
+#header, #content, #footnotes, #footer {
+  background-color: #fcfcfc;
+  padding-left: rem-calc(50px);
+  padding-right: rem-calc(50px);
+  margin-top: 0;
+  margin-bottom: 0;
+  body.toc2 & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+#content {
+  padding-top: rem-calc(20px);
+
+  #{headers()} {
+    a.anchor:before {
+      font-size: 0.8em;
+      padding-top: 0.05em;
+    }
+  }
+}
+
+#toc {
+  ul {
+    font-family: $body-font-family;
+  }
+  &.toc2 {
+    background-color: #353131;
+    border-right: none;
+    line-height: 2em;
+    #toctitle {
+      font-size: 1.25rem !important;
+    }
+    a {
+      color: #b3b3b3;
+    }
+  }
+}
+
+#header #toc {
+  padding-top: rem-calc(20px);
+  padding-bottom: 0;
 }
 
-// TODO make pre-radius configurable
-.literalblock,
-.listingblock {
-  & > .content > pre {
-    @include radius(6px);
-    margin-left: 2em;
-    margin-right: 2em;
+.sect1 {
+  padding-bottom: 0;
+  @media #{$small} {
+    padding-bottom: 0;
   }
 }
 
 .admonitionblock {
-  margin-left: 2em;
-  margin-right: 2em;
+  border-top-width: 2rem;
+  border-top-style: solid;
+  margin-bottom: $panel-margin-bottom;
   & > table {
-    border: 1px solid #609060;
-    border-top-width: 1.5em;
-    background-color: #e9ffe9;
-    border-collapse: separate;
-    @include radius(0);
-    td.icon {
-      padding-top: .5em;
-      padding-bottom: .5em;
+    &:before {
+      color: #fff;
+      content: "!! Note";
+      float: left;
+      font-weight: bold;
+      padding-left: 0.75rem;
+      margin-top: -1.5rem;
     }
-    td.content {
-      padding: .5em 1em;
-      color: $body-font-color;
-      font-size: .9em;
-      border-left: none;
+    margin: 0;
+    td {
+      font-size: inherit;
+      &.icon {
+        display: none;
+      }
+      &.content {
+        border-left: none;
+        color: $body-font-color;
+        line-height: $paragraph-line-height;
+        padding: 0.75rem;
+      }
     }
   }
-}
 
-.sidebarblock {
-  background-color: #e8ecef;
-  border-color: #ccc;
+  &.caution {
+    border-top-color: #f0b37e;
+    background-color: #ffedcc;
+  }
+
+  &.important {
+    border-top-color: #f29f97;
+    background-color: #fdf3f2;
+  }
+
+  &.note {
+    border-top-color: #6ab0de;
+    background-color: #e7f2fa;
+  }
 
-  & > .content > .title {
-    color: $primary-color;
+  &.tip {
+    border-top-color: #1abc9c;
+    background-color: #dbfaf4;
   }
+
+  &.warning {
+    border-top-color: #f0b37e;
+    background-color: #ffedcc;
+  }
+}
+
+#content #toc,
+.sidebarblock,
+.exampleblock > .content {
+  border: none;
 }
 
-table.tableblock.grid-all {
-  border-collapse: collapse;
-  @include radius(0);
-  th.tableblock, td.tableblock {
-    border-bottom: 1px solid #aaa;
+.listingblock,
+.literalblock {
+  pre {
+    font-size: rem-calc(12px) !important;
   }
 }
 
+.conum[data-value] {
+  font-weight: normal;
+}
+
 #footer {
-  background-color: #465158;
-  padding: 2em;
+  padding-top: rem-calc(8px);
 }
 
 #footer-text {
-  color: #eee;
-  font-size: 0.8em;
-  text-align: center;
+  border-top: $hr-border-width $hr-border-style $hr-border-color;
+  padding-top: rem-calc(24px);
 }
diff --git a/sass/rocket-panda.scss b/sass/rocket-panda.scss
index 02e6b74..afa0d2f 100644
--- a/sass/rocket-panda.scss
+++ b/sass/rocket-panda.scss
@@ -1,25 +1,39 @@
-@import "fonts/overpass";
+@import "fonts/rocket-panda-collection";
 @import "settings/rocket-panda";
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
-#header, #content, #footnotes {
-  background: white;
-  padding-left: 2.5em;
-  padding-right: 2.5em;
-}
+//#header, #content, #footnotes, #footer {
+//  background-color: #fff;
+//  margin: 0;
+//}
 
 #header {
-  margin-bottom: 0;
-  & > h1 {
+  .details {
     border-bottom: none;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
-.literalblock,
-.listingblock {
-  & pre {
-    background: $pre-bg;
+#toc {
+  ul {
+    font-family: $body-font-family;
+  }
+  &.toc2 {
+    //background-color: #eee;
+    border-right: none;
+    box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
+  }
+}
+
+#content {
+  margin-top: 0;
+  padding-top: 2.5rem;
+  #{headers()} {
+    a.anchor:before {
+      padding-top: 0.05em;
+    }
   }
 }
 
@@ -29,14 +43,17 @@
 
 .sect1 {
   padding-bottom: 0;
+  @media #{$small} {
+    padding-bottom: 0;
+  }
 }
 
-ol > li p,
-ul > li p,
-ul dd,
-ol dd,
-.olist .olist, 
-.ulist .olist,
-.olist .ulist {
-  margin-bottom: $paragraph-margin-bottom / 4;
-}
+//ol > li p,
+//ul > li p,
+//ul dd,
+//ol dd,
+//.olist .olist, 
+//.ulist .olist,
+//.olist .ulist {
+//  margin-bottom: $paragraph-margin-bottom / 4;
+//}
diff --git a/sass/rubygems.scss b/sass/rubygems.scss
deleted file mode 100644
index a59bc88..0000000
--- a/sass/rubygems.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "settings/rubygems";
-@import "components/asciidoc";
-@import "components/awesome-icons";
-
-.literalblock,
-.listingblock {
-  & pre {
-    background: $pre-bg;
-  }
-}
diff --git a/sass/settings/_asciidoctor.scss b/sass/settings/_asciidoctor.scss
index 40330d0..ac46a0d 100644
--- a/sass/settings/_asciidoctor.scss
+++ b/sass/settings/_asciidoctor.scss
@@ -16,21 +16,26 @@
 // #d8d8d8 - lighter gray
 // #efefed - very light gray
 
-// Body (IMPORTANT $body-* variables must be defined above the defaults import)
+// IMPORTANT: $body-* variables must be defined above the defaults import
 
-$body-bg: white;
-$body-font-color: rgba(0,0,0,0.8);
+// Body
+
+$body-font-color: rgba(0, 0, 0, 0.8);
 $body-font-family: "Noto Serif", "DejaVu Serif", serif;
+// TIP: set $base-font-size & $rem-base to scale all font sizes proprotionally
+//$base-font-size: 17px;
+//$rem-base: $base-font-size;
 
 @import "defaults";
 
-// Default Overrides
+// General
 
 $primary-color: darken(#2561ba, 5%);
-$alert-color: lighten(#3a120c, 15%); // $code-color is 15% darker than $alert-color, so we lighten here by 15%
+// NOTE $code-color is 15% darker than $alert-color, so we lighten here by 15%
+$alert-color: lighten(#3a120c, 15%);
 $global-radius: 4px;
 $panel-bg: #f8f8f7;
-$panel-font-color: rgba(0,0,0,0.75);
+$panel-font-color: rgba(0, 0, 0, 0.75);
 
 // Headings
 
@@ -39,11 +44,12 @@ $header-font-weight: 300;
 $header-font-color: #ba3925;
 $header-line-height: 1.2;
 $header-top-margin: 1em;
+$header-bottom-margin: 0.5em;
 $header-word-spacing: -0.05em;
-$title-font-color: rgba(0,0,0,0.85);
+$title-font-color: rgba(0, 0, 0, 0.85);
 $title-font-weight: $header-font-weight;
 $subheader-font-family: $body-font-family;
-$subheader-font-size: 1rem;
+$subheader-font-size: rem-calc(16px);
 $subheader-font-color: darken($header-font-color, 15%); // resolves to #7a2518
 $subheader-font-weight: normal;
 $subheader-font-style: italic;
@@ -57,20 +63,18 @@ $sect-divider-color: #efefed;
 $hr-border-color: #ddddd8;
 
 // Paragraphs
-// FIXME doesn't support rem math
-//$paragraph-font-size: 1.0625rem; // result of emCalc(17px) converted to rem (18px is 1.125em)
+// NOTE doesn't hit all key elements, so we'll apply it manually
+//$paragraph-font-size: rem-calc(17px);
 
 // Inline Code
 
 $code-font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
-// NOTE will need to adjust code-font-size if we bump p font-size to 1.125em
-//$code-font-size: 0.95em;
-$code-font-size: emCalc(15px);
+$code-font-size: rem-calc-to-em(15px);
 $code-font-weight: normal;
 // FIXME don't forget about code in a table cell
 $code-line-height: 1.45;
-$code-color: rgba(0,0,0,0.9);
-$code-bg-color: #f7f7f8;
+$code-color: rgba(0, 0, 0, 0.9);
+$code-background-color: #f7f7f8;
 $code-padding: 0.1em 0.5ex;
 $code-word-spacing: -0.15em;
 $code-text-rendering: optimizeSpeed;
@@ -79,33 +83,38 @@ $code-text-rendering: optimizeSpeed;
 // *Recommended highlight.js themes: magula, default, docco
 
 $pre-font-family: "Droid Sans Mono", "DejaVu Sans Mono", "Monospace", monospace;
-$pre-font-color: rgba(0,0,0,0.9);
+$pre-font-color: rgba(0, 0, 0, 0.9);
 $pre-border-size: null;
 $pre-bg: #f7f7f8;
-$pre-padding: emCalc(16px);
+$pre-padding: 1em;
 $pre-line-height: 1.45;
 
 // Links
 
 $anchor-text-decoration: underline;
+$anchor-text-decoration-hover: underline;
 
 // Lists
 
-$list-side-margin: emCalc(24px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+//$definition-list-margin-bottom: rem-calc(20px);
+$definition-list-margin-bottom: rem-calc(16px);
 
 // Blockquotes
 
 $blockquote-font-color: $title-font-color;
-$blockquote-cite-font-color: rgba(0,0,0,0.6);
-$blockquote-cite-font-size: emCalc(15px);
+$blockquote-cite-font-color: rgba(0, 0, 0, 0.6);
+$blockquote-cite-font-size: rem-calc(15px);
 
 // Tables
 
-$table-head-font-size: inherit;
-$table-row-font-size: inherit;
+$table-border-color: #dedede;
 $table-line-height: 1.6;
+$table-head-font-size: inherit;
 $table-head-bg: #f7f8f7;
+$table-head-padding: rem-calc(6px 10px);
+$table-row-font-size: inherit;
 $table-even-row-bg: #f8f8f7;
-$table-border-color: #dedede;
diff --git a/sass/settings/_colony.scss b/sass/settings/_colony.scss
deleted file mode 100644
index 930f95b..0000000
--- a/sass/settings/_colony.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import "defaults";
-
-// Settings
-
-$primary-color: #00579e;
-$global-radius: 0;
-$em-base: 16px;
-
-// Body
-
-$base-font-size: 14px;
-$body-font-color: black;
-//$body-font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
-$column-gutter: emCalc(48px);
-
-// Headers
-
-$title-font-color: #7B2D00;
-$title-font-weight: normal;
-$header-font-family: Arial, sans-serif;
-$header-font-color: $title-font-color;
-$header-font-weight: normal;
-$header-top-margin: .5em;
-$subheader-font-color: darken($primary-color, 10%);
-$sect-divider-size: 0;
-
-// Footer
-
-$footer-bg: none;
-$footer-font-color: $body-font-color;
-
-// Block Quotes
-
-$blockquote-font-color: #333;
-
-// Links
-
-$anchor-font-color-hover: #333;
-$anchor-text-decoration-hover: underline;
-
-// Lists
-
-$list-side-margin: emCalc(24px);
-
-// Inline Code
-
-$code-color: #003426;
-$code-font-weight: bold;
-$code-padding: 3px 2px 1px 2px;
-$code-border-size: 1px;
-$code-bg-color: #eee;
-
-// Code Blocks
-
-$pre-bg: #eee;
-$pre-font-color: black;
-$pre-font-size: .9em;
-$pre-border-color: #666;
-$pre-border-style: dashed;
-$pre-padding: emCalc(20px) emCalc(25px) emCalc(18px) emCalc(25px);
-
-// Panels
-
-$panel-bg: #fff;
-$panel-border-color: #aaa;
-
-// Paragraphs
-
-$paragraph-font-family: Arial, sans-serif;
-$paragraph-margin-bottom: emCalc(12px);
-
-// Tables
-
-$table-border-color: #d8d8ce;
-$table-head-bg: -webkit-linear-gradient(top, #add386, #90b66a);
-$table-even-row-bg: #edf2f2;
-$table-head-font-color: #fff;
-$table-head-font-size: inherit;
-$table-row-font-size: inherit;
-$table-row-font-color: #6d6e71;
-$table-line-height: 1.4;
diff --git a/sass/settings/_defaults.scss b/sass/settings/_defaults.scss
index b35b4fb..8ccf1a2 100644
--- a/sass/settings/_defaults.scss
+++ b/sass/settings/_defaults.scss
@@ -1,9 +1,15 @@
-// TIP set a value to null to disable
+// TIP: See bower_components/foundation/scss/foundation/_settings.scss for variables and default values
+// TIP: Set a value to null to disable; however, this it won't unset a variable already defined
 @import "normalize";
-$cursor-default-value: auto !default;
+// NOTE: $base-line-height must be set before global components are imported
+$base-line-height: 1 !default;
 @import "foundation/components/global";
 @import "compass/css3/box-shadow";
 
+@function rem-calc-to-em($values) {
+  @return strip-unit(rem-calc($values)) * 1em;
+}
+
 // better defaults (TODO maybe do these at the bottom of the theme colors)
 //$table-line-height: 1.6 !default;
 //$table-head-font-size: inherit !default;
@@ -32,11 +38,9 @@ $sidebar-header-border-size: 0 !default;
 $sidebar-header-border-color: #ddd !default;
 $sidebar-header-align: null !default;
 
-$anchor-text-decoration-hover: null !default;
-
 $code-font-size: inherit !default;
 $code-line-height: inherit !default;
-$code-bg-color: inherit !default;
+$code-background-color: initial !default;
 $code-border-color: #ddd !default;
 $code-border-style: solid !default;
 $code-border-size: 0 !default;
@@ -44,25 +48,26 @@ $code-padding: 0 !default;
 $code-word-spacing: 0 !default;
 $code-text-rendering: inherit !default;
 
-$pre-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
-$pre-font-size: emCalc($em-base) !default;
+$pre-font-family: Consolas, "Liberation Mono", Courier, monospace !default;
+$pre-font-size: rem-calc($rem-base) !default;
 $pre-font-color: inherit !default;
 $pre-border-size: 1px !default;
 $pre-border-style: solid !default;
 $pre-border-color: #ddd !default;
 $pre-bg: none !default;
 // smaller padding bottom needed if using Cousine / Liberation Sans font
-//$pre-padding: emCalc(12px) emCalc(12px) emCalc(8px) emCalc(12px) !default;
-$pre-padding: emCalc(12px) !default;
+//$pre-padding: rem-calc(12px 12px 8px 12px) !default;
+$pre-padding: rem-calc(12px) !default;
 $pre-line-height: 1.6 !default;
 
+$stretch-footer: true !default;
 // fallback values set in components/asciidoc
 //$footer-bg: $body-font-color !default;
 //$footer-font-color: invert($body-font-color) !default;
 
-$icon-text-shadow: 1px 1px 2px rgba(0, 0, 0, .5) !default;
+$icon-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !default;
 
-$definition-list-content-margin-left: emCalc(18px) !default;
+$definition-list-content-margin-left: rem-calc(18px) !default;
 
 $blockquote-border-color: #ddd !default;
 
@@ -79,11 +84,7 @@ $include-html-inline-list-classes: false;
 $include-print-styles: false;
 
 // cut down on number of vendor prefixes used
-$experimental-support-for-khtml: false;
-$experimental-support-for-microsoft: false;
-$experimental-support-for-mozilla: false;
-$experimental-support-for-opera: false;
-$experimental-support-for-webkit: true;
+$box-shadow-support-threshold: 0.2;
 
 // bg-noise from https://gist.github.com/aaronrussell/856571 by Aaron Russell
 $bg-noise-default-intensity: 0.5 !default;
diff --git a/sass/settings/_foundation-lime.scss b/sass/settings/_foundation-lime.scss
index a864997..443c659 100644
--- a/sass/settings/_foundation-lime.scss
+++ b/sass/settings/_foundation-lime.scss
@@ -24,7 +24,7 @@ $blockquote-border: 1px solid #efefef;
 $code-color: darken($alert-color, 15%);
 
 $pre-bg: #efefef;
-$pre-padding: emCalc(12px) emCalc(12px) emCalc(10px) emCalc(12px);
+$pre-padding: rem-calc(12px);
 
 $table-head-font-color: $header-font-color;
 $table-head-font-weight: normal;
@@ -32,5 +32,3 @@ $table-row-font-color: $body-font-color;
 
 $footer-bg: #272727;
 $footer-font-color: #bcbcbc;
-//$footer-anchor-font-color: $footer-font-color;
-//$footer-anchor-font-color-hover: darken($footer-anchor-font-color, 5%);
diff --git a/sass/settings/_foundation-potion.scss b/sass/settings/_foundation-potion.scss
index 1098802..b7e4f71 100644
--- a/sass/settings/_foundation-potion.scss
+++ b/sass/settings/_foundation-potion.scss
@@ -25,7 +25,7 @@ $blockquote-border: 1px solid #efefef;
 $code-color: darken($alert-color, 15%);
 
 $pre-bg: #efefef;
-$pre-padding: emCalc(12px) emCalc(12px) emCalc(10px) emCalc(12px);
+$pre-padding: rem-calc(12px);
 
 $table-head-font-color: $header-font-color;
 $table-head-font-weight: normal;
@@ -33,5 +33,3 @@ $table-row-font-color: $body-font-color;
 
 $footer-bg: #272727;
 $footer-font-color: #bcbcbc;
-//$footer-anchor-font-color: $footer-font-color;
-//$footer-anchor-font-color-hover: darken($footer-anchor-font-color, 5%);
diff --git a/sass/settings/_foundation.scss b/sass/settings/_foundation.scss
index 3deed83..9a20633 100644
--- a/sass/settings/_foundation.scss
+++ b/sass/settings/_foundation.scss
@@ -1,19 +1,21 @@
-@import "defaults";
+// TODO
+// - make exampleblock match the callout panel colors
 
+// IMPORTANT: $body-* variables must be defined above the defaults import
 // Body
 
-$em-base: 16px;
-//$primary-color: #005498;
-//$alert-color: lighten(#6d180b, 15%);
+@import "defaults";
+
+// Default overrides
+
 $global-radius: 0;
 
 // Headings
 
-//$header-font-family: "Lucida Grande", Georgia, Verdana, "Helvetica", Helvetica, Arial, sans-serif;
-//$header-font-weight: normal;
-//$header-font-color: #BA3925;
-$header-top-margin: 1em;
-//$subheader-font-color: darken($header-font-color, 15%);
+$title-font-color: $jet;
+$title-font-weight: normal;
+$header-top-margin: 0.75em;
+$header-bottom-margin: 0.5rem;
 $sect-divider-size: 1px;
 $sect-divider-style: solid;
 $sect-divider-color: #ddd;
@@ -24,33 +26,32 @@ $sect-divider-color: #ddd;
 
 // Code Blocks
 // *Recommended highlight.js themes: foundation
-
-$pre-font-size: .9em;
-$pre-font-family: monospace, serif;
-$pre-bg: #eee;
+// FIXME we have to work to restore defaults here
+$code-color: $oil;
+//$code-color: $primary-color;
+$code-background-color: scale-color($secondary-color, $lightness: 70%);
+$code-border-size: 1px;
+$code-border-color: scale-color($code-background-color, $lightness: -10%);
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// FIXME needs some work
+//$pre-font-size: 0.9em;
+$pre-font-color: #333;
+$pre-bg: #fafafa;
 $pre-line-height: 1.4;
 $pre-border-size: 1px;
-$pre-border-color: #ccc;
+$pre-border-color: #dfdfdf;
 $pre-border-style: solid;
-$pre-font-color: black;
-$pre-padding: .8em .8em .65em .8em;
+$pre-padding: rem-calc(12px);
 
 // Links
 
-//$anchor-text-decoration: underline;
-
 // Lists
-$list-side-margin: emCalc(24px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
-// FIXME need to account for nested definition list
-//$definition-list-content-margin-left: 0;
-
-// Blockquotes
-
-//$blockquote-font-color: lighten($body-font-color, 30%);
-//$blockquote-cite-font-size: inherit;
-//$blockquote-cite-font-color: darken($blockquote-font-color, 10%);
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc-to-em(4px);
+$definition-list-margin-bottom: rem-calc(20px);
 
 // Tables
 
diff --git a/sass/settings/_github.scss b/sass/settings/_github.scss
index 44f6569..7a1af23 100644
--- a/sass/settings/_github.scss
+++ b/sass/settings/_github.scss
@@ -1,17 +1,17 @@
+// Body
+
+$body-font-color: #333;
+$body-font-family: helvetica, arial, freesans, clean, sans-serif;
 $base-font-size: 15px;
+$rem-base: $base-font-size;
+
 @import "defaults";
 
-// Settings
+// General
 
-$em-base: $base-font-size;
 $primary-color: #4183C4;
 $global-radius: 3px;
 
-// Body
-
-$body-font-color: #333;
-$body-font-family: helvetica, arial, freesans, clean, sans-serif;
-
 // Headers
 
 $title-font-color: $body-font-color;
@@ -19,15 +19,19 @@ $title-font-weight: 300;
 $header-font-family: $body-font-family;
 $header-font-color: $body-font-color;
 $header-font-weight: bold;
+$header-top-margin: 0.2em;
+$header-bottom-margin: 0.5rem;
 $sect-divider-size: 0;
 $subheader-font-color: #777;
+$subheader-top-margin: $header-top-margin;
+$subheader-bottom-margin: $header-bottom-margin;
 
-$h1-font-size: emCalc(30px);
-$h2-font-size: emCalc(24px);
-$h3-font-size: emCalc(18px);
-$h4-font-size: 1em;
-$h5-font-size: 1em;
-$h6-font-size: 1em;
+$h1-font-size: rem-calc(30px);
+$h2-font-size: rem-calc(24px);
+$h3-font-size: rem-calc(18px);
+$h4-font-size: rem-calc(16px);
+$h5-font-size: rem-calc(16px);
+$h6-font-size: rem-calc(16px);
 
 // Footer
 
@@ -48,9 +52,11 @@ $sidebar-header-border-color: #cacaca;
 
 // Lists
 
-$list-side-margin: emCalc(10.5px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
+$list-side-margin: rem-calc(10.5px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+$definition-list-margin-bottom: rem-calc(20px);
 
 // Links
 
@@ -60,22 +66,21 @@ $anchor-text-decoration-hover: underline;
 // Inline Code
 
 $code-font-family: Monaco, 'DejaVu Sans Mono', 'Courier New', monospace;
-$code-font-size: emCalc(13px);
+$code-font-size: rem-calc(13px);
 $code-color: #666;
 $code-font-weight: normal;
 $code-padding: 1px 5px 1px 5px;
 $code-border-size: 1px;
-$code-bg-color: transparent;
 
 // Code Blocks
 
 $pre-bg: #333;
 $pre-font-color: white;
-$pre-font-size: emCalc(13px);
+$pre-font-size: rem-calc(13px);
 $pre-border-color: #ddd;
 $pre-border-style: solid;
 $pre-border-size: 2px;
-$pre-padding: emCalc(10px);
+$pre-padding: rem-calc(10px);
 
 // Panels
 
@@ -85,10 +90,10 @@ $panel-border-color: #eaeaea;
 // Paragraphs
 
 $paragraph-font-family: $body-font-family;
-$paragraph-margin-bottom: emCalc(15px);
+$paragraph-margin-bottom: rem-calc(15px);
 $paragraph-line-height: 1.4;
 
 // Tables
 
 $table-line-height: 1.4;
-$table-row-font-size: emCalc(12px);
+$table-row-font-size: rem-calc(12px);
diff --git a/sass/settings/_golo.scss b/sass/settings/_golo.scss
index 02e5704..fc360c9 100644
--- a/sass/settings/_golo.scss
+++ b/sass/settings/_golo.scss
@@ -1,66 +1,103 @@
-$body-bg: #fefdfd; // rgba(139,88,52,0.01);
-$body-font-color: rgba(0,0,0,0.8);
-$body-font-family: "Open Sans", sans-serif;
+// IMPORTANT: $body-* variables must be defined above the defaults import
+
+// Body
+
+$body-bg: #fefdfd;
+$body-font-color: rgba(0, 0, 0, 0.8);
+$body-font-family: "Open Sans", "DejaVu Sans", sans-serif;
 
 @import "defaults";
 
+// Default Overrides
+
 $primary-color: #005580;
-// $code-color is 15% darker than $alert-color, so we lighten here by 15%
-//$alert-color: lighten(rgb(56,36,10), 15%);
-$alert-color: lighten(rgb(51,29,0), 15%);
+// NOTE $code-color is 15% darker than $alert-color, so we lighten here by 15%
+$alert-color: lighten(rgb(51, 29, 0), 15%);
 $global-radius: 6px;
 $panel-bg: #f2f2f4;
 
-$header-font-family: "Varela Round", sans-serif;
+// Headings
+
+$h1-font-size: rem-calc(38px);
+$h2-font-size: rem-calc(31px);
+$h3-font-size: rem-calc(25px);
+$h4-font-size: rem-calc(20px);
+$h4-font-size: rem-calc(18.5px);
+$h5-font-size: rem-calc(17px);
+$h6-font-size: 1rem;
+$header-font-family: "Varela Round", "DejaVu Sans", sans-serif;
 $header-font-weight: 400;
-$header-font-color: rgb(0,50,107);
+$header-font-color: rgb(0, 50, 107);
 $header-line-height: 1.25;
 $header-top-margin: 0.8em;
-$subheader-font-color: rgb(0,44,94);
+$header-bottom-margin: 0.4em;
+$title-font-color: rgb(112, 63, 28);
+$title-font-weight: bold;
+$subheader-font-color: rgb(0, 44, 94);
 $subheader-line-height: $header-line-height;
-// TODO
+$subheader-top-margin: 0;
+//$subheader-margin-bottom: 0.5rem;
+// TODO fix subheader font metrics
 //$subheader-letter-spacing: -0.03em;
-
-$title-font-color: rgb(112,63,28);
-$title-font-weight: $header-font-weight;
-$hr-border-color: rgba(145,135,84,0.15);
-$sect-divider-size: 0px;
+$hr-border-color: rgba(145, 135, 84, 0.15);
+$sect-divider-size: 0;
 //$sect-divider-style: solid;
 //$sect-divider-color: $hr-border-color;
 
+// Paragraphs
+
 $paragraph-line-height: 1.5;
 
-$code-font-family: "Ubuntu Mono", "Inconsolata", monospace;
-//$code-font-size: 0.9em;
-//$code-line-height: 1.5;
-$code-font-size: emCalc(17px);
+// Inline Code
+
+$code-font-family: "Ubuntu Mono", "DejaVu Sans Mono", monospace;
+//$code-font-color: rgba(0, 0, 0, 0.9);
+$code-font-size: rem-calc-to-em(17px);
 $code-line-height: 1.25;
 $code-font-weight: 400;
 
-$blockquote-font-color: #999;
-$blockquote-cite-font-color: #666;
+// Code Blocks
 
 $pre-font-family: "Liberation Mono", "Consolas", monospace;
+//$pre-font-color: rgba(0, 0, 0, 0.9);
 $pre-border-size: 1px;
-$pre-border-color: rgba(16,195,196,0.125);
-$pre-bg: rgba(16,195,196,.05);
+$pre-border-color: rgba(16, 195, 196, 0.125);
+$pre-bg: rgba(16, 195, 196, 0.05);
 $pre-padding: 1em;
 $pre-line-height: 1.4;
-//$pre-font-color: black;
+
+// Links
 
 $anchor-text-decoration: underline;
+$anchor-text-decoration-hover: underline;
 $anchor-font-color-hover: #078d71;
 
-$list-side-margin: emCalc(24px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
+// Lists
+
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+$definition-list-margin-bottom: rem-calc(16px);
 
+// Blockquotes
+
+// FIXME font color too light
+$blockquote-font-color: #999;
+$blockquote-cite-font-color: #666;
+$blockquote-cite-font-size: rem-calc(15px);
+
+// Tables
+
+$table-border-color: $hr-border-color;
+$table-line-height: 1.5;
 $table-head-font-size: inherit;
+$table-head-bg: rgba(119, 84, 22, 0.1);
+$table-head-padding: rem-calc(6px 10px);
 $table-row-font-size: inherit;
-$table-line-height: 1.5;
-$table-head-bg: rgba(119,84,22,0.1);
-$table-even-row-bg: rgba(119,84,22,0.025);
-$table-border-color: $hr-border-color;
+$table-even-row-bg: rgba(119, 84, 22, 0.025);
+
+// Footer
 
-$footer-bg: rgb(11,68,90);
+$footer-bg: rgb(11, 68, 90);
 $footer-font-color: $body-bg;
diff --git a/sass/settings/_iconic.scss b/sass/settings/_iconic.scss
deleted file mode 100644
index dc55438..0000000
--- a/sass/settings/_iconic.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@import "defaults";
-
-// TODO
-// - colored admonition borders by type
-
-$print-black: #191919;
-$light-grey: #bfbfbf;
-$medium-grey: #ededed;
-$pale-grey: #f7f7f7;
-$blue: #1F3C99;
-$white: #fff;
-
-// Body
-
-$em-base: 16px;
-$body-bg: $white;
-$body-font-color: $print-black;
-$body-font-family: Georgia, 'Times New Roman', serif; 
-$primary-color: $blue;
-$global-radius: 5px;
-
-// Headings
-
-$header-font-family: Lato, sans-serif;
-$header-font-color: $body-font-color;
-$header-top-margin: 1.25em;
-$header-bottom-margin: 0.45em;
-$title-font-color: $white;
-$subheader-font-color: $body-font-color;
-$h1-font-size: emCalc(38px);
-$h2-font-size: emCalc(26px);
-$h3-font-size: emCalc(23px);
-$h4-font-size: emCalc(17px);
-$sect-divider-size: 0;
-
-// Lists
-
-$list-side-margin: 0;
-$list-side-padding: 40px;
-$definition-list-header-weight: normal;
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
-$definition-list-content-margin-left: emCalc(40px);
-
-// Paragraphs
-
-$paragraph-line-height: 1.4;
-
-// Inline code
-
-$code-color: $body-font-color;
-$code-font-size: .9em;
-$code-font-family: Consolas, "Monaco", 'Liberation Mono', Courier, monospace;
-$code-font-weight: normal;
-
-// Code blocks
-
-$pre-bg: #333;
-$pre-font-size: $code-font-size;
-$pre-font-family: Consolas, Monaco, "Lucida Console", Courier, monospace;
-$pre-font-color: $white;
-$pre-padding: emCalc(17px);
-
-// Panels
-
-$panel-bg: $medium-grey;
-$panel-border-color: $light-grey;
-$panel-font-color: $body-font-color;
-$sidebar-header-border-color: $light-grey;
-$sidebar-header-border-size: 0 0 1px 0;
-
-// Blockquotes
-
-$blockquote-font-color: $body-font-color;
-
-// Tables
-
-$table-even-row-bg: #f0f0f0;
-$table-head-font-size: inherit;
-$table-row-font-size: inherit;
-$table-line-height: $paragraph-line-height;
-$table-border-color: #d8d8d8;
-$table-head-bg: none;
-$table-head-font-color: $body-font-color;
-$table-head-font-weight: normal;
-$table-head-padding: emCalc(4px);
-$table-row-font-color: $body-font-color;
-$table-row-padding: emCalc(5px);
-
-// Footer
-
-$footer-bg: $white;
-$footer-font-color: #333;
diff --git a/sass/settings/_maker.scss b/sass/settings/_maker.scss
deleted file mode 100644
index 63e5ca8..0000000
--- a/sass/settings/_maker.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "defaults";
-
-// Settings
-
-$primary-color: #cd2e29;
-$global-radius: 3px;
-$em-base: 16px;
-
-// Body
-
-$body-bg: #eee;
-$base-font-size: 14px;
-$body-font-color: black;
-$body-font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
-$column-gutter: emCalc(48px);
-
-// Headers
-
-$title-font-weight: 400;
-$header-font-family: "Glegoo", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$header-font-color: #555;
-$header-font-weight: 400;
-$header-line-height: 1.8;
-$header-top-margin: .5em;
-$subheader-font-color: darken($primary-color, 10%);
-$sect-divider-color: #eee;
-$sect-divider-size: 0; // yes or no?
-
-// Footer
-
-$footer-bg: none;
-$footer-font-color: $body-font-color;
-
-// Block Quotes
-
-$blockquote-font-color: $header-font-color;
-
-// Links
-
-$anchor-font-color-hover: $primary-color;
-$anchor-text-decoration-hover: underline;
-
-// Inline Code
-
-$code-color: $body-font-color;
-$code-font-weight: bold;
-
-// Code Blocks
-
-$pre-bg: #f8f8f8;
-$pre-font-color: #333;
-$pre-border-color: #ccc;
-$pre-padding: emCalc(12px) emCalc(12px) emCalc(10px) emCalc(12px);
-
-// Panels
-
-$panel-bg: #f5f5f5;
-$panel-border-color: #e3e3e3;
-
-// Paragraphs
-
-$paragraph-margin-bottom: emCalc(12px);
-
-// Tables
-
-$table-head-font-size: inherit;
-$table-row-font-size: inherit;
-$table-line-height: 1.4;
diff --git a/sass/settings/_motion.scss b/sass/settings/_motion.scss
new file mode 100644
index 0000000..6b98640
--- /dev/null
+++ b/sass/settings/_motion.scss
@@ -0,0 +1,42 @@
+$body-font-color: #777;
+$body-font-family: "Source Sans Pro", sans-serif;
+
+@import "defaults";
+
+$global-radius: 0;
+$primary-color: #ea3348;
+$panel-bg: #f1f1f1;
+
+$h1-font-size: rem-calc(42px);
+$h2-font-size: rem-calc(36px);
+$h3-font-size: rem-calc(22px);
+$h4-font-size: rem-calc(18px);
+$h5-font-size: rem-calc(16px);
+$h6-font-size: rem-calc(16px);
+
+$header-font-family: "Hind", sans-serif;
+$header-font-weight: 700;
+$header-font-color: #262626;
+$header-line-height: 1.3;
+$header-top-margin: 1em;
+$header-bottom-margin: 0.75em;
+
+$anchor-font-color: $primary-color;
+$anchor-font-color-hover: $anchor-font-color;
+$anchor-text-decoration: underline;
+$anchor-text-decoration-hover: none;
+
+$code-font-size: rem-calc(14px);
+$code-color: $body-font-color;
+$code-background-color: $panel-bg;
+$code-padding: 1px;
+
+$pre-bg: #333;
+$pre-font-color: #bfbfbf;
+$pre-padding: rem-calc(10px 20px);
+$pre-border-color: $primary-color;
+
+$table-head-font-size: inherit;
+$table-row-font-size: inherit;
+
+// FIXME footer colors
diff --git a/sass/settings/_readthedocs.scss b/sass/settings/_readthedocs.scss
index 7cc868c..49dfa92 100644
--- a/sass/settings/_readthedocs.scss
+++ b/sass/settings/_readthedocs.scss
@@ -1,55 +1,103 @@
-@import "defaults";
-
 // Body
 
-$body-font-color: #000;
-$body-font-family: ff-meta-web-pro-1, ff-meta-web-pro-2, Arial, 'Helvetica Neue', sans-serif;
-$title-font-color: #111;
-$global-radius: 6px;
-$primary-color: #444;
+$body-bg: #efefef;
+$body-font-color: #404040;
+$body-font-family: "Lato", sans-serif;
+
+@import "defaults";
+
+$global-radius: 0;
+$primary-color: #2980b9;
+$hr-border-color: #e1e4e5;
+$row-width: 800px;
+$column-gutter: rem-calc(100px);
 
 // Headers
 
-$header-font-color: #465158;
-$header-font-family: $body-font-family;
-$header-top-margin: 1em;
-$subheader-font-color: #6c818f;
+$h1-font-size: rem-calc(28px);
+$h2-font-size: rem-calc(24px);
+$h3-font-size: rem-calc(20px);
+$h4-font-size: rem-calc(18.4px);
+$h5-font-size: rem-calc(17.6px);
+$h6-font-size: rem-calc(16px);
+$title-font-color: $body-font-color;
+$header-font-color: $body-font-color;
+$header-font-family: "Roboto Slab", sans-serif;
+$header-font-weight: bold;
+$header-top-margin: 0;
+$header-bottom-margin: 0.85em;
+$header-line-height: 1.3;
+$subheader-top-margin: 0;
+$subheader-bottom-margin: 0.25em;
+$subheader-font-color: $primary-color;
+$subheader-font-weight: bold;
+$sect-divider-size: 0;
 
 // Paragraphs
 
-$paragraph-line-height: 1.5;
+// FIXME for some reason, we have to add em units or else we get a slight shift
+$paragraph-line-height: rem-calc-to-em(24px);
+//$paragraph-margin-bottom: rem-calc-to-em(24px);
+$paragraph-margin-bottom: rem-calc(24px);
 
 // Inline Code
 
-$code-bg-color: #f2f2f2;
-$code-color: $primary-color;
-$code-font-size: 0.95em;
-$code-font-weight: normal;
-$code-font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
+$code-background-color: #fff;
+$code-color: #000;
+$code-border-color: $hr-border-color;
+$code-border-size: 1px;
+$code-font-size: 0.8em;
+$code-padding: 0 5px;
 
 // Code Blocks
 // *Recommended highlight.js themes: googlecode
 
-$pre-bg: #eee;
-$pre-border-color: #ccc;
-$pre-padding: .5em;
-$pre-font-size: .95em;
-$pre-font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
-$pre-line-height: 1.2;
+$pre-bg: #fff;
+$pre-border-color: $hr-border-color;
+$pre-padding: 1em;
+// FIXME pre-font-size is not being honored
+$pre-font-size: rem-calc(12px);
+$pre-line-height: 1.5em;
 
 // Links
 
-$anchor-text-decoration: underline;
-$anchor-font-color-hover: #111;
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$anchor-font-color: $primary-color;
+$anchor-font-color-hover: #3091d1;
+
+// Lists
+
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+$definition-list-margin-bottom: rem-calc(20px);
+
+// Panels
+
+$panel-bg: #e5ebeb;
+$panel-margin-bottom: $paragraph-margin-bottom;
+
+// Blockquotes
+
+$blockquote-font-color: $body-font-color;
 
 // Tables
 
-$table-line-height: $paragraph-line-height;
-$table-even-row-bg: none;
-$table-border-size: 0;
-$table-head-bg: none;
-$table-head-font-size: emCalc(16px);
-$table-head-padding: 1px 8px 1px 5px;
-$table-border-highlight-size: 0;
-$table-row-padding: 1px 8px 1px 5px;
-$table-row-font-size: emCalc(16px);
+$table-bg: #f3f6f6;
+$table-border-color: $hr-border-color;
+$table-head-bg: #fff;
+$table-head-font-color: #000;
+$table-head-padding: rem-calc(8px 16px);
+$table-even-row-bg: #fff;
+$table-row-padding: $table-head-padding;
+$table-foot-bg: $table-head-bg;
+$table-foot-padding: $table-head-padding;
+$table-margin-bottom: $paragraph-margin-bottom;
+
+// Footer
+
+$stretch-footer: false;
+$footer-bg: $body-bg;
+$footer-font-color: #999;
diff --git a/sass/settings/_rocket-panda.scss b/sass/settings/_rocket-panda.scss
index f45cf5d..c88e40e 100644
--- a/sass/settings/_rocket-panda.scss
+++ b/sass/settings/_rocket-panda.scss
@@ -1,69 +1,59 @@
-$body-bg: #e5e5e5;
+// Body
+
+//$body-bg: #e5e5e5;
+$body-font-color: #222;
+$body-font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif;
 
 @import "defaults";
 
-// General settings
+// General
 
-$primary-color: #069;
+$primary-color: #006699;
 $global-radius: 0;
-
-// Body
-
-$body-font-color: #404040;
-$body-font-family: "Helvetica Neue",Helvetica,"Liberation Sans",Arial,sans-serif;
+$panel-bg: #eee;
+$icon-text-shadow: none;
 
 // Headings
 
-$header-font-family: Overpass,"Helvetica Neue",Helvetica,Arial,sans-serif;
-$header-font-weight: normal;
-$header-font-color: black;
+$header-font-family: Overpass, sans-serif;
+$header-font-weight: bold;
+$header-font-color: #222;
 $header-top-margin: 1em;
+$header-bottom-margin: 0.5em;
+$title-font-color: $header-font-color;
 $title-font-weight: $header-font-weight;
+$subheader-top-margin: 0.2em;
+$subheader-bottom-margin: 0.5em;
+$subheader-font-weight: bold;
 $sect-divider-size: 0;
 
-// Panels
-
-$panel-bg: #e5e5e5;
-
-// Paragraphs
-
-$paragraph-font-family: $body-font-family;
-$paragraph-font-size: emCalc(15px);
-$paragraph-margin-bottom: emCalc(22px);
-$paragraph-line-height: 1.4;
-
 // Links
 
-$anchor-font-color-hover: #ea0011;
-$anchor-text-decoration-hover: underline;
+$anchor-font-color-hover: #005580;
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
 
 // Inline Code
 
-$code-font-family: Menlo, Monaco, 'Liberation Mono', Consolas, monospace;
-$code-font-size: emCalc(15px);
-$code-color: #3b3b3b;
-$code-font-weight: normal;
-$code-padding: 1px 4px;
-$code-border-color: #d4d9d9;
-$code-border-size: 1px;
-$code-bg-color: #eff1f1;
+$code-font-family: "Source Code Pro", monospace;
+$code-color: #7f0a0c;
+$code-font-weight: bold;
+$code-padding: 0;
+$code-border-size: 0;
 
 // Code Blocks
 
-$pre-bg: $code-bg-color;
+$pre-bg: #eee;
 $pre-font-family: $code-font-family;
-$pre-font-color: $code-color;
-$pre-font-size: emCalc(14px);
-$pre-border-color: rgba(120, 120, 120, 0.35);
-$pre-border-size: 0 0 0 2px;
-$pre-padding: emCalc(16px) emCalc(24px) emCalc(14px) emCalc(24px);
+$pre-font-color: #000;
+$pre-border-size: 0;
+$pre-line-height: 1.4;
+$pre-padding: 0.8em;
 
 // Block Quotes
 
-//$blockquote-font-color: #999;
 $blockquote-font-color: $body-font-color;
-$blockquote-border: 5px solid #ededed;
-$blockquote-padding: 0 0 0 1em;
+$blockquote-cite-font-size: rem-calc(15px);
 
 // Ruler
 
@@ -72,16 +62,20 @@ $blockquote-padding: 0 0 0 1em;
 
 // Lists
 
-$list-side-margin: emCalc(26px);
-$definition-list-content-margin-left: 2em;
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+$definition-list-margin-bottom: rem-calc(16px);
 
 // Tables
 
 $table-head-font-size: inherit;
 $table-row-font-size: inherit;
-$table-line-height: $paragraph-line-height;
+$table-line-height: 1.6;
 
 // Footer
 
-$footer-bg: white;
-$footer-font-color: #666;
+//$stretch-footer: false;
+//$footer-bg: white;
+//$footer-font-color: #666;
diff --git a/sass/settings/_rubygems.scss b/sass/settings/_rubygems.scss
deleted file mode 100644
index 6999db3..0000000
--- a/sass/settings/_rubygems.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import "defaults";
-
-// Body
-
-$em-base: 16px;
-$body-font-family: "Helvetica Neue", "Helvetica", sans-serif;
-$body-font-color: #222;
-$primary-color: #AD141E;
-$alert-color: $primary-color;
-$global-radius: 0;
-
-// Headings
-
-$header-font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
-$header-font-weight: normal;
-$header-font-color: #111;
-$header-top-margin: 1em;
-$subheader-font-color: #111;
-$title-font-weight: $header-font-weight;
-
-// Paragraphs
-
-$paragraph-line-height: 1.5;
-
-// Inline Code
-
-$code-font-family: 'Andale Mono', 'monotype.com', 'Lucida Console', monospace;
-$code-font-weight: normal;
-$code-color: $body-font-color;
-$code-bg-color: #eee;
-$code-border-size: 0;
-$code-padding: 2px;
-
-// Code Blocks
-// *Recommended highlight.js themes: dark, [plain]
-
-$pre-font-family: Monaco, Consolas, "Courier New", Courier, Sans-serif;
-$pre-font-color: #fff;
-$pre-border-size: 0;
-$pre-bg: #333;
-$pre-padding: 10px;
-$pre-line-height: 1.5;
-
-// Links
-
-$anchor-text-decoration: underline;
-$anchor-font-color-hover: $primary-color;
-
-// Lists
-$list-side-margin: emCalc(24px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
-
-// Blockquotes
-
-$blockquote-font-color: lighten($body-font-color, 30%);
-$blockquote-cite-font-size: inherit;
-$blockquote-cite-font-color: darken($blockquote-font-color, 10%);
-
-// Tables
-
-$table-head-font-size: inherit;
-$table-row-font-size: inherit;
-$table-line-height: 1.2;
-$table-border-highlight-color: #ddd;
-$table-border-highlight-size: 1px;
diff --git a/sass/settings/_settings.scss.dist b/sass/settings/_settings.scss.dist
deleted file mode 100644
index 4b5bf5f..0000000
--- a/sass/settings/_settings.scss.dist
+++ /dev/null
@@ -1,1018 +0,0 @@
-// Required global settings and mixins for Foundation
-@import "foundation/foundation-global";
-
-// Settings file to override Foundation variables
-
-// You can find the variables for each component at the bottom of their
-// doc page. We tried to name them to where they'd make sense just by reading them.
-// Go to http://foundation.zurb.com/docs/ to find what you need.
-
-//
-// Foundation Global Variables
-//
-
-// This is the default html and body font-size for the base em value.
-// $em-base: 16px;
-
-// We use these to control various global styles
-// $body-bg: #fff;
-// $body-font-color: #222;
-// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-// $body-font-weight: normal;
-// $body-font-style: normal;
-
-// We use this to control font-smoothing
-// $font-smoothing: antialiased;
-
-// We use these to control text direction settings
-// $text-direction: ltr;
-
-// We use these as default colors throughout
-// $primary-color: #2ba6cb;
-// $secondary-color: #e9e9e9;
-// $alert-color: #c60f13;
-// $success-color: #5da423;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 1000px;
-
-// We use these to control inset shadow shiny edges and depressions.
-// $shiny-edge-size: 0 1px 0;
-// $shiny-edge-color: rgba(#fff, .5);
-// $shiny-edge-active-color: rgba(#000, .2);
-
-// We use this to control whether or not CSS classes come through in the gem files.
-// $include-html-classes: true;
-// $include-print-styles: true;
-
-// Modular html classes
-// $include-html-grid-classes: $include-html-classes;
-// $include-html-visibility-classes: $include-html-classes;
-// $include-html-button-classes: $include-html-classes;
-// $include-html-form-classes: $include-html-classes;
-// $include-html-media-classes: $include-html-classes;
-// $include-html-section-classes: $include-html-classes;
-// $include-html-reveal-classes: $include-html-classes;
-// $include-html-alert-classes: $include-html-classes;
-// $include-html-nav-classes: $include-html-classes;
-// $include-html-label-classes: $include-html-classes;
-// $include-html-panel-classes: $include-html-classes;
-// $include-html-pricing-classes: $include-html-classes;
-// $include-html-progress-classes: $include-html-classes;
-
-//
-// Grid Variables
-//
-
-// $row-width: 62.5em;
-// $column-gutter: 1.875em;
-// $total-columns: 12;
-
-//
-// Block Grid Variables
-//
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: 10px;
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-// $block-grid-media-queries: true;
-
-//
-// Typography Variables
-//
-
-// We use these to control header font styles
-// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-// $header-font-weight: bold;
-// $header-font-style: normal;
-// $header-font-color: #222;
-// $header-line-height: 1.4;
-// $header-top-margin: .2em;
-// $header-bottom-margin: .5em;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-// $h1-font-size: emCalc(44px);
-// $h2-font-size: emCalc(37px);
-// $h3-font-size: emCalc(27px);
-// $h4-font-size: emCalc(23px);
-// $h5-font-size: emCalc(18px);
-// $h6-font-size: 1em;
-
-// These control how subheaders are styled.
-// $subheader-line-height: 1.4;
-// $subheader-font-color: lighten($header-font-color, 30%);
-// $subheader-font-weight: 300;
-// $subheader-top-margin: .2em;
-// $subheader-bottom-margin: .5em;
-
-// A general <small> styling
-// $small-font-size: 60%;
-// $small-font-color: lighten($header-font-color, 30%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: normal;
-// $paragraph-font-size: 1em;
-// $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: emCalc(20px);
-// $paragraph-aside-font-size: emCalc(14px);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-
-// We use these to style <code> tags
-// $code-color: darken($alert-color, 15%);
-// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
-// $code-font-weight: bold;
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: darken($primary-color, 5%);
-
-// We use these to style the <hr> element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: #ddd;
-// $hr-margin: emCalc(20px);
-
-// We use these to style lists
-// $list-style-position: outside;
-// $list-side-margin: emCalc(18px);
-// $definition-list-header-weight: bold;
-// $definition-list-header-margin-bottom: .3em;
-// $definition-list-margin-bottom: emCalc(12px);
-
-// We use these to style blockquotes
-// $blockquote-font-color: lighten($header-font-color, 30%);
-// $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
-// $blockquote-border: 1px solid #ddd;
-// $blockquote-cite-font-size: emCalc(13px);
-// $blockquote-cite-font-color: lighten($header-font-color, 20%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted #ddd;
-
-// We use these to control padding and margin
-// $microformat-padding: emCalc(10px) emCalc(12px);
-// $microformat-margin: 0 0 emCalc(20px) 0;
-
-// We use these to control the border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: #ddd;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: bold;
-// $microformat-fullname-font-size: emCalc(15px);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: 0 emCalc(1px);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: bold;
-// $microformat-abbr-font-decoration: none;
-
-//
-// Form Variables
-//
-
-// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: emCalc(16px);
-
-// We use these to style the labels in different ways
-// $label-pointer: pointer;
-// $label-font-size: emCalc(14px);
-// $label-font-weight: 500;
-// $label-font-color: lighten(#000, 30%);
-// $label-bottom-margin: emCalc(3px);
-// $input-font-family: inherit;
-// $input-font-color: rgba(0,0,0,0.75);
-// $input-font-size: emCalc(14px);
-// $input-bg-color: #fff;
-// $input-focus-bg-color: darken(#fff, 2%);
-// $input-border-color: darken(#fff, 20%);
-// $input-focus-border-color: darken(#fff, 40%);
-// $input-border-style: solid;
-// $input-border-width: 1px;
-// $input-disabled-bg: #ddd;
-// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-
-// We use these to style the fieldset border and spacing.
-// $fieldset-border-style: solid;
-// $fieldset-border-width: 1px;
-// $fieldset-border-color: #ddd;
-// $fieldset-padding: emCalc(20px);
-// $fieldset-margin: emCalc(18px) 0;
-
-// We use these to style the legends when you use them
-// $legend-bg: #fff;
-// $legend-font-weight: bold;
-// $legend-padding: 0 emCalc(3px);
-
-// We use these to style the prefix and postfix input elements
-// $input-prefix-bg: darken(#fff, 5%);
-// $input-prefix-border-color: darken(#fff, 20%);
-// $input-prefix-border-size: 1px;
-// $input-prefix-border-type: solid;
-// $input-prefix-overflow: hidden;
-// $input-prefix-font-color: #333;
-// $input-prefix-font-color-alt: #fff;
-
-// We use these to style the error states for inputs and labels
-// $input-error-message-padding: emCalc(6px) emCalc(4px);
-// $input-error-message-top: -($form-spacing) - emCalc(5px);
-// $input-error-message-font-size: emCalc(12px);
-// $input-error-message-font-weight: bold;
-// $input-error-message-font-color: #fff;
-// $input-error-message-font-color-alt: #333;
-
-// We use these to build padding for buttons.
-// $button-med: emCalc(12px);
-// $button-tny: emCalc(7px);
-// $button-sml: emCalc(9px);
-// $button-lrg: emCalc(16px);
-
-// We use this to control the display property.
-// $button-display: inline-block;
-// $button-margin-bottom: emCalc(20px);
-
-// We use these to control button text styles.
-// $button-font-family: inherit;
-// $button-font-color: #fff;
-// $button-font-color-alt: #333;
-// $button-font-med: emCalc(16px);
-// $button-font-tny: emCalc(11px);
-// $button-font-sml: emCalc(13px);
-// $button-font-lrg: emCalc(20px);
-// $button-font-weight: bold;
-// $button-font-align: center;
-
-// We use these to control various hover effects.
-// $button-function-factor: 10%;
-
-// We use these to control button border styles.
-// $button-border-width: 1px;
-// $button-border-style: solid;
-// $button-border-color: darken($primary-color, $button-function-factor);
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-
-// We use this to set default opacity for disabled buttons.
-// $button-disabled-opacity: 0.6;
-
-//
-// Dropdown Button Variables
-//
-
-// We use these to set the color of the pip in dropdown buttons
-// $dropdown-button-pip-color: #fff;
-// $dropdown-button-pip-color-alt: #333;
-
-// We use these to style tiny dropdown buttons
-// $dropdown-button-padding-tny: $button-tny * 5;
-// $dropdown-button-pip-size-tny: $button-tny;
-// $dropdown-button-pip-right-tny: $button-tny * 2;
-// $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
-
-// We use these to style small dropdown buttons
-// $dropdown-button-padding-sml: $button-sml * 5;
-// $dropdown-button-pip-size-sml: $button-sml;
-// $dropdown-button-pip-right-sml: $button-sml * 2;
-// $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px);
-
-// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
-// $dropdown-button-pip-size-med: $button-med - emCalc(3px);
-// $dropdown-button-pip-right-med: $button-med * 2;
-// $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
-
-// We use these to style large dropdown buttons
-// $dropdown-button-padding-lrg: $button-lrg * 4;
-// $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
-// $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
-
-//
-// Split Button Variables
-//
-
-// We use these to control different shared styles for Split Buttons
-// $split-button-function-factor: 15%;
-// $split-button-pip-color: #fff;
-// $split-button-pip-color-alt: #333;
-// $split-button-active-bg-tint: rgba(0,0,0,0.1);
-
-// We use these to control tiny split buttons
-// $split-button-padding-tny: $button-tny * 9;
-// $split-button-span-width-tny: $button-tny * 6.5;
-// $split-button-pip-size-tny: $button-tny;
-// $split-button-pip-top-tny: $button-tny * 2;
-// $split-button-pip-left-tny: emCalc(-5px);
-
-// We use these to control small split buttons
-// $split-button-padding-sml: $button-sml * 7;
-// $split-button-span-width-sml: $button-sml * 5;
-// $split-button-pip-size-sml: $button-sml;
-// $split-button-pip-top-sml: $button-sml * 1.5;
-// $split-button-pip-left-sml: emCalc(-9px);
-
-// We use these to control medium split buttons
-// $split-button-padding-med: $button-med * 6.4;
-// $split-button-span-width-med: $button-med * 4;
-// $split-button-pip-size-med: $button-med - emCalc(3px);
-// $split-button-pip-top-med: $button-med * 1.5;
-// $split-button-pip-left-med: emCalc(-9px);
-
-// We use these to control large split buttons
-// $split-button-padding-lrg: $button-lrg * 6;
-// $split-button-span-width-lrg: $button-lrg * 3.75;
-// $split-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $split-button-pip-top-lrg: $button-lrg + emCalc(5px);
-// $split-button-pip-left-lrg: emCalc(-9px);
-
-//
-// Alert Variables
-//
-
-// We use this to control alert padding.
-// $alert-padding-top: emCalc(11px);
-// $alert-padding-left: $alert-padding-top;
-// $alert-padding-right: $alert-padding-top + emCalc(10px);
-// $alert-padding-bottom: $alert-padding-top + emCalc(1px);
-
-// We use these to control text style.
-// $alert-font-weight: bold;
-// $alert-font-size: emCalc(14px);
-// $alert-font-color: #fff;
-// $alert-font-color-alt: darken($secondary-color, 60%);
-
-// We use this for close hover effect.
-// $alert-function-factor: 10%;
-
-// We use these to control border styles.
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: darken($primary-color, $alert-function-factor);
-// $alert-bottom-margin: emCalc(20px);
-
-// We use these to style the close buttons
-// $alert-close-color: #333;
-// $alert-close-position: emCalc(5px);
-// $alert-close-font-size: emCalc(22px);
-// $alert-close-opacity: 0.3;
-// $alert-close-opacity-hover: 0.5;
-// $alert-close-padding: 5px 4px 4px;
-
-// We use this to control border radius
-// $alert-radius: $global-radius;
-
-//
-// Breadcrumb Variables
-//
-
-// We use this to set the background color for the breadcrumb container.
-// $crumb-bg: lighten($secondary-color, 5%);
-
-// We use these to set the padding around the breadcrumbs.
-// $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
-// $crumb-side-padding: emCalc(12px);
-
-// We use these to control border styles.
-// $crumb-function-factor: 10%;
-// $crumb-border-size: 1px;
-// $crumb-border-style: solid;
-// $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
-// $crumb-radius: $global-radius;
-
-// We use these to set various text styles for breadcrumbs.
-// $crumb-font-size: emCalc(11px);
-// $crumb-font-color: $primary-color;
-// $crumb-font-color-current: #333;
-// $crumb-font-color-unavailable: #999;
-// $crumb-font-transform: uppercase;
-// $crumb-link-decor: underline;
-
-// We use these to control the slash between breadcrumbs
-// $crumb-slash-color: #aaa;
-// $crumb-slash: "/";
-
-//
-// Clearing Variables
-//
-
-// We use these to set the background colors for parts of Clearing.
-// $clearing-bg: #111;
-// $clearing-caption-bg: $clearing-bg;
-// $clearing-carousel-bg: #111;
-// $clearing-img-bg: $clearing-bg;
-
-// We use these to style the close button
-// $clearing-close-color: #fff;
-// $clearing-close-size: 40px;
-
-// We use these to style the arrows
-// $clearing-arrow-size: 16px;
-// $clearing-arrow-color: $clearing-close-color;
-
-// We use these to style captions
-// $clearing-caption-font-color: #fff;
-// $clearing-caption-padding: 10px 30px;
-
-// We use these to make the image and carousel height and style
-// $clearing-active-img-height: 75%;
-// $clearing-carousel-height: 150px;
-// $clearing-carousel-thumb-width: 175px;
-// $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
-
-//
-// Custom Form Variables
-//
-
-// We use these to control the basic form styles input styles
-// $custom-form-border-color: #ccc;
-// $custom-form-bg: #fff;
-// $custom-form-bg-disabled: #ddd;
-// $custom-form-check-color: #222;
-
-// We use these to style the custom select form element.
-// $custom-select-bg: #fff;
-// $custom-select-fade-to-color: #f3f3f3;
-// $custom-select-border-color: #ddd;
-// $custom-select-triangle-color: #aaa;
-// $custom-select-triangle-color-open: #222;
-// $custom-select-height: emCalc(13px) + ($form-spacing * 1.5);
-// $custom-select-margin-bottom: emCalc(20px);
-// $custom-select-font-color-selected: #141414;
-// $custom-select-disabled-color: #888;
-
-// We use these to control the style of the custom select dropdown element.
-// $custom-dropdown-height: 200px;
-// $custom-dropdown-bg: #fff;
-// $custom-dropdown-border-color: darken(#fff, 20%);
-// $custom-dropdown-border-width: 1px;
-// $custom-dropdown-border-style: solid;
-// $custom-dropdown-font-color: #555;
-// $custom-dropdown-font-size: emCalc(14px);
-// $custom-dropdown-color-selected: #eeeeee;
-// $custom-dropdown-font-color-selected: #000;
-// $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
-// $custom-dropdown-offset-top: none;
-// $custom-dropdown-list-padding: emCalc(4px);
-// $custom-dropdown-left-padding: emCalc(6px);
-// $custom-dropdown-right-padding: emCalc(38px);
-// $custom-dropdown-list-item-min-height: emCalc(24px);
-
-//
-// Dropdown Variables
-//
-
-// We use these to controls height and width styles.
-// $f-dropdown-max-width: 200px;
-// $f-dropdown-height: auto;
-// $f-dropdown-max-height: none;
-// $f-dropdown-margin-top: 2px;
-
-// We use this to control the background color
-// $f-dropdown-bg: #fff;
-
-// We use this to set the border styles for dropdowns.
-// $f-dropdown-border-style: solid;
-// $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: darken(#fff, 20%);
-
-// We use these to style the triangle pip.
-// $f-dropdown-triangle-size: 6px;
-// $f-dropdown-triangle-color: #fff;
-// $f-dropdown-triangle-side-offset: 10px;
-
-// We use these to control styles for the list elements.
-// $f-dropdown-list-style: none;
-// $f-dropdown-font-color: #555;
-// $f-dropdown-font-size: emCalc(14px);
-// $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
-// $f-dropdown-line-height: emCalc(18px);
-// $f-dropdown-list-hover-bg: #eeeeee;
-// $dropdown-mobile-left: 0;
-
-// We use this to control the styles for when the dropdown has custom content.
-// $f-dropdown-content-padding: emCalc(20px);
-
-//
-// Flex Video Variables
-//
-
-// We use these to control video container padding and margins
-// $flex-video-padding-top: emCalc(25px);
-// $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: emCalc(16px);
-
-// We use this to control widescreen bottom padding
-// $flex-video-widescreen-padding-bottom: 57.25%;
-
-//
-// Inline List Variables
-//
-
-// We use this to control the margins and padding of the inline list.
-// $inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
-// $inline-list-margin: 0 0;
-// $inline-list-padding: 0;
-
-// We use this to control the overflow of the inline list.
-// $inline-list-overflow: hidden;
-
-// We use this to control the list items
-// $inline-list-display: block;
-
-// We use this to control any elments within list items
-// $inline-list-children-display: block;
-
-//
-// Joyride Variables
-//
-
-// Controlling default Joyride styles
-// $joyride-tip-bg: rgb(0,0,0);
-// $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
-// $joyride-tip-border: solid 1px #555;
-// $joyride-tip-radius: 4px;
-// $joyride-tip-position-offset: 22px;
-
-// Here, we're setting the tip dont styles
-// $joyride-tip-font-color: #fff;
-// $joyride-tip-font-size: emCalc(14px);
-// $joyride-tip-header-weight: bold;
-
-// This changes the nub size
-// $joyride-tip-nub-size: 14px;
-
-// This adjusts the styles for the timer when its enabled
-// $joyride-tip-timer-width: 50px;
-// $joyride-tip-timer-height: 3px;
-// $joyride-tip-timer-color: #666;
-
-// This changes up the styles for the close button
-// $joyride-tip-close-color: #777;
-// $joyride-tip-close-size: 30px;
-// $joyride-tip-close-weight: normal;
-
-// When Joyride is filling the screen, we use this style for the bg
-// $joyride-screenfill: rgba(0,0,0,0.5);
-
-//
-// Keystroke Variables
-//
-
-// We use these to control text styles.
-// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: emCalc(15px);
-// $keystroke-font-color: #222;
-// $keystroke-font-color-alt: #fff;
-// $keystroke-function-factor: 7%;
-
-// We use this to control keystroke padding.
-// $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
-
-// We use these to control background and border styles.
-// $keystroke-bg: darken(#fff, $keystroke-function-factor);
-// $keystroke-border-style: solid;
-// $keystroke-border-width: 1px;
-// $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
-// $keystroke-radius: $global-radius;
-
-//
-// Label Variables
-//
-
-// We use these to style the labels
-// $label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
-// $label-radius: $global-radius;
-
-// We use these to style the label text
-// $label-font-sizing: emCalc(14px);
-// $label-font-weight: bold;
-
-//
-// Magellan Variables
-//
-
-// We use these to control basic visual styles
-// $magellan-bg: #fff;
-// $magellan-padding: 10px;
-
-//
-// Orbit Settings
-//
-
-// We use these to control the caption styles
-// $orbit-container-bg: #f5f5f5;
-// $orbit-caption-bg-old-browser: #000;
-// $orbit-caption-bg-old: rgb(0,0,0);
-// $orbit-caption-bg: rgba(0,0,0,0.6);
-// $orbit-caption-font-color: #fff;
-
-// We use these to control the left/right nav styles
-// $orbit-nav-bg-old: rgb(0,0,0);
-// $orbit-nav-bg: rgba(0,0,0,0.6);
-
-// We use these to control the timer styles
-// $orbit-timer-bg-old: rgb(0,0,0);
-// $orbit-timer-bg: rgba(0,0,0,0.6);
-
-// We use these to control the bullet nav styles
-// $orbit-bullet-nav-color: #999;
-// $orbit-bullet-nav-color-active: #222;
-
-// We use thes to controls the style of slide numbers
-// $orbit-slide-number-bg: rgb(0,0,0);
-// $orbit-slide-number-font-color: #fff;
-// $orbit-slide-number-padding: emCalc(5px);
-
-// Margin for when Orbit is stacked on small screens
-// $stack-on-small-margin-bottom: emCalc(20px); // Doesn't quite work yet
-
-//
-// Pagination Variables
-//
-
-// We use these to control the pagination container
-// $pagination-height: emCalc(24px);
-// $pagination-margin: emCalc(-5px);
-
-// We use these to set the list-item properties
-// $pagination-li-float: $default-float;
-// $pagination-li-height: emCalc(24px);
-// $pagination-li-font-color: #222;
-// $pagination-li-font-size: emCalc(14px);
-// $pagination-li-margin: emCalc(5px);
-
-// We use these for the pagination anchor links
-// $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
-// $pagination-link-font-color: #999;
-// $pagination-link-active-bg: darken(#fff, 10%);
-
-// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: default;
-// $pagination-link-unavailable-font-color: #999;
-// $pagination-link-unavailable-bg-active: transparent;
-
-// We use these for currently selected anchor links
-// $pagination-link-current-background: $primary-color;
-// $pagination-link-current-font-color: #fff;
-// $pagination-link-current-font-weight: bold;
-// $pagination-link-current-cursor: default;
-// $pagination-link-current-active-bg: $primary-color;
-
-//
-// Panel Variables
-//
-
-// We use these to control the background and border styles
-// $panel-bg: darken(#fff, 5%);
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-
-// We use this % to control how much we darken things on hover
-// $panel-function-factor: 10%;
-// $panel-border-color: darken($panel-bg, $panel-function-factor);
-
-// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: emCalc(20px);
-// $panel-padding: emCalc(20px);
-
-// We use these to set default font colors
-// $panel-font-color: #333;
-// $panel-font-color-alt: #fff;
-
-//
-// Pricing Table Variables
-//
-
-// We use this to control the border color
-// $price-table-border: solid 1px #ddd;
-
-// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: emCalc(20px);
-
-// We use these to control the title styles
-// $price-title-bg: #ddd;
-// $price-title-padding: emCalc(15px) emCalc(20px);
-// $price-title-align: center;
-// $price-title-color: #333;
-// $price-title-weight: bold;
-// $price-title-size: emCalc(16px);
-
-// We use these to control the price styles
-// $price-money-bg: #eee;
-// $price-money-padding: emCalc(15px) emCalc(20px);
-// $price-money-align: center;
-// $price-money-color: #333;
-// $price-money-weight: normal;
-// $price-money-size: emCalc(20px);
-
-// We use these to control the description styles
-// $price-bg: #fff;
-// $price-desc-color: #777;
-// $price-desc-padding: emCalc(15px);
-// $price-desc-align: center;
-// $price-desc-font-size: emCalc(12px);
-// $price-desc-weight: normal;
-// $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px #ddd;
-
-// We use these to control the list item styles
-// $price-item-color: #333;
-// $price-item-padding: emCalc(15px);
-// $price-item-align: center;
-// $price-item-font-size: emCalc(14px);
-// $price-item-weight: normal;
-// $price-item-bottom-border: dotted 1px #ddd;
-
-// We use these to control the CTA area styles
-// $price-cta-bg: #f5f5f5;
-// $price-cta-align: center;
-// $price-cta-padding: emCalc(20px) emCalc(20px) 0;
-
-//
-// Progress Bar Variables
-//
-
-// We use this to se the prog bar height
-// $progress-bar-height: emCalc(25px);
-// $progress-bar-color: transparent;
-
-// We use these to control the border styles
-// $progress-bar-border-color: darken(#fff, 20%);
-// $progress-bar-border-size: 1px;
-// $progress-bar-border-style: solid;
-// $progress-bar-border-radius: $global-radius;
-
-// We use these to control the margin & padding
-// $progress-bar-pad: emCalc(2px);
-// $progress-bar-margin-bottom: emCalc(10px);
-
-// We use these to set the meter colors
-// $progress-meter-color: $primary-color;
-// $progress-meter-secondary-color: $secondary-color;
-// $progress-meter-success-color: $success-color;
-// $progress-meter-alert-color: $alert-color;
-
-// NEED TO FINISH THE LOGIC HERE
-
-//
-// Reveal Variables
-//
-
-// We use these to control the style of the reveal overlay.
-// $reveal-overlay-bg: rgba(#000, .45);
-// $reveal-overlay-bg-old: #000;
-
-// We use these to control the style of the modal itself.
-// $reveal-modal-bg: #fff;
-// $reveal-position-top: 50px;
-// $reveal-default-width: 80%;
-// $reveal-modal-padding: emCalc(20px);
-// $reveal-box-shadow: 0 0 10px rgba(#000,.4);
-
-// We use these to style the reveal close button
-// $reveal-close-font-size: emCalc(22px);
-// $reveal-close-top: emCalc(8px);
-// $reveal-close-side: emCalc(11px);
-// $reveal-close-color: #aaa;
-// $reveal-close-weight: bold;
-
-// We use these to control the modal border
-// $reveal-border-style: solid;
-// $reveal-border-width: 1px;
-// $reveal-border-color: #666;
-
-//
-// Section Variables
-//
-
-// We use these to set padding and hover factor
-// $section-padding: emCalc(15px);
-// $section-function-factor: 10%;
-
-// These style the titles
-// $section-title-color: #333;
-// $section-title-bg: #efefef;
-// $section-title-bg-active: darken($section-title-bg, $section-function-factor);
-// $section-title-bg-active-tabs: #fff;
-
-// Want to control border size, here ya go!
-// $section-border-size: 1px;
-// $section-border-style: solid;
-// $section-border-color: #ccc;
-
-// Control the color of the background and some size options
-// $section-content-bg: #fff;
-// $section-vertical-nav-min-width: emCalc(200px);
-// $section-bottom-margin: emCalc(20px);
-
-//
-// Side Nav Variables
-//
-
-// We use this to control padding.
-// $side-nav-padding: emCalc(14px) 0;
-
-// We use these to control list styles.
-// $side-nav-list-type: none;
-// $side-nav-list-position: inside;
-// $side-nav-list-margin: 0 0 emCalc(7px) 0;
-
-// We use these to control link styles.
-// $side-nav-link-color: $primary-color;
-// $side-nav-link-color-active: lighten(#000, 30%);
-// $side-nav-font-size: emCalc(14px);
-// $side-nav-font-weight: bold;
-
-// We use these to control border styles
-// $side-nav-divider-size: 1px;
-// $side-nav-divider-style: solid;
-// $side-nav-divider-color: darken(#fff, 10%);
-
-//
-// Sub Nav Variables
-//
-
-// We use these to control margin and padding
-// $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
-// $sub-nav-list-padding-top: emCalc(4px);
-
-// We use this to control the definition
-// $sub-nav-font-size: emCalc(14px);
-// $sub-nav-font-color: #999;
-// $sub-nav-font-weight: normal;
-// $sub-nav-text-decoration: none;
-// $sub-nav-border-radius: 1000px;
-
-// We use these to control the active item styles
-// $sub-nav-active-font-weight: bold;
-// $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-color: #fff;
-// $sub-nav-active-padding: emCalc(3px) emCalc(9px);
-// $sub-nav-active-cursor: default;
-
-//
-// Switch Variables
-//
-
-// Controlling border styles and background colors for the switch container
-// $switch-border-color: darken(#fff, 20%);
-// $switch-border-style: solid;
-// $switch-border-width: 1px;
-// $switch-bg: #fff;
-
-// We use these to control the switch heights for our default classes
-// $switch-height-tny: 22px;
-// $switch-height-sml: 28px;
-// $switch-height-med: 36px;
-// $switch-height-lrg: 44px;
-// $switch-bottom-margin: emCalc(20px);
-
-// We use these to control default font sizes for our classes.
-// $switch-font-size-tny: 11px;
-// $switch-font-size-sml: 12px;
-// $switch-font-size-med: 14px;
-// $switch-font-size-lrg: 17px;
-// $switch-label-side-padding: 6px;
-
-// We use these to style the switch-paddle
-// $switch-paddle-bg: #fff;
-// $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
-// $switch-paddle-border-color: darken($switch-paddle-bg, 35%);
-// $switch-paddle-border-width: 1px;
-// $switch-paddle-border-style: solid;
-// $switch-paddle-transition-speed: .1s;
-// $switch-paddle-transition-ease: ease-out;
-// $switch-positive-color: lighten($success-color, 50%);
-// $switch-negative-color: #f5f5f5;
-
-// Outline Style for tabbing through switches
-// $switch-label-outline: 1px dotted #888;
-
-//
-// Table Variables
-//
-
-// These control the background color for the table and even rows
-// $table-bg: #fff;
-// $table-even-row-bg: #f9f9f9;
-
-// These control the table cell border style
-// $table-border-style: solid;
-// $table-border-size: 1px;
-// $table-border-color: #ddd;
-
-// These control the table head styles
-// $table-head-bg: #f5f5f5;
-// $table-head-font-size: emCalc(14px);
-// $table-head-font-color: #222;
-// $table-head-font-weight: bold;
-// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
-
-// These control the row padding and font styles
-// $table-row-padding: emCalc(9px) emCalc(10px);
-// $table-row-font-size: emCalc(14px);
-// $table-row-font-color: #222;
-// $table-line-height: emCalc(18px);
-
-// These are for controlling the display and margin of tables
-// $table-display: table-cell;
-// $table-margin-bottom: emCalc(20px);
-
-//
-// Image Thumbnail Variables
-//
-
-// We use these to control border styles
-// $thumb-border-style: solid;
-// $thumb-border-width: 4px;
-// $thumb-border-color: #fff;
-// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
-// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-
-// Radius and transition speed for thumbs
-// $thumb-radius: $global-radius;
-// $thumb-transition-speed: 200ms;
-
-//
-// Tooltip Variables
-//
-// $has-tip-border-bottom: dotted 1px #ccc;
-// $has-tip-font-weight: bold;
-// $has-tip-font-color: #333;
-// $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
-// $has-tip-font-color-hover: $primary-color;
-// $has-tip-cursor-type: help;
-
-// $tooltip-padding: emCalc(8px);
-// $tooltip-bg: #000;
-// $tooltip-font-size: emCalc(15px);
-// $tooltip-font-weight: bold;
-// $tooltip-font-color: #fff;
-// $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: emCalc(10px);
-// $tooltip-close-font-weight: normal;
-// $tooltip-close-font-color: #888;
-// $tooltip-font-size-sml: emCalc(14px);
-// $tooltip-radius: $global-radius;
-// $tooltip-pip-size: 5px;
-
-//
-// Top Bar Variables
-//
-
-// Background color for the top bar
-// $topbar-bg: #111;
-
-// Height and margin
-// $topbar-height: 45px;
-// $topbar-margin-bottom: emCalc(30px);
-
-// Control Input height for top bar
-// $topbar-input-height: 2.45em;
-
-// Controlling the styles for the title in the top bar
-// $topbar-title-weight: bold;
-// $topbar-title-font-size: emCalc(17px);
-
-// Set the link colors and styles for top-level nav
-// $topbar-link-color: #fff;
-// $topbar-link-weight: bold;
-// $topbar-link-font-size: emCalc(13px);
-
-// Style the top bar dropdown elements
-// $topbar-dropdown-bg: #333;
-// $topbar-dropdown-link-color: #fff;
-// $topbar-dropdown-toggle-size: 5px;
-// $topbar-dropdown-toggle-color: #fff;
-// $topbar-dropdown-toggle-alpha: 0.5;
-// $dropdown-label-color: #555;
-
-// Top menu icon styles
-// $topbar-menu-link-transform: uppercase;
-// $topbar-menu-link-font-size: emCalc(13px);
-// $topbar-menu-link-weight: bold;
-// $topbar-menu-link-color: #fff;
-// $topbar-menu-icon-color: #fff;
-// $topbar-menu-link-color-toggled: #888;
-// $topbar-menu-icon-color-toggled: #888;
-
-// Transitions and breakpoint styles
-// $topbar-transition-speed: 300ms;
-// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
-// $topbar-media-query: "only screen and (min-width "#{$topbar-breakpoint}")";
-
diff --git a/sass/settings/_riak.scss b/sass/settings/_stone.scss
similarity index 73%
rename from sass/settings/_riak.scss
rename to sass/settings/_stone.scss
index 02e3450..dbe416b 100644
--- a/sass/settings/_riak.scss
+++ b/sass/settings/_stone.scss
@@ -1,10 +1,10 @@
-@import "defaults";
-
 // Body
 
-$em-base: 16px;
 $body-font-family: 'Titillium Web', Verdana, Arial, sans-serif;
 $body-font-color: #515151;
+
+@import "defaults";
+
 $primary-color: #2984A9;
 $alert-color: lighten(#6d180b, 15%);
 $global-radius: 4px;
@@ -15,10 +15,13 @@ $header-font-family: $body-font-family;
 $header-font-weight: normal;
 $header-font-color: #616366;
 $header-text-rendering: geometricPrecision;
-$header-top-margin: .5em;
+$header-top-margin: 0.5em;
+$header-bottom-margin: 0.5em;
 $subheader-font-color: darken($header-font-color, 15%);
 $title-font-color: $header-font-color;
 $title-font-weight: $header-font-weight;
+$subheader-top-margin: 0.2em;
+$subheader-bottom-margin: 0.5em;
 $sect-divider-style: dashed;
 $sect-divider-color: #ccc;
 $sidebar-header-border-size: 0;
@@ -27,15 +30,15 @@ $sidebar-header-border-size: 0;
 
 $paragraph-text-rendering: $header-text-rendering;
 $paragraph-line-height: 1.5;
-$paragraph-margin-bottom: emCalc(15px);
+$paragraph-margin-bottom: rem-calc(15px);
 
 // Inline Code
 
 $code-font-family: monospace, serif;
 $code-font-weight: normal;
-$code-font-size: .9em;
+$code-font-size: 0.9em;
 $code-color: $body-font-color;
-$code-bg-color: #dfdfdf;
+$code-background-color: #dfdfdf;
 $code-border-color: #c9c9c9;
 $code-border-size: 1px;
 $code-padding: 0 3px;
@@ -44,22 +47,25 @@ $code-padding: 0 3px;
 // *Recommended highlight.js themes: googlecode, default, xcode
 
 $pre-font-family: monospace, serif;
-$pre-font-size: .8em;
+$pre-font-size: 0.8em;
 $pre-padding: 15px;
 $pre-border-color: #f0f0f0;
 $pre-border-size: 0 0 1px 0;
-$pre-bg: image-url('riak/pre-bg.jpg', false, false);
+$pre-bg: image-url('stone/pre-bg.jpg', false, false);
 //$pre-bg: background_noise(#DDE8E4, 4, .08, 400, false);
 
 // Links
 
 $anchor-text-decoration: underline;
+$anchor-text-decoration-hover: underline;
 $anchor-font-color-hover: #FAA94C;
 
 // Lists
-$list-side-margin: emCalc(24px);
-$definition-list-header-margin-bottom: emCalc(5px);
-$definition-list-margin-bottom: emCalc(20px);
+$list-side-margin: rem-calc(24px);
+$list-ordered-side-margin: $list-side-margin + rem-calc(4px);
+$list-nested-margin: $list-side-margin;
+$definition-list-header-margin-bottom: rem-calc(4px);
+$definition-list-margin-bottom: rem-calc(16px);
 
 // Blockquotes
 
@@ -82,4 +88,4 @@ $table-border-highlight-color: white;
 
 // Icons
 
-$icon-text-shadow: 0 0 8px #fff, $icon-text-shadow;
+$icon-text-shadow: 0 0 8px #fff;
diff --git a/sass/riak.scss b/sass/stone.scss
similarity index 66%
rename from sass/riak.scss
rename to sass/stone.scss
index af32c91..4777313 100644
--- a/sass/riak.scss
+++ b/sass/stone.scss
@@ -1,20 +1,22 @@
-/* Derived from the Riak documentation theme developed by Basho Technologies, Inc. | CC BY 3.0 License | http://docs.basho.org */
-@import "fonts/titillium-web";
-@import "fonts/noticia-text";
-@import "settings/riak";
+/* Derived from the old Riak documentation theme developed by Basho Technologies, Inc. | CC BY 3.0 License | http://docs.basho.org */
+@import "fonts/stone-collection";
+@import "settings/stone";
 @import "components/asciidoc";
 @import "components/awesome-icons";
 
 body {
-  background-image: image-url('riak/body-bg.jpg', false, false);
+  background-image: image-url('stone/body-bg.jpg', false, false);
   //@include bg-noise-mono(#f0f0f0, 4, .07, 200);
 }
 
-//@media #{$medium} {
-//  #toc.toc2 {
-//    background-image: image-url('riak/body-bg.jpg', false, false);
-//  }
-//}
+#toc.toc2 {
+  background-image: image-url('stone/sidebar-bg.jpg', false, false);
+  border-right: none;
+
+  #toctitle {
+    color: #dfdfdf;
+  }
+}
 
 ::selection {
   background-color: #fcc07f;
@@ -28,10 +30,8 @@ body {
 .literalblock,
 .listingblock {
   & pre {
-    background: $pre-bg;
-    @include single-box-shadow(#AEB9B6, 0, 1px, 4px, $inset:inset);
+    @include single-box-shadow(0, 1px, 4px, null, #AEB9B6, inset);
     @include radius(5px);
-    //font-size: 80%;
   }
 }
 
@@ -48,7 +48,7 @@ p > em {
 .admonitionblock {
   & > table {
     width: 100%;
-    background-image: image-url('riak/info-bg.jpg', false, false);
+    background-image: image-url('stone/info-bg.jpg', false, false);
     border-collapse: separate;
     border-spacing: 0;
     @include radius(5px);
@@ -56,7 +56,7 @@ p > em {
     td.icon {
       padding: 15px;
       .icon-tip:before {
-        text-shadow: 0 0 20px white, 1px 1px 2px rgba(155, 155, 0, .8);
+        text-shadow: 0 0 20px white, 1px 1px 2px rgba(155, 155, 0, 0.8);
       }
     }
     td.content {
@@ -71,16 +71,16 @@ p > em {
 
 .admonitionblock .literalblock > .content > pre,
 .admonitionblock .listingblock > .content > pre {
-  background-image: image-url('riak/info-bg.jpg', false, false);
+  background-image: image-url('stone/info-bg.jpg', false, false);
 }
 
 .exampleblock > .content {
-  background-color: transparent;
+  //background-color: transparent;
   border-color: #c9c9c9;
 }
 
 .sidebarblock {
-  background-image: image-url('riak/sidebar-bg.jpg', false, false);
+  background-image: image-url('stone/sidebar-bg.jpg', false, false);
   //@include bg-noise-mono(#444445, 8, .125, 200);
   @include radius(5px);
   & > .content {
@@ -102,9 +102,9 @@ p > em {
     }
     a {
       color: #60B5D8;
-    }
-    a:hover {
-      color: #FAA94C;
+      &:hover {
+        color: #FAA94C;
+      }
     }
 
     .admonitionblock p,
@@ -116,12 +116,11 @@ p > em {
 }
 
 table.tableblock.grid-all {
-  @include radius(0);
-  @include single-box-shadow(#999, 0, 1px, 3px);
+  @include single-box-shadow(0, 1px, 3px, null, #999);
 }
 
 #footer {
-  background-image: image-url('riak/footer-bg.jpg', false, false);
+  background-image: image-url('stone/footer-bg.jpg', false, false);
   padding: 25px 0;
 }