zurb-foundation 3.0.9 → 3.1.0.rc1

data/scss/foundation/components/modules/_navbar.scss

@@ -3,10 +3,10 @@
 
   .nav-bar { height: $navBarHeight; background: lighten($black, 30%); margin-top: $navBarHeight / 2; padding: 0;
 
-    &>li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid lighten($black, 20%); border-right: none; line-height: $navBarHeight - 2; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset);
+    &>li { float: $defaultFloat; display: block; position: relative; padding: 0; margin: 0; border: 1px solid lighten($black, 20%); border-#{$defaultOpposite}: none; line-height: $navBarHeight - 2; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset);
 
       &:first-child { @include box-shadow(0 0 0); }
-      &:last-child { border-right: solid 1px lighten($black, 20%); @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); }
+      &:last-child { border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); }
 
       &.active { background: $mainColor; border-color: darken($mainColor, 10%);
         &>a { color: $white; cursor: default; }
@@ -19,34 +19,36 @@
       .flyout { display: none; }
 
       &.has-flyout {
-        &>a:first-child { padding-right: 36px; position: relative;
-          &:after { @include cssTriangle(4px, darken($white, 10%), top); position: absolute; right: 20px; top: 17px; }
+        &>a:first-child { padding-#{$defaultOpposite}: $navBarHeight; position: relative;
+          &:after { @include cssTriangle(4px, darken($white, 10%), top); position: absolute; #{$defaultOpposite}: $navBarHeight / 2; top: ($navBarHeight / 2) - 3; }
         }
-        &>a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
+        &>a.flyout-toggle { border-#{$defaultFloat}: 0 !important; position: absolute; #{$defaultOpposite}: 0; top: 0; padding: ($navBarHeight / 2); z-index: 2; display: block; }
         &.is-touch {
-          &>a:first-child { padding-right: 55px;}
-          &>a.flyout-toggle { border-left: 1px dashed #666; }
+          &>a:first-child { padding-#{$defaultOpposite}: 55px;}
+          &>a.flyout-toggle { border-#{$defaultFloat}: 1px dashed #666; }
         }
       }
     }
 
-    &>li>a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: ms(0); }
+    &>li>a:first-child { position: relative; padding: 0 ($navBarHeight / 2); display: block; text-decoration: none; font-size: ms(0); }
     &>li>input { margin: 0 10px; }
 
     &.vertical { height: auto; margin-top: 0;
 
-      &>li { float: none; border-bottom: none;
+      &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(none);
 
-        &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), left); }
-        .flyout { left: 100%; top: -1px;
-          &.right { left: auto; right: 100%; }
+        &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), $defaultFloat); }
+        .flyout { #{$defaultFloat}: 100%; top: -1px;
+          &.right { #{$defaultFloat}: auto; #{$defaultOpposite}: 100%; }
         }
+        &.active { border-#{$defaultOpposite}: solid 1px darken($mainColor, 10%); }
+        &:last-child { border-bottom: solid 1px lighten($black, 20%);}
       }
     }
 
   }
 
-  .flyout { background: darken($white, 5%); padding: 20px; margin: 0; border: 1px solid darken($white, 15%); position: absolute; top: $navBarHeight - 1; left: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba(#000, .1));
+  .flyout { background: darken($white, 5%); padding: $navBarHeight / 2; margin: 0; border: 1px solid darken($white, 15%); position: absolute; top: $navBarHeight - 1; #{$defaultFloat}: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba(#000, .1));
 
     p { line-height: 1.2; font-size: ms(0) - 1; }
     *:first-child { margin-top: 0; } /* remove margin on any first-child element */
@@ -56,17 +58,18 @@
     &.large { width: $navFlyoutBaseWidth * 1.75; }
 
     &.right { left: auto; right: -2px; }
+    &.left { right: auto; left: -2px; }
     &.up { top: auto; bottom: $navBarHeight - 1; }
 
   }
 
   ul.flyout, .nav-bar li ul { padding: 0; list-style: none;
 
-    li { border-left: solid 3px #CCC;
-      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset);
+    li { border-#{$defaultFloat}: solid 3px #CCC;
+      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: (($navBarHeight / 2) - 5) ($navBarHeight / 2); @include box-shadow(0 1px 0 $shinyEdge inset);
         &:hover { background: darken($white, 8%); color: #333; }
       }
-      &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-left: 4px solid lighten($black, 10%);
+      &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
         a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
       }
     }
@@ -76,30 +79,30 @@
 
   /* Mobile Styles */
   @media only screen and (max-device-width: 1280px) {
-    .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; }
+    .touch .nav-bar li.has-flyout>a { padding-#{$defaultOpposite}: 36px !important; }
   }
 
   @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
     .touch .nav-bar li a { @include font-size(13); }
-    .touch .nav-bar li.has-flyout>a.flyout-toggle { padding: 20px !important; }
-    .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; }
+    .touch .nav-bar li.has-flyout>a.flyout-toggle { padding: ($navBarHeight / 2) !important; }
+    .touch .nav-bar li.has-flyout>a { padding-#{$defaultOpposite}: ($navBarHeight - 4) !important; }
   }
 
   @media only screen and (max-width: $screenSmall - 1) {
     .nav-bar { height: auto;
 
       &>li { float: none; display: block; border-right: none; }
-      &>li>a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
+      &>li>a.main { text-align: $defaultFloat; border-top: 1px solid #ddd; border-#{$defaultOpposite}: none; }
       &>li:first-child>a.main { border-top: none; }
-      &>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
+      &>li.has-flyout>a.flyout-toggle { position: absolute; #{$defaultOpposite}: 0; top: 0; padding: ($navBarHeight / 2)+2; z-index: 2; display: block; }
       &>li.has-flyout.is-touch>a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
       &>li.has-flyout>a.flyout-toggle:hover span { border-top-color: #141414; }
       &.vertical>li.has-flyout>.flyout { left: 0; }
     }
 
-    .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px;
+    .flyout { position: relative; width: 100% !important; top: auto; margin-#{$defaultOpposite}: -2px; border-width: 1px 1px 0 1px;
 
-      &.right { float: none; right: auto; left: -1px; }
+      &.right { float: none; right: auto; #{$defaultFloat}: -1px; }
       &.small, &.large { width: 100% !important; }
       p:last-child { margin-bottom: 18px; }
     }

data/scss/foundation/components/modules/_orbit.scss

@@ -25,7 +25,7 @@
     max-width: 100%;
     position: absolute;
     top: 0;
-    left: 0; }
+    #{$defaultFloat}: 0; }
 
   div.orbit a.orbit-slide {
     border: none;
@@ -46,7 +46,7 @@
     overflow: hidden;
     position: absolute;
     top: 10px;
-    right: 10px;
+    #{$defaultOpposite}: 10px;
     opacity: .6;
     cursor: pointer;
     z-index: 31; }
@@ -57,7 +57,7 @@
     height: 40px;
     position: absolute;
     top: 0;
-    left: -20px;
+    #{$defaultFloat}: -20px;
     background: image-url("foundation/orbit/rotator-black.png") no-repeat;
     z-index: 3; }
 
@@ -67,16 +67,16 @@
     height: 40px;
     position: absolute;
     top: 0;
-    right: 0;
+    #{$defaultOpposite}: 0;
     z-index: 2;
     overflow: hidden; }
 
   div.orbit-wrapper span.rotator.move {
-    left: 0 }
+    #{$defaultFloat}: 0 }
 
   div.orbit-wrapper span.mask.move {
     width: 40px;
-    left: 0;
+    #{$defaultFloat}: 0;
     background: image-url("foundation/orbit/timer-black.png") repeat 0 0; }
 
   div.orbit-wrapper span.pause {
@@ -85,7 +85,7 @@
     height: 40px;
     position: absolute;
     top: 0;
-    left: 0;
+    #{$defaultFloat}: 0;
     background: image-url("foundation/orbit/pause-black.png") no-repeat;
     z-index: 4;
     opacity: 0; }
@@ -112,7 +112,7 @@
     padding: 7px 0;
     @include font-size(13);
     position: absolute;
-    right: 0;
+    #{$defaultOpposite}: 0;
     bottom: 0;
     width: 100%; }
 
@@ -131,19 +131,19 @@
     margin-top: -25px;
     cursor: pointer; }
 
-  div.orbit-wrapper div.slider-nav span.right {
-    background: image-url("foundation/orbit/right-arrow.png");
+  div.orbit-wrapper div.slider-nav span.#{$defaultOpposite} {
+    background: image-url("foundation/orbit/#{$defaultOpposite}-arrow.png");
     background-size: 100%;
-    right: 0; }
+    #{$defaultOpposite}: 0; }
 
-  div.orbit-wrapper div.slider-nav span.left {
-    background: image-url("foundation/orbit/left-arrow.png");
+  div.orbit-wrapper div.slider-nav span.#{$defaultFloat} {
+    background: image-url("foundation/orbit/#{$defaultFloat}-arrow.png");
     background-size: 100%;
-    left: 0; }
+    #{$defaultFloat}: 0; }
 
   .lt-ie9 {
-    div.orbit-wrapper div.slider-nav span.right { background: image-url("foundation/orbit/right-arrow-small.png"); }
-    div.orbit-wrapper div.slider-nav span.left { background: image-url("foundation/orbit/left-arrow-small.png"); }
+    div.orbit-wrapper div.slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow-small.png"); }
+    div.orbit-wrapper div.slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow-small.png"); }
   }
 
   /* Bullet Nav ---------------------- */
@@ -153,13 +153,13 @@
     z-index: 30;
     list-style: none;
     bottom: -40px;
-    left: 50%;
-    margin-left: -50px;
+    #{$defaultFloat}: 50%;
+    margin-#{$defaultFloat}: -50px;
     padding: 0; }
 
   ul.orbit-bullets li {
-    float: left;
-    margin-left: 5px;
+    float: $defaultFloat;
+    margin-#{$defaultFloat}: 5px;
     cursor: pointer;
     color: #999;
     text-indent: -9999px;
@@ -197,13 +197,13 @@
     z-index: 30;
     list-style: none;
     bottom: -50px;
-    left: 50%;
-    margin-left: -50px;
+    #{$defaultFloat}: 50%;
+    margin-#{$defaultFloat}: -50px;
     padding: 0; }
 
   ul.orbit-bullets li {
-    float: left;
-    margin-left: 5px;
+    float: $defaultFloat;
+    margin-#{$defaultFloat}: 5px;
     cursor: pointer;
     color: #999;
     text-indent: -9999px;

data/scss/foundation/components/modules/_reveal.scss

@@ -6,9 +6,9 @@
 
 /* Reveal Modals ---------------------- */
 
-  .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; left: 0; }
+  .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; #{$defaultFloat}: 0; }
 
-  .reveal-modal { background: $white; visibility: hidden; display: none; top: 100px; left: 50%; margin-left: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
+  .reveal-modal { background: $white; visibility: hidden; display: none; top: 100px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
     *:first-child { margin-top: 0; }
     *:last-child { margin-bottom: 0; }
     .close-reveal-modal {
@@ -16,18 +16,18 @@
       line-height: .5;
       position: absolute;
       top: 8px;
-      right: 11px;
+      #{$defaultOpposite}: 11px;
       color: #aaa;
       text-shadow: 0 -1px 1px rgba(0,0,0,.6);
       font-weight: bold;
       cursor: pointer;
     }
-    &.small   { width: 30%; margin-left: -10%; }
-    &.medium  { width: 40%; margin-left: -20%; }
-    &.large   { width: 60%; margin-left: -30%; }
-    &.xlarge  { width: 70%; margin-left: -35%; }
-    &.expand  { width: 90%; margin-left: -45%; }
-    .row { min-width: 0; }
+    &.small   { width: 30%; margin-#{$defaultFloat}: -15%; }
+    &.medium  { width: 40%; margin-#{$defaultFloat}: -20%; }
+    &.large   { width: 60%; margin-#{$defaultFloat}: -30%; }
+    &.xlarge  { width: 70%; margin-#{$defaultFloat}: -35%; }
+    &.expand  { width: 90%; margin-#{$defaultFloat}: -45%; }
+    .row { min-width: 0; margin-bottom: 10px; }
   }
 
   /* Mobile */
@@ -38,7 +38,7 @@
     .reveal-modal.small,
     .reveal-modal.medium,
     .reveal-modal.large,
-    .reveal-modal.xlarge { width: 80%; top: 15px; left: 50%; margin-left: -40%; padding: 20px; height: auto; }
+    .reveal-modal.xlarge { width: 80%; top: 15px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -40%; padding: 20px; height: auto; }
   }
 
   /* NOTES

data/scss/foundation/components/modules/_tabs.scss

@@ -1,33 +1,33 @@
 /* Requires
-   globals.css
-   app.js */
+    -globals.css
+    -app.js */
 
 /* Tabs ---------------------- */
 
   dl.tabs { border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: 20px;
     &.contained { margin-bottom: 0; }
 
-    dt { color: darken($white, 30%); cursor: default; display: block; float: left; font-size: ms(0) - 2px; height: $tabHeight; line-height: $tabHeight; padding: 0 9px 0 20px; width: auto; text-transform: uppercase;
-      &:first-child { padding: 0 9px 0 0; }
+    dt { color: darken($white, 30%); cursor: default; display: block; float: $defaultFloat; font-size: ms(0) - 2px; height: $tabHeight; line-height: $tabHeight; padding: 0; padding-#{$defaultOpposite}: 9px; padding-#{$defaultFloat}: 20px; width: auto; text-transform: uppercase;
+      &:first-child { padding: 0; padding-#{$defaultOpposite}: 9px; }
     }
 
-    dd { display: block; float: left; padding: 0; margin: 0;
+    dd { display: block; float: $defaultFloat; padding: 0; margin: 0;
       a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4;
         &:focus { font-weight: bold; color: $mainColor; }
       }
       &.active { border-top: 3px solid $mainColor; margin-top: -3px;
-        a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-left: 1px solid darken($white, 10%); border-right: 1px solid darken($white, 10%); font-weight: bold; }
+        a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-#{$defaultFloat}: 1px solid darken($white, 10%); border-#{$defaultOpposite}: 1px solid darken($white, 10%); font-weight: bold; }
       }
-      &:first-child { margin-left: 0; }
+      &:first-child { margin-#{$defaultFloat}: 0; }
     }
 
     &.vertical { height: auto; border-bottom: 1px solid darken($white, 10%);
       dt, dd { float: none; height: auto; }
 
-      dd { border-left: 3px solid darken($white, 20%);
+      dd { border-#{$defaultFloat}: 3px solid darken($white, 20%);
         a { background: darken($white, 5%); border: none; border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset);
         }
-        &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-left: 4px solid lighten($black, 10%);
+        &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
           a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
         }
         &:first-child a.active { margin: 0; }
@@ -35,8 +35,8 @@
     }
 
     &.pill { border-bottom: none; margin-bottom: 10px;
-      dd { margin-right: 10px;
-        &:last-child { margin-right: 0; }
+      dd { margin-#{$defaultOpposite}: 10px;
+        &:last-child { margin-#{$defaultOpposite}: 0; }
         a { @include border-radius(1000px); background: darken($white, 10%); height: $tabHeight - 14; line-height: $tabHeight - 14; color: #666; }
 
         &.active { border: none; margin-top: 0;
@@ -44,6 +44,9 @@
         }
       }
       &.contained { border-bottom: solid 1px #eee; margin-bottom: 0; }
+      &.two-up, &.three-up, &.four-up, &.five-up { 
+        dd { margin-#{$defaultOpposite}: 0; }
+      }
     }
 
     &.two-up, &.three-up, &.four-up, &.five-up {
@@ -77,7 +80,7 @@
 
     .tabs.mobile { border-bottom: solid 1px #ccc; height: auto;
 
-      dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
+      dd a { padding: 18px 20px; border: none; border-#{$defaultFloat}: none; border-#{$defaultOpposite}: none; border-top: 1px solid #ccc; background: #fff; }
       dd a.active { border: none; background: $mainColor; color: #fff; margin: 0; position: static; top: 0; height: auto; }
       dd:first-child a.active { margin: 0; }
     }
@@ -85,5 +88,5 @@
     dl.contained.mobile { margin-bottom: 0; }
     dl.contained.tabs.mobile dd a { padding: 18px 20px; }
 
-    dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; }
+    dl.tabs.mobile + ul.contained { margin-#{$defaultFloat}: -20px; margin-#{$defaultOpposite}: -20px; border-width: 0 0 1px 0; }
   }

data/scss/foundation/components/modules/_topbar.scss

@@ -0,0 +1,246 @@
+/*
+  Foundation Top Bar
+
+  Requires:
+    -jquery.foundation.topbar.js
+
+  Notes:
+    - <nav class="top-bar"> can have .fixed added to make it stick to the top of viewport. Can add .contain-to-grid to top-bar to make it full width but content on grid.
+    - <li class="name"> creates a branding area that can be linked to homepage
+      - Can include text, image or both inside this <li>.
+    - <li class="divider"> creates a divider between nav items, add margins for space
+    - <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search"
+*/
+
+  /* <nav> */
+  .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
+
+    /* Contain width to .row width */
+    &.contain-to-grid { margin: 0 auto; position: relative; width: $rowWidth;
+
+      /* Get the black bar to extend all the way */
+      &:before, &:after { background: $topBarBgColor; content:""; display: block; height: $topBarHeight; position: absolute; width: 1000px; }
+      &:before { left: -100%; }
+      &:after { right: -100%; }
+
+      /* Contained and fixed at the top */
+      &.fixed { left: 50%; margin-left: -($rowWidth / 2); position: fixed; }
+      ul li.name h1 a { padding-left: $columnGutter / 2; }
+    }
+
+    /* First <ul> for branding, title, name, etc */
+    &>ul {
+      .name {
+        h1 { line-height: $topBarHeight; margin: 0;
+          a { font-weight: $topBarTitleWeight; padding: 0 $topBarHeight / 2; font-size: $topBarTitleSize !important; }
+        }
+        img { margin-top: -5px; vertical-align: middle; }
+      }
+    }
+
+    /* topbar global <ul> styles */
+    ul { display: inline; height: $topBarHeight; line-height: $topBarHeight; list-style: none;
+
+      /* Main Navigation links style */
+      &>li { float: left;
+        a:not(.button) { color: $topBarLinkColor; display: block; font-size: $topBarLinkSize; font-weight: $topBarLinkWeight; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3; }
+        &:hover, &.active { background: darken($topBarBgColor, 20%);
+          a { color: darken($topBarLinkColor, 15%); }
+        }
+
+        /* Dividers between navigation */
+        &.divider { background: darken($topBarBgColor, 20%); @include box-shadow(1px 0 0 rgba(255,255,255,0.10)); height: 100%; margin-right: 1px; width: 1px; }
+
+        /* Put a button in an <li> but give is a class */
+        &.has-button {
+          a.button { margin: 0 $topBarHeight / 4; }
+          &:hover { background: $topBarBgColor;
+            a { color: #fff; }
+          }
+        }
+
+        /* Put a search bar or text input in the bar */
+        &.search { padding: 0 $topBarHeight / 3;
+          form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarSearchWidth;
+            input[type=text] { @include border-right-radius(0); float: left; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; //28px margin-bottom: 0; width: $topBarSearchWidth - 70px;
+              &+.button { border-left: none; @include border-left-radius(0); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; }
+            }
+            input[type=search] { font-size: 16px; margin-bottom: 0; }
+          }
+          &:hover { background: $topBarBgColor; }
+        }
+
+        /* Hide the triangle for breakpoint menu */
+        &.toggle-topbar { display: none; }
+
+        /* li.has-dropdown */
+        &.has-dropdown { position: relative;
+          &:hover { &>.dropdown { display: block; visibility: visible; } }
+          a { padding-right: $topBarHeight * .75;
+            &:after { @include cssTriangle($topBarDropToggleSize, #fff, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; }
+          }
+          .dropdown { background: $topBarBgColor; left: 0; margin: 0; padding: $topBarHeight / 5 0 0 0; position: absolute; visibility: hidden; z-index: 99;
+            li { background: $topBarBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px;
+              a { font-weight: normal; height: 100%; line-height: 1; padding: 5px $topBarHeight / 3 + 2 5px $topBarHeight / 3; white-space: nowrap;
+                &:after { border: none; }
+                &:hover { background: lighten($topBarBgColor, 10%); }
+              }
+              label { color: lighten($topBarBgColor, 30%); font-size: ms(0) - 4; font-weight: $topBarLinkWeight; margin: 0; padding-left: $topBarHeight / 3; text-transform: uppercase; }
+              &.divider { border-top: solid 1px darken($topBarBgColor, 20%); @include box-shadow(0 1px 0 rgba(255,255,255,.10) inset); height: 10px; padding: 0; width: 100%; }
+              &:last-child { padding-bottom: 10px; }
+            }
+          }
+
+          /* Dropdown Level 2+ */
+          .dropdown li.has-dropdown {
+            &>a { padding-right: $navBarHeight * .75;
+              &:after { border: none; content:"\00bb"; right: 5px; top: 6px; }
+            }
+            .dropdown { position: absolute; left: 100%; top: 0; }
+            &:hover {
+              &>.dropdown { display: block; }
+            }
+          }
+        }
+      }
+
+      /* Left Side <ul> */
+      &.left { float: left; width: auto; }
+
+      /* Right Side <ul> */
+      &.right { float: right; width: auto;
+        /* Dropdown Right Side Alignment */
+        .has-dropdown .dropdown { left: auto; right: -1px;
+          li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
+        }
+      }
+    }
+
+    /* Style for when you add 'fixed' as a class to .top-bar */
+    &.fixed { left: 0; position: fixed; top: 0; z-index: 99; }
+
+    .js-generated { display: none; }
+  }
+
+  /* Firefox Fixes */
+  @-moz-document url-prefix() {
+    .top-bar ul li .button.small { padding-bottom: 6px; }
+    .top-bar ul li.search form input[type=search] { font-size: 14px; height: 22px; padding: 3px; }
+  }
+
+  /* IE8 Fixes */
+  .lt-ie9 .top-bar ul li a { color: $topBarLinkColor; display: block; font-weight: $topBarLinkWeight; font-size: $topBarLinkSize; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3;
+    &.button { height: auto; line-height: 30px; margin-top: 7px; }
+    &:hover { color: darken($topBarLinkColor, 20%); }
+    img { margin-top: -5px; vertical-align: middle; }
+    &.active { background: darken($topBarBgColor, 5%); color: darken($topBarLinkColor, 15%); }
+  }
+  .lt-ie9 .top-bar ul li.has-dropdown {
+    padding-right: $topBarHeight * .75;
+    &>ul li { padding-right: 0; }
+  }
+
+  /* Mobile Styles */
+  @media only screen and (max-width: $topBarBreakPoint) {
+
+    .top-bar { margin-bottom: 0; overflow: hidden;
+      .js-generated { display: block; }
+
+      /* Override contain to grid stuff for breakpoint */
+      &.contain-to-grid { margin: 0 auto; width: auto;
+        &:before, &:after { display: none; }
+        &.fixed { left: auto; margin-left: auto; position: static; }
+      }
+      &.fixed.expanded { height: auto; }
+
+      /* Setting up the sliding area */
+      section { left: 0; position: relative; width: auto; @include single-transition(left, 300ms); }
+
+      ul { width: 100%; min-height: 100%; height: 100%; margin-bottom: 0; display: block;
+        li { float: none;
+          &.active, &:hover { background: darken($topBarBgColor, 5%); }
+
+          /* Branding and name */
+          &.name { background: darken($topBarBgColor, 20%);
+            h1 { line-height: 1; }
+          }
+
+          /* Dropdown Toggle */
+          &.toggle-topbar { cursor: pointer; display: block; height: $topBarHeight; position: absolute; right: 0; top: 0; width: 50%;
+            a { @include cssTriangle($topBarNavToggleSize, #fff, top); padding: 0; position: absolute; top: 50%; right: $topBarHeight / 2; margin-top: -($topBarNavToggleSize / 2); }
+            @if $topBarBreakPoint == 9999px { a { right: ($topBarHeight / 2) + ($columnGutter / 2);} }
+            &:hover {background: darken($topBarBgColor, 20%); }
+          }
+          &.toggle-topbar a { padding: 0 !important; }
+
+          /* Divider for breakpoint */
+          &.divider { border-bottom: solid 1px rgba(255,255,255,0.2); border-top: solid 1px darken($topBarBgColor, 15%); clear: both; height: 1px !important; margin: 8px 0 !important; width: 100%; }
+
+          /* Search Overrides for breakpoint size */
+          &.search { padding: 0 $topBarHeight / 2;
+            form { width: 100%;
+              input[type=text] { width: 75%; }
+              .button { top: 0; width: 25%; }
+            }
+          }
+
+          /* Dropdown Level 1 */
+          &.has-dropdown {
+            a { padding-right: $topBarHeight * .75;
+              &:after { @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; }
+            }
+            &:hover >.dropdown { display: block; visibility: hidden; }
+            .dropdown { visibility: hidden; z-index: 0 !important; }
+            &.moved { position: static;
+              .dropdown { top: 0; visibility: visible;
+                li {
+                  label { margin-bottom: 6px; padding-top: 6px !important; font-size: ms(0) - 3; }
+                  &:not(.title) { padding-bottom: 0;
+                    a { padding: 8px $topBarHeight / 2; font-size: ms(0); }
+                  }
+                  a, label { padding: 0 $topBarHeight / 2; }
+                  a:hover { background: transparent; display: block; }
+                  &.divider { border-bottom: solid 1px rgba(255,255,255,0.1); margin-top: 8px !important; margin-bottom: 8px !important; }
+                }
+              }
+              .back.title { padding-bottom: 0;
+                a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, #fff, right); }
+                h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; position: relative;
+                  a { padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; }
+                }
+              }
+            }
+          }
+
+          /* Dropdown Level 2 */
+          &.has-dropdown .dropdown li { background: transparent;
+            &.has-dropdown {
+              .dropdown { left: 100% !important; top: 0; right: auto !important; }
+              &>a { padding-right: $topBarHeight * .75;
+                &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
+              }
+              &.moved { position: static;
+                .dropdown { top: 0; visibility: visible; }
+              }
+              &:hover { display: block; }
+            }
+          }
+        }
+        &.left, &.right { float: none; width: 100%;
+          &>li { display: block; float: none; margin: 0 !important;
+            &.has-dropdown {
+              .dropdown { left: 100% !important; top: 0; right: auto !important; }
+            }
+          }
+        }
+      }
+      section > ul li a:not(.button) { padding-left: $topBarHeight / 2 !important; }
+
+      /* When the Small Nav is Showing */
+      &.expanded { height: 100%;
+        ul li.toggle-topbar a { @include cssTriangle($topBarNavToggleSize, rgba(255,255,255,0.5), bottom); top: auto; bottom: 50%; margin-bottom: -($topBarNavToggleSize / 2); }
+      }
+    }
+    .top-bar ul li.has-button { padding: 0 $navBarHeight / 2 5px; }
+    .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; }
+  }