Merge branch '3.0.0-wip' into bs3-normalize

Conflicts:
	less/bootstrap.less

17 files changed, 223 insertions, 468 deletions

diff --git a/less/labels-badges.less b/less/badges.less
index 8440cc469..b8de24df1 100644
--- a/less/labels-badges.less
+++ b/less/badges.less
@@ -4,7 +4,6 @@
 
 
 // Base classes
-.label,
 .badge {
   display: inline-block;
   padding: 2px 4px;
@@ -16,29 +15,17 @@
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
-}
-// Set unique padding and border-radii
-.label {
   border-radius: 3px;
-}
-.badge {
-  padding-left: 9px;
-  padding-right: 9px;
-  border-radius: 9px;
-}
 
-// Empty labels/badges collapse
-.label,
-.badge {
+  // Empty labels/badges collapse
   &:empty {
     display: none;
   }
 }
 
 // Hover state, but only for links
-a {
-  &.label:hover,
-  &.badge:hover {
+a.badge {
+  &:hover {
     color: #fff;
     text-decoration: none;
     cursor: pointer;
@@ -47,7 +34,6 @@ a {
 
 // Colors
 // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.label,
 .badge {
   // Important (red)
   &-danger            { background-color: @state-error-text; }
@@ -68,14 +54,12 @@ a {
 
 // Quick fix for labels/badges in buttons
 .btn {
-  .label,
   .badge {
     position: relative;
     top: -1px;
   }
 }
 .btn-mini {
-  .label,
   .badge {
     top: 0;
   }
diff --git a/less/bootstrap.less b/less/bootstrap.less
index c4c72de83..d5710b6b4 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -52,11 +52,11 @@
 // Components: Misc
 @import "thumbnails.less";
 @import "media.less";
-@import "labels-badges.less";
+@import "badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";
-@import "hero-unit.less";
+@import "jumbotron.less";
 
 // Utility classes
 @import "utilities.less"; // Has to be last to override when necessary
diff --git a/less/button-groups.less b/less/button-groups.less
index 4648245c7..04f3e5d72 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -126,22 +126,16 @@
     background-color: @btn-background-highlight;
   }
   .btn-primary.dropdown-toggle {
-    background-color: @btn-backround-primary-highlight;
+    background-color: @btn-background-primary-highlight;
   }
   .btn-warning.dropdown-toggle {
-    background-color: @btn-backround-warning-highlight;
+    background-color: @btn-background-warning-highlight;
   }
   .btn-danger.dropdown-toggle {
-    background-color: @btn-backround-danger-highlight;
+    background-color: @btn-background-danger-highlight;
   }
   .btn-success.dropdown-toggle {
-    background-color: @btn-backround-success-highlight;
-  }
-  .btn-info.dropdown-toggle {
-    background-color: @btn-backround-info-highlight;
-  }
-  .btn-inverse.dropdown-toggle {
-    background-color: @btn-backround-inverse-highlight;
+    background-color: @btn-background-success-highlight;
   }
 }
 
@@ -152,8 +146,6 @@
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-mini .caret,
-.btn-small .caret,
 .btn-large .caret {
   margin-top: 6px;
 }
@@ -162,6 +154,10 @@
   border-right-width: 5px;
   border-top-width:   5px;
 }
+.btn-mini .caret,
+.btn-small .caret {
+  margin-top: 8px;
+}
 // Upside down carets for .dropup
 .dropup .btn-large .caret {
   border-bottom-width: 5px;
diff --git a/less/buttons.less b/less/buttons.less
index 92c9477aa..fe80fa44b 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -6,51 +6,39 @@
 // Base styles
 // --------------------------------------------------
 
-// Core
+// Core styles
 .btn {
   display: inline-block;
-  padding: 6px 12px;
+  padding: 6px 13px;
   margin-bottom: 0; // For input.btn
   font-size: @font-size-base;
   line-height: @line-height-base;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
-  border: 1px solid @btn-border;
-  border-bottom-color: darken(@btn-border, 10%);
+  border: 1px solid #ccc;
   border-radius: @border-radius-base;
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
 
-  // Hover state
-  &:hover {
-    color: @grayDark;
-    text-decoration: none;
-    background-position: 0 -15px;
-
-    // transition is only when going to hover, otherwise the background
-    // behind the gradient (there for IE<=9 fallback) gets mismatched
-    .transition(background-position .1s linear);
-  }
-
-  // Focus state for keyboard and accessibility
   &:focus {
     .tab-focus();
   }
 
-  // Active state
-  &.active,
-  &:active {
-    background-image: none;
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
     outline: 0;
-    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+    background-image: none;
+    .box-shadow(~"inset 0 3px 5px rgba(0,0,0,.125), 0 1px 0 rgba(255,255,255,.1)");
   }
 
-  // Disabled state
   &.disabled,
-  &[disabled] {
+  &[disabled],
+  fieldset[disabled] & {
     cursor: default;
-    background-image: none;
     .opacity(65);
     .box-shadow(none);
   }
@@ -125,47 +113,25 @@ input[type="button"] {
 // Alternate buttons
 // --------------------------------------------------
 
-// Provide *some* extra contrast for those who can get it
-.btn-primary.active,
-.btn-warning.active,
-.btn-danger.active,
-.btn-success.active,
-.btn-info.active,
-.btn-inverse.active {
-  color: rgba(255,255,255,.75);
-}
-
-// Set the backgrounds
-// -------------------------
 .btn {
-  // reset here as of 2.0.3 due to Recess property order
-  border-color: #c5c5c5;
-  border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
+  .buttonBackground(@btn-background, @btn-background-highlight, @gray, 0 1px 0 rgba(255,255,255,.75));
 }
+// Primary appears as blue
 .btn-primary {
-  .buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
+  .buttonBackground(@btn-background-primary, @btn-background-primary-highlight);
 }
 // Warning appears are orange
 .btn-warning {
-  .buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
+  .buttonBackground(@btn-background-warning, @btn-background-warning-highlight);
 }
 // Danger and error appear as red
 .btn-danger {
-  .buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
+  .buttonBackground(@btn-background-danger, @btn-background-danger-highlight);
 }
 // Success appears as green
 .btn-success {
-  .buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
+  .buttonBackground(@btn-background-success, @btn-background-success-highlight);
 }
-// Info appears as a neutral blue
-.btn-info {
-  .buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
-}
-// Inverse appears as dark gray
-.btn-inverse {
-  .buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
-}
-
 
 
 // Link buttons
@@ -174,7 +140,8 @@ input[type="button"] {
 // Make a button look and behave like a link
 .btn-link,
 .btn-link:active,
-.btn-link[disabled] {
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
   background-color: transparent;
   background-image: none;
   .box-shadow(none);
@@ -190,7 +157,12 @@ input[type="button"] {
   text-decoration: underline;
   background-color: transparent;
 }
-.btn-link[disabled]:hover {
-  color: @grayDark;
-  text-decoration: none;
+.btn-link {
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover {
+      color: @grayDark;
+      text-decoration: none;
+    }
+  }
 }
diff --git a/less/carousel.less b/less/carousel.less
index 264631fad..e175f9477 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -119,6 +119,31 @@
   }
 }
 
+// Carousel indicator pips
+// -----------------------------
+.carousel-indicators {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 5;
+  margin: 0;
+  list-style: none;
+
+  li {
+    display: block;
+    float: left;
+    width: 10px;
+    height: 10px;
+    margin-left: 5px;
+    text-indent: -999px;
+    background-color: #ccc;
+    background-color: rgba(255,255,255,.25);
+    border-radius: 5px;
+  }
+  .active {
+    background-color: #fff;
+  }
+}
 
 
 // Caption for text below images
diff --git a/less/close.less b/less/close.less
index 24689fd9d..d0403f93e 100644
--- a/less/close.less
+++ b/less/close.less
@@ -8,11 +8,11 @@
   font-size: 20px;
   font-weight: bold;
   line-height: @line-height-base;
-  color: @black;
+  color: #000;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
   &:hover {
-    color: @black;
+    color: #000;
     text-decoration: none;
     cursor: pointer;
     .opacity(40);
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 922baf02d..312d632ce 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -20,7 +20,7 @@
   width: 0;
   height: 0;
   vertical-align: top;
-  border-top:   4px solid @black;
+  border-top:   4px solid #000;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
@@ -64,7 +64,7 @@
   }
 
   // Links within the dropdown menu
-  li > a {
+  > li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
@@ -78,8 +78,7 @@
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus,
-.dropdown-submenu:hover > a {
+.dropdown-menu li > a:focus {
   text-decoration: none;
   color: @dropdown-link-color-hover;
   #gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
@@ -87,8 +86,8 @@
 
 // Active state
 // ------------
-.dropdown-menu .active > a,
-.dropdown-menu .active > a:hover {
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover {
   color: @dropdown-link-color-active;
   text-decoration: none;
   outline: 0;
@@ -98,12 +97,12 @@
 // Disabled state
 // --------------
 // Gray out text and ensure the hover state remains gray
-.dropdown-menu .disabled > a,
-.dropdown-menu .disabled > a:hover {
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover {
   color: @grayLight;
 }
 // Nuke hover effects
-.dropdown-menu .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover {
   text-decoration: none;
   background-color: transparent;
   background-image: none; // Remove CSS gradient
@@ -135,7 +134,7 @@
   // Reverse the caret
   .caret {
     border-top: 0;
-    border-bottom: 4px solid @black;
+    border-bottom: 4px solid #000;
     content: "";
   }
   // Different positioning for bottom up menu
@@ -146,64 +145,6 @@
   }
 }
 
-// Sub menus
-// ---------------------------
-.dropdown-submenu {
-  position: relative;
-}
-// Default dropdowns
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  border-radius: 0 4px 4px 4px;
-}
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-
-// Dropups
-.dropup .dropdown-submenu > .dropdown-menu {
-  top: auto;
-  bottom: 0;
-  margin-top: 0;
-  margin-bottom: -2px;
-  border-radius: 4px 4px 4px 0;
-}
-
-// Caret to indicate there is a submenu
-.dropdown-submenu > a:after {
-  display: block;
-  content: " ";
-  float: right;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: darken(@dropdown-background, 20%);
-  margin-top: 5px;
-  margin-right: -10px;
-}
-.dropdown-submenu:hover > a:after {
-  border-left-color: @dropdown-link-color-hover;
-}
-
-// Left aligned submenus
-.dropdown-submenu.pull-left {
-  // Undo the float
-  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
-  float: none;
-
-  // Positioning the submenu
-  > .dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    border-radius: 4px 0 4px 4px;
-  }
-}
-
 // Tweak nav headers
 // -----------------
 // Increase padding from 15px to 20px on sides
@@ -216,5 +157,4 @@
 // ---------
 .typeahead {
   z-index: 1051;
-  margin-top: 2px; // give it some space to breathe
 }
diff --git a/less/forms.less b/less/forms.less
index d96649ef7..b444ba765 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -307,7 +307,7 @@ input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
 .uneditable-input[class*="span"] {
-  height: 30px;
+  height: @input-height;
 }
 // Control row for multiple inputs per line
 .controls-row {
@@ -331,21 +331,24 @@ textarea[class*="span"],
 // --------------
 
 // Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-  cursor: not-allowed;
-  background-color: @input-background-disabled;
+input,
+select,
+textarea {
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    background-color: @input-background-disabled;
+  }
 }
 // Explicitly reset the colors here
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
-  background-color: transparent;
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: transparent;
+  }
 }
 
 
@@ -422,273 +425,112 @@ select:focus:invalid {
 
 
 
-// INPUT GROUPS
-// ------------
-
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-append,
-.input-prepend {
-  margin-bottom: 5px;
-  font-size: 0; // white space collapse hack
-  white-space: nowrap; // Prevent span and input from separating
 
-  // Reset the white space collapse hack
-  input,
-  select,
-  .uneditable-input,
-  .dropdown-menu {
-    font-size: @font-size-base;
-  }
+// Input groups
+// --------------------------------------------------
 
-  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
-    float: none; // Undo the float from grid sizing
-    margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @font-size-base;
-    vertical-align: top;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-    // Make input on top when focused so blue border and shadow always show
-    &:focus {
-      z-index: 2;
-    }
-  }
-  input[class*="span"],
-  select[class*="span"],
-  .uneditable-input[class*="span"] {
-    margin: 0;
-  }
-  .add-on {
-    display: inline-block;
-    width: auto;
-    height: @line-height-base;
-    min-width: 16px;
-    padding: 6px;
-    font-size: @font-size-base;
-    font-weight: normal;
-    line-height: @line-height-base;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    background-color: @grayLighter;
-    border: 1px solid #ccc;
-  }
-  .add-on,
-  .btn,
-  .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    border-radius: 0;
-  }
-  .active {
-    background-color: @state-success-background;
-    border-color: @state-success-text;
-  }
-}
+// Base styles
+// -------------------------
+.input-group {
+  display: table;
 
-.input-prepend {
-  .add-on,
-  .btn {
-    margin-right: -1px;
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    // FYI, `.btn:first-child` accounts for a button group that's prepended
-    border-radius: @input-border-radius 0 0 @input-border-radius;
+  // Undo padding and float of grid classes
+  &[class*="span"] {
+    float: none;
+    padding: 0;
   }
-}
 
-.input-append {
   input,
   select,
   .uneditable-input {
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-    + .btn-group .btn,
-    + .btn-group .btn:last-child {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on,
-  .btn,
-  .btn-group {
-    margin-left: -1px;
-  }
-  .add-on:last-child,
-  .btn:last-child,
-  .btn-group:last-child > .dropdown-toggle {
-    border-radius: 0 @input-border-radius @input-border-radius 0;
+    width: 100%;
   }
 }
 
-// Remove all border-radius for inputs with both prepend and append
-.input-prepend.input-append {
-  input,
-  select,
-  .uneditable-input {
-    border-radius: 0;
-    + .btn-group .btn {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    margin-right: -1px;
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-  }
-  .add-on:last-child,
-  .btn:last-child {
-    margin-left: -1px;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-  }
-  .btn-group:first-child {
-    margin-left: 0;
-  }
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
+  margin: 0;
+  border-radius: 0;
 }
-
-
-
-
-// SEARCH FORM
-// -----------
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
-  margin-bottom: 0; // Remove the default margin on all inputs
-  border-radius: @input-border-radius-search;
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle; // Match the inputs
 }
 
-/* Allow for input prepend/append in search forms */
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  border-radius: 0; // Override due to specificity
+// Text input groups
+// -------------------------
+.input-group-addon {
+  .box-sizing(border-box);
+  padding: 6px 8px;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: @line-height-base;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  background-color: @grayLighter;
+  border: 1px solid #ccc;
 }
-.form-search .input-append .search-query {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
+
+// Reset rounded corners
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  .border-left-radius(@border-radius-base);
 }
-.form-search .input-append .btn {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
+.input-group-addon:first-child {
+  border-right: 0;
 }
-.form-search .input-prepend .search-query {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  .border-right-radius(@border-radius-base);
 }
-.form-search .input-prepend .btn {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
+.input-group-addon:last-child {
+  border-left: 0;
 }
 
-
-
-
-// HORIZONTAL & VERTICAL FORMS
-// ---------------------------
-
-// Common properties
-// -----------------
-
-.form-search,
-.form-inline,
-.form-horizontal {
-  input,
-  textarea,
-  select,
-  .help-inline,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  // Re-hide hidden elements due to specifity
-  .hide {
-    display: none;
-  }
-}
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
-}
-// Remove margin for input-prepend/-append
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
+// Button input groups
+// -------------------------
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
 }
-// Inline checkbox/radio labels (remove padding on left)
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-  padding-left: 0;
-  label {
-    margin-bottom: 0;
-    vertical-align: middle;
+.input-group-btn > .btn {
+  float: left; // Collapse white-space
+  border-radius: 0;
+  + .btn {
+    border-left: 0;
   }
 }
-// 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-right: 3px;
-  margin-left: 0;
-}
-
-
-// Margin to space out fieldsets
-.control-group {
-  margin-bottom: @line-height-base / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
-  margin-top: @line-height-base;
-  -webkit-margin-top-collapse: separate;
+.input-group-btn.btn-group {
+  display: table-cell;
 }
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
-  // Increase spacing between groups
-  .control-group {
-    margin-bottom: @line-height-base;
-    .clearfix();
+// Prepend
+.input-group-btn {
+  &:first-child > .btn,
+  &.btn-group:first-child > .btn {
+    border-right: 0;
   }
-  // Float the labels left
-  .control-label {
-    float: left;
-    width: @component-offset-horizontal - 20;
-    padding-top: 5px;
-    text-align: right;
+  &:first-child > .btn,
+  &.btn-group:first-child > .btn {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
   }
-  // Move over all input controls and content
-  .controls {
-    margin-left: @component-offset-horizontal;
-  }
-  // Remove bottom margin on block level help text since that's accounted for on .control-group
-  .help-block {
-    margin-bottom: 0;
-  }
-  // And apply it only to .help-block instances that follow a form control
-  input,
-  select,
-  textarea,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    + .help-block {
-      margin-top: @line-height-base / 2;
-    }
+}
+// Append
+.input-group-btn {
+  &:last-child > .btn,
+  &.btn-group:last-child > .btn:first-child {
+    border-left: 0;
   }
-  // Move over buttons in .form-actions to align with .controls
-  .form-actions {
-    padding-left: @component-offset-horizontal;
+  &:last-child > .btn,
+  &.btn-group:last-child > .btn {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
   }
 }
diff --git a/less/grid.less b/less/grid.less
index 15017b7cb..2e7a61d91 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -13,10 +13,6 @@
 #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
 
 // Reset utility classes due to specificity
-[class*="span"].hide {
-  display: none;
-}
-
 [class*="span"].pull-right {
   float: right;
 }
diff --git a/less/hero-unit.less b/less/jumbotron.less
index 1e61033ad..add431969 100644
--- a/less/hero-unit.less
+++ b/less/jumbotron.less
@@ -1,22 +1,22 @@
 //
-// Hero unit
+// Jumbotron
 // --------------------------------------------------
 
 
-.hero-unit {
+.jumbotron {
   padding: 60px;
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 200;
   line-height: @line-height-base * 1.5;
-  color: @hero-lead-color;
-  background-color: @hero-background;
+  color: @jumbotron-lead-color;
+  background-color: @jumbotron-background;
   border-radius: 6px;
   h1 {
     margin-bottom: 0;
     font-size: 60px;
     line-height: 1;
-    color: @hero-heading-color;
+    color: @jumbotron-heading-color;
     letter-spacing: -1px;
   }
   li {
diff --git a/less/media.less b/less/media.less
index e99a68b69..21063eb2b 100644
--- a/less/media.less
+++ b/less/media.less
@@ -36,10 +36,10 @@
 // Media image alignment
 // -------------------------
 
-.media .pull-left {
+.media > .pull-left {
   margin-right: 10px;
 }
-.media .pull-right {
+.media > .pull-right {
   margin-left: 10px;
 }
 
diff --git a/less/mixins.less b/less/mixins.less
index 1da275863..a90e61bc7 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -338,7 +338,7 @@
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
   }
   .vertical(@startColor: #555, @endColor: #333) {
-    background-color: mix(@startColor, @endColor, 60%);
+    background-color: @endColor;
     background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
@@ -405,24 +405,25 @@
 
 // Button backgrounds
 // ------------------
-.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
   color: @text-color;
-  text-shadow: @textShadow;
-  #gradient > .vertical(@startColor, @endColor);
-  border-color: @endColor @endColor darken(@endColor, 15%);
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-  .reset-filter();
-
-  // in these cases the gradient won't cover the background, so we override
-  &:hover, &:active, &.active, &.disabled, &[disabled] {
-    color: @text-color;
-    background-color: @endColor;
-  }
+  text-shadow: @text-shadow;
+  #gradient > .vertical(@background-start, @background-end);
+  border-color: darken(@background-end, 7.5%);
 
-  // IE8 can't handle box-shadow to show active, so we darken a bit ourselves
+  &:hover,
   &:active,
   &.active {
-    background-color: darken(@endColor, 10%) e("\9");
+    color: @text-color;
+    background-color: @background-end;
+    background-position: 0 -15px;
+  }
+  &:active,
+  &.active,
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    background-image: none;
   }
 }
 
diff --git a/less/modals.less b/less/modals.less
index 584346e94..7a233091d 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -10,7 +10,7 @@
   bottom: 0;
   left: 0;
   z-index: @zindex-modal-background;
-  background-color: @black;
+  background-color: #000;
   // Fade for backdrop
   &.fade { opacity: 0; }
 }
@@ -26,6 +26,7 @@
   top: 10%;
   left: 50%;
   z-index: @zindex-modal;
+  display: none;
   width: 560px;
   margin-left: -280px;
   background-color: #fff;
diff --git a/less/navbar.less b/less/navbar.less
index d63c5a8e9..943400dfb 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -222,7 +222,6 @@
 }
 .navbar .nav .dropdown-toggle .caret {
   margin-top: 8px;
-
 }
 
 // Hover
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 2c3f6c15f..1ed1a1369 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -3,6 +3,13 @@
 // --------------------------------------------------
 
 
+// IE10 Metro responsive
+// Required for Windows 8 Metro split-screen snapping with IE10
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+@-ms-viewport{
+  width: device-width;
+}
+
 // Hide from screenreaders and browsers
 // Credit: HTML5 Boilerplate
 .hidden {
diff --git a/less/utilities.less b/less/utilities.less
index b11bcb3e2..d1e0a1bed 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -21,10 +21,10 @@
 // -------------------------
 
 .hide {
-  display: none;
+  display: none !important;
 }
 .show {
-  display: block;
+  display: block !important;
 }
 .invisible {
   visibility: hidden;
diff --git a/less/variables.less b/less/variables.less
index 0d9b2c663..f5103cca6 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -9,7 +9,6 @@
 
 // Grays
 // -------------------------
-@black:                 #000;
 @grayDarker:            #222;
 @grayDark:              #333;
 @gray:                  #555;
@@ -77,26 +76,19 @@
 // -------------------------
 
 @btn-background:                     #fff;
-@btn-background-highlight:           darken(#fff, 10%);
-@btn-border:                         #bbb;
+@btn-background-highlight:           #eaeaea;
 
-@btn-backround-primary:              @link-color;
-@btn-backround-primary-highlight:    spin(@btn-backround-primary, 20%);
+@btn-background-primary:              @link-color;
+@btn-background-primary-highlight:    darken(@link-color, 10%);
 
-@btn-backround-info:                 #5bc0de;
-@btn-backround-info-highlight:       #2f96b4;
+@btn-background-success:              #62c462;
+@btn-background-success-highlight:    #51a351;
 
-@btn-backround-success:              #62c462;
-@btn-backround-success-highlight:    #51a351;
+@btn-background-warning:              lighten(#f89406, 15%);
+@btn-background-warning-highlight:    #f89406;
 
-@btn-backround-warning:              lighten(#f89406, 15%);
-@btn-backround-warning-highlight:    #f89406;
-
-@btn-backround-danger:               #ee5f5b;
-@btn-backround-danger-highlight:     #bd362f;
-
-@btn-backround-inverse:              #444;
-@btn-backround-inverse-highlight:    @grayDarker;
+@btn-background-danger:               #ee5f5b;
+@btn-background-danger-highlight:     #bd362f;
 
 
 // Forms
@@ -199,12 +191,12 @@
 @pagination-border:                    #ddd;
 
 
-// Hero unit
+// Jumbotron
 // -------------------------
 
-@hero-background:              @grayLighter;
-@hero-heading-color:            inherit;
-@hero-lead-color:               inherit;
+@jumbotron-background:           @grayLighter;
+@jumbotron-heading-color:        inherit;
+@jumbotron-lead-color:           inherit;
 
 
 // Form states and alerts