Merge branch '2.0.3-wip'

Conflicts:
	Makefile
	docs/assets/js/bootstrap.js
	docs/assets/js/bootstrap.min.js

32 files changed, 1730 insertions, 667 deletions

diff --git a/less/accordion.less b/less/accordion.less
index 11a36b544..31b8cdc33 100644
--- a/less/accordion.less
+++ b/less/accordion.less
@@ -21,6 +21,11 @@
   padding: 8px 15px;
 }
 
+// General toggle styles
+.accordion-toggle {
+  cursor: pointer;
+}
+
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
   padding: 9px 15px;
diff --git a/less/badges.less b/less/badges.less
deleted file mode 100644
index 273479b0f..000000000
--- a/less/badges.less
+++ /dev/null
@@ -1,36 +0,0 @@
-// BADGES
-// ------
-
-// Base
-.badge {
-  padding: 1px 9px 2px;
-  font-size: @baseFontSize * .925;
-  font-weight: bold;
-  white-space: nowrap;
-  color: @white;
-  background-color: @grayLight;
-  .border-radius(9px);
-}
-
-// Hover state
-.badge:hover {
-  color: @white;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Colors
-.badge-error            { background-color: @errorText; }
-.badge-error:hover      { background-color: darken(@errorText, 10%); }
-
-.badge-warning          { background-color: @orange; }
-.badge-warning:hover    { background-color: darken(@orange, 10%); }
-
-.badge-success          { background-color: @successText; }
-.badge-success:hover    { background-color: darken(@successText, 10%); }
-
-.badge-info             { background-color: @infoText; }
-.badge-info:hover       { background-color: darken(@infoText, 10%); }
-
-.badge-inverse          { background-color: @grayDark; }
-.badge-inverse:hover    { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
diff --git a/less/bootstrap.less b/less/bootstrap.less
index d115e9567..9749a46cb 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.2
+ * Bootstrap v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -52,8 +52,7 @@
 
 // Components: Misc
 @import "thumbnails.less";
-@import "labels.less";
-@import "badges.less";
+@import "labels-badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";
diff --git a/less/button-groups.less b/less/button-groups.less
index d3e7a7490..5338c5a45 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -25,14 +25,14 @@
 }
 
 // Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
+.btn-group > .btn {
   position: relative;
   float: left;
   margin-left: -1px;
   .border-radius(0);
 }
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group .btn:first-child {
+.btn-group > .btn:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 4px;
          -moz-border-radius-topleft: 4px;
@@ -41,8 +41,9 @@
       -moz-border-radius-bottomleft: 4px;
           border-bottom-left-radius: 4px;
 }
-.btn-group .btn:last-child,
-.btn-group .dropdown-toggle {
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
      -webkit-border-top-right-radius: 4px;
          -moz-border-radius-topright: 4px;
              border-top-right-radius: 4px;
@@ -51,7 +52,7 @@
           border-bottom-right-radius: 4px;
 }
 // Reset corners for large buttons
-.btn-group .btn.large:first-child {
+.btn-group > .btn.large:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 6px;
          -moz-border-radius-topleft: 6px;
@@ -60,8 +61,8 @@
       -moz-border-radius-bottomleft: 6px;
           border-bottom-left-radius: 6px;
 }
-.btn-group .btn.large:last-child,
-.btn-group .large.dropdown-toggle {
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
      -webkit-border-top-right-radius: 6px;
          -moz-border-radius-topright: 6px;
              border-top-right-radius: 6px;
@@ -71,10 +72,10 @@
 }
 
 // On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active,
-.btn-group .btn.active {
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
   z-index: 2;
 }
 
@@ -90,48 +91,60 @@
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group .dropdown-toggle {
+.btn-group > .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
-  @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);
-  .box-shadow(@shadow);
-  *padding-top: 3px;
-  *padding-bottom: 3px;
+  .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;
-  *padding-top: 1px;
-  *padding-bottom: 1px;
 }
-.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;
 }
 
 .btn-group.open {
-  // IE7's z-index only goes to the nearest positioned ancestor, which would
-  // make the menu appear below buttons that appeared later on the page
-  *z-index: @zindexDropdown;
-
-  // Reposition menu on open and round all corners
-  .dropdown-menu {
-    display: block;
-    margin-top: 1px;
-    .border-radius(5px);
-  }
 
+  // The clickable button for toggling the menu
+  // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
+    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+  }
+
+  // Keep the hover's background when dropdown is open
+  .btn.dropdown-toggle {
+    background-color: @btnBackgroundHighlight;
+  }
+  .btn-primary.dropdown-toggle {
+    background-color: @btnPrimaryBackgroundHighlight;
+  }
+  .btn-warning.dropdown-toggle {
+    background-color: @btnWarningBackgroundHighlight;
+  }
+  .btn-danger.dropdown-toggle {
+    background-color: @btnDangerBackgroundHighlight;
+  }
+  .btn-success.dropdown-toggle {
+    background-color: @btnSuccessBackgroundHighlight;
+  }
+  .btn-info.dropdown-toggle {
+    background-color: @btnInfoBackgroundHighlight;
+  }
+  .btn-inverse.dropdown-toggle {
+    background-color: @btnInverseBackgroundHighlight;
   }
 }
 
+
 // Reposition the caret
 .btn .caret {
   margin-top: 7px;
@@ -150,12 +163,18 @@
 }
 .btn-large .caret {
   margin-top: 6px;
-  border-left:  5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top:   5px solid @black;
+  border-left-width:  5px;
+  border-right-width: 5px;
+  border-top-width:   5px;
+}
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+  border-bottom: 5px solid @black;
+  border-top: 0;
 }
 
 
+
 // Account for other colors
 .btn-primary,
 .btn-warning,
diff --git a/less/buttons.less b/less/buttons.less
index 83f9c737c..c44ff3e6f 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -13,20 +13,19 @@
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
+  *line-height: 20px;
   color: @grayDark;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   vertical-align: middle;
+  cursor: pointer;
   .buttonBackground(@btnBackground, @btnBackgroundHighlight);
   border: 1px solid @btnBorder;
+  *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken(@btnBorder, 10%);
   .border-radius(4px);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-  cursor: pointer;
-
-  // Give IE7 some love
-  .ie7-restore-left-whitespace();
+  .ie7-restore-left-whitespace(); // Give IE7 some love
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 }
 
 // Hover state
@@ -34,6 +33,7 @@
   color: @grayDark;
   text-decoration: none;
   background-color: darken(@white, 10%);
+  *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
   background-position: 0 -15px;
 
   // transition is only when going to hover, otherwise the background
@@ -49,20 +49,19 @@
 // Active state
 .btn.active,
 .btn:active {
-  background-image: none;
-  @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
   background-color: darken(@white, 10%);
   background-color: darken(@white, 15%) e("\9");
+  background-image: none;
   outline: 0;
+  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
 }
 
 // Disabled state
 .btn.disabled,
 .btn[disabled] {
   cursor: default;
-  background-image: none;
   background-color: darken(@white, 10%);
+  background-image: none;
   .opacity(65);
   .box-shadow(none);
 }
@@ -117,8 +116,8 @@
 .btn-info:hover,
 .btn-inverse,
 .btn-inverse:hover {
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: @white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
@@ -132,6 +131,11 @@
 
 // Set the backgrounds
 // -------------------------
+.btn {
+  // reset here as of 2.0.3 due to Recess property order
+  border-color: #ccc;
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+}
 .btn-primary {
   .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
 }
diff --git a/less/close.less b/less/close.less
index a0e5edba1..e264fca2d 100644
--- a/less/close.less
+++ b/less/close.less
@@ -12,7 +12,18 @@
   &:hover {
     color: @black;
     text-decoration: none;
-    .opacity(40);
     cursor: pointer;
+    .opacity(40);
   }
 }
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
\ No newline at end of file
diff --git a/less/code.less b/less/code.less
index 075185989..0cae749a0 100644
--- a/less/code.less
+++ b/less/code.less
@@ -27,14 +27,14 @@ pre {
   margin: 0 0 @baseLineHeight / 2;
   font-size: @baseFontSize * .925; // 13px to 12px
   line-height: @baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
   background-color: #f5f5f5;
   border: 1px solid #ccc; // fallback for IE7-8
   border: 1px solid rgba(0,0,0,.15);
   .border-radius(4px);
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-  word-wrap: break-word;
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
diff --git a/less/component-animations.less b/less/component-animations.less
index 4a6368cf9..5a1e202d1 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -2,18 +2,18 @@
 // --------------------
 
 .fade {
-  .transition(opacity .15s linear);
   opacity: 0;
+  .transition(opacity .15s linear);
   &.in {
     opacity: 1;
   }
 }
 
 .collapse {
-  .transition(height .35s ease);
   position:relative;
-  overflow:hidden;
   height: 0;
+  overflow:hidden;
+  .transition(height .35s ease);
   &.in {
     height: auto;
   }
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 58cdb612f..6c60385e5 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -2,6 +2,7 @@
 // --------------
 
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
 .dropdown {
   position: relative;
 }
@@ -21,11 +22,11 @@
   width: 0;
   height: 0;
   vertical-align: top;
-  border-left:  4px solid transparent;
-  border-right: 4px solid transparent;
   border-top:   4px solid @black;
-  .opacity(30);
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
   content: "";
+  .opacity(30);
 }
 
 // Place the caret
@@ -34,7 +35,7 @@
   margin-left: 2px;
 }
 .dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
   .opacity(100);
 }
 
@@ -45,24 +46,22 @@
   top: 100%;
   left: 0;
   z-index: @zindexDropdown;
-  float: left;
   display: none; // none by default, but block on "open" of the menu
+  float: left;
   min-width: 160px;
   padding: 4px 0;
-  margin: 0; // override default ul
+  margin: 1px 0 0; // override default ul
   list-style: none;
   background-color: @dropdownBackground;
-  border-color: #ccc;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 1px;
-  .border-radius(0 0 5px 5px);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  .border-radius(5px);
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
 
   // Aligns the dropdown menu to right
   &.pull-right {
@@ -99,25 +98,21 @@
 
 // Open state for the dropdown
 // ---------------------------
-.dropdown.open {
+.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
   // make the menu appear below buttons that appeared later on the page
   *z-index: @zindexDropdown;
 
-  .dropdown-toggle {
-    color: @white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
   .dropdown-menu {
     display: block;
   }
 }
 
 // Right aligned dropdowns
+// ---------------------------
 .pull-right .dropdown-menu {
-  left: auto;
   right: 0;
+  left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
diff --git a/less/forms.less b/less/forms.less
index 8d9c25308..7d967c6b3 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -71,8 +71,9 @@ select,
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @gray;
+  background-color: @inputBackground;
   border: 1px solid @inputBorder;
-  .border-radius(3px);
+  .border-radius(@inputBorderRadius);
 }
 .uneditable-textarea {
   width: auto;
@@ -97,8 +98,9 @@ input[type="radio"] {
   *margin-top: 0; /* IE7 */
   line-height: normal;
   cursor: pointer;
-  .border-radius(0);
+  background-color: transparent;
   border: 0 \9; /* IE9 and down */
+  .border-radius(0);
 }
 input[type="image"] {
   border: 0;
@@ -109,9 +111,9 @@ input[type="file"] {
   width: auto;
   padding: initial;
   line-height: initial;
-  border: initial;
   background-color: @inputBackground;
   background-color: initial;
+  border: initial;
   .box-shadow(none);
 }
 
@@ -171,6 +173,7 @@ input[type="hidden"] {
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
+  min-height: 18px; // clear the floating input if there is no label text
   padding-left: 18px;
 }
 .radio input[type="radio"],
@@ -213,17 +216,16 @@ textarea {
 input:focus,
 textarea:focus {
   border-color: rgba(82,168,236,.8);
-  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  .box-shadow(@shadow);
   outline: 0;
   outline: thin dotted \9; /* IE6-9 */
+  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
 }
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
-  .box-shadow(none); // override for file inputs
   .tab-focus();
+  .box-shadow(none); // override for file inputs
 }
 
 
@@ -243,7 +245,12 @@ select:focus {
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input {
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
   float: none;
   margin-left: 0;
 }
@@ -268,9 +275,16 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
+  cursor: not-allowed;
   background-color: @inputDisabledBackground;
   border-color: #ddd;
-  cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
 }
 
 
@@ -314,18 +328,19 @@ select:focus:required:invalid {
   padding: (@baseLineHeight - 1) 20px @baseLineHeight;
   margin-top: @baseLineHeight;
   margin-bottom: @baseLineHeight;
-  background-color: @grayLighter;
+  background-color: @formActionsBackground;
   border-top: 1px solid #ddd;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
 
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  display: block;
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap;
+  cursor: not-allowed;
   background-color: @inputBackground;
   border-color: #eee;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -365,10 +380,13 @@ select:focus:required:invalid {
   input,
   select,
   .uneditable-input {
+    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
-    .border-radius(0 3px 3px 0);
+    vertical-align: middle;
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
+    // Make input on top when focused so blue border and shadow always show
     &:focus {
-      position: relative;
       z-index: 2;
     }
   }
@@ -378,8 +396,8 @@ select:focus:required:invalid {
   .add-on {
     display: inline-block;
     width: auto;
-    min-width: 16px;
     height: @baseLineHeight;
+    min-width: 16px;
     padding: 4px 5px;
     font-weight: normal;
     line-height: @baseLineHeight;
@@ -391,7 +409,8 @@ select:focus:required:invalid {
   }
   .add-on,
   .btn {
-    .border-radius(3px 0 0 3px);
+    margin-left: -1px;
+    .border-radius(0);
   }
   .active {
     background-color: lighten(@green, 30);
@@ -403,21 +422,24 @@ select:focus:required:invalid {
   .btn {
     margin-right: -1px;
   }
+  .add-on:first-child,
+  .btn:first-child {
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+  }
 }
 .input-append {
   input,
-  select
+  select,
   .uneditable-input {
-    .border-radius(3px 0 0 3px);
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
   }
   .uneditable-input {
-    border-left-color: #eee;
     border-right-color: #ccc;
+    border-left-color: #eee;
   }
-  .add-on,
-  .btn {
-    margin-left: -1px;
-    .border-radius(0 3px 3px 0);
+  .add-on:last-child,
+  .btn:last-child {
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
   }
 }
 // Remove all border-radius for inputs with both prepend and append
@@ -430,12 +452,12 @@ select:focus:required:invalid {
   .add-on:first-child,
   .btn:first-child {
     margin-right: -1px;
-    .border-radius(3px 0 0 3px);
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
   }
   .add-on:last-child,
   .btn:last-child {
     margin-left: -1px;
-    .border-radius(0 3px 3px 0);
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
   }
 }
 
@@ -445,8 +467,10 @@ select:focus:required:invalid {
 // -----------
 
 .search-query {
-  padding-left: 14px;
   padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
   margin-bottom: 0; // remove the default margin on all inputs
   .border-radius(14px);
 }
@@ -470,6 +494,7 @@ select:focus:required:invalid {
   .input-prepend,
   .input-append {
     display: inline-block;
+    .ie7-inline-block();
     margin-bottom: 0;
   }
   // Re-hide hidden elements due to specifity
@@ -503,8 +528,8 @@ select:focus:required:invalid {
 .form-inline .radio input[type="radio"],
 .form-inline .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: 0;
   margin-right: 3px;
+  margin-left: 0;
 }
 
 
@@ -537,11 +562,15 @@ legend + .control-group {
   }
   // Move over all input controls and content
   .controls {
-    margin-left: 160px;
-    /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+    // don't inherit the margin of the parent, in this case .controls
     *display: inline-block;
-    *margin-left: 0;
     *padding-left: 20px;
+    margin-left: 160px;
+    *margin-left: 0;
+    &:first-child {
+      *padding-left: 160px;
+    }
   }
   // Remove bottom margin on block level help text since that's accounted for on .control-group
   .help-block {
diff --git a/less/labels-badges.less b/less/labels-badges.less
new file mode 100644
index 000000000..0fbd7bbc6
--- /dev/null
+++ b/less/labels-badges.less
@@ -0,0 +1,55 @@
+// LABELS & BADGES
+// ---------------
+
+// Base classes
+.label,
+.badge {
+  font-size: @baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: @white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: @grayLight;
+}
+// Set unique padding and border-radii
+.label {
+  padding: 1px 4px 2px;
+  .border-radius(3px);
+}
+.badge {
+  padding: 1px 9px 2px;
+  .border-radius(9px);
+}
+
+// Hover state, but only for links
+a {
+  &.label:hover,
+  &.badge:hover {
+    color: @white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  &-important         { background-color: @errorText; }
+  &-important[href]   { background-color: darken(@errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @orange; }
+  &-warning[href]     { background-color: darken(@orange, 10%); }
+  // Success (green)
+  &-success           { background-color: @successText; }
+  &-success[href]     { background-color: darken(@successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @infoText; }
+  &-info[href]        { background-color: darken(@infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: @grayDark; }
+  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
+}
diff --git a/less/labels.less b/less/labels.less
deleted file mode 100644
index 918b12e8c..000000000
--- a/less/labels.less
+++ /dev/null
@@ -1,38 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label {
-  padding: 1px 4px 2px;
-  font-size: @baseFontSize * .846;
-  font-weight: bold;
-  line-height: 13px; // ensure proper line-height if floated
-  color: @white;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @grayLight;
-  .border-radius(3px);
-}
-
-// Hover state
-.label:hover {
-  color: @white;
-  text-decoration: none;
-}
-
-// Colors
-.label-important        { background-color: @errorText; }
-.label-important:hover  { background-color: darken(@errorText, 10%); }
-
-.label-warning          { background-color: @orange; }
-.label-warning:hover    { background-color: darken(@orange, 10%); }
-
-.label-success          { background-color: @successText; }
-.label-success:hover    { background-color: darken(@successText, 10%); }
-
-.label-info             { background-color: @infoText; }
-.label-info:hover       { background-color: darken(@infoText, 10%); }
-
-.label-inverse             { background-color: @grayDark; }
-.label-inverse:hover       { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
diff --git a/less/layouts.less b/less/layouts.less
index c8d358b24..cc53627ff 100644
--- a/less/layouts.less
+++ b/less/layouts.less
@@ -11,7 +11,7 @@
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
-  padding-left: @gridGutterWidth;
   padding-right: @gridGutterWidth;
+  padding-left: @gridGutterWidth;
   .clearfix();
 }
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 0074e8924..b107955f5 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -70,11 +70,11 @@
 
 // Sizing shortcuts
 // -------------------------
-.size(@height: 5px, @width: 5px) {
+.size(@height, @width) {
   width: @width;
   height: @height;
 }
-.square(@size: 5px) {
+.square(@size) {
   .size(@size, @size);
 }
 
@@ -98,13 +98,15 @@
   white-space: nowrap;
 }
 
-// New image replacement
+// CSS image replacement
 // -------------------------
-// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 .hide-text {
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
 }
 
 
@@ -114,13 +116,13 @@
 #font {
   #family {
     .serif() {
-      font-family: Georgia, "Times New Roman", Times, serif;
+      font-family: @serifFontFamily;
     }
     .sans-serif() {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: @sansFontFamily;
     }
     .monospace() {
-      font-family: Menlo, Monaco, "Courier New", monospace;
+      font-family: @monoFontFamily;
     }
   }
   .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
@@ -150,9 +152,8 @@
 .input-block-level {
   display: block;
   width: 100%;
-  min-height: 28px; /* Make inputs at least the height of their button counterpart */
-  /* Makes inputs behave like true block-level elements */
-  .box-sizing(border-box);
+  min-height: 28px;        // Make inputs at least the height of their button counterpart
+  .box-sizing(border-box); // Makes inputs behave like true block-level elements
 }
 
 
@@ -190,14 +191,14 @@
 // --------------------------------------------------
 
 // Border Radius
-.border-radius(@radius: 5px) {
+.border-radius(@radius) {
   -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
           border-radius: @radius;
 }
 
 // Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+.box-shadow(@shadow) {
   -webkit-box-shadow: @shadow;
      -moz-box-shadow: @shadow;
           box-shadow: @shadow;
@@ -227,21 +228,21 @@
        -o-transform: scale(@ratio);
           transform: scale(@ratio);
 }
-.translate(@x: 0, @y: 0) {
+.translate(@x, @y) {
   -webkit-transform: translate(@x, @y);
      -moz-transform: translate(@x, @y);
       -ms-transform: translate(@x, @y);
        -o-transform: translate(@x, @y);
           transform: translate(@x, @y);
 }
-.skew(@x: 0, @y: 0) {
+.skew(@x, @y) {
   -webkit-transform: skew(@x, @y);
      -moz-transform: skew(@x, @y);
       -ms-transform: skew(@x, @y);
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
 }
-.translate3d(@x: 0, @y: 0, @z: 0) {
+.translate3d(@x, @y, @z) {
   -webkit-transform: translate(@x, @y, @z);
      -moz-transform: translate(@x, @y, @z);
       -ms-transform: translate(@x, @y, @z);
@@ -249,6 +250,17 @@
           transform: translate(@x, @y, @z);
 }
 
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+.backface-visibility(@visibility){
+	-webkit-backface-visibility: @visibility;
+	   -moz-backface-visibility: @visibility;
+	    -ms-backface-visibility: @visibility;
+	        backface-visibility: @visibility;
+}
+
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 .background-clip(@clip) {
@@ -279,18 +291,19 @@
 .user-select(@select) {
   -webkit-user-select: @select;
      -moz-user-select: @select;
+      -ms-user-select: @select;
        -o-user-select: @select;
           user-select: @select;
 }
 
 // Resize anything
-.resizable(@direction: both) {
+.resizable(@direction) {
   resize: @direction; // Options: horizontal, vertical, both
   overflow: auto; // Safari fix
 }
 
 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
+.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
   -webkit-column-count: @columnCount;
      -moz-column-count: @columnCount;
           column-count: @columnCount;
@@ -300,9 +313,9 @@
 }
 
 // Opacity
-.opacity(@opacity: 100) {
+.opacity(@opacity) {
   opacity: @opacity / 100;
-   filter: ~"alpha(opacity=@{opacity})";
+  filter: ~"alpha(opacity=@{opacity})";
 }
 
 
@@ -393,7 +406,7 @@
 }
 // Reset filters for IE
 .reset-filter() {
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
 
@@ -405,18 +418,17 @@
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider() {
-  height: 1px;
-  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid @white;
-
   // IE7 needs a set width since we gave a height. Restricting just
   // to IE7 to keep the 1px left/right space in other browsers.
   // It is unclear where IE is getting the extra space that we need
   // to negative-margin away, but so it goes.
   *width: 100%;
+  height: 1px;
+  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
   *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid @white;
 }
 
 // Button backgrounds
@@ -424,11 +436,13 @@
 .buttonBackground(@startColor, @endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   .gradientBar(@startColor, @endColor);
+  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   .reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
     background-color: @endColor;
+    *background-color: darken(@endColor, 5%);
   }
 
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -489,8 +503,8 @@
 
 // Centered container element
 .container-fixed() {
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
   .clearfix();
 }
 
@@ -507,9 +521,9 @@
   margin-left: @gridGutterWidth * -1;
   .clearfix();
 }
-.makeColumn(@columns: 1) {
+.makeColumn(@columns: 1, @offset: 0) {
   float: left;
-  margin-left: @gridGutterWidth;
+  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }
 
@@ -531,7 +545,7 @@
     .offsetX (0) {}
 
     .offset (@columns) {
-      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
     }
 
     .span (@columns) {
@@ -562,23 +576,26 @@
   .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
 
     .spanX (@index) when (@index > 0) {
-      (~"> .span@{index}") { .span(@index); }
+      (~".span@{index}") { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}
 
     .span (@columns) {
       width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
     }
 
     .row-fluid {
       width: 100%;
       .clearfix();
-      > [class*="span"] {
+      [class*="span"] {
+        .input-block-level();
         float: left;
         margin-left: @fluidGridGutterWidth;
+        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
       }
-      > [class*="span"]:first-child {
+      [class*="span"]:first-child {
         margin-left: 0;
       }
 
diff --git a/less/modals.less b/less/modals.less
index 4fccea738..870ad0dfe 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -56,7 +56,7 @@
   .close { margin-top: 2px; }
 }
 
-// Body (where all modal content resises)
+// Body (where all modal content resides)
 .modal-body {
   overflow-y: auto;
   max-height: 400px;
diff --git a/less/navbar.less b/less/navbar.less
index 8eb1332ae..adfe1096a 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -16,12 +16,12 @@
 
 // Gradient is applied to it's 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-radius(4px);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
+  .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
 }
 
 // Set width to auto for default container
@@ -30,28 +30,6 @@
   width: auto;
 }
 
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-  .box-shadow(@shadow);
-}
-.btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  .border-radius(1px);
-  .box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}
 // Override the default collapsed state
 .nav-collapse.collapse {
   height: auto;
@@ -69,25 +47,34 @@
   .brand {
     float: left;
     display: block;
-    padding: 8px 20px 12px;
+    // Vertically center the text given @navbarHeight
+    @elementHeight: 20px;
+    padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 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: @white;
+    color: @navbarBrandColor;
   }
   // 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 {
+    color: @navbarLinkColor;
+    &:hover {
+      color: @navbarLinkColorHover;
+    }
+  }
   // Buttons in navbar
   .btn,
   .btn-group {
     .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
-    margin-top: 0; // then undo the margin here so we don't accidentally double it
+    margin: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -133,8 +120,7 @@
     color: @white;
     background-color: @navbarSearchBackground;
     border: 1px solid @navbarSearchBorder;
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
-    .box-shadow(@shadow);
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)");
     .transition(none);
 
     // Placeholder text gets special styles; can't be a grouped selector
@@ -218,12 +204,29 @@
 // Links
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 10px 11px;
+  // Vertically center the text given @navbarHeight
+  @elementHeight: 20px;
+  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
   line-height: 19px;
   color: @navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
+// 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:hover {
   background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -255,6 +258,28 @@
   margin-right: 0;
 }
 
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+}
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  .border-radius(1px);
+  .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
 
 
 // Dropdown menus
@@ -262,8 +287,6 @@
 
 // Menu position and menu carets
 .navbar .dropdown-menu {
-  margin-top: 1px;
-  .border-radius(4px);
   &:before {
     content: '';
     display: inline-block;
@@ -303,31 +326,31 @@
   }
 }
 // Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
   border-top-color: @white;
   border-bottom-color: @white;
 }
-.navbar .nav .active .caret {
+.navbar .nav li.dropdown.active .caret {
   .opacity(100);
 }
 
 // Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle {
+.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;
 }
 
 // Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
   color: @white;
 }
 
 // Right aligned menus need alt position
 // TODO: rejigger this at some point to simplify the selectors
-.navbar .nav.pull-right .dropdown-menu,
-.navbar .nav .dropdown-menu.pull-right {
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {
diff --git a/less/navs.less b/less/navs.less
index 489e1bfeb..5cb9f9f3a 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,6 +21,11 @@
   background-color: @grayLighter;
 }
 
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
 // Nav headers (for dropdowns and lists)
 .nav .nav-header {
   display: block;
@@ -98,12 +103,10 @@
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
-
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
 }
-
 // Actual tabs (as links)
 .nav-tabs > li > a {
   padding-top: 8px;
@@ -125,6 +128,7 @@
   cursor: default;
 }
 
+
 // PILLS
 // -----
 
@@ -189,14 +193,11 @@
 // DROPDOWNS
 // ---------
 
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  .border-radius(4px);
+  .border-radius(4px); // make rounded corners match the pills
 }
 
 // Default dropdown links
@@ -233,14 +234,14 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover {
   color: @white;
   background-color: @grayLight;
   border-color: @grayLight;
 }
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
   border-top-color: @white;
   border-bottom-color: @white;
   .opacity(100);
@@ -265,14 +266,13 @@
   .clearfix();
 }
 .tab-content {
-  display: table; // prevent content from running below tabs
-  width: 100%;
+  overflow: auto; // prevent content from running below tabs
 }
 
 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 
@@ -290,22 +290,22 @@
 // BOTTOM
 // ------
 
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
   .border-radius(0 0 4px 4px);
   &:hover {
     border-bottom-color: transparent;
     border-top-color: #ddd;
   }
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -313,51 +313,51 @@
 // ------------
 
 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
   float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
   min-width: 74px;
   margin-right: 0;
   margin-bottom: 3px;
 }
 
 // Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
   .border-radius(4px 0 0 4px);
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: @grayLighter #ddd @grayLighter @grayLighter;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: @white;
 }
 
 // Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
   .border-radius(0 4px 4px 0);
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: @grayLighter @grayLighter @grayLighter #ddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: @white;
 }
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 5979a3691..3b47e6482 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -7,26 +7,32 @@
 
 // Webkit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 // Firefox
 @-moz-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 // IE9
 @-ms-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }
 }
 
 // Spec
 @keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 
@@ -68,6 +74,8 @@
 .progress.active .bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
      -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
           animation: progress-bar-stripes 2s linear infinite;
 }
 
diff --git a/less/reset.less b/less/reset.less
index 87411cf2b..d9ce2b110 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -75,10 +75,10 @@ sub {
 // -------------------------
 
 img {
-  height: auto;
+  max-width: 100%; // Make images inherently responsive
+  vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
-  vertical-align: middle;
 }
 
 // Forms
@@ -111,10 +111,10 @@ input[type="submit"] {
   -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
-  -webkit-appearance: textfield;
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box;
+  -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
new file mode 100644
index 000000000..3331cfe5b
--- /dev/null
+++ b/less/responsive-1200px-min.less
@@ -0,0 +1,23 @@
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  #grid > .core(70px, 30px);
+
+  // Fluid grid
+  #grid > .fluid(5.982905983%, 2.564102564%);
+
+  // Input grid
+  #grid > .input(70px, 30px);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
new file mode 100644
index 000000000..614c6905c
--- /dev/null
+++ b/less/responsive-767px-max.less
@@ -0,0 +1,149 @@
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: @baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  // Modals
+  .modal {
+    position: absolute;
+    top:   10px;
+    left:  10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
+
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 767px) {
+
+  // Padding to set content in a bit
+  body {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  // Negative indent the now static "fixed" navbar
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+  // Remove padding on container given explicit padding set on body
+  .container-fluid {
+    padding: 0;
+  }
+
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin-left: 0;
+  }
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    .input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+
+}
diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less
new file mode 100644
index 000000000..10dda4b02
--- /dev/null
+++ b/less/responsive-768px-979px.less
@@ -0,0 +1,15 @@
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  #grid > .core(42px, 20px);
+
+  // Fluid grid
+  #grid > .fluid(5.801104972%, 2.762430939%);
+
+  // Input grid
+  #grid > .input(42px, 20px);
+
+}
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
new file mode 100644
index 000000000..d49b8ae12
--- /dev/null
+++ b/less/responsive-navbar.less
@@ -0,0 +1,146 @@
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: 979px) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  // Remove any padding from the body
+  body {
+    padding-top: 0;
+  }
+  // Unfix the navbar
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: @baseLineHeight;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  // Account for brand name
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+
+  // COLLAPSIBLE NAVBAR
+  // ------------------
+  // Nav collapse clears brand
+  .nav-collapse {
+    clear: both;
+  }
+  // Block-level the nav
+  .nav-collapse .nav {
+    float: none;
+    margin: 0 0 (@baseLineHeight / 2);
+  }
+  .nav-collapse .nav > li {
+    float: none;
+  }
+  .nav-collapse .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > .divider-vertical {
+    display: none;
+  }
+  .nav-collapse .nav .nav-header {
+    color: @navbarText;
+    text-shadow: none;
+  }
+  // Nav and dropdown links in navbar
+  .nav-collapse .nav > li > a,
+  .nav-collapse .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: @navbarLinkColor;
+    .border-radius(3px);
+  }
+  // Buttons
+  .nav-collapse .btn {
+    padding: 4px 10px 4px;
+    font-weight: normal;
+    .border-radius(4px);
+  }
+  .nav-collapse .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > li > a:hover,
+  .nav-collapse .dropdown-menu a:hover {
+    background-color: @navbarBackground;
+  }
+  // Buttons in the navbar
+  .nav-collapse.in .btn-group {
+    margin-top: 5px;
+    padding: 0;
+  }
+  // Dropdowns in the navbar
+  .nav-collapse .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: block;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    .border-radius(0);
+    .box-shadow(none);
+  }
+  .nav-collapse .dropdown-menu:before,
+  .nav-collapse .dropdown-menu:after {
+    display: none;
+  }
+  .nav-collapse .dropdown-menu .divider {
+    display: none;
+  }
+  // Forms in navbar
+  .nav-collapse .navbar-form,
+  .nav-collapse .navbar-search {
+    float: none;
+    padding: (@baseLineHeight / 2) 15px;
+    margin: (@baseLineHeight / 2) 0;
+    border-top: 1px solid @navbarBackground;
+    border-bottom: 1px solid @navbarBackground;
+    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
+  }
+  // Pull right (secondary) nav content
+  .navbar .nav-collapse .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  // Hide everything in the navbar save .brand and toggle button */
+  .nav-collapse,
+  .nav-collapse.collapse {
+    overflow: hidden;
+    height: 0;
+  }
+  // Navbar button
+  .navbar .btn-navbar {
+    display: block;
+  }
+
+  // STATIC NAVBAR
+  // -------------
+  .navbar-static .navbar-inner {
+    padding-left:  10px;
+    padding-right: 10px;
+  }
+}
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+// Required to make the collapsing navbar work on regular desktops
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
\ No newline at end of file
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
new file mode 100644
index 000000000..572846c0f
--- /dev/null
+++ b/less/responsive-utilities.less
@@ -0,0 +1,41 @@
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.visible-desktop   { } // Don't set initially
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+
+// Phones only
+@media (max-width: 767px) {
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+}
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+}
diff --git a/less/responsive.less b/less/responsive.less
index 98485eebd..bbd76d631 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.2
+ * Bootstrap Responsive v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -8,6 +8,7 @@
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
 
+
 // Responsive.less
 // For phone and tablet devices
 // -------------------------------------------------------------
@@ -24,348 +25,24 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-// Visibility utilities
-
-// For desktops
-.visible-phone     { display: none; }
-.visible-tablet    { display: none; }
-.visible-desktop   { display: block; }
-.hidden-phone      { display: block; }
-.hidden-tablet     { display: block; }
-.hidden-desktop    { display: none; }
-
-// Phones only
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: block; }
-  // Hide
-  .hidden-phone      { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: block; }
-  // Hide
-  .hidden-tablet     { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
-  // Smooth out the collapsing/expanding nav
-  .nav-collapse {
-    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
-  }
-
-  // Block level the page header small tag for readability
-  .page-header h1 small {
-    display: block;
-    line-height: @baseLineHeight;
-  }
-
-  // Update checkboxes for iOS
-  input[type="checkbox"],
-  input[type="radio"] {
-    border: 1px solid #ccc;
-  }
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  // Modals
-  .modal {
-    position: absolute;
-    top:   10px;
-    left:  10px;
-    right: 10px;
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-  .modal-header .close {
-    padding: 10px;
-    margin: -10px;
-  }
-
-  // Carousel
-  .carousel-caption {
-    position: static;
-  }
-
-}
-
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-@media (max-width: 767px) {
-
-  // Padding to set content in a bit
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .navbar-fixed-top {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-
-  // GRID & CONTAINERS
-  // -----------------
-  // Remove width from containers
-  .container {
-    width: auto;
-  }
-  // Fluid rows
-  .row-fluid {
-    width: 100%;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  .row > [class*="span"],
-  .row-fluid > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
-
-  // THUMBNAILS
-  // ----------
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
+@import "responsive-utilities.less";
 
-  // FORM FIELDS
-  // -----------
-  // Make span* classes full width
-  input[class*="span"],
-  select[class*="span"],
-  textarea[class*="span"],
-  .uneditable-input {
-    .input-block-level();
-  }
-  // But don't let it screw up prepend/append inputs
-  .input-prepend input[class*="span"],
-  .input-append input[class*="span"] {
-    width: auto;
-  }
 
-}
-
-
-
-// PORTRAIT TABLET TO DEFAULT DESKTOP
-// ----------------------------------
-
-@media (min-width: 768px) and (max-width: 979px) {
-
-  // Fixed grid
-  #grid > .core(42px, 20px);
-
-  // Fluid grid
-  #grid > .fluid(5.801104972%, 2.762430939%);
-
-  // Input grid
-  #grid > .input(42px, 20px);
-
-}
-
-
-
-// TABLETS AND BELOW
-// -----------------
-@media (max-width: 979px) {
-
-  // UNFIX THE TOPBAR
-  // ----------------
-  // Remove any padding from the body
-  body {
-    padding-top: 0;
-  }
-  // Unfix the navbar
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: @baseLineHeight;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  // Account for brand name
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  // Nav collapse clears brand
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  // Block-level the nav
-  .navbar .nav {
-    float: none;
-    margin: 0 0 (@baseLineHeight / 2);
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav .nav-header {
-    color: @navbarText;
-    text-shadow: none;
-  }
-  // Nav and dropdown links in navbar
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: @navbarLinkColor;
-    .border-radius(3px);
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover {
-    background-color: @navbarBackground;
-  }
-  // Dropdowns in the navbar
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    .border-radius(0);
-    .box-shadow(none);
-  }
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  // Forms in navbar
-  .navbar-form,
-  .navbar-search {
-    float: none;
-    padding: (@baseLineHeight / 2) 15px;
-    margin: (@baseLineHeight / 2) 0;
-    border-top: 1px solid @navbarBackground;
-    border-bottom: 1px solid @navbarBackground;
-    @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-    .box-shadow(@shadow);
-  }
-  // Pull right (secondary) nav content
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  // Static navbar
-  .navbar-static .navbar-inner {
-    padding-left:  10px;
-    padding-right: 10px;
-  }
-  // Navbar button
-  .btn-navbar {
-    display: block;
-  }
-
-  // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-
-
-
-// DEFAULT DESKTOP
-// ---------------
-
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
-
-
-
-// LARGE DESKTOP & UP
+// MEDIA QUERIES
 // ------------------
 
-@media (min-width: 1200px) {
+// Phones to portrait tablets and narrow desktops
+@import "responsive-767px-max.less";
 
-  // Fixed grid
-  #grid > .core(70px, 30px);
+// Tablets to regular desktops
+@import "responsive-768px-979px.less";
 
-  // Fluid grid
-  #grid > .fluid(5.982905983%, 2.564102564%);
+// Large desktops
+@import "responsive-1200px-min.less";
 
-  // Input grid
-  #grid > .input(70px, 30px);
 
-  // Thumbnails
-  .thumbnails {
-    margin-left: -30px;
-  }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
+// RESPONSIVE NAVBAR
+// ------------------
 
-}
+// From 979px and below, show a button to toggle navbar contents
+@import "responsive-navbar.less";
diff --git a/less/sprites.less b/less/sprites.less
index 4014d70a5..72a3a916b 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -6,8 +6,8 @@
 // ICONS
 // -----
 
-// All icons receive the styles of the <i> tag with a base class 
-// of .i and are then given a unique class to add width, height, 
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
 // and background-position. Your resulting HTML will look like
 // <i class="icon-inbox"></i>.
 
@@ -19,13 +19,13 @@
   display: inline-block;
   width: 14px;
   height: 14px;
+  .ie7-restore-right-whitespace();
   line-height: 14px;
   vertical-align: text-top;
   background-image: url("@{iconSpritePath}");
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
-  .ie7-restore-right-whitespace();
 }
 .icon-white {
   background-image: url("@{iconWhiteSpritePath}");
@@ -149,10 +149,43 @@
 .icon-comment            { background-position: -240px -120px; }
 .icon-magnet             { background-position: -264px -120px; }
 .icon-chevron-up         { background-position: -288px -120px; }
-.icon-chevron-down       { background-position: -313px -119px; } // 1px off
+.icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
 .icon-retweet            { background-position: -336px -120px; }
 .icon-shopping-cart      { background-position: -360px -120px; }
 .icon-folder-close       { background-position: -384px -120px; }
 .icon-folder-open        { background-position: -408px -120px; }
-.icon-resize-vertical    { background-position: -432px -119px; }
-.icon-resize-horizontal  { background-position: -456px -118px; }
+.icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
+.icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off
+
+.icon-hdd                     { background-position: 0      -144px; }
+.icon-bullhorn                { background-position: -24px  -144px; }
+.icon-bell                    { background-position: -48px  -144px; }
+.icon-certificate             { background-position: -72px  -144px; }
+.icon-thumbs-up               { background-position: -96px  -144px; }
+.icon-thumbs-down             { background-position: -120px -144px; }
+.icon-hand-right              { background-position: -144px -144px; }
+.icon-hand-left               { background-position: -168px -144px; }
+.icon-hand-up                 { background-position: -192px -144px; }
+.icon-hand-down               { background-position: -216px -144px; }
+.icon-circle-arrow-right      { background-position: -240px -144px; }
+.icon-circle-arrow-left       { background-position: -264px -144px; }
+.icon-circle-arrow-up         { background-position: -288px -144px; }
+.icon-circle-arrow-down       { background-position: -312px -144px; }
+.icon-globe                   { background-position: -336px -144px; }
+.icon-wrench                  { background-position: -360px -144px; }
+.icon-tasks                   { background-position: -384px -144px; }
+.icon-filter                  { background-position: -408px -144px; }
+.icon-briefcase               { background-position: -432px -144px; }
+.icon-fullscreen              { background-position: -456px -144px; }
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/less/tables.less b/less/tables.less
index 7111cb806..b4f6027bf 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -9,9 +9,9 @@
 
 table {
   max-width: 100%;
+  background-color: @tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: @tableBackground;
 }
 
 // BASELINE STYLES
@@ -37,6 +37,8 @@ table {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
+  caption + thead tr:first-child th,
+  caption + thead tr:first-child td,
   colgroup + thead tr:first-child th,
   colgroup + thead tr:first-child td,
   thead:first-child tr:first-child th,
@@ -67,15 +69,21 @@ table {
 
 .table-bordered {
   border: 1px solid @tableBorder;
-  border-left: 0;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
+  border-left: 0;
   .border-radius(4px);
   th,
   td {
     border-left: 1px solid @tableBorder;
   }
   // Prevent a double border
+  caption + thead tr:first-child th,
+  caption + tbody tr:first-child th,
+  caption + tbody tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + tbody tr:first-child th,
+  colgroup + tbody tr:first-child td,
   thead:first-child tr:first-child th,
   tbody:first-child tr:first-child th,
   tbody:first-child tr:first-child td {
@@ -84,20 +92,29 @@ table {
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,
   tbody:first-child tr:first-child td:first-child {
-    .border-radius(4px 0 0 0);
+    -webkit-border-top-left-radius: 4px;
+            border-top-left-radius: 4px;
+        -moz-border-radius-topleft: 4px;
   }
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
-    .border-radius(0 4px 0 0);
+    -webkit-border-top-right-radius: 4px;
+            border-top-right-radius: 4px;
+        -moz-border-radius-topright: 4px;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:last-child tr:last-child th:first-child,
   tbody:last-child tr:last-child td:first-child {
     .border-radius(0 0 0 4px);
+    -webkit-border-bottom-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+        -moz-border-radius-bottomleft: 4px;
   }
   thead:last-child tr:last-child th:last-child,
   tbody:last-child tr:last-child td:last-child {
-    .border-radius(0 0 4px 0);
+    -webkit-border-bottom-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        -moz-border-radius-bottomright: 4px;
   }
 }
 
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
new file mode 100644
index 000000000..a4f07e936
--- /dev/null
+++ b/less/tests/css-tests.css
@@ -0,0 +1,49 @@
+/*!
+ * Bootstrap CSS Tests
+ */
+
+
+/* Remove background image */
+body {
+  background-image: none;
+}
+
+/* Space out subhead */
+.subhead {
+  margin-bottom: 36px;
+}
+h4 {
+  margin-bottom: 5px;
+}
+
+
+/* colgroup tests */
+.col1 {
+  background-color: rgba(255,0,0,.1);
+}
+.col2 {
+  background-color: rgba(0,255,0,.1);
+}
+.col3 {
+  background-color: rgba(0,0,255,.1);
+}
+
+
+/* Fluid row inputs */
+#fluidRowInputs .row-fluid > [class*=span] {
+  background-color: rgba(255,0,0,.1);
+}
+
+
+/* Fluid grid */
+.fluid-grid .row {
+  height: 60px;
+  padding-top: 10px;
+  margin-top: 10px;
+  color: #fff;
+  text-align: center;
+  background-color: #eee;
+}
+.fluid-grid .span1 {
+  background-color: #999;
+}
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
new file mode 100644
index 000000000..2c44f7d18
--- /dev/null
+++ b/less/tests/css-tests.html
@@ -0,0 +1,808 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Tests · Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="../../docs/assets/css/docs.css" rel="stylesheet">
+    <link href="../../docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- CSS just for the tests page -->
+    <link href="css-tests.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="../../docs/index.html">Bootstrap</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>CSS Tests</h1>
+  <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
+</header>
+
+
+
+
+<!-- Fluid grid
+================================================== -->
+
+<div class="page-header">
+  <h1>Fluid grids</h1>
+</div>
+
+<div class="fluid-grid">
+  <div class="row">
+    <div class="span12">12
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span11">11
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span1">1
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span10">10
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span2">2
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span9">9
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span3">3
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span8">8
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span4">4
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span7">7
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span5">5
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span6">6
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span6">6
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+</div> <!-- fluid grids -->
+
+
+
+<!-- Tables
+================================================== -->
+
+<div class="page-header">
+  <h1>Tables</h1>
+</div>
+
+<div class="row">
+  <div class="span6">
+    <h4>Bordered without thead</h4>
+    <table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered without thead, with caption</h4>
+    <table class="table table-bordered">
+      <caption>Table caption</caption>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered without thead, with colgroup</h4>
+    <table class="table table-bordered">
+      <colgroup>
+        <col class="col1">
+        <col class="col2">
+        <col class="col3">
+      </colgroup>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered with thead, with colgroup</h4>
+    <table class="table table-bordered">
+      <colgroup>
+        <col class="col1">
+        <col class="col2">
+        <col class="col3">
+      </colgroup>
+      <thead>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!--/span-->
+  <div class="span6">
+    <h4>Bordered with thead and caption</h4>
+    <table class="table table-bordered">
+      <caption>Table caption</caption>
+      <thead>
+        <tr>
+          <th>1</th>
+          <th>2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered with rowspan and colspan</h4>
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>1</th>
+          <th>2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="2">1 and 2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td rowspan="2">2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td rowspan="2">1</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td colspan="2">2 and 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!--/span-->
+</div><!--/row-->
+
+
+
+<!-- Forms
+================================================== -->
+
+<div class="page-header">
+  <h1>Forms</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <h4>Prepend and append on inputs</h4>
+    <form>
+      <div class="controls">
+        <div class="input-prepend">
+          <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-append">
+          <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-prepend input-append">
+          <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
+        </div>
+      </div>
+    </form>
+  </div><!--/span-->
+  <div class="span6">
+    <h4>Prepend and append with uneditable</h4>
+    <form>
+      <div class="input-prepend">
+        <span class="add-on">$</span><span class="span2 uneditable-input">Some value here</span>
+      </div>
+      <div class="input-append">
+        <span class="span2 uneditable-input">Some value here</span><span class="add-on">.00</span>
+      </div>
+    </form>
+  </div><!--/span-->
+</div><!--/row-->
+
+<h4>Fluid row with inputs</h4>
+<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
+<div id="fluidRowInputs">
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span1" placeholder="span1">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span2" placeholder="span2">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span3" placeholder="span3">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span4" placeholder="span4">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span5" placeholder="span5">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span6" placeholder="span6">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span7" placeholder="span7">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span8" placeholder="span8">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span9" placeholder="span9">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span10" placeholder="span10">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span11" placeholder="span11">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span12" placeholder="span12">
+    </div><!--/span-->
+  </div><!--/row-->
+</div>
+<br>
+
+
+<!-- Dropdowns
+================================================== -->
+
+<div class="page-header">
+  <h1>Dropdowns</h1>
+</div>
+
+<h4>Dropdown link with hash URL</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>
+
+<h4>Dropdown link with custom URL and data-target</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>
+
+<h4>Dropdown on a button</h4>
+<div style="position: relative;">
+  <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
+  <ul class="dropdown-menu">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<br>
+
+
+<!-- Thumbnails
+================================================== -->
+
+<div class="page-header">
+  <h1>Thumbnails</h1>
+</div>
+
+<h4>Offset thumbnails</h4>
+<ul class="thumbnails">
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+
+<h4>Fluid thumbnails</h4>
+<div class="row-fluid">
+  <div class="span8">
+    <ul class="thumbnails">
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+
+
+<!-- Tabs
+================================================== -->
+
+<div class="page-header">
+  <h1>Tabs</h1>
+</div>
+
+<div class="tabbable tabs-left" style="margin-bottom: 18px;">
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
+  </ul>
+  <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+    <div class="tab-pane active" id="tab1">
+      <p>I'm in Section 1.</p>
+
+      <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
+          <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
+          <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
+        </ul>
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1-1">
+            <p>I'm in Section 1.1.</p>
+          </div>
+          <div class="tab-pane" id="tab1-2">
+            <p>I'm in Section 1.2.</p>
+          </div>
+          <div class="tab-pane" id="tab1-3">
+            <p>I'm in Section 1.3.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+    <div class="tab-pane" id="tab3">
+      <p>What up girl, this is Section 3.</p>
+    </div>
+  </div>
+</div> <!-- /tabbable -->
+
+
+
+<!-- Labels
+================================================== -->
+
+<div class="page-header">
+  <h1>Labels</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <h4>Inline label</h4>
+    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  </div><!--/span-->
+  <div class="span4">
+    <form class="form-horizontal">
+      <label>Example label</label>
+      <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
+    </form>
+  </div><!--/span-->
+  <div class="span4">
+
+  </div><!--/span-->
+</div><!--/row-->
+
+
+
+
+
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="../../docs/assets/js/jquery.js"></script>
+    <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
+    <script src="../../docs/assets/js/bootstrap-transition.js"></script>
+    <script src="../../docs/assets/js/bootstrap-alert.js"></script>
+    <script src="../../docs/assets/js/bootstrap-modal.js"></script>
+    <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
+    <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tab.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
+    <script src="../../docs/assets/js/bootstrap-popover.js"></script>
+    <script src="../../docs/assets/js/bootstrap-button.js"></script>
+    <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
+    <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
+    <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
+    <script src="../../docs/assets/js/application.js"></script>
+
+
+  </body>
+</html>
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 3a12d4e50..7fa77afa9 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -1,15 +1,23 @@
 // THUMBNAILS
 // ----------
 
+// Make wrapper ul behave like the grid
 .thumbnails {
   margin-left: -@gridGutterWidth;
   list-style: none;
   .clearfix();
 }
+// Fluid rows have no left margin
+.row-fluid .thumbnails {
+  margin-left: 0;
+}
+
+// Float li to make thumbnails appear in a row
 .thumbnails > li {
-  float: left;
-  margin: 0 0 @baseLineHeight @gridGutterWidth;
+  margin-bottom: @baseLineHeight;
 }
+
+// The actual thumbnail (can be `a` or `div`)
 .thumbnail {
   display: block;
   padding: 4px;
@@ -23,6 +31,7 @@ a.thumbnail:hover {
   border-color: @linkColor;
   .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
+
 // Images and captions
 .thumbnail > img {
   display: block;
diff --git a/less/type.less b/less/type.less
index 4e1407b85..0d5621934 100644
--- a/less/type.less
+++ b/less/type.less
@@ -52,8 +52,8 @@ h2 {
   }
 }
 h3 {
-  line-height: @baseLineHeight * 1.5;
   font-size: 18px;
+  line-height: @baseLineHeight * 1.5;
   small {
     font-size: 14px;
   }
@@ -136,9 +136,10 @@ dd {
 .dl-horizontal {
   dt {
     float: left;
-    clear: left;
     width: 120px;
+    clear: left;
     text-align: right;
+    .text-overflow();
   }
   dd {
     margin-left: 130px;
@@ -169,8 +170,8 @@ em {
 
 // Abbreviations and acronyms
 abbr[title] {
-  border-bottom: 1px dotted #ddd;
   cursor: help;
+  border-bottom: 1px dotted #ddd;
 }
 abbr.initialism {
   font-size: 90%;
@@ -198,10 +199,10 @@ blockquote {
   // Float right with text-align: right
   &.pull-right {
     float: right;
-    padding-left: 0;
     padding-right: 15px;
-    border-left: 0;
+    padding-left: 0;
     border-right: 5px solid @grayLighter;
+    border-left: 0;
     p,
     small {
       text-align: right;
@@ -221,8 +222,8 @@ blockquote:after {
 address {
   display: block;
   margin-bottom: @baseLineHeight;
-  line-height: @baseLineHeight;
   font-style: normal;
+  line-height: @baseLineHeight;
 }
 
 // Misc
diff --git a/less/variables.less b/less/variables.less
index 94c3a0667..d8825fb07 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -45,10 +45,14 @@
 
 // Typography
 // -------------------------
+@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
 @baseFontSize:          13px;
-@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        18px;
-@altFontFamily:         Georgia, "Times New Roman", Times, serif;
+@altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
 @headingsFontWeight:    bold;    // instead of browser default, bold
@@ -67,7 +71,7 @@
 // -------------------------
 @btnBackground:                     @white;
 @btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         darken(@white, 20%);
+@btnBorder:                         #ccc;
 
 @btnPrimaryBackground:              @linkColor;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
@@ -92,8 +96,9 @@
 // -------------------------
 @inputBackground:               @white;
 @inputBorder:                   #ccc;
+@inputBorderRadius:             3px;
 @inputDisabledBackground:       @grayLighter;
-
+@formActionsBackground:         #f5f5f5;
 
 // Dropdowns
 // -------------------------
@@ -154,6 +159,7 @@
 @navbarSearchBackgroundFocus:     @white;
 @navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
 @navbarSearchPlaceholderColor:    #ccc;
+@navbarBrandColor:                @navbarLinkColor;
 
 
 // Hero unit
@@ -183,7 +189,6 @@
 
 
 
-
 // GRID
 // --------------------------------------------------
 
@@ -194,7 +199,6 @@
 @gridGutterWidth:         20px;
 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
-
 // Fluid grid
 // -------------------------
 @fluidGridColumnWidth:    6.382978723%;