Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into features/warning_progress_bar

22 files changed, 434 insertions, 264 deletions

diff --git a/less/alerts.less b/less/alerts.less
index 562826fd3..46a0d77bf 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -9,10 +9,10 @@
   background-color: @warningBackground;
   border: 1px solid @warningBorder;
   .border-radius(4px);
+  color: @warningText;
 }
-.alert,
 .alert-heading {
-  color: @warningText;
+  color: inherit;
 }
 
 // Adjust close link position
@@ -29,32 +29,20 @@
 .alert-success {
   background-color: @successBackground;
   border-color: @successBorder;  
-}
-.alert-success,
-.alert-success .alert-heading {
   color: @successText;
 }
 .alert-danger,
 .alert-error {
   background-color: @errorBackground;
   border-color: @errorBorder;
-}
-.alert-danger,
-.alert-error,
-.alert-danger .alert-heading,
-.alert-error .alert-heading {
   color: @errorText;
 }
 .alert-info {
   background-color: @infoBackground;
   border-color: @infoBorder;
-}
-.alert-info,
-.alert-info .alert-heading {
   color: @infoText;
 }
 
-
 // Block alerts
 // ------------------------
 .alert-block {
diff --git a/less/badges.less b/less/badges.less
new file mode 100644
index 000000000..273479b0f
--- /dev/null
+++ b/less/badges.less
@@ -0,0 +1,36 @@
+// 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 4b09b7aa6..0d380a0e2 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -53,6 +53,7 @@
 // Components: Misc
 @import "thumbnails.less";
 @import "labels.less";
+@import "badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 39060bad2..e346dc124 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -4,6 +4,7 @@
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 @baseLineHeight;
+  list-style: none;
   #gradient > .vertical(@white, #f5f5f5);
   border: 1px solid #ddd;
   .border-radius(3px);
diff --git a/less/button-groups.less b/less/button-groups.less
index a04220a9a..cfb25f140 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -137,6 +137,7 @@
 .btn-inverse {
   .caret {
     border-top-color: @white;
+    border-bottom-color: @white;
     .opacity(75);
   }
 }
diff --git a/less/buttons.less b/less/buttons.less
index 55e9fbf1c..85f18ff0c 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -25,7 +25,6 @@
   cursor: pointer;
 
   // Give IE7 some love
-  .reset-filter();
   .ie7-restore-left-whitespace();
 }
 
@@ -126,7 +125,7 @@
 .btn-danger.active,
 .btn-success.active,
 .btn-info.active,
-.btn-dark.active {
+.btn-inverse.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -153,7 +152,7 @@
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  .buttonBackground(#454545, #262626);
+  .buttonBackground(@gray, @grayDarker);
 }
 
 
@@ -172,11 +171,11 @@ input[type="submit"].btn {
   // IE7 has some default padding on button controls
   *padding-top: 2px;
   *padding-bottom: 2px;
-  &.large {
+  &.btn-large {
     *padding-top: 7px;
     *padding-bottom: 7px;
   }
-  &.small {
+  &.btn-small {
     *padding-top: 3px;
     *padding-bottom: 3px;
   }
diff --git a/less/code.less b/less/code.less
index e2157d8ab..c7fd032ce 100644
--- a/less/code.less
+++ b/less/code.less
@@ -14,7 +14,7 @@ pre {
 
 // Inline code
 code {
-  padding: 3px 4px;
+  padding: 2px 4px;
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 1ec06b04a..12ce7c2e5 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -13,7 +13,9 @@
 .open .dropdown-toggle {
   outline: 0;
 }
+
 // Dropdown arrow/caret
+// --------------------
 .caret {
   display: inline-block;
   width: 0;
@@ -29,6 +31,7 @@
   .opacity(30);
   content: "\2193";
 }
+
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
@@ -37,7 +40,9 @@
 .open.dropdown .caret {
   .opacity(100);
 }
+
 // The dropdown menu (ul)
+// ----------------------
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -46,7 +51,6 @@
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
-  _width: 160px;
   padding: 4px 0;
   margin: 0; // override default ul
   list-style: none;
@@ -63,27 +67,15 @@
   *border-right-width: 2px;
   *border-bottom-width: 2px;
 
-  // Allow for dropdowns to go bottom up (aka, dropup-menu)
-  &.bottom-up {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: 2px;
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
   }
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    height: 1px;
-    margin: 5px 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%;
-    *margin: -5px 0 5px;
+    .nav-divider();
   }
 
   // Links within the dropdown menu
@@ -99,6 +91,7 @@
 }
 
 // Hover state
+// -----------
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
@@ -108,6 +101,7 @@
 }
 
 // Open state for the dropdown
+// ---------------------------
 .dropdown.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
@@ -123,7 +117,34 @@
   }
 }
 
+// Right aligned dropdowns
+.pull-right .dropdown-menu {
+  left: auto;
+  right: 0;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: 4px solid @black;
+    content: "\2191";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
 // Typeahead
+// ---------
 .typeahead {
   margin-top: 2px; // give it some space to breathe
   .border-radius(4px);
diff --git a/less/forms.less b/less/forms.less
index 0a5fa2b86..7f02ce365 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -253,7 +253,7 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+#grid > .input (@gridColumnWidth, @gridGutterWidth);
 
 
 
@@ -301,7 +301,7 @@ select:focus:required:invalid {
   border-color: #ee5f5b;
   &:focus {
     border-color: darken(#ee5f5b, 10%);
-    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));    
+    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
   }
 }
 
@@ -316,6 +316,7 @@ select:focus:required:invalid {
   margin-bottom: @baseLineHeight;
   background-color: #f5f5f5;
   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
@@ -335,17 +336,19 @@ select:focus:required:invalid {
 // HELP TEXT
 // ---------
 
+.help-block,
+.help-inline {
+  color: @gray; // lighten the text some for contrast
+}
+
 .help-block {
   display: block; // account for any element using help-block
-  margin-top: 5px;
-  margin-bottom: 0;
-  color: @grayLight;
+  margin-bottom: @baseLineHeight / 2;
 }
 
 .help-inline {
   display: inline-block;
   .ie7-inline-block();
-  margin-bottom: 9px;
   vertical-align: middle;
   padding-left: 5px;
 }
@@ -361,6 +364,7 @@ select:focus:required:invalid {
   margin-bottom: 5px;
   .clearfix(); // Clear the float to prevent wrapping
   input,
+  select,
   .uneditable-input {
     .border-radius(0 3px 3px 0);
     &:focus {
@@ -381,7 +385,6 @@ select:focus:required:invalid {
     padding: 4px 5px;
     font-weight: normal;
     line-height: @baseLineHeight;
-    color: @grayLight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
     background-color: #f5f5f5;
@@ -400,13 +403,14 @@ select:focus:required:invalid {
 }
 .input-append {
   input,
+  select
   .uneditable-input {
     float: left;
     .border-radius(3px 0 0 3px);
   }
   .uneditable-input {
     border-left-color: #eee;
-    border-right-color: #ccc;    
+    border-right-color: #ccc;
   }
   .add-on {
     margin-right: 0;
@@ -470,19 +474,30 @@ select:focus:required:invalid {
 }
 // Make the prepend and append add-on vertical-align: middle;
 .form-search .input-append .add-on,
-.form-inline .input-prepend .add-on,
-.form-search .input-append .add-on,
+.form-search .input-prepend .add-on,
+.form-inline .input-append .add-on,
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
-// Inline checkbox/radio labels
+// Inline checkbox/radio labels (remove padding on left)
 .form-search .radio,
-.form-inline .radio,
 .form-search .checkbox,
+.form-inline .radio,
 .form-inline .checkbox {
+  padding-left: 0;
   margin-bottom: 0;
   vertical-align: middle;
 }
+// Remove float and margin, set to inline-block
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: 0;
+  margin-right: 3px;
+}
+
 
 // Margin to space out fieldsets
 .control-group {
@@ -515,6 +530,11 @@ legend + .control-group {
   .controls {
     margin-left: 160px;
   }
+  // Remove bottom margin on block level help text since that's accounted for on .control-group
+  .help-block {
+    margin-top: @baseLineHeight / 2;
+    margin-bottom: 0;
+  }
   // Move over buttons in .form-actions to align with .controls
   .form-actions {
     padding-left: 160px;
diff --git a/less/grid.less b/less/grid.less
index 4acb0a44c..e62a96093 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,8 +1,5 @@
-// GRID SYSTEM
-// -----------
-
 // Fixed (940px)
-#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+#grid > .core(@gridColumnWidth, @gridGutterWidth);
 
 // Fluid (940px)
-#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
+#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
\ No newline at end of file
diff --git a/less/labels.less b/less/labels.less
index 268435a0b..251c4f60d 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -3,10 +3,12 @@
 
 // Base
 .label {
-  padding: 2px 4px 3px;
-  font-size: @baseFontSize * .85;
+  padding: 1px 4px 2px;
+  font-size: @baseFontSize * .846;
   font-weight: bold;
+  line-height: 13px; // ensure proper line-height if floated
   color: @white;
+  white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
   .border-radius(3px);
@@ -30,3 +32,6 @@
 
 .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/mixins.less b/less/mixins.less
index 3cf1a3704..fccd7e349 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -135,156 +135,6 @@
 }
 
 
-
-// GRID SYSTEM
-// --------------------------------------------------
-
-// Site container
-// -------------------------
-.container-fixed() {
-  width: @gridRowWidth;
-  margin-left: auto;
-  margin-right: auto;
-  .clearfix();
-}
-
-// Le grid system
-// -------------------------
-#gridSystem {
-  // Setup the mixins to be used
-  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  } 
-  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-  .gridColumn(@gridGutterWidth) {
-    float: left;
-    margin-left: @gridGutterWidth;
-  }
-  // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
-    // Row surrounds the columns
-    .row {
-      margin-left: @gridGutterWidth * -1;
-      .clearfix();
-    }
-    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-    [class*="span"] {
-      #gridSystem > .gridColumn(@gridGutterWidth);
-    }
-    // Default columns
-    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
-    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
-    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
-    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
-    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
-    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
-    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
-    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
-    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
-    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
-    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
-    .span12,
-    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
-    // Offset column options
-    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
-    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
-    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
-    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
-    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
-    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
-    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
-    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
-    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
-    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
-    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
-  }
-}
-
-// Fluid grid system
-// -------------------------
-#fluidGridSystem {
-  // Setup the mixins to be used
-  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
-    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-  }
-  .gridColumn(@fluidGridGutterWidth) {
-    float: left;
-    margin-left: @fluidGridGutterWidth;
-  }
-  // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
-    // Row surrounds the columns
-    .row-fluid {
-      width: 100%;
-      .clearfix();
-
-      // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-      > [class*="span"] {
-        #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
-      }
-      > [class*="span"]:first-child {
-        margin-left: 0;
-      }
-      // Default columns
-      > .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
-      > .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
-      > .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
-      > .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
-      > .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
-      > .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
-      > .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
-      > .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
-      > .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
-      > .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
-      > .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
-      > .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
-    }
-  }
-}
-
-// Input grid system
-// -------------------------
-#inputGridSystem {
-  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
-    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
-  }
-  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
-    input,
-    textarea,
-    .uneditable-input {
-      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
-      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
-      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
-      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
-      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
-      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
-      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
-      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
-      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
-      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
-      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
-      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
-    }
-  }
-}
-
-// Make a Grid
-// -------------------------
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
-  margin-left: @gridGutterWidth * -1;
-  .clearfix();
-}
-.makeColumn(@columns: 1) {
-  float: left;
-  margin-left: @gridGutterWidth;
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-
-
-
 // Form field states (used in forms.less)
 // --------------------------------------------------
 
@@ -509,8 +359,8 @@
     background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
     background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
     background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
+    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
     background-repeat: no-repeat;
-    // Opera cannot do radial gradients yet
   }
   .striped(@color, @angle: -45deg) {
     background-color: @color;
@@ -528,8 +378,30 @@
 }
 
 
-// Mixin for generating button backgrounds
-// ---------------------------------------
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// 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%;
+  *margin: -5px 0 5px;
+}
+
+// Button backgrounds
+// ------------------
 .buttonBackground(@startColor, @endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   .gradientBar(@startColor, @endColor);
@@ -547,11 +419,15 @@
   }
 }
 
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+.navbarVerticalAlign(@elementHeight) {
+  margin-top: (@navbarHeight - @elementHeight) / 2;
+}
 
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// POPOVER ARROWS
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
 #popoverArrow {
@@ -588,3 +464,133 @@
     border-right: @arrowWidth solid @black;
   }
 }
+
+// Grid System
+// -----------
+
+.container-fixed() {
+  margin-left: auto;
+  margin-right: auto;
+  .clearfix();
+}
+
+.tableColumns(@columnSpan: 1) {
+  float: none; // undo default grid column styles
+  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+  margin-left: 0; // undo default grid column styles
+}
+
+#grid {
+
+  .core (@gridColumnWidth, @gridGutterWidth) {
+
+    .span (@columns) {
+      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+    }
+
+    .offset (@columns) {
+      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+    }
+
+    .row {
+      margin-left: @gridGutterWidth * -1;
+      .clearfix();
+    }
+
+    [class*="span"] {
+      float: left;
+      margin-left: @gridGutterWidth;
+    }
+
+    // Set the container width, and override it for fixed navbars in media queries
+    .container,
+    .navbar-fixed-top .container,
+    .navbar-fixed-bottom .container { .span(12); }
+
+    .span1 { .span(1); }
+    .span2 { .span(2); }
+    .span3 { .span(3); }
+    .span4 { .span(4); }
+    .span5 { .span(5); }
+    .span6 { .span(6); }
+    .span7 { .span(7); }
+    .span8 { .span(8); }
+    .span9 { .span(9); }
+    .span10 { .span(10); }
+    .span11 { .span(11); }
+    .span12 { .span(12); }
+
+    .offset1 { .offset(1); }
+    .offset2 { .offset(2); }
+    .offset3 { .offset(3); }
+    .offset4 { .offset(4); }
+    .offset5 { .offset(5); }
+    .offset6 { .offset(6); }
+    .offset7 { .offset(7); }
+    .offset8 { .offset(8); }
+    .offset9 { .offset(9); }
+    .offset10 { .offset(10); }
+    .offset11 { .offset(11); }
+    .offset12 { .offset(12); }
+
+  }
+
+  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
+
+    .span (@columns) {
+      width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+    }
+
+    .row-fluid {
+      width: 100%;
+      .clearfix();
+      > [class*="span"] {
+        float: left;
+        margin-left: @fluidGridGutterWidth;
+      }
+      > [class*="span"]:first-child {
+        margin-left: 0;
+      }
+      > .span1 { .span(1); }
+      > .span2 { .span(2); }
+      > .span3 { .span(3); }
+      > .span4 { .span(4); }
+      > .span5 { .span(5); }
+      > .span6 { .span(6); }
+      > .span7 { .span(7); }
+      > .span8 { .span(8); }
+      > .span9 { .span(9); }
+      > .span10 { .span(10); }
+      > .span11 { .span(11); }
+      > .span12 { .span(12); }
+    }
+
+  }
+
+  .input(@gridColumnWidth, @gridGutterWidth) {
+
+    .span(@columns) {
+      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+    }
+
+    input,
+    textarea,
+    .uneditable-input {
+      margin-left: 0; // override margin-left from core grid system
+      > .span1 { .span(1); }
+      > .span2 { .span(2); }
+      > .span3 { .span(3); }
+      > .span4 { .span(4); }
+      > .span5 { .span(5); }
+      > .span6 { .span(6); }
+      > .span7 { .span(7); }
+      > .span8 { .span(8); }
+      > .span9 { .span(9); }
+      > .span10 { .span(10); }
+      > .span11 { .span(11); }
+      > .span12 { .span(12); }
+    }
+
+  }
+
+}
diff --git a/less/modals.less b/less/modals.less
index d1e06dc26..b6f71ffff 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -33,7 +33,6 @@
   top: 50%;
   left: 50%;
   z-index: @zindexModal;
-  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -59,10 +58,12 @@
 
 // Body (where all modal content resises)
 .modal-body {
+  overflow-y: auto;
+  max-height: 400px;
   padding: 15px;
 }
 // Remove bottom margin if need be
-.modal-body .modal-form {
+.modal-form {
   margin-bottom: 0;
 }
 
@@ -70,13 +71,15 @@
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
+  text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   .border-radius(0 0 6px 6px);
   .box-shadow(inset 0 1px 0 @white);
-  .clearfix();
-  .btn {
-    float: right;
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
     margin-left: 5px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
diff --git a/less/navbar.less b/less/navbar.less
index 16553c1ff..6ecb74328 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -20,6 +20,12 @@
   .box-shadow(@shadow);
 }
 
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+  width: auto;
+}
+
 // Navbar button for toggling navbar items in responsive layouts
 .btn-navbar {
   display: none;
@@ -50,6 +56,7 @@
 
 // Brand, links, text, and buttons
 .navbar {
+  color: @navbarText;
   // Hover and active states
   .brand:hover {
     text-decoration: none;
@@ -69,16 +76,11 @@
   .navbar-text {
     margin-bottom: 0;
     line-height: 40px;
-    color: @navbarText;
-    a:hover {
-      color: @white;
-      background-color: transparent;
-    }
   }
   // Buttons in navbar
   .btn,
   .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
     margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -90,15 +92,16 @@
   margin-bottom: 0; // remove default bottom margin
   .clearfix();
   input,
+  select,
+  .radio,
+  .checkbox {
+    .navbarVerticalAlign(30px); // Vertically center in navbar
+  }
+  input,
   select {
     display: inline-block;
-    margin-top: 5px;
     margin-bottom: 0;
   }
-  .radio,
-  .checkbox {
-    margin-top: 5px;
-  }
   input[type="image"],
   input[type="checkbox"],
   input[type="radio"] {
@@ -118,7 +121,7 @@
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  .navbarVerticalAlign(28px); // Vertically center in navbar
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;
@@ -156,22 +159,42 @@
 }
 
 
+
 // FIXED NAVBAR
 // ------------
 
-.navbar-fixed-top {
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
   position: fixed;
-  top: 0;
   right: 0;
   left: 0;
   z-index: @zindexFixedNavbar;
+  margin-bottom: 0; // remove 18px margin for static navbar
 }
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
   padding-left:  0;
   padding-right: 0;
   .border-radius(0);
 }
 
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  #grid > .core > .span(@gridColumns);
+}
+
+// Fixed to top
+.navbar-fixed-top {
+  top: 0;
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+  bottom: 0;
+}
+
+
 
 // NAVIGATION
 // ----------
@@ -262,11 +285,27 @@
     left: 10px;
   }
 }
-
+// Menu position and menu caret support for dropups via extra bottom-up class
+.navbar-fixed-bottom .dropdown-menu {
+  &:before {
+    border-top: 7px solid #ccc;
+    border-top-color: rgba(0, 0, 0, 0.2);
+    border-bottom: 0;
+    bottom: -7px;
+    top: auto;
+  }
+  &:after {
+    border-top: 6px solid #ffffff;
+    border-bottom: 0;
+    bottom: -6px;
+    top: auto;
+  }
+}
 // Dropdown toggle caret
 .navbar .nav .dropdown-toggle .caret,
 .navbar .nav .open.dropdown .caret {
   border-top-color: @white;
+  border-bottom-color: @white;
 }
 .navbar .nav .active .caret {
   .opacity(100);
@@ -285,7 +324,9 @@
 }
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+// TODO: rejigger this at some point to simplify the selectors
+.navbar .nav.pull-right .dropdown-menu, 
+.navbar .nav .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {
diff --git a/less/navs.less b/less/navs.less
index 06219fa62..3285c9ef6 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -64,6 +64,10 @@
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+  .nav-divider();
+}
 
 
 
@@ -102,8 +106,9 @@
 
 // Actual tabs (as links)
 .nav-tabs > li > a {
-  padding-top: 9px;
-  padding-bottom: 9px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: @baseLineHeight;
   border: 1px solid transparent;
   .border-radius(4px 4px 0 0);
   &:hover {
@@ -200,11 +205,13 @@
 .nav-tabs .dropdown-toggle .caret,
 .nav-pills .dropdown-toggle .caret {
   border-top-color: @linkColor;
+  border-bottom-color: @linkColor;
   margin-top: 6px;
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
   border-top-color: @linkColorHover;
+  border-bottom-color: @linkColorHover;
 }
 
 // Active dropdown links
@@ -212,6 +219,7 @@
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
   border-top-color: @grayDark;
+  border-bottom-color: @grayDark;
 }
 
 // Active:hover dropdown links
@@ -234,6 +242,7 @@
 .nav .open.active .caret,
 .nav .open a:hover .caret {
   border-top-color: @white;
+  border-bottom-color: @white;
   .opacity(100);
 }
 
@@ -256,7 +265,8 @@
   .clearfix();
 }
 .tab-content {
-  overflow: hidden; // prevent content from running below tabs
+  display: table; // prevent content from running below tabs
+  width: 100%;
 }
 
 // Remove border on bottom, left, right
diff --git a/less/pagination.less b/less/pagination.less
index de5780759..38cf65cc4 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -32,6 +32,7 @@
   color: @grayLight;
   cursor: default;
 }
+.pagination .disabled span,
 .pagination .disabled a,
 .pagination .disabled a:hover {
   color: @grayLight;
diff --git a/less/reset.less b/less/reset.less
index 1115f59d8..cd3b527d2 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -75,7 +75,6 @@ sub {
 // -------------------------
 
 img {
-  max-width: 100%;
   height: auto;
   border: 0;
   -ms-interpolation-mode: bicubic;
diff --git a/less/responsive.less b/less/responsive.less
index 1547dce9e..7fa62cad9 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -31,6 +31,37 @@
   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
@@ -157,13 +188,13 @@
 @media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
-  #gridSystem > .generate(12, 42px, 20px);
+  #grid > .core(42px, 20px);
 
   // Fluid grid
-  #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
+  #grid > .fluid(5.801104972%, 2.762430939%);
 
   // Input grid
-  #inputGridSystem > .generate(12, 42px, 20px);
+  #grid > .input(42px, 20px);
 
 }
 
@@ -297,6 +328,7 @@
 @media (min-width: 980px) {
   .nav-collapse.collapse {
     height: auto !important;
+    overflow: visible !important;
   }
 }
 
@@ -308,13 +340,13 @@
 @media (min-width: 1200px) {
 
   // Fixed grid
-  #gridSystem > .generate(12, 70px, 30px);
+  #grid > .core(70px, 30px);
 
   // Fluid grid
-  #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
+  #grid > .fluid(5.982905983%, 2.564102564%);
 
   // Input grid
-  #inputGridSystem > .generate(12, 70px, 30px);
+  #grid > .input(70px, 30px);
 
   // Thumbnails
   .thumbnails {
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 47ce53818..c2e683ac6 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -3,8 +3,8 @@
 // -------------------------------------------------------------------------------------------
 
 
-// STRUCTURAL LAYOUT
-// -----------------
+// Body reset
+// ----------
 
 body {
   margin: 0;
@@ -16,7 +16,7 @@ body {
 }
 
 
-// LINKS
+// Links
 // -----
 
 a {
diff --git a/less/sprites.less b/less/sprites.less
index a7741661e..4014d70a5 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -11,7 +11,7 @@
 // and background-position. Your resulting HTML will look like
 // <i class="icon-inbox"></i>.
 
-// For the white version of the  icons, just add the .icon-white class:
+// For the white version of the icons, just add the .icon-white class:
 // <i class="icon-inbox icon-white"></i>
 
 [class^="icon-"],
@@ -21,14 +21,14 @@
   height: 14px;
   line-height: 14px;
   vertical-align: text-top;
-  background-image: url(@iconSpritePath);
+  background-image: url("@{iconSpritePath}");
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
   .ie7-restore-right-whitespace();
 }
 .icon-white {
-  background-image: url(@iconWhiteSpritePath);
+  background-image: url("@{iconWhiteSpritePath}");
 }
 
 .icon-glass              { background-position: 0      0; }
diff --git a/less/tables.less b/less/tables.less
index 3a4066d71..d8bce582f 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -64,13 +64,12 @@ table {
 
 .table-bordered {
   border: 1px solid #ddd;
+  border-left: 0;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
   .border-radius(4px);
-  th + th,
-  td + td,
-  th + td,
-  td + th {
+  th,
+  td {
     border-left: 1px solid #ddd;
   }
   // Prevent a double border
@@ -78,6 +77,7 @@ table {
   tbody:first-child tr:first-child th,
   tbody:first-child tr:first-child td {
     border-top: 0;
+    border-bottom: 1px solid #ddd;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,
@@ -129,11 +129,6 @@ table {
 // -----------------
 
 // Change the columns
-.tableColumns(@columnSpan: 1) {
-  float: none;
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
-  margin-left: 0;
-}
 table {
   .span1     { .tableColumns(1); }
   .span2     { .tableColumns(2); }
@@ -147,4 +142,16 @@ table {
   .span10    { .tableColumns(10); }
   .span11    { .tableColumns(11); }
   .span12    { .tableColumns(12); }
+  .span13    { .tableColumns(13); }
+  .span14    { .tableColumns(14); }
+  .span15    { .tableColumns(15); }
+  .span16    { .tableColumns(16); }
+  .span17    { .tableColumns(17); }
+  .span18    { .tableColumns(18); }
+  .span19    { .tableColumns(19); }
+  .span20    { .tableColumns(20); }
+  .span21    { .tableColumns(21); }
+  .span22    { .tableColumns(22); }
+  .span23    { .tableColumns(23); }
+  .span24    { .tableColumns(24); }
 }
diff --git a/less/type.less b/less/type.less
index 6ba83bc3a..bbe15f6cf 100644
--- a/less/type.less
+++ b/less/type.less
@@ -154,12 +154,14 @@ em {
 }
 
 // Abbreviations and acronyms
-abbr {
-  font-size: 90%;
-  text-transform: uppercase;
+abbr[title] {
   border-bottom: 1px dotted #ddd;
   cursor: help;
 }
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
 
 // Blockquotes
 blockquote {