updated bootstrap less files

lib/bootstrap/less/breadcrumbs.less

@@ -4,13 +4,11 @@
 
 
 .breadcrumb {
-  padding: 7px 14px;
+  padding: 8px 15px;
   margin: 0 0 @baseLineHeight;
   list-style: none;
-  #gradient > .vertical(@white, #f5f5f5);
-  border: 1px solid #ddd;
-  .border-radius(3px);
-  .box-shadow(inset 0 1px 0 @white);
+  background-color: #f5f5f5;
+  .border-radius(4px);
   li {
     display: inline-block;
     .ie7-inline-block();
@@ -18,9 +16,9 @@
   }
   .divider {
     padding: 0 5px;
-    color: @grayLight;
+    color: #ccc;
   }
-  .active a {
-    color: @grayDark;
+  .active {
+    color: @grayLight;
   }
 }

lib/bootstrap/less/button-groups.less

@@ -34,11 +34,13 @@
 }
 .btn-group > .btn,
 .btn-group > .dropdown-menu {
-  font-size: 13px; // redeclare as part 2 of font-size inline-block hack
+  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
-.btn-group > .btn-mini,
+.btn-group > .btn-mini {
+  font-size: 11px;
+}
 .btn-group > .btn-small {
   font-size: 12px;
 }
@@ -106,22 +108,22 @@
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group > .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
   *padding-top: 4px;
   *padding-bottom: 4px;
 }
-.btn-group > .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini + .dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
 }
-.btn-group > .btn-small.dropdown-toggle {
+.btn-group > .btn-small + .dropdown-toggle {
   *padding-top: 4px;
   *padding-bottom: 4px;
 }
-.btn-group > .btn-large.dropdown-toggle {
+.btn-group > .btn-large + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -162,22 +164,16 @@
 
 // Reposition the caret
 .btn .caret {
-  margin-top: 7px;
+  margin-top: 8px;
   margin-left: 0;
 }
-.btn:hover .caret,
-.open.btn-group .caret {
-  .opacity(100);
-}
 // Carets in other button sizes
-.btn-mini .caret {
-  margin-top: 5px;
-}
-.btn-small .caret {
+.btn-mini .caret,
+.btn-small .caret,
+.btn-large .caret {
   margin-top: 6px;
 }
 .btn-large .caret {
-  margin-top: 6px;
   border-left-width:  5px;
   border-right-width: 5px;
   border-top-width:   5px;
@@ -200,7 +196,6 @@
   .caret {
     border-top-color: @white;
     border-bottom-color: @white;
-    .opacity(75);
   }
 }
 

lib/bootstrap/less/buttons.less

@@ -12,9 +12,9 @@
   .ie7-inline-block();
   padding: 4px 14px;
   margin-bottom: 0; // For input.btn
-  font-size: 13px;
-  line-height: 20px;
-  *line-height: 20px;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+  *line-height: @baseLineHeight;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -95,7 +95,7 @@
 // Mini
 .btn-mini {
   padding: 2px 6px;
-  font-size: @baseFontSize - 2px;
+  font-size: @baseFontSize - 3px;
   line-height: @baseLineHeight - 4px;
 }
 
@@ -107,6 +107,9 @@
   padding-right: 0;
   .box-sizing(border-box);
 }
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
 
 
 // Alternate buttons

lib/bootstrap/less/dropdowns.less

@@ -28,7 +28,6 @@
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
-  .opacity(30);
 }
 
 // Place the caret
@@ -36,15 +35,6 @@
   margin-top: 8px;
   margin-left: 2px;
 }
-.dropdown a:focus .caret,
-.dropdown a:hover .caret,
-.open .caret {
-  .opacity(100);
-}
-
-.navbar .nav .open > a {
-  color: @navbarLinkColorActive;
-}
 
 // The dropdown menu (ul)
 // ----------------------
@@ -57,7 +47,7 @@
   float: left;
   min-width: 160px;
   padding: 5px 0;
-  margin: 1px 0 0; // override default ul
+  margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: @dropdownBackground;
   border: 1px solid #ccc; // Fallback for IE7-8

lib/bootstrap/less/forms.less

@@ -118,8 +118,7 @@ input[type="color"],
   background-color: @inputBackground;
   border: 1px solid @inputBorder;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @transition: border linear .2s, box-shadow linear .2s;
-  .transition(@transition);
+  .transition(~"border linear .2s, box-shadow linear .2s");
 
   // Focus state
   &:focus {
@@ -280,6 +279,10 @@ textarea[class*="span"],
 .input-append .uneditable-input[class*="span"],
 .input-prepend input[class*="span"],
 .input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
 .row-fluid .input-prepend [class*="span"],
 .row-fluid .input-append [class*="span"] {
   display: inline-block;

lib/bootstrap/less/grid.less

@@ -8,3 +8,14 @@
 
 // Fluid (940px)
 #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}

lib/bootstrap/less/labels-badges.less

@@ -55,3 +55,18 @@ a {
   &-inverse           { background-color: @grayDark; }
   &-inverse[href]     { background-color: darken(@grayDark, 10%); }
 }
+
+// Quick fix for labels/badges in buttons
+.btn {
+  .label,
+  .badge {
+    position: relative;
+    top: -1px;
+  }
+}
+.btn-mini {
+  .label,
+  .badge {
+    top: 0;
+  }
+}

lib/bootstrap/less/mixins.less

@@ -65,10 +65,6 @@
 
 .ie7-restore-right-whitespace() {
   *margin-right: .3em;
-
-  &:last-child {
-    *margin-left: 0;
-  }
 }
 
 // Sizing shortcuts

lib/bootstrap/less/navbar.less

 //
-// Navbars
+// Navbars (Redux)
 // --------------------------------------------------
 
 
 // COMMON STYLES
 // -------------
 
+// Base class and wrapper
 .navbar {
+  overflow: visible;
+  margin-bottom: @baseLineHeight;
+  color: @navbarText;
+
   // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
   *position: relative;
   *z-index: 2;
-
-  overflow: visible;
-  margin-bottom: @baseLineHeight;
 }
 
+// Inner for background effects
 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
   min-height: @navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+  border: 1px solid @navbarBorder;
   .border-radius(4px);
-  .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
+  .box-shadow(0 1px 4px rgba(0,0,0,.065));
 }
 
 // Set width to auto for default container
@@ -37,46 +41,49 @@
 }
 
 
-// Brand, links, text, and buttons
-.navbar {
-  color: @navbarText;
-  // Hover and active states
-  .brand:hover {
-    text-decoration: none;
-  }
-  // Website or project name
-  .brand {
+// Brand: website or project name
+// -------------------------
+.navbar .brand {
   float: left;
   display: block;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-    padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
+  @heightDifference: @navbarHeight - @elementHeight;
+  padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
-    line-height: 1;
   color: @navbarBrandColor;
+  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+  &:hover {
+    text-decoration: none;
   }
-  // Plain text in topbar
-  .navbar-text {
+}
+
+// Plain text in topbar
+// -------------------------
+.navbar-text {
   margin-bottom: 0;
   line-height: @navbarHeight;
-  }
-  // Janky solution for now to account for links outside the .nav
-  .navbar-link {
+}
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
   color: @navbarLinkColor;
   &:hover {
     color: @navbarLinkColorHover;
   }
-  }
-  // Buttons in navbar
-  .btn,
-  .btn-group {
+}
+
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
   .navbarVerticalAlign(28px); // Vertically center in navbar
-  }
-  .btn-group .btn {
+}
+.navbar .btn-group .btn {
   margin: 0; // then undo the margin here so we don't accidentally double it
-  }
 }
 
 // Navbar forms
@@ -87,7 +94,7 @@
   select,
   .radio,
   .checkbox {
-    .navbarVerticalAlign(28px); // Vertically center in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   input,
   select,
@@ -120,26 +127,8 @@
     margin-bottom: 0;
     padding: 4px 14px;
     #font > .sans-serif(13px, normal, 1);
-    color: @white;
-    background-color: @navbarSearchBackground;
-    border: 1px solid @navbarSearchBorder;
     .border-radius(15px); // redeclare because of specificity of the type attribute
-    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
-    .transition(none);
-
     .placeholder(@navbarSearchPlaceholderColor);
-
-    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
-    &:focus,
-    &.focused {
-      padding: 5px 15px;
-      color: @grayDark;
-      text-shadow: 0 1px 0 @white;
-      background-color: @navbarSearchBackgroundFocus;
-      border: 0;
-      .box-shadow(0 0 3px rgba(0,0,0,.15));
-      outline: 0;
-    }
   }
 }
 
@@ -172,17 +161,19 @@
 // Fixed to top
 .navbar-fixed-top {
   top: 0;
-  -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-          box-shadow: 0 1px 10px rgba(0,0,0,.1);
+  .navbar-inner {
+    border-width: 0 0 1px;
+    .box-shadow(0 1px 10px rgba(0,0,0,.1));
+  }
 }
 
 // Fixed to bottom
 .navbar-fixed-bottom {
   bottom: 0;
-  -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
-          box-shadow: 0 -1px 10px rgba(0,0,0,.1);
+  .navbar-inner {
+    border-width: 1px 0 0;
+    .box-shadow(0 -1px 10px rgba(0,0,0,.1));
+  }
 }
 
 
@@ -209,31 +200,15 @@
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
-  line-height: 19px;
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
   color: @navbarLinkColor;
   text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
 }
 .navbar .nav .dropdown-toggle .caret {
   margin-top: 8px;
 }
 
-// Buttons
-.navbar .btn {
-  display: inline-block;
-  padding: 4px 10px 4px;
-  // Vertically center the button given @navbarHeight
-  @elementHeight: 28px;
-  margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
-  line-height: @baseLineHeight;
-}
-.navbar .btn-group {
-  margin: 0;
-  // Vertically center the button given @navbarHeight
-  @elementHeight: 28px;
-  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
-}
 // Hover
 .navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover {
@@ -249,22 +224,9 @@
   color: @navbarLinkColorActive;
   text-decoration: none;
   background-color: @navbarLinkBackgroundActive;
-}
-
-// Dividers (basically a vertical hr)
-.navbar .divider-vertical {
-  height: @navbarHeight;
-  width: 1px;
-  margin: 0 9px;
-  overflow: hidden;
-  background-color: @navbarBackground;
-  border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right {
-  margin-left: 10px;
-  margin-right: 0;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+     -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+          box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
 }
 
 // Navbar button for toggling navbar items in responsive layouts
@@ -291,6 +253,7 @@
 }
 
 
+
 // Dropdown menus
 // --------------
 
@@ -334,31 +297,26 @@
     top: auto;
   }
 }
-// Dropdown toggle caret
-.navbar .nav li.dropdown .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open .caret {
-  border-top-color: @white;
-  border-bottom-color: @white;
-}
-.navbar .nav li.dropdown.active .caret {
-  .opacity(100);
-}
 
 // Remove background color from open dropdown
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
-  background-color: transparent;
+  background-color: @navbarLinkBackgroundActive;
+  color: @navbarLinkColorActive;
 }
-
-// Dropdown link on hover
-.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
-.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
-  color: @white;
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+  border-top-color: @navbarLinkColor;
+  border-bottom-color: @navbarLinkColor;
+}
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+  border-top-color: @navbarLinkColorActive;
+  border-bottom-color: @navbarLinkColorActive;
 }
 
 // Right aligned menus need alt position
-// TODO: rejigger this at some point to simplify the selectors
 .navbar .pull-right .dropdown-menu,
 .navbar .dropdown-menu.pull-right {
   left: auto;
@@ -374,114 +332,95 @@
 }
 
 
-/* Subnav navbar
--------------------------------------------------- */
-// In the future, we may make two options available for the navbar:
-// a default state, the lighter one, and the darker one as an option
-// to enable. This would prevent some overriding back to defaults.
+// Inverted navbar
+// -------------------------
 
+.navbar-inverse {
+  color: @navbarInverseText;
 
-// Override the default .navbar
-.navbar-subnav .navbar-inner {
-  #gradient > .vertical(#ffffff, #f1f1f1);
-  .box-shadow(none);
-  border: 1px solid #e5e5e5;
-  padding-left: 10px;
-  padding-right: 10px;
-}
+  .navbar-inner {
+    #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
+    border-color: @navbarInverseBorder;
+  }
 
-// Lighten vertical dividers
-.navbar-subnav .divider-vertical {
-  background-color: #f1f1f1;
-  border-right-color: #ffffff;
-}
+  .brand,
+  .nav > li > a {
+    color: @navbarInverseLinkColor;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    &:hover {
+      color: @navbarInverseLinkColorHover;
+    }
+  }
 
+  .nav > li > a:focus,
+  .nav > li > a:hover {
+    background-color: @navbarInverseLinkBackgroundHover;
+    color: @navbarInverseLinkColorHover;
+  }
 
-// Change link colors back
-.navbar-subnav .nav > li > a {
-  color: @linkColor;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.navbar-subnav .nav > li > a:hover {
-  color: @linkColorHover;
-}
+  .nav .active > a,
+  .nav .active > a:hover,
+  .nav .active > a:focus {
+    color: @navbarInverseLinkColorActive;
+    background-color: @navbarInverseLinkBackgroundActive;
+  }
 
-// Active nav links
-.navbar-subnav .nav > .active > a,
-.navbar-subnav .nav > .active > a:hover {
-  color: #777;
-  background-color: #eee;
-  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-     -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-          box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-}
+  // Inline text links
+  .navbar-link {
+    color: @navbarInverseLinkColor;
+    &:hover {
+      color: @navbarInverseLinkColorHover;
+    }
+  }
 
-// Dropdown carets
-.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
-.navbar-subnav .nav li.dropdown.open .caret {
-  border-top-color: @linkColor;
-  border-bottom-color: @linkColor;
-}
+  // Dropdowns
+  .nav li.dropdown.open > .dropdown-toggle,
+  .nav li.dropdown.active > .dropdown-toggle,
+  .nav li.dropdown.open.active > .dropdown-toggle {
+    background-color: @navbarInverseLinkBackgroundActive;
+    color: @navbarInverseLinkColorActive;
+  }
+  .nav li.dropdown > .dropdown-toggle .caret {
+    border-top-color: @navbarInverseLinkColor;
+    border-bottom-color: @navbarInverseLinkColor;
+  }
+  .nav li.dropdown.open > .dropdown-toggle .caret,
+  .nav li.dropdown.active > .dropdown-toggle .caret,
+  .nav li.dropdown.open.active > .dropdown-toggle .caret {
+    border-top-color: @navbarInverseLinkColorActive;
+    border-bottom-color: @navbarInverseLinkColorActive;
+  }
 
-// Reset search input form
-.navbar-subnav .search-query {
-  background-color: #fff;
-  border-color: #ccc;
-  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+  // Navbar search
+  .navbar-search {
+    .search-query {
+      color: @white;
+      background-color: @navbarInverseSearchBackground;
+      border-color: @navbarInverseSearchBorder;
+      .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+      .transition(none);
+      .placeholder(@navbarInverseSearchPlaceholderColor);
 
-  // On :focus, keep the same padding and border
+      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
       &:focus,
       &.focused {
-    padding: 4px 9px;
-    border: 1px solid rgba(82,168,236,.8);
-    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+        padding: 5px 15px;
+        color: @grayDark;
+        text-shadow: 0 1px 0 @white;
+        background-color: @navbarInverseSearchBackgroundFocus;
+        border: 0;
+        .box-shadow(0 0 3px rgba(0,0,0,.15));
+        outline: 0;
+      }
+    }
   }
-}
 
-// Open dropdown dropdown-toggle
-.navbar-subnav .nav .open > a {
-  color: @linkColorHover;
-}
+  // Navbar collapse button
+  .btn-navbar {
+    .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+  }
 
-// Collapse button
-.navbar-subnav .btn-navbar {
-  .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
-}
-.navbar .btn-navbar .icon-bar {
-  background-color: #999;
-  .box-shadow(0 1px 0 rgba(0,0,0,.25));
 }
 
 
-// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
-.navbar-subnav-fixed {
-  position: fixed;
-  top: 40px;
-  left: 0;
-  right: 0;
-  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
-  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-          box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-}
-.navbar-subnav-fixed .navbar-inner {
-  border-color: #d5d5d5;
-  border-width: 0 0 1px; /* drop the border on the fixed edges */
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
-  .border-radius(0);
-}
-.navbar-subnav-fixed .nav {
-  float: none;
-  max-width: 970px;
-  margin: 0 auto;
-  padding: 0 1px;
-}
-.navbar-subnav .nav > li:first-child > a,
-.navbar-subnav .nav > li:first-child > a:hover {
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
 

lib/bootstrap/less/responsive-navbar.less

@@ -5,7 +5,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 979px) {
+@media (max-width: @navbarCollapseWidth) {
 
   // UNFIX THE TOPBAR
   // ----------------

lib/bootstrap/less/tables.less

@@ -79,7 +79,7 @@ table {
 .table-bordered {
   border: 1px solid @tableBorder;
   border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapsed; // IE7 can't round corners anyway
+  *border-collapse: collapse; // IE7 can't round corners anyway
   border-left: 0;
   .border-radius(4px);
   th,

lib/bootstrap/less/variables.less

@@ -70,7 +70,7 @@
 // -------------------------
 @btnBackground:                     @white;
 @btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #ccc;
+@btnBorder:                         #bbb;
 
 @btnPrimaryBackground:              @linkColor;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
@@ -154,16 +154,19 @@
 
 // Navbar
 // -------------------------
-@navbarHeight:                    40px;
-@navbarBackground:                #111;
-@navbarBackgroundHighlight:       #222;
+@navbarCollapseWidth:             979px;
 
-@navbarText:                      @grayLight;
-@navbarLinkColor:                 @grayLight;
-@navbarLinkColorHover:            @white;
-@navbarLinkColorActive:           @navbarLinkColorHover;
+@navbarHeight:                    40px;
+@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
+@navbarBackgroundHighlight:       #ffffff;
+@navbarBorder:                    darken(@navbarBackground, 12%);
+
+@navbarText:                      @gray;
+@navbarLinkColor:                 @gray;
+@navbarLinkColorHover:            @grayDark;
+@navbarLinkColorActive:           @gray;
 @navbarLinkBackgroundHover:       transparent;
-@navbarLinkBackgroundActive:      @navbarBackground;
+@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
 @navbarSearchBackground:          lighten(@navbarBackground, 25%);
 @navbarSearchBackgroundFocus:     @white;
@@ -171,6 +174,26 @@
 @navbarSearchPlaceholderColor:    #ccc;
 @navbarBrandColor:                @navbarLinkColor;
 
+// Inverted navbar
+@navbarInverseBackground:                #111111;
+@navbarInverseBackgroundHighlight:       #222222;
+@navbarInverseBorder:                    #252525;
+
+@navbarInverseText:                      @grayLight;
+@navbarInverseLinkColor:                 @grayLight;
+@navbarInverseLinkColorHover:            @white;
+@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover:       transparent;
+@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
+
+@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus:     @white;
+@navbarInverseSearchBorder:              @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor:    #ccc;
+
+@navbarInverseBrandColor:                @navbarInverseLinkColor;
+
+
 
 // Hero unit
 // -------------------------