Merge branch '2.0.1-wip'

18 files changed, 283 insertions, 123 deletions

diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 19b8081e1..39060bad2 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -9,7 +9,7 @@
   .border-radius(3px);
   .box-shadow(inset 0 1px 0 @white);
   li {
-    display: inline;
+    display: inline-block;
     text-shadow: 0 1px 0 @white;
   }
   .divider {
diff --git a/less/button-groups.less b/less/button-groups.less
index 4b0523df2..a04220a9a 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -133,7 +133,8 @@
 .btn-primary,
 .btn-danger,
 .btn-info,
-.btn-success {
+.btn-success,
+.btn-inverse {
   .caret {
     border-top-color: @white;
     .opacity(75);
diff --git a/less/buttons.less b/less/buttons.less
index 582350386..55e9fbf1c 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,12 +9,14 @@
 .btn {
   display: inline-block;
   padding: 4px 10px 4px;
+  margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @grayDark;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  vertical-align: middle;
+  .buttonBackground(@white, darken(@white, 10%));
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   .border-radius(4px);
@@ -23,6 +25,7 @@
   cursor: pointer;
 
   // Give IE7 some love
+  .reset-filter();
   .ie7-restore-left-whitespace();
 }
 
@@ -51,7 +54,6 @@
   .box-shadow(@shadow);
   background-color: darken(@white, 10%);
   background-color: darken(@white, 15%) e("\9");
-  color: rgba(0,0,0,.5);
   outline: 0;
 }
 
@@ -76,7 +78,7 @@
   line-height: normal;
   .border-radius(5px);
 }
-.btn-large .icon {
+.btn-large [class^="icon-"] {
   margin-top: 1px;
 }
 
@@ -86,10 +88,17 @@
   font-size: @baseFontSize - 2px;
   line-height: @baseLineHeight - 2px;
 }
-.btn-small .icon {
+.btn-small [class^="icon-"] {
   margin-top: -1px;
 }
 
+// Mini
+.btn-mini {
+  padding: 2px 6px;
+  font-size: @baseFontSize - 2px;
+  line-height: @baseLineHeight - 4px;
+}
+
 
 // Alternate buttons
 // --------------------------------------------------
@@ -105,7 +114,9 @@
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: @white;
 }
@@ -114,7 +125,8 @@
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -139,6 +151,10 @@
 .btn-info {
   .buttonBackground(#5bc0de, #2f96b4);
 }
+// Inverse appears as dark gray
+.btn-inverse {
+  .buttonBackground(#454545, #262626);
+}
 
 
 // Cross-browser Jank
@@ -146,8 +162,10 @@
 
 button.btn,
 input[type="submit"].btn {
+
+  // Firefox 3.6 only I believe
   &::-moz-focus-inner {
-  padding: 0;
+    padding: 0;
     border: 0;
   }
 
diff --git a/less/code.less b/less/code.less
index 0cc3db857..e2157d8ab 100644
--- a/less/code.less
+++ b/less/code.less
@@ -11,12 +11,16 @@ pre {
   color: @grayDark;
   .border-radius(3px);
 }
+
+// Inline code
 code {
   padding: 3px 4px;
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
+
+// Blocks of code
 pre {
   display: block;
   padding: (@baseLineHeight - 1) / 2;
@@ -30,6 +34,7 @@ pre {
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
+  word-wrap: break-word;
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
@@ -39,6 +44,14 @@ pre {
   // Account for some code outputs that place code tags in pre tags
   code {
     padding: 0;
+    color: inherit;
     background-color: transparent;
+    border: 0;
   }
 }
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 83f535ae8..1ec06b04a 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -46,7 +46,6 @@
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
-  max-width: 220px;
   _width: 160px;
   padding: 4px 0;
   margin: 0; // override default ul
@@ -93,7 +92,7 @@
     padding: 3px 15px;
     clear: both;
     font-weight: normal;
-    line-height: 18px;
+    line-height: @baseLineHeight;
     color: @gray;
     white-space: nowrap;
   }
diff --git a/less/forms.less b/less/forms.less
index 9c9a9b8a9..0a5fa2b86 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -28,6 +28,12 @@ legend {
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
+
+  // Small
+  small {
+    font-size: @baseLineHeight * .75;
+    color: @grayLight;
+  }
 }
 
 // Set font for forms
@@ -36,7 +42,13 @@ input,
 button,
 select,
 textarea {
-  #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+  #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
 }
 
 // Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: 0;
   cursor: pointer;
   .border-radius(0);
+  border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+  border: 0;
 }
 
 // Reset the file input to browser defaults
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
+// Reset line-height for IE
+input[type="file"] {
+  line-height: 18px \9;
+}
+
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
 }
 
 // Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
+  padding-top: 5px;
   margin-bottom: 0;
   vertical-align: middle;
 }
@@ -175,11 +198,6 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
   margin-left: 10px; // space out consecutive inline controls
 }
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
-  padding-top: 0;
-}
 
 
 
@@ -198,9 +216,10 @@ textarea:focus {
   @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-8 */
+  outline: thin dotted \9; /* IE6-9 */
 }
 input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
   .box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label,
-  .help-block,
-  .help-inline {
-    color: @textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: @textColor;
-    border-color: @borderColor;
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      .box-shadow(0 0 6px lighten(@borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: @textColor;
-    background-color: @backgroundColor;
-    border-color: @textColor;
-  }
-}
 // Warning
 .control-group.warning {
   .formFieldState(@warningText, @warningText, @warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
 // ---------
 
 .help-block {
+  display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 0;
   color: @grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
     .border-radius(3px 0 0 3px);
   }
   .uneditable-input {
+    border-left-color: #eee;
     border-right-color: #ccc;    
   }
   .add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
     display: inline-block;
     margin-bottom: 0;
   }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
 }
 .form-search label,
 .form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
   margin-bottom: @baseLineHeight / 2;
 }
 
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: @baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
+
 // Horizontal-specific styles
 // --------------------------
 
 .form-horizontal {
-  // Legend collapses margin, so we're relegated to padding
-  legend + .control-group {
-    margin-top: @baseLineHeight;
-    -webkit-margin-top-collapse: separate;
-  }
   // Increase spacing between groups
   .control-group {
     margin-bottom: @baseLineHeight;
     .clearfix();
   }
   // Float the labels left
-  .control-group > label {
+  .control-label {
     float: left;
     width: 140px;
     padding-top: 5px;
diff --git a/less/labels.less b/less/labels.less
index c0f427750..268435a0b 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -1,16 +1,32 @@
 // LABELS
 // ------
 
+// Base
 .label {
-  padding: 1px 3px 2px;
-  font-size: @baseFontSize * .75;
+  padding: 2px 4px 3px;
+  font-size: @baseFontSize * .85;
   font-weight: bold;
   color: @white;
-  text-transform: uppercase;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
   .border-radius(3px);
 }
-.label-important { background-color: @errorText; }
-.label-warning   { background-color: @orange; }
-.label-success   { background-color: @successText; }
-.label-info      { background-color: @infoText; }
+
+// 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%); }
diff --git a/less/mixins.less b/less/mixins.less
index 545ccb9ba..3cf1a3704 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -9,7 +9,7 @@
 // Clearfix
 // --------
 // For clearing floats like a boss h5bp.com/q
-.clearfix() {
+.clearfix {
   *zoom: 1;
   &:before,
   &:after {
@@ -25,7 +25,7 @@
 // ------------------
 .tab-focus() {
   // Default
-  outline: thin dotted;
+  outline: thin dotted #333;
   // Webkit
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
@@ -89,6 +89,15 @@
   }
 }
 
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 
 
 // FONTS
@@ -199,13 +208,13 @@
   // 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) {      
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
     // Row surrounds the columns
     .row-fluid {
       width: 100%;
@@ -219,24 +228,22 @@
         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); }
+      > .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 {
@@ -263,6 +270,52 @@
   }
 }
 
+// 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)
+// --------------------------------------------------
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline {
+    color: @textColor;
+  }
+  // Style inputs accordingly
+  input,
+  select,
+  textarea {
+    color: @textColor;
+    border-color: @borderColor;
+    &:focus {
+      border-color: darken(@borderColor, 10%);
+      .box-shadow(0 0 6px lighten(@borderColor, 20%));
+    }
+  }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: @textColor;
+    background-color: @backgroundColor;
+    border-color: @textColor;
+  }
+}
+
 
 
 // CSS3 PROPERTIES
@@ -314,19 +367,19 @@
           transform: translate(@x, @y);
 }
 .skew(@x: 0, @y: 0) {
-  -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) {
   -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) {
+  -webkit-transform: translate(@x, @y, @z);
+     -moz-transform: translate(@x, @y, @z);
+      -ms-transform: translate(@x, @y, @z);
+       -o-transform: translate(@x, @y, @z);
+          transform: translate(@x, @y, @z);
+}
 
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
diff --git a/less/modals.less b/less/modals.less
index aa14675ed..d1e06dc26 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -1,6 +1,7 @@
 // MODALS
 // ------
 
+// Recalculate z-index where appropriate
 .modal-open {
   .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
   .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@@ -8,6 +9,7 @@
   .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
 }
 
+// Background
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -25,6 +27,7 @@
   .opacity(80);
 }
 
+// Base modal
 .modal {
   position: fixed;
   top: 50%;
@@ -53,9 +56,17 @@
   // Close icon
   .close { margin-top: 2px; }
 }
+
+// Body (where all modal content resises)
 .modal-body {
   padding: 15px;
 }
+// Remove bottom margin if need be
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
diff --git a/less/navbar.less b/less/navbar.less
index 93c0400b6..16553c1ff 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -81,7 +81,7 @@
     margin-top: 5px; // make buttons vertically centered in navbar
   }
   .btn-group .btn {
-    margin-top: 0;
+    margin-top: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -104,6 +104,14 @@
   input[type="radio"] {
     margin-top: 3px;
   }
+  .input-append,
+  .input-prepend {
+    margin-top: 6px;
+    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
+    input {
+      margin-top: 0; // remove the margin on top since it's on the parent
+    }
+  }
 }
 
 // Navbar search
@@ -133,7 +141,7 @@
       background-color: @grayLight;
       background-color: rgba(255,255,255,.5);
     }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
@@ -194,7 +202,7 @@
 }
 // Hover
 .navbar .nav > li > a:hover {
-  background-color: transparent;
+  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
   color: @navbarLinkColorHover;
   text-decoration: none;
 }
@@ -205,7 +213,6 @@
   color: @navbarLinkColorHover;
   text-decoration: none;
   background-color: @navbarBackground;
-  background-color: rgba(0,0,0,.5);
 }
 
 // Dividers (basically a vertical hr)
diff --git a/less/navs.less b/less/navs.less
index a29cb712b..06219fa62 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,6 +21,21 @@
   background-color: @grayLighter;
 }
 
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 // NAV LIST
@@ -33,21 +48,12 @@
 }
 .nav-list > li > a,
 .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left:  -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
-  margin-top: 9px;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
 .nav-list .active > a,
 .nav-list .active > a:hover {
@@ -249,6 +255,9 @@
 .tabbable {
   .clearfix();
 }
+.tab-content {
+  overflow: hidden; // prevent content from running below tabs
+}
 
 // Remove border on bottom, left, right
 .tabs-below .nav-tabs,
diff --git a/less/reset.less b/less/reset.less
index 28d8eb60c..1115f59d8 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -108,7 +108,7 @@ input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   cursor: pointer; // Cursors on all buttons applied consistently
-  -webkit-appearance: button; // Style clicable inputs in iOS
+  -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
   -webkit-appearance: textfield;
diff --git a/less/responsive.less b/less/responsive.less
index 7d494a357..5b85776e9 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -56,7 +56,7 @@
   .uneditable-input {
     display: block;
     width: 100%;
-    height: 28px; /* Make inputs at least the height of their button counterpart */
+    min-height: 28px; /* Make inputs at least the height of their button counterpart */
     /* Makes inputs behave like true block-level elements */
     -webkit-box-sizing: border-box; /* Older Webkit */
        -moz-box-sizing: border-box; /* Older FF */
@@ -123,7 +123,7 @@
 // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
 // --------------------------------------------------
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers
@@ -154,7 +154,7 @@
 // PORTRAIT TABLET TO DEFAULT DESKTOP
 // ----------------------------------
 
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
   #gridSystem > .generate(12, 42px, 20px);
@@ -171,7 +171,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 980px) {
+@media (max-width: 979px) {
 
   // UNFIX THE TOPBAR
   // ----------------
@@ -215,6 +215,10 @@
   .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 {
diff --git a/less/sprites.less b/less/sprites.less
index a56216c71..a7741661e 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -9,24 +9,26 @@
 // 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="i icon-inbox"></i>.
+// <i class="icon-inbox"></i>.
 
 // For the white version of the  icons, just add the .icon-white class:
-// <i class="i icon-inbox icon-white"></i>
+// <i class="icon-inbox icon-white"></i>
 
-[class^="icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   display: inline-block;
   width: 14px;
   height: 14px;
+  line-height: 14px;
   vertical-align: text-top;
-  background-image: url(../img/glyphicons-halflings.png);
+  background-image: url(@iconSpritePath);
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
   .ie7-restore-right-whitespace();
 }
 .icon-white {
-  background-image: url(../img/glyphicons-halflings-white.png);
+  background-image: url(@iconWhiteSpritePath);
 }
 
 .icon-glass              { background-position: 0      0; }
diff --git a/less/tables.less b/less/tables.less
index c069ed588..3a4066d71 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -25,14 +25,15 @@ table {
     padding: 8px;
     line-height: @baseLineHeight;
     text-align: left;
+    vertical-align: top;
     border-top: 1px solid #ddd;
   }
   th {
     font-weight: bold;
-    vertical-align: bottom;
   }
-  td {
-    vertical-align: top;
+  // Bottom align for column headings
+  thead th {
+    vertical-align: bottom;
   }
   // Remove top border from thead by default
   thead:first-child tr th,
@@ -113,6 +114,16 @@ table {
 }
 
 
+// HOVER EFFECT
+// ------------
+// Placed here since it has to come after the potential zebra striping
+.table {
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: #f5f5f5;
+  }
+}
+
 
 // TABLE CELL SIZING
 // -----------------
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 541fbd6a7..3a12d4e50 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -2,13 +2,13 @@
 // ----------
 
 .thumbnails {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   list-style: none;
   .clearfix();
 }
 .thumbnails > li {
   float: left;
-  margin: 0 0 @baseLineHeight 20px;
+  margin: 0 0 @baseLineHeight @gridGutterWidth;
 }
 .thumbnail {
   display: block;
diff --git a/less/type.less b/less/type.less
index 7841bb090..6ba83bc3a 100644
--- a/less/type.less
+++ b/less/type.less
@@ -110,7 +110,8 @@ ol {
 li {
   line-height: @baseLineHeight;
 }
-ul.unstyled {
+ul.unstyled,
+ol.unstyled {
   margin-left: 0;
   list-style: none;
 }
@@ -137,7 +138,7 @@ dd {
 hr {
   margin: @baseLineHeight 0;
   border: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid @hrBorder;
   border-bottom: 1px solid @white;
 }
 
diff --git a/less/variables.less b/less/variables.less
index f01c232e4..3d448ab21 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -47,20 +47,28 @@
 // Z-index master list
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-@zindexDropdown:        1000;
-@zindexPopover:         1010;
-@zindexTooltip:         1020;
-@zindexFixedNavbar:     1030;
-@zindexModalBackdrop:   1040;
-@zindexModal:           1050;
+@zindexDropdown:          1000;
+@zindexPopover:           1010;
+@zindexTooltip:           1020;
+@zindexFixedNavbar:       1030;
+@zindexModalBackdrop:     1040;
+@zindexModal:             1050;
+
+// Sprite icons path
+@iconSpritePath:          "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
 
 // Input placeholder text color
-@placeholderText:       @grayLight;
+@placeholderText:         @grayLight;
+
+// Hr border color
+@hrBorder:                @grayLighter;
 
 // Navbar
 @navbarHeight:                    40px;
 @navbarBackground:                @grayDarker;
 @navbarBackgroundHighlight:       @grayDark;
+@navbarLinkBackgroundHover:       transparent;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;