diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/_init.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/_init.scss
index 9f32f9d..60156b7 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/_init.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/_init.scss
@@ -50,7 +50,7 @@ $legacy-support-for-ie8: true;
 // @see http://compass-style.org/reference/compass/typography/vertical_rhythm/
 
 $base-font-size: 15px; // The font size set on the root html element.
-$base-line-height: 12px; // This line-height determines the basic unit of vertical rhythm.
+$base-line-height: 18px; // This line-height determines the basic unit of vertical rhythm.
 
 // Modular Scale
 // Major Third: 16px @ 1:1.25
@@ -113,7 +113,7 @@ $text-color: $gray-dark;
 $background-color: $white;
 /* Link (a:) */
 $link-color: $gray-medium;
-$link-hover: $gray-light;
+$link-hover: $gray-dark;
 /* Blockquote*/
 $blockquote-color: $gray-medium;
 /* Figcaption */
@@ -153,6 +153,7 @@ $button-reset-text-hover: $gray-dark;
 ///////////////////////////////////////////////////////////
 
 // Breakpoint Variables
+$bp0: 350px;
 $bp1: 600px;
 $bp2: 900px;
 $bp3: 1100px;
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/_mixins.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/_mixins.scss
index 1fb503e..07cdbd9 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/_mixins.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/_mixins.scss
@@ -30,6 +30,13 @@
   text-transform: uppercase;
 }
 
+/* Unstyle a list */
+%list--simple {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 
 /* ==========================================================================
    Clearfix extend
@@ -89,3 +96,46 @@
     @extend %element-invisible-off;
   }
 }
+
+/* ==============================================================
+   Custom Vertical Rhythm Mixin
+
+   This mixin uses the new font size to determine font size and
+   line height based on the ratio determined from the base font
+   size. The line height mixin is optional, but available to allow
+   for minor adjustments.
+
+   1.12 and 1.24 is based on the percentages applied to the base html
+   in the normalize file.
+   ============================================================== */
+
+@mixin adjust-font-size-to($to-size, $line-height:1) {
+  font-size: $to-size;
+  line-height: (($to-size * $base-line-height)/$base-font-size) * $line-height;
+
+  @include breakpoint($bp2) {
+    font-size: $to-size * 1.12;
+    line-height: ((($to-size * $base-line-height)/$base-font-size) * $line-height) * 1.12;
+  }
+
+  @include breakpoint($bp3) {
+    font-size: $to-size * 1.24;
+    line-height: ((($to-size * $base-line-height)/$base-font-size) * $line-height) * 1.24;
+  }
+}
+
+/* ==============================================================
+   Vertical Rhythm Mixin
+
+   This mixin adds margin to the top or bottom of an element based
+   on the base font size (or an included font size adjustment), and
+   the base line height.
+   ============================================================== */
+
+@mixin leader($leader, $font-size:$base-font-size) {
+  margin-top: (($font-size)/$base-font-size) * ($leader * $base-line-height);
+}
+
+@mixin trailer($trailer, $font-size:$base-font-size) {
+  margin-bottom: (($font-size)/$base-font-size) * ($trailer * $base-line-height);
+}
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/_normalize.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/_normalize.scss
index 986e19b..3447122 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/_normalize.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/_normalize.scss
@@ -15,11 +15,9 @@
  *       @see http://snook.ca/archives/html_and_css/no_css_reset/
  */
 
-/**
- * HTML5 display definitions
- */
+// HTML5 display definitions
 
-/* Correct `block` display not defined in IE 8/9. */
+// Correct `block` display not defined in IE 8/9.
 article,
 aside,
 details,
@@ -34,91 +32,93 @@ summary {
   display: block;
 }
 
-/* Correct `inline-block` display not defined in IE 8/9. */
+// Correct `inline-block` display not defined in IE 8/9.
 audio,
 canvas,
 video {
   display: inline-block;
+
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
     *display: inline;
     *zoom: 1;
   }
 }
 
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
-/* Address styling not present in IE 8/9. */
+// Address styling not present in IE 8/9.
 [hidden] {
   display: none;
 }
 
-/**
- * Base
- *
- * Instead of relying on the fonts that are available on a user's computer, you
- * can use web fonts which, like images, are resources downloaded to the user's
- * browser. Because of the bandwidth and rendering resources required, web fonts
- * should be used with care.
- *
- * Numerous resources for web fonts can be found on Google. Here are a few
- * websites where you can find Open Source fonts to download:
- * - http://www.fontsquirrel.com/fontface
- * - http://www.theleagueofmoveabletype.com
- *
- * In order to use these fonts, you will need to convert them into formats
- * suitable for web fonts. We recommend the free-to-use Font Squirrel's
- * Font-Face Generator:
- *   http://www.fontsquirrel.com/fontface/generator
- *
- * The following is an example @font-face declaration. This font can then be
- * used in any ruleset using a property like this:  font-family: Example, serif;
- *
- * Since we're using Sass, you'll need to declare your font faces here, then you
- * can add them to the font variables in the _base.scss partial.
- */
-
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
- *    `em` units.
- * 4. Makes it pretty — banishes chunky type.
- */
-
+// Base
+//
+// Instead of relying on the fonts that are available on a user's computer, you
+// can use web fonts which, like images, are resources downloaded to the user's
+// browser. Because of the bandwidth and rendering resources required, web fonts
+// should be used with care.
+//
+// Numerous resources for web fonts can be found on Google. Here are a few
+// websites where you can find Open Source fonts to download:
+// - http://www.fontsquirrel.com/fontface
+// - http://www.theleagueofmoveabletype.com
+//
+// In order to use these fonts, you will need to convert them into formats
+// suitable for web fonts. We recommend the free-to-use Font Squirrel's
+// Font-Face Generator:
+// http://www.fontsquirrel.com/fontface/generator
+//
+// The following is an example @font-face declaration. This font can then be
+// used in any ruleset using a property like this:  font-family: Example, serif;
+//
+// Since we're using Sass, you'll need to declare your font faces here, then you
+// can add them to the font variables in the _base.scss partial.
+
+
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+// user zoom.
+// 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+// `em` units.
+// 4. Makes it pretty — banishes chunky type.
+
+/* stylelint-disable */
 html {
-  font-family: $base-font-family; /* 1 */
-  font-weight: 400;
-  font-size: 100% * ($base-font-size / 16px);
-  text-rendering: optimizeLegibility; /* 4 */
-  color: $text-color;
-  background: $background-color;
-
   // Establish a vertical rhythm unit using $base-line-height.
-  //@include adjust-leading-to(2);
+  background: $background-color;
+  color: $text-color;
+  text-rendering: optimizeLegibility;
+  font-family: $base-font-family;
+  font-size: 100% * ($base-font-size / 16px);
+  font-weight: 400;
+  line-height: ($base-line-height * 1.8);
+  -webkit-font-smoothing: antialiased;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  // prevent the drawer navigation from appearing and being able to be scrolled over to
+  overflow-x: hidden;
 
   // Adjust font-size globally per breakpoint.
-  @include breakpoint($bp1) {
-    font-size: ($base-font-size / 16px) * 112%;
-  }
+  // As you adjust the percentage growth of font-size, translate
+  // to the value to the mixin adjust-font-size-to in the mixins
+  // file as a point value to maintain font-size across breakpoints.
   @include breakpoint($bp2) {
-    font-size: ($base-font-size / 16px) * 124%;
+    font-size: ($base-font-size / 16px) * 112%;
+    line-height: ($base-line-height * 1.2);
   }
   @include breakpoint($bp3) {
-    font-size: ($base-font-size / 16px) * 136%;
+    font-size: ($base-font-size / 16px) * 124%;
+    line-height: ($base-line-height * 1.4);
   }
 }
 
 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-  /* Address `font-family` inconsistency between `textarea` and other form elements. */
+  // Address `font-family` inconsistency between `textarea` and other form elements.
   button,
   input,
   select,
@@ -127,180 +127,189 @@ html {
   }
 }
 
-/* Remove default margin. */
+// Remove default margin.
 body {
   margin: 0;
   padding: 0;
+  // prevent the drawer navigation from appearing and being able to be scrolled over to.
+  overflow-x: hidden;
 }
 
-/**
- * Links
- *
- * The order of link states are based on Eric Meyer's article:
- * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
- */
+
+// Links
+
+// The order of link states are based on Eric Meyer's article:
+// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+
 a:link,
 a:visited {
   color: $link-color;
   text-decoration: none;
 }
+
 a:hover,
 a:focus,
 a:active {
-  //@include trans($timing, $easing);
   color: $link-hover;
   text-decoration: underline;
 }
 
-/* Address `outline` inconsistency between Chrome and other browsers. */
+// Address `outline` inconsistency between Chrome and other browsers.
 a:focus {
   outline: thin dotted;
 }
 
-/* Improve readability when focused and also mouse hovered in all browsers. */
+// Improve readability when focused and also mouse hovered in all browsers.
 a:active,
 a:hover {
   outline: 0;
 }
 
-/**
- * Typography
- *
- * To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
- * so that the line height of our base font becomes the basic unit of vertical
- * measurement. We use multiples of that unit to set the top and bottom margins
- * for our block level elements and to set the line heights of any fonts.
- * For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
- */
 
-/* Set 1 unit of vertical rhythm on the top and bottom margin. */
+// Typography
+
+// To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
+// so that the line height of our base font becomes the basic unit of vertical
+// measurement. We use multiples of that unit to set the top and bottom margins
+// for our block level elements and to set the line heights of any fonts.
+// For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
+
+
+// Set 1 unit of vertical rhythm on the top and bottom margin.
 p,
 pre, {
-  //margin: 0 0 rhythm(1.25) 0;
+  margin: 0 0 $indent-amount;
 }
+
 blockquote {
-  /* Also indent the quote on both sides. */
+  // Also indent the quote on both sides.
   margin: $indent-amount;
   color: $blockquote-color;
 }
 
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
+
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+
 h1 {
   @extend %display-type;
-  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
-  //@include adjust-font-size-to( $h1-font-size, 3.25);
-  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
-  //@include leader(3, $h1-font-size);
-  //@include trailer(0.75, $h1-font-size);
+  // Set the font-size and line-height while keeping a proper vertical rhythm.
+  @include adjust-font-size-to($h1-font-size, 1);
+  // Set 1 unit of vertical rhythm on the top and bottom margins.
+  @include leader(1.25, $h1-font-size);
+  @include trailer(.5, $h1-font-size);
 }
+
 h2 {
   @extend %display-type;
-  //@include adjust-font-size-to( $h2-font-size, 3);
-  //@include leader(3, $h2-font-size);
-  //@include trailer(0.75, $h2-font-size);
+  @include adjust-font-size-to($h2-font-size, 1);
+  @include leader(1.25, $h2-font-size);
+  @include trailer(.5, $h2-font-size);
 }
+
 h3 {
   @extend %display-type;
-  //@include adjust-font-size-to( $h3-font-size, 2.75);
-  //@include leader(3, $h3-font-size);
-  //@include trailer(0.75, $h3-font-size);
+  @include adjust-font-size-to($h3-font-size, 1);
+  @include leader(1, $h3-font-size);
+  @include trailer(.5, $h3-font-size);
 }
+
 h4 {
-  //@include adjust-font-size-to( $h4-font-size, 2);
-  //@include leader(3, $h4-font-size);
-  //@include trailer(0.75, $h4-font-size);
+  @include adjust-font-size-to($h4-font-size, 1);
+  @include leader(1, $h4-font-size);
+  @include trailer(.5, $h4-font-size);
 }
+
 h5 {
   @extend %allcaps;
-  //@include adjust-font-size-to( $h5-font-size, 1.75);
-  //@include leader(3, $h5-font-size);
-  //@include trailer(0.5, $h5-font-size);
+  @include adjust-font-size-to($h5-font-size, 1);
+  @include leader(.75, $h5-font-size);
+  @include trailer(.25, $h5-font-size);
 }
+
 h6 {
   @extend %allcaps;
+  @include adjust-font-size-to($h6-font-size, 1);
+  @include leader(.75, $h6-font-size);
+  @include trailer(.25, $h6-font-size);
   font-weight: 400;
-  //@include adjust-font-size-to( $h6-font-size, 1.75);
-  //@include leader(2, $h6-font-size);
-  //@include trailer(0.5, $h6-font-size);
 }
 
-
-/* Address styling not present in IE 8/9, Safari 5, and Chrome. */
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
 abbr[title] {
   border-bottom: 1px dotted;
 }
 
-/* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 b,
 strong {
-  font-weight: 700;
+  font-weight: 800;
 }
 
-/* Address styling not present in Safari 5 and Chrome. */
+// Address styling not present in Safari 5 and Chrome.
 dfn {
   font-style: italic;
 }
 
-/* Address differences between Firefox and other browsers. */
+// Address differences between Firefox and other browsers.
 hr {
-  //@include box-sizing(content-box);
+  box-sizing: content-box;
   height: 0;
-  border: 1px solid #ddd;
+  margin: 1em 0;
   padding-bottom: -1px;
-  margin: rhythm(2) 0;
+  border: 1px solid #dddddd;
 }
 
-/* Address styling not present in IE 8/9. */
+// Address styling not present in IE 8/9.
 mark {
-  background: #ff0;
-  color: #000;
+  background: #ffff00;
+  color: #000000;
 }
 
-/* Correct font family set oddly in Safari 5 and Chrome. */
+// Correct font family set oddly in Safari 5 and Chrome.
 code,
 kbd,
 pre,
 samp,
 tt,
 var {
-  font-family: $font-monospace; // The value of $font-monospace ends with ", serif".
+  font-size: $base-font-size;
+  // The value of $font-monospace ends with ", serif".
+  font-family: $font-monospace;
+
   @if $legacy-support-for-ie6 {
     _font-family: "courier new", monospace;
   }
-  //@include adjust-font-size-to( $base-font-size );
 }
 
-/* Improve readability of pre-formatted text in all browsers. */
+// Improve readability of pre-formatted text in all browsers.
 pre {
+
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    white-space: pre-wrap;
+    white-space: pre;
     word-wrap: break-word;
-  }
-  @else {
+  } @else {
     white-space: pre-wrap;
   }
 }
 
-/* Set consistent quote types. */
+// Set consistent quote types.
 q {
   quotes: "\201C" "\201D" "\2018" "\2019";
 }
 
-/* Address inconsistent and variable font size in all browsers. */
+// Address inconsistent and variable font size in all browsers.
 small {
   font-size: 80%;
 }
 
-/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
 sub,
 sup {
-  font-size: 75%;
-  line-height: 0;
   position: relative;
   vertical-align: baseline;
+  line-height: 0;
+  font-size: 75%;
 }
 
 sup {
@@ -311,39 +320,42 @@ sub {
   bottom: -.25em;
 }
 
-/**
- * Lists
- */
+
+// Lists
+
 dl,
 menu,
 ol,
 ul {
-  /* Address margins set differently in IE 6/7. */
-  margin: 0 0 rhythm(1) 0;
+  // Address margins set differently in IE 6/7.
+  margin: 0 0 $indent-amount;
 }
 
 ol,
 ul {
+
   ol,
   ul {
-    /* Turn off margins on nested lists. */
-    margin: 0 0 rhythm(1) 0;
+    // Turn off margins on nested lists.
+    margin: 0 0 $indent-amount;
   }
 }
 
 dd {
-  margin: 0 0 0 $indent-amount; /* LTR */
+  // LTR
+  margin: 0 0 0 $indent-amount;
 }
 
-/* Address paddings set differently in IE 6/7. */
+// Address paddings set differently in IE 6/7.
 menu,
 ol,
 ul {
-  padding: 0 0 0 $indent-amount; /* LTR */
+  // LTR
+  padding: 0 0 0 $indent-amount;
 }
 
 @if $legacy-support-for-ie7 {
-  /* Correct list images handled incorrectly in IE 7. */
+  // Correct list images handled incorrectly in IE 7.
   nav ul,
   nav ol {
     list-style: none;
@@ -351,42 +363,48 @@ ul {
   }
 }
 
-/**
- * Embedded content and figures
- *
- * @todo Look into adding responsive embedded video.
- */
+
+// Embedded content and figures
+
+// @todo Look into adding responsive embedded video.
+
 img {
-  /* Remove border when inside `a` element in IE 8/9. */
+  // Responsive images
+  max-width: 100%;
+  // Remove border when inside `a` element in IE 8/9.
   border: 0;
-  /* Suppress the space beneath the baseline */
+  // Suppress the space beneath the baseline
   vertical-align: bottom;
 
-  /* Responsive images */
-  max-width: 100%;
-  //height: auto;
+  @if $legacy-support-for-ie7 {
+    // Improve image quality when scaled in IE 7.
+    -ms-interpolation-mode: bicubic;
+  }
+
   @if $legacy-support-for-ie8 {
-    /* Correct IE 8 not scaling image height when resized. */
+    // Correct IE 8 not scaling image height when resized.
     width: auto;
   }
 }
 
 figcaption {
+  margin-top: .5em;
   color: $figcaption-color;
   font-style: italic;
-  margin-top: rhythm(.5, $label);
-  //@include adjust-font-size-to($label, 2.1);
 }
 
-/* Responsive video styles for youtube and vimeo.
- * Requires a "video-wrapper" class on the
- * tag containing the iframe embed code.
-*/
+// Responsive video styles for youtube and vimeo.
+// Requires a "video-wrapper" class on the
+// tag containing the iframe embed code.
+
 .video-wrapper {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 ratio */
   height: 0;
+  margin: 1em 0;
+  // 16:9 ratio
+  padding-bottom: 56.25%;
 }
+
 .video-wrapper iframe {
   position: absolute;
   top: 0;
@@ -395,130 +413,206 @@ figcaption {
   height: 100%;
 }
 
-/**
- * Correct overflow displayed oddly in IE 9.
- */
+
+// Correct overflow displayed oddly in IE 9.
 
 svg:not(:root) {
   overflow: hidden;
 }
 
-/* Address margin not present in IE 8/9 and Safari 5. */
+// Address margin not present in IE 8/9 and Safari 5.
 figure {
-  margin: rhythm(1.5, $text) 0;
+  margin: 1em 0;
 }
 
-/**
- * Forms
- */
+
+// Forms
+
 
 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-  /* Correct margin displayed oddly in IE 6/7. */
+  // Correct margin displayed oddly in IE 6/7.
   form {
     margin: 0;
   }
 }
 
-/* Define consistent border, margin, and padding. */
+// Define consistent border, margin, and padding.
 fieldset {
   margin: 0 2px;
-  /* Apply borders and padding that keep the vertical rhythm. */
+  // Apply borders and padding that keep the vertical rhythm.
   border-color: #c0c0c0;
-  //@include apply-side-rhythm-border(top,    $width: 1px, $lines: 0.35);
-  //@include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65);
-  //@include apply-side-rhythm-border(left,   $width: 1px, $lines: 0.65);
-  //@include apply-side-rhythm-border(right,  $width: 1px, $lines: 0.65);
 }
 
-/**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- * 3. Correct alignment displayed oddly in IE 6/7.
- */
+
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+// 3. Correct alignment displayed oddly in IE 6/7.
+
 legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
+  // 2
+  padding: 0;
+  // 1
+  border: 0;
+
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    *margin-left: -7px; /* 3 */ /* LTR */
+    // 3 LTR
+    *margin-left: -7px;
   }
 }
 
-/**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
- * 4. Improve appearance and consistency with IE 6/7.
- * 5. Keep form elements constrained in their containers.
- */
+
+// 1. Correct font family not being inherited in all browsers.
+// 2. Correct font size not being inherited in all browsers.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+// 4. Improve appearance and consistency with IE 6/7.
+// 5. Keep form elements constrained in their containers.
+
 button,
 input,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 2 */
-  margin: 0; /* 3 */
-  max-width: 100%; /* 5 */
-  //@include box-sizing(border-box); /* 5 */
+  // 5
+  box-sizing: border-box;
+  // 5
+  max-width: 100%;
+  // 3
+  margin: 0;
+  // 1
+  font-family: inherit;
+  // 2
+  font-size: 100%;
+
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    // 4
+    vertical-align: baseline;
+    // 4
+    *vertical-align: middle;
+  }
 }
 
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+
 button,
 input {
   line-height: normal;
 }
 
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
- */
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+// Correct `select` style inheritance in Firefox 4+ and Opera.
+
 button,
 select {
   text-transform: none;
 }
 
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- */
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+// 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+//    Known issue: inner spacing remains in IE 6.
+
 button,
-html input[type="button"], /* 1 */
+// 1
+html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
+  // 3
   cursor: pointer;
+  // 2
+  -webkit-appearance: button;
+
+
+  @if $legacy-support-for-ie7 {
+    // 4
+    *overflow: visible;
+  }
 }
 
-/**
- * Re-set default cursor for disabled elements.
- */
+// Re-set default cursor for disabled elements.
+
 button[disabled],
 html input[disabled] {
   cursor: default;
 }
 
-/**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
- */
+
+// 1. Address box sizing set to `content-box` in IE 8/9.
+// 2. Remove excess padding in IE 8/9.
+// 3. Remove excess padding in IE 7.
+//    Known issue: excess padding remains in IE 6.
+
+input[type="checkbox"],
+input[type="radio"] {
+  // 1
+  box-sizing: border-box;
+  // 2
+  padding: 0;
+
+  @if $legacy-support-for-ie7 {
+    // 3
+    *height: 13px;
+    // 3
+    *width: 13px;
+  }
+}
+
+
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+
+input[type="search"] {
+  // 2
+  box-sizing: content-box;
+  // 1
+  -webkit-appearance: textfield;
+}
+
+
+// Remove inner padding and search cancel button in Safari 5 and Chrome
+// on OS X.
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// Remove inner padding and border in Firefox 4+.
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+
+// 1. Remove default vertical scrollbar in IE 8/9.
+// 2. Improve readability and alignment in all browsers.
+
 textarea {
-  overflow: auto; /* 1 */
-  vertical-align: top; /* 2 */
+  // 1
+  overflow: auto;
+  // 2
+  vertical-align: top;
 }
 
-/* Drupal-style form labels. */
+// Drupal-style form labels.
 label {
   display: block;
 }
 
-/**
- * SITE SPECIFIC form element styles. Adapted from purecss, under the Yahoo! Inc. BSD license
- * Please visit http://purecss.io/ for more information
- * purecss.io: Copyright 2014 Yahoo! Inc. All rights reserved.
- */
+
+// SITE SPECIFIC form element styles. Adapted from purecss, under the Yahoo! Inc. BSD license
+// Please visit http://purecss.io/ for more information
+// purecss.io: Copyright 2014 Yahoo! Inc. All rights reserved.
+
 
 input[type="text"],
 input[type="password"],
@@ -536,77 +630,57 @@ input[type="tel"],
 input[type="color"],
 select,
 textarea {
-  //@include box-sizing(border-box);
-  color: $form-text;
-  background: $white;
-  width: 100%;
-  text-indent: .5em;
-  border: 1px solid $input-border-color;
+  box-sizing: border-box;
   outline: none;
-  //@include trans(.1s, ease-out);
+  text-indent: .5em;
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+
   &:hover,
   &:focus,
   &:active {
-    border: 1px solid $input-border-hover;
     outline: none;
   }
 }
 
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="url"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="week"],
-input[type="number"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-select {
-  height: 2.5em;
-}
 
 
-/*
-Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
-since IE8 won't execute CSS that contains a CSS3 selector.
-*/
+// Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+// since IE8 won't execute CSS that contains a CSS3 selector.
+
 input:not([type]) {
-  //@include box-sizing(border-box);
-  color: $input-not;
+  box-sizing: border-box;
+  outline: none;
+  border: 1px solid $input-not-border;
   background: $input-not-background;
-  width: 100%;
+  color: $input-not;
   text-indent: .5em;
-  border: 1px solid $input-not-border;
-  outline: none;
-  //@include trans(.1s, ease-out);
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+
   &:hover,
   &:focus,
   &:active {
-    border: 1px solid $input-not-hover;
     outline: none;
+    border: 1px solid $input-not-hover;
   }
 }
 
 
-/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
-/* May be able to remove this tweak as color inputs become more standardized across browsers. */
+// Chrome (as of v.32/34 on OS X) needs additional room for color to display.
+// May be able to remove this tweak as color inputs become more standardized across browsers.
 input[type="color"] {
-    padding: .2em .5em;
+  padding: .2em .5em;
 }
 
-/*
-Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
-since IE8 won't execute CSS that contains a CSS3 selector.
-*/
+
+// Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+// since IE8 won't execute CSS that contains a CSS3 selector.
+
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-    outline: 1px dotted $input-focus-outline;
+  outline: 1px auto $input-focus-outline;
 }
 
 input[type="text"][disabled],
@@ -625,65 +699,70 @@ input[type="tel"][disabled],
 input[type="color"][disabled],
 select[disabled],
 textarea[disabled] {
-    cursor: not-allowed;
-    background-color: $input-disabled-background;
-    color: $input-disabled-text;
+  background-color: $input-disabled-background;
+  color: $input-disabled-text;
+  cursor: not-allowed;
 }
 
-/*
-Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
-since IE8 won't execute CSS that contains a CSS3 selector.
-*/
+
+// Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+// since IE8 won't execute CSS that contains a CSS3 selector.
+
 input:not([type])[disabled] {
-    cursor: not-allowed;
-    background-color: $input-disabled-not-background;
-    color: $input-disabled-not-text;
+  background-color: $input-disabled-not-background;
+  color: $input-disabled-not-text;
+  cursor: not-allowed;
 }
+
 input[readonly],
 select[readonly],
 textarea[readonly] {
-    background: $input-readonly-background;
-    color: $input-readonly-text;
-    border-color: $input-readonly-border;
+  border-color: $input-readonly-border;
+  background: $input-readonly-background;
+  color: $input-readonly-text;
 }
 
 input:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
-    color: $input-invalid-text;
-    border-color: $input-invalid-border;
+  border-color: $input-invalid-border;
+  color: $input-invalid-text;
 }
+
 input:focus:invalid:focus,
 textarea:focus:invalid:focus,
 select:focus:invalid:focus {
-    border-color: $input-invalid-border-focus;
+  border-color: $input-invalid-border-focus;
 }
+
 input[type="file"]:focus:invalid:focus,
 input[type="radio"]:focus:invalid:focus,
 input[type="checkbox"]:focus:invalid:focus {
-    outline-color: $input-check-outline;
+  outline-color:$input-check-outline;
 }
 
 input[type="checkbox"],
 input[type="radio"] {
   position: relative;
   top: 7px;
-  margin-right: .5em;
   float: left;
+  margin-right: .5em;
 }
 
 select {
-  //@include box-sizing(border-box);
+  box-sizing: border-box;
   width: 100%;
-  border-radius: 0;
   height: 2em;
-  text-indent: .5em;
+  outline: none;
+  border: 1px solid $select-border;
+  border-radius: 0;
   background-color: $select-background;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU4QTMzNkUyNDAwQzExRTNBOEY4OTE4N0E1NkQ4QjVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU4QTMzNkUzNDAwQzExRTNBOEY4OTE4N0E1NkQ4QjVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RThBMzM2RTA0MDBDMTFFM0E4Rjg5MTg3QTU2RDhCNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RThBMzM2RTE0MDBDMTFFM0E4Rjg5MTg3QTU2RDhCNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4x37VGAAAAWklEQVR42mI0NjZeysDAEMWAHyxlAhKZQPwAj6L7QJwFUvgJiKOB+C8WRX+gcp+YoALHgLgZi0KQ2HEQgwlJsAWIjyLxjwBxK4yDrBBkdQwQf4DiGGTnAAQYAGJbEyV4nwHtAAAAAElFTkSuQmCC);
   background-repeat: no-repeat;
   background-position: 97% 50%;
-  border: 1px solid $select-border;
-  outline: none;
-  //@include trans(.1s, ease-out);
+  text-indent: .5em;
+  -webkit-appearance: none;
+
   &:hover,
   &:focus,
   &:active {
@@ -693,20 +772,23 @@ select {
 }
 
 select[multiple] {
-    height: auto;
+  height: auto;
+}
+
+label {
 }
 
 fieldset {
-    margin: 0;
-    padding: rhythm(.25, $text) 0 rhythm(.75, $text);
-    border: 0;
+  margin: 0;
+  padding: .25em 0 .75em;
+  border: 0;
 }
 
 legend {
-    display: block;
-    width: 100%;
-    padding: rhythm(.5, $text) 0;
-    //@include trailer(1.5);
+  display: block;
+  width: 100%;
+  margin-bottom: 1.5em;
+  padding: .5em 0;
 }
 
 input + input,
@@ -716,13 +798,12 @@ select + input {
   margin-top: .5em;
 }
 
-button {
-  background: $button-background;
+button:not(.toolbar-icon) {
+  margin: 1em 0;
+  padding: 1em;
   border: 1px solid transparent;
+  background: $button-background;
   color: $button-text;
-  margin: rhythm(1, $text) 0;
-  padding: rhythm(1, $text);
-  //@include trans(.1s, ease-out);
 }
 
 button:hover {
@@ -737,30 +818,47 @@ button:focus {
 }
 
 button[type="reset"] {
+  padding: 1em;
+  border: none;
+  background: transparent;
   color: $button-reset-text;
-  font-size: 14px;
   text-decoration: underline;
-  background: transparent;
-  border: none;
-  padding: rhythm(1, $text) rhythm(1, $text);
+  font-size: 14px;
 }
 
 button[type="reset"]:hover {
   color: $button-reset-text-hover;
 }
 
+// Styles for placeholder text
+::-webkit-input-placeholder {
+  color: $placeholder-text;
+}
+
+:-moz-placeholder {
+  // Firefox 18-
+  color: $placeholder-text;
+}
+
+::-moz-placeholder {
+  // Firefox 19+
+  color: $placeholder-text;
+}
+
+:-ms-input-placeholder {
+  color: $placeholder-text;
+}
+
 
-/* ==========================================================================
-   Tables
-   ========================================================================== */
+// Tables
 
 table {
-  /* Remove most spacing between table cells. */
+  // Add margins.
+  margin-top: 1em;
+  margin-bottom: 1em;
+  // Remove most spacing between table cells.
   border-collapse: collapse;
   border-spacing: 0;
-  /* Prevent cramped-looking tables */
-  /* width: 100%; */
-  /* Add vertical rhythm margins. */
-  //@include leader(1);
-  //@include trailer(1);
+  // Prevent cramped-looking tables
 }
+/* stylelint-enable */
\ No newline at end of file
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-1up.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-1up.scss
index e759132..425fe1a 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-1up.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-1up.scss
@@ -4,6 +4,7 @@
  */
 
 .l-1up {
+  @include zen-grid-item-base();
   @include zen-new-row();
-  @include zen-grid-item(12,1);
+  @include zen-grid-item(12, 1);
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-2up.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-2up.scss
index 9064643..33e5f51 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-2up.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-2up.scss
@@ -11,23 +11,25 @@
 // =============================================================================
 
 .l-2up {
-  float: left;
-  @include zen-grid-item-base();
-  @include zen-flow-item-width(12, 12, $omega-gutter: false);
-  @include breakpoint($bp2){
-    @include zen-flow-item-width(6, 12, $omega-gutter: true);
-  }
+  @include zen-new-row();
+  @include zen-grid-item(12, 1);
 }
+
 // make every 2nd list item wrap
-.l-2up:nth-of-type(2n) {
-  @include breakpoint($bp2){
-    @include zen-flow-item-width(6, 12, $omega-gutter: false);
+.l-2up:nth-of-type(2n+1) {
+
+  @include breakpoint($bp1) {
+    @include zen-new-row(right);
+    @include zen-grid-item(6, 1);
   }
 }
+
 // clears a new row from the tallest element in the row above
-.l-2up:nth-of-type(2n+1) {
-  @include breakpoint($bp2){
-    @include zen-new-row();
+.l-2up:nth-of-type(2n+2) {
+
+  @include breakpoint($bp1) {
+    @include zen-new-row(right);
+    @include zen-grid-item(6, 7);
   }
 }
 
@@ -37,16 +39,19 @@
 
 .l-2up--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-grid-item(6,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(6, 1);
   }
 }
+
 .l-2up--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(6,7);
+    @include zen-grid-item(6, 7);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-33-66.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-33-66.scss
index 4220c68..0f63611 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-33-66.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-33-66.scss
@@ -5,17 +5,21 @@
 
 .l-33-66--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-grid-item(4,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(4, 1);
+    @include zen-float(left);
   }
 }
 
 .l-33-66--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(8,5);
+    @include zen-grid-item(8, 5);
+    @include zen-float(left);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-3up.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-3up.scss
index 37cef31..0cca0fd 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-3up.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-3up.scss
@@ -11,35 +11,44 @@
 // =============================================================================
 
 .l-3up {
-  float: left;
   @include zen-grid-item-base();
-  //@include zen-grid-flow-item(12, 12, $omega-gutter: false);
-  @include breakpoint($bp1){
-    //@include zen-grid-flow-item(6, 12, $omega-gutter: true);
-  }
-  @include breakpoint($bp3){
-    //@include zen-grid-flow-item(4, 12, $omega-gutter: true);
-  }
-}
-// make every 2nd list item wrap
-.l-3up:nth-of-type(2n) {
-  @include breakpoint($bp1){
-    //@include zen-grid-flow-item(6, 12, $omega-gutter: false);
-  }
-  @include breakpoint($bp3){
-    //@include zen-grid-flow-item(4, 12, $omega-gutter: true);
+  @include zen-grid-item(12, 1);
+  @include zen-new-row();
+
+  &:nth-of-type(3n+1) {
+
+    @include breakpoint($bp1) {
+      @include zen-grid-item(6, 1);
+    }
+
+    @include breakpoint($bp3) {
+      @include zen-new-row();
+      @include zen-grid-item(4, 1);
+    }
   }
-}
-// make every 3rd list item wrap
-.l-3up:nth-of-type(3n) {
-  @include breakpoint($bp3){
-    //@include zen-grid-flow-item(4, 12, $omega-gutter: false);
+
+  &:nth-of-type(3n+2) {
+    @include breakpoint($bp1) {
+      @include zen-grid-item(6, 7);
+      @include zen-new-row(none);
+    }
+
+    @include breakpoint($bp3) {
+      @include zen-grid-item(4, 5);
+    }
   }
-}
-// clears a new row from the tallest element in the row above
-.l-3up:nth-of-type(3n+1) {
-  @include breakpoint($bp3){
-    @include zen-new-row();
+
+  &:nth-of-type(3n+3) {
+
+    @include breakpoint($bp1) {
+      @include zen-new-row();
+      @include zen-grid-item(6, 1);
+    }
+
+    @include breakpoint($bp3) {
+      @include zen-new-row(none);
+      @include zen-grid-item(4, 9);
+    }
   }
 }
 
@@ -49,25 +58,29 @@
 
 .l-3up--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-new-row();
-    @include zen-grid-item(4,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(4, 1);
   }
 }
+
 .l-3up--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(4,5);
+    @include zen-grid-item(4, 5);
   }
 }
+
 .l-3up--3 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(4,9);
+    @include zen-grid-item(4, 9);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-4up.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-4up.scss
index 08b662b..bef5e3d 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-4up.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-4up.scss
@@ -10,35 +10,42 @@
 // $omega-gutter: "true"  = will not wrap an item
 // =============================================================================
 
-.l-4up {
-  float: left;
+.l-4up,
+%l-4up {
   @include zen-grid-item-base();
   @include zen-flow-item-width(12, 12, $omega-gutter: false);
-  @include breakpoint($bp1){
+  float: left;
+
+  @include breakpoint($bp1) {
     @include zen-flow-item-width(6, 12, $omega-gutter: true);
   }
-  @include breakpoint($bp3){
+
+  @include breakpoint($bp3) {
     @include zen-flow-item-width(3, 12, $omega-gutter: true);
   }
 }
 // make every 2nd list item wrap
 .l-4up:nth-of-type(2n) {
-  @include breakpoint($bp1){
+
+  @include breakpoint($bp1) {
     @include zen-flow-item-width(6, 12, $omega-gutter: false);
   }
-  @include breakpoint($bp3){
+
+  @include breakpoint($bp3) {
     @include zen-flow-item-width(3, 12, $omega-gutter: true);
   }
 }
 // make every 4th list item wrap
 .l-4up:nth-of-type(4n) {
-  @include breakpoint($bp3){
+
+  @include breakpoint($bp3) {
     @include zen-flow-item-width(3, 12, $omega-gutter: false);
   }
 }
 // clears a new row from the tallest element in the row above
 .l-4up:nth-of-type(4n+1) {
-  @include breakpoint($bp3){
+
+  @include breakpoint($bp3) {
     @include zen-new-row();
   }
 }
@@ -49,32 +56,39 @@
 
 .l-4up--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-grid-item(3,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(3, 1);
   }
 }
+
 .l-4up--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(3,4);
+    @include zen-grid-item(3, 4);
   }
 }
+
 .l-4up--3 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(3,7);
+    @include zen-grid-item(3, 7);
   }
 }
+
 .l-4up--4 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(3,10);
+    @include zen-grid-item(3, 10);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-66-33.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-66-33.scss
index 0c38eb2..2cc7fdf 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-66-33.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-66-33.scss
@@ -3,19 +3,44 @@
  * Layout rules for two thirds / one third (66/33) content
  */
 
+.l-66-33 {
+  @include zen-grid-item-base();
+  @include zen-flow-item-width(12, 12, $omega-gutter: false);
+  @include zen-float();
+  
+  &:nth-of-type(2n+1) {
+
+    @include breakpoint($bp1) {
+      @include zen-flow-item-width(8, 12, $omega-gutter: false, $alpha-gutter: false);
+    }
+  }
+
+  // clears a new row from the tallest element in the row above
+  &:nth-of-type(2n+2) {
+
+    @include breakpoint($bp1) {
+      @include zen-flow-item-width(4, 12, $omega-gutter: false, $alpha-gutter: true);
+    }
+  }
+}
+
 .l-66-33--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-grid-item(8,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(8, 1);
+    @include zen-float(left);
   }
 }
 
 .l-66-33--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(4,9);
+    @include zen-grid-item(4, 9);
+    @include zen-float(left);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-6up.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-6up.scss
index f4ad4fc..6ff3166 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-6up.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/layouts/_l-6up.scss
@@ -3,55 +3,154 @@
  * Layout rules for 6-up content
  */
 
+.l-6up {
+  @include zen-grid-item-base();
+  @include zen-flow-item-width(12, 12, $omega-gutter: false);
+  float: left;
+
+  &:nth-of-type(2n+1) {
+
+    // act like a 2up at bp1
+    @include breakpoint($bp0 $bp1) {
+      @include zen-flow-item-width(6, 12, $omega-gutter: true);
+    }
+  }
+
+  &:nth-of-type(2n+2) {
+
+    // act like a 2up at bp1
+    @include breakpoint($bp0 $bp1) {
+      @include zen-flow-item-width(6, 12, $omega-gutter: false);
+    }
+  }
+
+  &:nth-of-type(3n+1) {
+
+    // act like a 3up at bp2
+    @include breakpoint($bp1 $bp2) {
+      @include zen-flow-item-width(4, 12, $omega-gutter: true);
+    }
+
+  }
+
+  &:nth-of-type(3n+2) {
+
+    // act like a 3up at bp2
+    @include breakpoint($bp1 $bp2) {
+      @include zen-flow-item-width(4, 12, $omega-gutter: false);
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+
+    // act like a 3up at bp2
+    @include breakpoint($bp1 $bp2) {
+      @include zen-flow-item-width(4, 12, $omega-gutter: false, $alpha-gutter: true);
+    }
+  }
+
+  &:nth-of-type(4n+1) {
+    // act like a 4up at bp3
+    @include breakpoint($bp2 $bp3) {
+      @include zen-flow-item-width(3, 12, $omega-gutter: true);
+    }
+  }
+
+  &:nth-of-type(4n+2) {
+    // act like a 4up at bp3
+    @include breakpoint($bp2 $bp3) {
+      @include zen-flow-item-width(3, 12, $omega-gutter: false);
+    }
+  }
+
+  &:nth-of-type(4n+3),
+  &:nth-of-type(4n+4) {
+    // act like a 4up at bp3
+    @include breakpoint($bp2 $bp3) {
+      @include zen-flow-item-width(3, 12, $omega-gutter: false, $alpha-gutter: true);
+    }
+  }
+
+  &:nth-of-type(6n+1) {
+    // act like a 4up at bp3
+    @include breakpoint($bp3) {
+      @include zen-flow-item-width(2, 12, $omega-gutter: true);
+    }
+  }
+
+  &:nth-of-type(6n+2) {
+    // act like a 4up at bp3
+    @include breakpoint($bp3) {
+      @include zen-flow-item-width(2, 12, $omega-gutter: false);
+    }
+  }
+
+  &:nth-of-type(6n+3),
+  &:nth-of-type(6n+4),
+  &:nth-of-type(6n+5),
+  &:nth-of-type(6n+6) {
+    // act like a 4up at bp3
+    @include breakpoint($bp3) {
+      @include zen-flow-item-width(2, 12, $omega-gutter: false, $alpha-gutter: true);
+    }
+  }
+}
+
 .l-6up--1 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
-    @include zen-grid-item(2,1);
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
+    @include zen-grid-item(2, 1);
   }
 }
 
 .l-6up--2 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(2,3);
+    @include zen-grid-item(2, 3);
   }
 }
 
 .l-6up--3 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(2,5);
+    @include zen-grid-item(2, 5);
   }
 }
 
 .l-6up--4 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(2,7);
+    @include zen-grid-item(2, 7);
   }
 }
 
 .l-6up--5 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(2,9);
+    @include zen-grid-item(2, 9);
   }
 }
 
 .l-6up--6 {
   @include zen-new-row();
-  @include zen-grid-item(12,1);
-  @include breakpoint($bp1){
+  @include zen-grid-item(12, 1);
+
+  @include breakpoint($bp1) {
     @include zen-new-row(none);
-    @include zen-grid-item(2,11);
+    @include zen-grid-item(2, 11);
   }
 }
diff --git a/STYLEGUIDE_TEMPLATE/source/code/sass/styleguide/_styleguide.scss b/STYLEGUIDE_TEMPLATE/source/code/sass/styleguide/_styleguide.scss
index 4758867..623dc2d 100644
--- a/STYLEGUIDE_TEMPLATE/source/code/sass/styleguide/_styleguide.scss
+++ b/STYLEGUIDE_TEMPLATE/source/code/sass/styleguide/_styleguide.scss
@@ -32,8 +32,8 @@
 .styleguide-copyright {
   //@include adjust-font-size-to($label, 1.5);
   color: $gray-medium;
-  padding: rhythm(6, $text) 0;
-  margin-top: rhythm(10, $text);
+  padding: 4em 0;
+  margin-top: 8em;
   border-top: 1px solid $gray-light;
 }
 
@@ -42,13 +42,13 @@
 }
 
 .styleguide-section {
-  margin-top: rhythm(6, $text);
+  margin-top: 4em;
   border-top: 1px solid $gray-light;
-  padding-top: rhythm(3, $text);
+  padding-top: 2em;
 }
 
 .styleguide-list {
-  padding: 0 0 0 rhythm(2, $text);
+  padding: 0 0 0 2em;
   h4 {
     //@include leader(0);
     //@include trailer(0.25);
@@ -58,33 +58,36 @@
 
 .styleguide-component {
   background-color: $white;
-  padding: rhythm(2, $text) 0;
+  padding: 2em 0;
 }
 
 .component-header {
   background-color: $gray-light;
-  margin: rhythm(4, $text) 0;
-  padding: rhythm(4, $text) 0;
+  margin: 1.5em 0;
+  padding: 1.5em 0;
 }
 
 .color-title {
   border-bottom: 1px solid $gray-light;
-  padding-bottom: rhythm(1, $text);
-  margin: rhythm(2, $text) 0;
+  padding-bottom: 1em;
+  margin: 2em 0;
 }
 
 .color-block {
   width: 100%;
   height: 50px;
-  margin-top: rhythm(1, $text);
+  margin-top: 1em;
 }
 
 .color-label {
   color: $gray-medium;
-  //@include trailer(2);
 }
 
 .styleguide-swatch {
   width: 50%;
   padding: 25px;
 }
+
+.styleguide-body {
+  margin-bottom: 2em;
+}