diff --git a/lib/_accordion.scss b/lib/_accordion.scss
index 311fa8506916..b90fff078357 100644
--- a/lib/_accordion.scss
+++ b/lib/_accordion.scss
@@ -1,6 +1,9 @@
 // ACCORDION
 // ---------
 
+// Updated for SASS:
+//  - replace @ with $
+//  - replace .border-radius with @include border-radius
 
 // Parent container
 .accordion {
@@ -21,6 +24,11 @@
   padding: 8px 15px;
 }
 
+// General toggle styles
+.accordion-toggle {
+  cursor: pointer;
+}
+
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
   padding: 9px 15px;
diff --git a/lib/_alerts.scss b/lib/_alerts.scss
index 236d42619c02..ad030fe7f1c7 100644
--- a/lib/_alerts.scss
+++ b/lib/_alerts.scss
@@ -1,6 +1,10 @@
 // ALERT STYLES
 // ------------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - replace .border-radius with $include border-radius
+
 // Base alert styles
 .alert {
   padding: 8px 35px 8px 14px;
@@ -28,7 +32,7 @@
 
 .alert-success {
   background-color: $successBackground;
-  border-color: $successBorder;  
+  border-color: $successBorder;
   color: $successText;
 }
 .alert-danger,
diff --git a/lib/_badges.scss b/lib/_badges.scss
deleted file mode 100644
index a86ed7cbcbaa..000000000000
--- a/lib/_badges.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// BADGES
-// ------
-
-// Base
-.badge {
-  padding: 1px 9px 2px;
-  font-size: $baseFontSize * .925;
-  font-weight: bold;
-  white-space: nowrap;
-  color: $white;
-  background-color: $grayLight;
-  @include border-radius(9px);
-}
-
-// Hover state
-.badge:hover {
-  color: $white;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Colors
-.badge-important        { background-color: $errorText; }
-.badge-important:hover  { background-color: darken($errorText, 10%); }
-
-.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%); }
diff --git a/lib/_breadcrumbs.scss b/lib/_breadcrumbs.scss
index 1c39538afac0..1d7f862e9248 100644
--- a/lib/_breadcrumbs.scss
+++ b/lib/_breadcrumbs.scss
@@ -1,6 +1,11 @@
 // BREADCRUMBS
 // -----------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+//  - replace #gradient > .vertical with @include gradient-vertical
+
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 $baseLineHeight;
diff --git a/lib/_button-groups.scss b/lib/_button-groups.scss
index 8427fc3749d6..a4a8cfee5cb5 100644
--- a/lib/_button-groups.scss
+++ b/lib/_button-groups.scss
@@ -1,6 +1,10 @@
 // BUTTON GROUPS
 // -------------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - update mixin definitions
+//  - pull complex shadow definitions into variables
 
 // Make the div behave like a button
 .btn-group {
@@ -25,14 +29,14 @@
 }
 
 // Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
+.btn-group > .btn {
   position: relative;
   float: left;
   margin-left: -1px;
   @include border-radius(0);
 }
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group .btn:first-child {
+.btn-group > .btn:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 4px;
          -moz-border-radius-topleft: 4px;
@@ -41,8 +45,9 @@
       -moz-border-radius-bottomleft: 4px;
           border-bottom-left-radius: 4px;
 }
-.btn-group .btn:last-child,
-.btn-group .dropdown-toggle {
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
      -webkit-border-top-right-radius: 4px;
          -moz-border-radius-topright: 4px;
              border-top-right-radius: 4px;
@@ -51,7 +56,7 @@
           border-bottom-right-radius: 4px;
 }
 // Reset corners for large buttons
-.btn-group .btn.large:first-child {
+.btn-group > .btn.large:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 6px;
          -moz-border-radius-topleft: 6px;
@@ -60,8 +65,8 @@
       -moz-border-radius-bottomleft: 6px;
           border-bottom-left-radius: 6px;
 }
-.btn-group .btn.large:last-child,
-.btn-group .large.dropdown-toggle {
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
      -webkit-border-top-right-radius: 6px;
          -moz-border-radius-topright: 6px;
              border-top-right-radius: 6px;
@@ -71,10 +76,10 @@
 }
 
 // On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active,
-.btn-group .btn.active {
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
   z-index: 2;
 }
 
@@ -90,48 +95,62 @@
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group .dropdown-toggle {
+.btn-group > .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
   $shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   @include box-shadow($shadow);
-  *padding-top: 3px;
-  *padding-bottom: 3px;
+  *padding-top: 4px;
+  *padding-bottom: 4px;
 }
-.btn-group .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini.dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
-  *padding-top: 1px;
-  *padding-bottom: 1px;
 }
-.btn-group .btn-small.dropdown-toggle {
+.btn-group > .btn-small.dropdown-toggle {
   *padding-top: 4px;
   *padding-bottom: 4px;
 }
-.btn-group .btn-large.dropdown-toggle {
+.btn-group > .btn-large.dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
 
 .btn-group.open {
-  // IE7's z-index only goes to the nearest positioned ancestor, which would
-  // make the menu appear below buttons that appeared later on the page
-  *z-index: $zindexDropdown;
-
-  // Reposition menu on open and round all corners
-  .dropdown-menu {
-    display: block;
-    margin-top: 1px;
-    @include border-radius(5px);
-  }
 
+  // The clickable button for toggling the menu
+  // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+    $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
     @include box-shadow($shadow);
   }
+
+  // Keep the hover's background when dropdown is open
+  .btn.dropdown-toggle {
+    background-color: $btnBackgroundHighlight;
+  }
+  .btn-primary.dropdown-toggle {
+    background-color: $btnPrimaryBackgroundHighlight;
+  }
+  .btn-warning.dropdown-toggle {
+    background-color: $btnWarningBackgroundHighlight;
+  }
+  .btn-danger.dropdown-toggle {
+    background-color: $btnDangerBackgroundHighlight;
+  }
+  .btn-success.dropdown-toggle {
+    background-color: $btnSuccessBackgroundHighlight;
+  }
+  .btn-info.dropdown-toggle {
+    background-color: $btnInfoBackgroundHighlight;
+  }
+  .btn-inverse.dropdown-toggle {
+    background-color: $btnInverseBackgroundHighlight;
+  }
 }
 
+
 // Reposition the caret
 .btn .caret {
   margin-top: 7px;
@@ -150,10 +169,16 @@
 }
 .btn-large .caret {
   margin-top: 6px;
-  border-left:  5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top:   5px solid $black;
+  border-left-width:  5px;
+  border-right-width: 5px;
+  border-top-width:   5px;
 }
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+  border-bottom: 5px solid $black;
+  border-top: 0;
+}
+
 
 
 // Account for other colors
@@ -169,3 +194,4 @@
     @include opacity(75);
   }
 }
+
diff --git a/lib/_buttons.scss b/lib/_buttons.scss
index f6f3f0c5e6e5..c16dfcdf29e4 100644
--- a/lib/_buttons.scss
+++ b/lib/_buttons.scss
@@ -1,6 +1,10 @@
 // BUTTON STYLES
 // -------------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - update mixin definitions
+//  - pull complex shadow definitions into variables
 
 // Base styles
 // --------------------------------------------------
@@ -13,20 +17,20 @@
   margin-bottom: 0; // For input.btn
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
+  *line-height: 20px;
   color: $grayDark;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   vertical-align: middle;
+  cursor: pointer;
   @include buttonBackground($btnBackground, $btnBackgroundHighlight);
   border: 1px solid $btnBorder;
+  *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken($btnBorder, 10%);
   @include border-radius(4px);
+  @include ie7-restore-left-whitespace(); // Give IE7 some love
   $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   @include box-shadow($shadow);
-  cursor: pointer;
-
-  // Give IE7 some love
-  @include ie7-restore-left-whitespace();
 }
 
 // Hover state
@@ -34,6 +38,7 @@
   color: $grayDark;
   text-decoration: none;
   background-color: darken($white, 10%);
+  *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
   background-position: 0 -15px;
 
   // transition is only when going to hover, otherwise the background
@@ -49,20 +54,20 @@
 // Active state
 .btn.active,
 .btn:active {
+  background-color: darken($white, 10%);
+  background-color: darken($white, 15%) e("\9");
   background-image: none;
+  outline: 0;
   $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
   @include box-shadow($shadow);
-  background-color: darken($white, 10%);
-  background-color: darken($white, 15%) #{"\9"};
-  outline: 0;
 }
 
 // Disabled state
 .btn.disabled,
 .btn[disabled] {
   cursor: default;
-  background-image: none;
   background-color: darken($white, 10%);
+  background-image: none;
   @include opacity(65);
   @include box-shadow(none);
 }
@@ -117,8 +122,8 @@
 .btn-info:hover,
 .btn-inverse,
 .btn-inverse:hover {
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: $white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
@@ -132,6 +137,11 @@
 
 // Set the backgrounds
 // -------------------------
+.btn {
+  // reset here as of 2.0.3 due to Recess property order
+  border-color: #ccc;
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+}
 .btn-primary {
   @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
 }
diff --git a/lib/_carousel.scss b/lib/_carousel.scss
index ffba3d0034f6..7447c9e51bdb 100644
--- a/lib/_carousel.scss
+++ b/lib/_carousel.scss
@@ -1,6 +1,10 @@
 // CAROUSEL
 // --------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
 .carousel {
   position: relative;
   margin-bottom: $baseLineHeight;
diff --git a/lib/_close.scss b/lib/_close.scss
index 5d318360d471..60a86d16d76b 100644
--- a/lib/_close.scss
+++ b/lib/_close.scss
@@ -1,6 +1,10 @@
 // CLOSE ICONS
 // -----------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
 .close {
   float: right;
   font-size: 20px;
@@ -12,7 +16,18 @@
   &:hover {
     color: $black;
     text-decoration: none;
-    @include opacity(40);
     cursor: pointer;
+    @include opacity(40);
   }
 }
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
\ No newline at end of file
diff --git a/lib/_code.scss b/lib/_code.scss
index 55165c5ad7a7..cf07981669ed 100644
--- a/lib/_code.scss
+++ b/lib/_code.scss
@@ -1,7 +1,12 @@
-// Code.scss
+// Code.less
 // Code typography styles for the <code> and <pre> elements
 // --------------------------------------------------------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - update mixin definitions
+//  - replace font definition with mixin
+
 // Inline and block code styles
 code,
 pre {
@@ -27,14 +32,14 @@ pre {
   margin: 0 0 $baseLineHeight / 2;
   font-size: $baseFontSize * .925; // 13px to 12px
   line-height: $baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
   background-color: #f5f5f5;
   border: 1px solid #ccc; // fallback for IE7-8
   border: 1px solid rgba(0,0,0,.15);
   @include border-radius(4px);
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-  word-wrap: break-word;
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
@@ -54,4 +59,4 @@ pre {
 .pre-scrollable {
   max-height: 340px;
   overflow-y: scroll;
-}
+}
\ No newline at end of file
diff --git a/lib/_component-animations.scss b/lib/_component-animations.scss
index 7e53ed020138..8a3e1aafdc6c 100644
--- a/lib/_component-animations.scss
+++ b/lib/_component-animations.scss
@@ -1,20 +1,23 @@
 // COMPONENT ANIMATIONS
 // --------------------
 
+// Updates for SASS:
+//  - update mixin definitions
+
 .fade {
+  @include opacity(0);
   @include transition(opacity .15s linear);
-  opacity: 0;
   &.in {
-    opacity: 1;
+    @include opacity(100);
   }
 }
 
 .collapse {
-  @include transition(height .35s ease);
-  position:relative;
-  overflow:hidden;
+  position: relative;
   height: 0;
+  overflow: hidden;
+  @include transition(height .35s ease);
   &.in {
     height: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/lib/_dropdowns.scss b/lib/_dropdowns.scss
index 6c9f7deb34f2..a20395b560be 100644
--- a/lib/_dropdowns.scss
+++ b/lib/_dropdowns.scss
@@ -1,7 +1,12 @@
 // DROPDOWN MENUS
 // --------------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
 .dropdown {
   position: relative;
 }
@@ -21,11 +26,11 @@
   width: 0;
   height: 0;
   vertical-align: top;
-  border-left:  4px solid transparent;
-  border-right: 4px solid transparent;
   border-top:   4px solid $black;
-  @include opacity(30);
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
   content: "";
+  @include opacity(30);
 }
 
 // Place the caret
@@ -34,7 +39,7 @@
   margin-left: 2px;
 }
 .dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
   @include opacity(100);
 }
 
@@ -45,24 +50,22 @@
   top: 100%;
   left: 0;
   z-index: $zindexDropdown;
-  float: left;
   display: none; // none by default, but block on "open" of the menu
+  float: left;
   min-width: 160px;
   padding: 4px 0;
-  margin: 0; // override default ul
+  margin: 1px 0 0; // override default ul
   list-style: none;
   background-color: $dropdownBackground;
-  border-color: #ccc;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 1px;
-  @include border-radius(0 0 5px 5px);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  @include border-radius(5px);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
 
   // Aligns the dropdown menu to right
   &.pull-right {
@@ -99,25 +102,21 @@
 
 // Open state for the dropdown
 // ---------------------------
-.dropdown.open {
+.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
   // make the menu appear below buttons that appeared later on the page
   *z-index: $zindexDropdown;
 
-  .dropdown-toggle {
-    color: $white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
   .dropdown-menu {
     display: block;
   }
 }
 
 // Right aligned dropdowns
+// ---------------------------
 .pull-right .dropdown-menu {
-  left: auto;
   right: 0;
+  left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
diff --git a/lib/_forms.scss b/lib/_forms.scss
index 2338d7c46cd9..44e1bfa6dcd8 100644
--- a/lib/_forms.scss
+++ b/lib/_forms.scss
@@ -1,7 +1,11 @@
-// Forms.scss
+// Forms.less
 // Base styles for various input types, form layouts, and states
 // -------------------------------------------------------------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+//  - use grid generator mixin
 
 // GENERAL STYLES
 // --------------
@@ -42,7 +46,7 @@ input,
 button,
 select,
 textarea {
-  @include font-shorthand(); // Set size, weight, line-height here
+  @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
 }
 input,
 button,
@@ -71,8 +75,9 @@ select,
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   color: $gray;
+  background-color: $inputBackground;
   border: 1px solid $inputBorder;
-  @include border-radius(3px);
+  @include border-radius($inputBorderRadius);
 }
 .uneditable-textarea {
   width: auto;
@@ -97,8 +102,9 @@ input[type="radio"] {
   *margin-top: 0; /* IE7 */
   line-height: normal;
   cursor: pointer;
-  @include border-radius(0);
+  background-color: transparent;
   border: 0 \9; /* IE9 and down */
+  @include border-radius(0);
 }
 input[type="image"] {
   border: 0;
@@ -109,9 +115,9 @@ input[type="file"] {
   width: auto;
   padding: initial;
   line-height: initial;
-  border: initial;
   background-color: $inputBackground;
   background-color: initial;
+  border: initial;
   @include box-shadow(none);
 }
 
@@ -171,6 +177,7 @@ input[type="hidden"] {
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
+  min-height: 18px; // clear the floating input if there is no label text
   padding-left: 18px;
 }
 .radio input[type="radio"],
@@ -213,17 +220,17 @@ textarea {
 input:focus,
 textarea:focus {
   border-color: rgba(82,168,236,.8);
-  $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  @include box-shadow($shadow);
   outline: 0;
   outline: thin dotted \9; /* IE6-9 */
+  $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+  @include box-shadow($shadow);
 }
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
-  @include box-shadow(none); // override for file inputs
   @include tab-focus();
+  @include box-shadow(none); // override for file inputs
 }
 
 
@@ -243,7 +250,12 @@ select:focus {
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input {
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
   float: none;
   margin-left: 0;
 }
@@ -253,7 +265,7 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-@include grid-input-generate($gridColumnWidth, $gridGutterWidth);
+@include grid-input($gridColumnWidth, $gridGutterWidth);
 
 
 
@@ -268,9 +280,16 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
+  cursor: not-allowed;
   background-color: $inputDisabledBackground;
   border-color: #ddd;
-  cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
 }
 
 
@@ -314,18 +333,19 @@ select:focus:required:invalid {
   padding: ($baseLineHeight - 1) 20px $baseLineHeight;
   margin-top: $baseLineHeight;
   margin-bottom: $baseLineHeight;
-  background-color: $grayLighter;
+  background-color: $formActionsBackground;
   border-top: 1px solid #ddd;
   @include clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
 
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  display: block;
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap;
+  cursor: not-allowed;
   background-color: $inputBackground;
   border-color: #eee;
   @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -365,10 +385,13 @@ select:focus:required:invalid {
   input,
   select,
   .uneditable-input {
+    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
-    @include border-radius(0 3px 3px 0);
+    vertical-align: middle;
+    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    // Make input on top when focused so blue border and shadow always show
     &:focus {
-      position: relative;
       z-index: 2;
     }
   }
@@ -378,8 +401,8 @@ select:focus:required:invalid {
   .add-on {
     display: inline-block;
     width: auto;
-    min-width: 16px;
     height: $baseLineHeight;
+    min-width: 16px;
     padding: 4px 5px;
     font-weight: normal;
     line-height: $baseLineHeight;
@@ -391,7 +414,8 @@ select:focus:required:invalid {
   }
   .add-on,
   .btn {
-    @include border-radius(3px 0 0 3px);
+    margin-left: -1px;
+    @include border-radius(0);
   }
   .active {
     background-color: lighten($green, 30);
@@ -403,21 +427,24 @@ select:focus:required:invalid {
   .btn {
     margin-right: -1px;
   }
+  .add-on:first-child,
+  .btn:first-child {
+    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+  }
 }
 .input-append {
   input,
   select,
   .uneditable-input {
-    @include border-radius(3px 0 0 3px);
+    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
   }
   .uneditable-input {
-    border-left-color: #eee;
     border-right-color: #ccc;
+    border-left-color: #eee;
   }
-  .add-on,
-  .btn {
-    margin-left: -1px;
-    @include border-radius(0 3px 3px 0);
+  .add-on:last-child,
+  .btn:last-child {
+    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
 }
 // Remove all border-radius for inputs with both prepend and append
@@ -430,12 +457,12 @@ select:focus:required:invalid {
   .add-on:first-child,
   .btn:first-child {
     margin-right: -1px;
-    @include border-radius(3px 0 0 3px);
+    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
   }
   .add-on:last-child,
   .btn:last-child {
     margin-left: -1px;
-    @include border-radius(0 3px 3px 0);
+    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
 }
 
@@ -445,8 +472,10 @@ select:focus:required:invalid {
 // -----------
 
 .search-query {
-  padding-left: 14px;
   padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
   margin-bottom: 0; // remove the default margin on all inputs
   @include border-radius(14px);
 }
@@ -470,6 +499,7 @@ select:focus:required:invalid {
   .input-prepend,
   .input-append {
     display: inline-block;
+    @include ie7-inline-block();
     margin-bottom: 0;
   }
   // Re-hide hidden elements due to specifity
@@ -503,8 +533,8 @@ select:focus:required:invalid {
 .form-inline .radio input[type="radio"],
 .form-inline .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: 0;
   margin-right: 3px;
+  margin-left: 0;
 }
 
 
@@ -537,11 +567,15 @@ legend + .control-group {
   }
   // Move over all input controls and content
   .controls {
-    margin-left: 160px;
-    /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+    // don't inherit the margin of the parent, in this case .controls
     *display: inline-block;
-    *margin-left: 0;
     *padding-left: 20px;
+    margin-left: 160px;
+    *margin-left: 0;
+    &:first-child {
+      *padding-left: 160px;
+    }
   }
   // Remove bottom margin on block level help text since that's accounted for on .control-group
   .help-block {
diff --git a/lib/_grid.scss b/lib/_grid.scss
index 468907ad5b55..fd17d27736d6 100644
--- a/lib/_grid.scss
+++ b/lib/_grid.scss
@@ -1,5 +1,10 @@
+// Updates for SASS:
+// - replace @ with $
+// - use grid-core and grid-fluid mixins instead of #grid > .core and
+//   #grid > .fluid
+
 // Fixed (940px)
-@include grid-core-generate($gridColumnWidth, $gridGutterWidth);
+@include grid-core($gridColumnWidth, $gridGutterWidth);
 
 // Fluid (940px)
-@include grid-fluid-generate($fluidGridColumnWidth, $fluidGridGutterWidth);
+@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
\ No newline at end of file
diff --git a/lib/_hero-unit.scss b/lib/_hero-unit.scss
index 2468ebf1f669..bf6e8364b3d9 100644
--- a/lib/_hero-unit.scss
+++ b/lib/_hero-unit.scss
@@ -1,6 +1,10 @@
 // HERO UNIT
 // ---------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
 .hero-unit {
   padding: 60px;
   margin-bottom: 30px;
diff --git a/lib/_labels-badges.scss b/lib/_labels-badges.scss
new file mode 100644
index 000000000000..d9f28e2c4097
--- /dev/null
+++ b/lib/_labels-badges.scss
@@ -0,0 +1,60 @@
+// LABELS & BADGES
+// ---------------
+
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+//  - manually set up .label- and .badge- classes
+
+// Base classes
+.label,
+.badge {
+  font-size: $baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: $white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: $grayLight;
+}
+// Set unique padding and border-radii
+.label {
+  padding: 1px 4px 2px;
+  @include border-radius(3px);
+}
+.badge {
+  padding: 1px 9px 2px;
+  @include border-radius(9px);
+}
+
+// Hover state, but only for links
+a {
+  &.label:hover,
+  &.badge:hover {
+    color: $white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualify with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  .label-important, .badge-important { background-color: $errorText; }
+  .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
+  // Warnings (orange)
+  .label-warning, .badge-warning { background-color: $orange; }
+  .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
+  // Success (green)
+  .label-success, .badge-success { background-color: $successText; }
+  .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
+  // Info (turquoise)
+  .label-info, .badge-info { background-color: $infoText; }
+  .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
+  // Inverse (black)
+  .label-inverse, .badge-inverse { background-color: $grayDark; }
+  .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
+}
diff --git a/lib/_labels.scss b/lib/_labels.scss
deleted file mode 100644
index 2d1f57b873b3..000000000000
--- a/lib/_labels.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label {
-  padding: 1px 4px 2px;
-  font-size: $baseFontSize * .846;
-  font-weight: bold;
-  line-height: 13px; // ensure proper line-height if floated
-  color: $white;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: $grayLight;
-  @include border-radius(3px);
-}
-
-// Hover state
-.label:hover {
-  color: $white;
-  text-decoration: none;
-}
-
-// Colors
-.label-important        { background-color: $errorText; }
-.label-important:hover  { background-color: darken($errorText, 10%); }
-
-.label-warning          { background-color: $orange; }
-.label-warning:hover    { background-color: darken($orange, 10%); }
-
-.label-success          { background-color: $successText; }
-.label-success:hover    { background-color: darken($successText, 10%); }
-
-.label-info             { background-color: $infoText; }
-.label-info:hover       { background-color: darken($infoText, 10%); }
-
-.label-inverse             { background-color: $grayDark; }
-.label-inverse:hover       { background-color: darken($grayDark, 10%); }
diff --git a/lib/_layouts.scss b/lib/_layouts.scss
index b9bae1d9c75b..9f0c62f38438 100644
--- a/lib/_layouts.scss
+++ b/lib/_layouts.scss
@@ -3,6 +3,9 @@
 // Fixed-width and fluid (with sidebar) layouts
 // --------------------------------------------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
 
 // Container (centered, fixed-width layouts)
 .container {
@@ -11,7 +14,7 @@
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
-  padding-left: $gridGutterWidth;
   padding-right: $gridGutterWidth;
+  padding-left: $gridGutterWidth;
   @include clearfix();
-}
+}
\ No newline at end of file
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
index 7f23f0bdab5e..c06c52a591c6 100644
--- a/lib/_mixins.scss
+++ b/lib/_mixins.scss
@@ -1,7 +1,13 @@
-// Mixins.scss
+// Mixins.less
 // Snippets of reusable CSS to develop faster and keep code readable
 // -----------------------------------------------------------------
 
+// Updates for SASS:
+//  - use @mixin instead of class definitions
+//  - replace @ with $ for variables
+//  - add default of 5px for @size and @square mixins
+//  - add baseFontWeight variable
+//  - replace grid generation loops with for $i from 1 to $gridColumns
 
 // UTILITY MIXINS
 // --------------------------------------------------
@@ -9,7 +15,7 @@
 // Clearfix
 // --------
 // For clearing floats like a boss h5bp.com/q
-@mixin clearfix() {
+@mixin clearfix {
   *zoom: 1;
   &:before,
   &:after {
@@ -98,44 +104,49 @@
   white-space: nowrap;
 }
 
-// New image replacement
+// CSS image replacement
 // -------------------------
-// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
-@mixin hide-text() {
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+@mixin hide-text {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
 }
 
 
 // FONTS
 // --------------------------------------------------
 
-// Font Stacks
 @mixin font-family-serif {
-  font-family: Georgia, "Times New Roman", Times, serif;
+  font-family: $serifFontFamily;
 }
+
 @mixin font-family-sans-serif {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $sansFontFamily;
 }
+
 @mixin font-family-monospace {
-  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-family: $monoFontFamily;
 }
-@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+
+@mixin font-shorthand ($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
   font-size: $size;
   font-weight: $weight;
   line-height: $lineHeight;
 }
-@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-  @include font-family-serif;
+
+@mixin font-serif($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+  @include font-family-serif();
   @include font-shorthand($size, $weight, $lineHeight);
 }
-@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-  @include font-family-sans-serif;
+@mixin font-sans-serif($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+  @include font-family-sans-serif();
   @include font-shorthand($size, $weight, $lineHeight);
 }
-@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-  @include font-family-monospace;
+@mixin font-monospace($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+  @include font-family-monospace();
   @include font-shorthand($size, $weight, $lineHeight);
 }
 
@@ -144,12 +155,11 @@
 // --------------------------------------------------
 
 // Block level inputs
-@mixin input-block-level() {
+@mixin input-block-level {
   display: block;
   width: 100%;
-  min-height: 28px; /* Make inputs at least the height of their button counterpart */
-  /* Makes inputs behave like true block-level elements */
-  @include box-sizing(border-box);
+  min-height: 28px;        // Make inputs at least the height of their button counterpart
+  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
 }
 
 
@@ -224,21 +234,21 @@
        -o-transform: scale($ratio);
           transform: scale($ratio);
 }
-@mixin translate($x: 0, $y: 0) {
+@mixin translate($x, $y) {
   -webkit-transform: translate($x, $y);
      -moz-transform: translate($x, $y);
       -ms-transform: translate($x, $y);
        -o-transform: translate($x, $y);
           transform: translate($x, $y);
 }
-@mixin skew($x: 0, $y: 0) {
+@mixin skew($x, $y) {
   -webkit-transform: skew($x, $y);
      -moz-transform: skew($x, $y);
       -ms-transform: skew($x, $y);
        -o-transform: skew($x, $y);
           transform: skew($x, $y);
 }
-@mixin translate3d($x: 0, $y: 0, $z: 0) {
+@mixin translate3d($x, $y, $z) {
   -webkit-transform: translate($x, $y, $z);
      -moz-transform: translate($x, $y, $z);
       -ms-transform: translate($x, $y, $z);
@@ -246,6 +256,17 @@
           transform: translate($x, $y, $z);
 }
 
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+@mixin backface-visibility($visibility){
+  -webkit-backface-visibility: $visibility;
+     -moz-backface-visibility: $visibility;
+      -ms-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 @mixin background-clip($clip) {
@@ -255,7 +276,7 @@
 }
 
 // Background sizing
-@mixin background-size($size){
+@mixin background-size($size) {
   -webkit-background-size: $size;
      -moz-background-size: $size;
        -o-background-size: $size;
@@ -276,18 +297,19 @@
 @mixin user-select($select) {
   -webkit-user-select: $select;
      -moz-user-select: $select;
+      -ms-user-select: $select;
        -o-user-select: $select;
           user-select: $select;
 }
 
 // Resize anything
-@mixin resizable($direction: both) {
+@mixin resizable($direction) {
   resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Safari fix
 }
 
 // CSS3 Content Columns
-@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
+@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
   -webkit-column-count: $columnCount;
      -moz-column-count: $columnCount;
           column-count: $columnCount;
@@ -297,9 +319,9 @@
 }
 
 // Opacity
-@mixin opacity($opacity: 100) {
+@mixin opacity($opacity) {
   opacity: $opacity / 100;
-   filter: alpha(opacity=$opacity);
+  filter: alpha(opacity=$opacity);
 }
 
 
@@ -309,8 +331,9 @@
 
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 @mixin translucent-background($color: $white, $alpha: 1) {
-    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
 }
+
 @mixin translucent-border($color: $white, $alpha: 1) {
   border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
   @include background-clip(padding-box);
@@ -320,7 +343,7 @@
 @mixin gradientBar($primaryColor, $secondaryColor) {
   @include gradient-vertical($primaryColor, $secondaryColor);
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
 
 // Gradients
@@ -333,7 +356,7 @@
   background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
   background-image: linear-gradient(left, $startColor, $endColor); // Le standard
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
 }
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
   background-color: mix($startColor, $endColor, 60%);
@@ -344,7 +367,7 @@
   background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
   background-image: linear-gradient(top, $startColor, $endColor); // The standard
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
 }
 @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
@@ -364,7 +387,7 @@
   background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
 }
 @mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
   background-color: $outerColor;
@@ -372,8 +395,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
 }
 @mixin gradient-striped($color, $angle: -45deg) {
   background-color: $color;
@@ -384,8 +407,9 @@
   background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 }
+
 // Reset filters for IE
-@mixin reset-filter() {
+@mixin gradient-reset-filter() {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 
@@ -397,19 +421,18 @@
 // Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider() {
-  height: 1px;
-  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid $white;
-
+@mixin nav-divider {
   // IE7 needs a set width since we gave a height. Restricting just
   // to IE7 to keep the 1px left/right space in other browsers.
   // It is unclear where IE is getting the extra space that we need
   // to negative-margin away, but so it goes.
   *width: 100%;
+  height: 1px;
+  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
   *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid $white;
 }
 
 // Button backgrounds
@@ -417,17 +440,19 @@
 @mixin buttonBackground($startColor, $endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   @include gradientBar($startColor, $endColor);
-  @include reset-filter();
+  *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+  @include gradient-reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
     background-color: $endColor;
+    *background-color: darken($endColor, 5%);
   }
 
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
   &:active,
   &.active {
-    background-color: darken($endColor, 10%) #{"\9"};
+    background-color: darken($endColor, 10%) e("\9");
   }
 }
 
@@ -439,7 +464,7 @@
   margin-top: ($navbarHeight - $elementHeight) / 2;
 }
 
-// POPOVER ARROWS
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
 @mixin popoverArrow-top($arrowWidth: 5px, $color: $black) {
@@ -475,14 +500,13 @@
   border-right: $arrowWidth solid $color;
 }
 
-
 // Grid System
 // -----------
 
 // Centered container element
 @mixin container-fixed() {
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
   @include clearfix();
 }
 
@@ -494,28 +518,27 @@
 }
 
 // Make a Grid
-// -------------------------
 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
 @mixin makeRow() {
   margin-left: $gridGutterWidth * -1;
   @include clearfix();
 }
-@mixin makeColumn($columns: 1) {
+@mixin makeColumn($columns: 1, $offset: 0) {
   float: left;
-  margin-left: $gridGutterWidth;
+  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
   width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
 }
 
 // The Grid
-// --------
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+@mixin core-offset($columns) {
+  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
 }
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
-  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
+
+@mixin core-span($columns) {
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
 }
 
-@mixin grid-core-generate($gridColumnWidth, $gridGutterWidth) {
+@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
   .row {
     margin-left: $gridGutterWidth * -1;
     @include clearfix();
@@ -529,64 +552,59 @@
   // Set the container width, and override it for fixed navbars in media queries
   .container,
   .navbar-fixed-top .container,
-  .navbar-fixed-bottom .container {
-    @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)
-  }
+  .navbar-fixed-bottom .container { @include core-span($gridColumns); }
 
+  // generate .spanX and .offsetX
   @for $i from 1 through $gridColumns {
-    .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth) }
-  }
-
-  @for $i from 1 through $gridColumns - 1 {
-    .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth) }
+    .span#{$i} { @include core-span($i); }
+    .offset#{$i} { @include core-offset($i); }
   }
 }
 
-
-// Fluid grid system
-// -----------------
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
+@mixin fluid-span($columns) {
   width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
+  *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
+}
+
+.gridTest {
+  width: 1px;
+  *width: 1px;
 }
-@mixin grid-fluid-generate($fluidGridColumnWidth, $fluidGridGutterWidth) {
+
+@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
   .row-fluid {
     width: 100%;
     @include clearfix();
-    > [class*="span"] {
+    [class*="span"] {
+      @include input-block-level();
       float: left;
       margin-left: $fluidGridGutterWidth;
+      *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
     }
-    > [class*="span"]:first-child {
+    [class*="span"]:first-child {
       margin-left: 0;
     }
 
+    // generate .spanX
     @for $i from 1 through $gridColumns {
-      > .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
+      .span#{$i} { @include fluid-span($i); }
     }
   }
 }
 
-
-// Input grid system
-// -----------------
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
+@mixin input-span($columns) {
   width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
 }
-@mixin grid-input-generate($gridColumnWidth, $gridGutterWidth) {
+
+@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
   input,
   textarea,
   .uneditable-input {
     margin-left: 0; // override margin-left from core grid system
-
-    @for $i from 1 through $gridColumns {
-      &.span#{$i} { @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth); }
-    }
   }
-}
-
 
-// Mixins Output
-// -------------
-.clearfix { @include clearfix(); }
-.hide-text { @include hide-text(); }
-.input-block-level { @include input-block-level(); }
+  // generate .spanX
+  @for $i from 1 through $gridColumns {
+    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include input-span($i); }
+  }
+}
\ No newline at end of file
diff --git a/lib/_modals.scss b/lib/_modals.scss
index 45ada341dfab..c594b7ea0e3b 100644
--- a/lib/_modals.scss
+++ b/lib/_modals.scss
@@ -1,6 +1,11 @@
 // MODALS
 // ------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+//  - pull transition definition into variable
+
 // Recalculate z-index where appropriate
 .modal-open {
   .dropdown-menu {  z-index: $zindexDropdown + $zindexModal; }
@@ -44,8 +49,8 @@
   @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   @include background-clip(padding-box);
   &.fade {
-    $transition: opacity .3s linear, top .3s ease-out;
-    @include transition($transition);
+    @include transition(opacity .3s linear);
+    @include transition(top .3s ease-out);
     top: -25%;
   }
   &.fade.in { top: 50%; }
@@ -57,14 +62,14 @@
   .close { margin-top: 2px; }
 }
 
-// Body (where all modal content resises)
+// Body (where all modal content resides)
 .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;
 }
 
diff --git a/lib/_navbar.scss b/lib/_navbar.scss
index ed1825e2452b..c5cbbb4fc00e 100644
--- a/lib/_navbar.scss
+++ b/lib/_navbar.scss
@@ -1,6 +1,9 @@
 // NAVBAR (FIXED AND STATIC)
 // -------------------------
 
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
 
 // COMMON STYLES
 // -------------
@@ -16,6 +19,7 @@
 
 // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
+  min-height: $navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
   @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
@@ -30,28 +34,6 @@
   width: auto;
 }
 
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
-  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-  @include box-shadow($shadow);
-}
-.btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  @include border-radius(1px);
-  @include box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}
 // Override the default collapsed state
 .nav-collapse.collapse {
   height: auto;
@@ -69,25 +51,34 @@
   .brand {
     float: left;
     display: block;
-    padding: 8px 20px 12px;
+    // Vertically center the text given $navbarHeight
+    $elementHeight: 20px;
+    padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
     margin-left: -20px; // negative indent to left-align the text down the page
     font-size: 20px;
     font-weight: 200;
     line-height: 1;
-    color: $white;
+    color: $navbarBrandColor;
   }
   // Plain text in topbar
   .navbar-text {
     margin-bottom: 0;
     line-height: $navbarHeight;
   }
+  // Janky solution for now to account for links outside the .nav
+  .navbar-link {
+    color: $navbarLinkColor;
+    &:hover {
+      color: $navbarLinkColorHover;
+    }
+  }
   // Buttons in navbar
   .btn,
   .btn-group {
     @include navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
-    margin-top: 0; // then undo the margin here so we don't accidentally double it
+    margin: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -133,7 +124,7 @@
     color: $white;
     background-color: $navbarSearchBackground;
     border: 1px solid $navbarSearchBorder;
-    $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
+    $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
     @include box-shadow($shadow);
     @include transition(none);
 
@@ -182,7 +173,7 @@
 
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
-  @include grid-core-span($gridColumns);
+  @include core-span($gridColumns);
 }
 
 // Fixed to top
@@ -218,12 +209,31 @@
 // Links
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 10px 11px;
+  // Vertically center the text given $navbarHeight
+  $elementHeight: 20px;
+  padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
   line-height: 19px;
   color: $navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
+// Buttons
+.navbar .btn {
+  display: inline-block;
+  padding: 4px 10px 4px;
+  // Vertically center the button given @navbarHeight
+  $elementHeight: 28px;
+  $topMargin: ($navbarHeight - $elementHeight) / 2 - 1;
+  $bottomMargin: ($navbarHeight - $elementHeight) / 2;
+  margin: $topMargin 5px $bottomMargin;
+  line-height: $baseLineHeight;
+}
+.navbar .btn-group {
+  margin: 0;
+  // Vertically center the button given @navbarHeight
+  $elementHeight: 28px;
+  padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
+}
 // Hover
 .navbar .nav > li > a:hover {
   background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -255,6 +265,29 @@
   margin-right: 0;
 }
 
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
+  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
+  @include box-shadow($shadow);
+}
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  @include border-radius(1px);
+  @include box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
 
 
 // Dropdown menus
@@ -262,8 +295,6 @@
 
 // Menu position and menu carets
 .navbar .dropdown-menu {
-  margin-top: 1px;
-  @include border-radius(4px);
   &:before {
     content: '';
     display: inline-block;
@@ -303,31 +334,31 @@
   }
 }
 // Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
   border-top-color: $white;
   border-bottom-color: $white;
 }
-.navbar .nav .active .caret {
+.navbar .nav li.dropdown.active .caret {
   @include opacity(100);
 }
 
 // Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle {
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
   background-color: transparent;
 }
 
 // Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
   color: $white;
 }
 
 // Right aligned menus need alt position
 // TODO: rejigger this at some point to simplify the selectors
-.navbar .nav.pull-right .dropdown-menu,
-.navbar .nav .dropdown-menu.pull-right {
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {
@@ -338,4 +369,4 @@
     left: auto;
     right: 13px;
   }
-}
+}
\ No newline at end of file
diff --git a/lib/_navs.scss b/lib/_navs.scss
index 0a524de0f43d..43f81093aeb4 100644
--- a/lib/_navs.scss
+++ b/lib/_navs.scss
@@ -1,7 +1,9 @@
 // NAVIGATIONS
 // -----------
 
-
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
 
 // BASE CLASS
 // ----------
@@ -21,6 +23,11 @@
   background-color: $grayLighter;
 }
 
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
 // Nav headers (for dropdowns and lists)
 .nav .nav-header {
   display: block;
@@ -98,12 +105,10 @@
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
-
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
 }
-
 // Actual tabs (as links)
 .nav-tabs > li > a {
   padding-top: 8px;
@@ -116,17 +121,16 @@
   }
 }
 // Active state, and it's :hover to override normal :hover
-.nav-tabs > .active {
-  & > a,
-  & > a:hover {
-    color: $gray;
-    background-color: $white;
-    border: 1px solid #ddd;
-    border-bottom-color: transparent;
-    cursor: default;
-  }
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+  color: $gray;
+  background-color: $white;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
 }
 
+
 // PILLS
 // -----
 
@@ -191,14 +195,11 @@
 // DROPDOWNS
 // ---------
 
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  @include border-radius(4px);
+  @include border-radius(4px); // make rounded corners match the pills
 }
 
 // Default dropdown links
@@ -235,14 +236,14 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover {
   color: $white;
   background-color: $grayLight;
   border-color: $grayLight;
 }
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
   border-top-color: $white;
   border-bottom-color: $white;
   @include opacity(100);
@@ -267,14 +268,13 @@
   @include clearfix();
 }
 .tab-content {
-  display: table; // prevent content from running below tabs
-  width: 100%;
+  overflow: auto; // prevent content from running below tabs
 }
 
 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 
@@ -292,22 +292,22 @@
 // BOTTOM
 // ------
 
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
   @include border-radius(0 0 4px 4px);
   &:hover {
     border-bottom-color: transparent;
     border-top-color: #ddd;
   }
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -315,51 +315,51 @@
 // ------------
 
 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
   float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
   min-width: 74px;
   margin-right: 0;
   margin-bottom: 3px;
 }
 
 // Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
   @include border-radius(4px 0 0 4px);
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: $grayLighter #ddd $grayLighter $grayLighter;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: $white;
 }
 
 // Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
   @include border-radius(0 4px 4px 0);
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: $grayLighter $grayLighter $grayLighter #ddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: $white;
 }
diff --git a/lib/_pager.scss b/lib/_pager.scss
index bfeb8cffe21c..435338cf859a 100644
--- a/lib/_pager.scss
+++ b/lib/_pager.scss
@@ -1,6 +1,10 @@
 // PAGER
 // -----
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
 .pager {
   margin-left: 0;
   margin-bottom: $baseLineHeight;
@@ -33,4 +37,4 @@
   color: $grayLight;
   background-color: #fff;
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/lib/_pagination.scss b/lib/_pagination.scss
index f259dd6f37e0..13e5be7e74c0 100644
--- a/lib/_pagination.scss
+++ b/lib/_pagination.scss
@@ -1,6 +1,10 @@
 // PAGINATION
 // ----------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - update mixin definitions
+
 .pagination {
   height: $baseLineHeight * 2;
   margin: $baseLineHeight 0;
diff --git a/lib/_popovers.scss b/lib/_popovers.scss
index a20f2d5a34a1..3c1d76158971 100644
--- a/lib/_popovers.scss
+++ b/lib/_popovers.scss
@@ -1,6 +1,10 @@
 // POPOVERS
 // --------
 
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
+
 .popover {
   position: absolute;
   top: 0;
diff --git a/lib/_progress-bars.scss b/lib/_progress-bars.scss
index 21f3318e620d..d13df9fa9d7b 100644
--- a/lib/_progress-bars.scss
+++ b/lib/_progress-bars.scss
@@ -1,32 +1,41 @@
 // PROGRESS BARS
 // -------------
 
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
 
 // ANIMATIONS
 // ----------
 
 // Webkit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 // Firefox
 @-moz-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 // IE9
 @-ms-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }
 }
 
 // Spec
 @keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 
@@ -68,6 +77,8 @@
 .progress.active .bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
      -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
           animation: progress-bar-stripes 2s linear infinite;
 }
 
diff --git a/lib/_reset.scss b/lib/_reset.scss
index a095056aa919..c7fa64776b05 100644
--- a/lib/_reset.scss
+++ b/lib/_reset.scss
@@ -1,7 +1,10 @@
-// Reset.scss
+// Reset.less
 // Adapted from Normalize.css http://github.com/necolas/normalize.css
 // ------------------------------------------------------------------------
 
+// Updates for SASS:
+//  - none!
+
 // Display in IE6-9 and FF3
 // -------------------------
 
@@ -75,10 +78,10 @@ sub {
 // -------------------------
 
 img {
-  height: auto;
+  max-width: 100%; // Make images inherently responsive
+  vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
-  vertical-align: middle;
 }
 
 // Forms
@@ -111,10 +114,10 @@ input[type="submit"] {
   -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
-  -webkit-appearance: textfield;
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box;
+  -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
diff --git a/lib/_responsive-1200px-min.scss b/lib/_responsive-1200px-min.scss
new file mode 100644
index 000000000000..23d62fd78006
--- /dev/null
+++ b/lib/_responsive-1200px-min.scss
@@ -0,0 +1,29 @@
+// LARGE DESKTOP & UP
+// ------------------
+
+// Updates for SASS:
+//  - replace #grid > .style with @include grid-style
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  @include grid-core(70px, 30px);
+
+  // Fluid grid
+  @include grid-fluid(5.982905983%, 2.564102564%);
+
+  // Input grid
+  @include grid-input(70px, 30px);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}
diff --git a/lib/_responsive-767px-max.scss b/lib/_responsive-767px-max.scss
new file mode 100644
index 000000000000..15c95f4eef0f
--- /dev/null
+++ b/lib/_responsive-767px-max.scss
@@ -0,0 +1,153 @@
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: $baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  // Modals
+  .modal {
+    position: absolute;
+    top:   10px;
+    left:  10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
+
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 767px) {
+
+  // Padding to set content in a bit
+  body {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  // Negative indent the now static "fixed" navbar
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+  // Remove padding on container given explicit padding set on body
+  .container-fluid {
+    padding: 0;
+  }
+
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin-left: 0;
+  }
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    @include input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+
+}
diff --git a/lib/_responsive-768px-979px.scss b/lib/_responsive-768px-979px.scss
new file mode 100644
index 000000000000..213ab33bbeab
--- /dev/null
+++ b/lib/_responsive-768px-979px.scss
@@ -0,0 +1,20 @@
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+// Updates for SASS:
+//  - replace #grid > .style with @include grid-style
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  @include grid-core(42px, 20px);
+
+  // Fluid grid
+  @include grid-fluid(5.801104972%, 2.762430939%);
+
+  // Input grid
+  @include grid-input(42px, 20px);
+
+  // No need to reset .thumbnails here since it's the same @gridGutterWidth
+
+}
diff --git a/lib/_responsive-navbar.scss b/lib/_responsive-navbar.scss
new file mode 100644
index 000000000000..ab6382e888ce
--- /dev/null
+++ b/lib/_responsive-navbar.scss
@@ -0,0 +1,151 @@
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: 979px) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  // Remove any padding from the body
+  body {
+    padding-top: 0;
+  }
+  // Unfix the navbar
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: $baseLineHeight;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  // Account for brand name
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+
+  // COLLAPSIBLE NAVBAR
+  // ------------------
+  // Nav collapse clears brand
+  .nav-collapse {
+    clear: both;
+  }
+  // Block-level the nav
+  .nav-collapse .nav {
+    float: none;
+    margin: 0 0 ($baseLineHeight / 2);
+  }
+  .nav-collapse .nav > li {
+    float: none;
+  }
+  .nav-collapse .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > .divider-vertical {
+    display: none;
+  }
+  .nav-collapse .nav .nav-header {
+    color: $navbarText;
+    text-shadow: none;
+  }
+  // Nav and dropdown links in navbar
+  .nav-collapse .nav > li > a,
+  .nav-collapse .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: $navbarLinkColor;
+    @include border-radius(3px);
+  }
+  // Buttons
+  .nav-collapse .btn {
+    padding: 4px 10px 4px;
+    font-weight: normal;
+    @include border-radius(4px);
+  }
+  .nav-collapse .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > li > a:hover,
+  .nav-collapse .dropdown-menu a:hover {
+    background-color: $navbarBackground;
+  }
+  // Buttons in the navbar
+  .nav-collapse.in .btn-group {
+    margin-top: 5px;
+    padding: 0;
+  }
+  // Dropdowns in the navbar
+  .nav-collapse .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: block;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    @include border-radius(0);
+    @include box-shadow(none);
+  }
+  .nav-collapse .dropdown-menu:before,
+  .nav-collapse .dropdown-menu:after {
+    display: none;
+  }
+  .nav-collapse .dropdown-menu .divider {
+    display: none;
+  }
+  // Forms in navbar
+  .nav-collapse .navbar-form,
+  .nav-collapse .navbar-search {
+    float: none;
+    padding: ($baseLineHeight / 2) 15px;
+    margin: ($baseLineHeight / 2) 0;
+    border-top: 1px solid $navbarBackground;
+    border-bottom: 1px solid $navbarBackground;
+    $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+    @include box-shadow($shadow);
+  }
+  // Pull right (secondary) nav content
+  .navbar .nav-collapse .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  // Hide everything in the navbar save .brand and toggle button */
+  .nav-collapse,
+  .nav-collapse.collapse {
+    overflow: hidden;
+    height: 0;
+  }
+  // Navbar button
+  .navbar .btn-navbar {
+    display: block;
+  }
+
+  // STATIC NAVBAR
+  // -------------
+  .navbar-static .navbar-inner {
+    padding-left:  10px;
+    padding-right: 10px;
+  }
+}
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+// Required to make the collapsing navbar work on regular desktops
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
\ No newline at end of file
diff --git a/lib/_responsive-utilities.scss b/lib/_responsive-utilities.scss
new file mode 100644
index 000000000000..65b28bc0fe40
--- /dev/null
+++ b/lib/_responsive-utilities.scss
@@ -0,0 +1,44 @@
+// RESPONSIVE CLASSES
+// ------------------
+
+// Updates for SASS:
+//  - none!
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.visible-desktop   { } // Don't set initially
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+
+// Phones only
+@media (max-width: 767px) {
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+}
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+}
diff --git a/lib/_scaffolding.scss b/lib/_scaffolding.scss
index 28a3838170dc..29ad245d13e4 100644
--- a/lib/_scaffolding.scss
+++ b/lib/_scaffolding.scss
@@ -2,9 +2,11 @@
 // Basic and global styles for generating a grid system, structural layout, and page templates
 // -------------------------------------------------------------------------------------------
 
+// Updates for SASS:
+//  - replace @ with $
 
-// STRUCTURAL LAYOUT
-// -----------------
+// Body reset
+// ----------
 
 body {
   margin: 0;
@@ -16,7 +18,7 @@ body {
 }
 
 
-// LINKS
+// Links
 // -----
 
 a {
diff --git a/lib/_sprites.scss b/lib/_sprites.scss
index 95872782f2f3..256a38cd439b 100644
--- a/lib/_sprites.scss
+++ b/lib/_sprites.scss
@@ -2,12 +2,15 @@
 // Glyphs and icons for buttons, nav, and more
 // -------------------------------------------
 
+// Updates for SASS:
+//  - replace $ with $
+//  - update mixin definitions
 
 // ICONS
 // -----
 
-// All icons receive the styles of the <i> tag with a base class 
-// of .i and are then given a unique class to add width, height, 
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
 // and background-position. Your resulting HTML will look like
 // <i class="icon-inbox"></i>.
 
@@ -19,13 +22,13 @@
   display: inline-block;
   width: 14px;
   height: 14px;
+  @include ie7-restore-right-whitespace();
   line-height: 14px;
   vertical-align: text-top;
   background-image: url($iconSpritePath);
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
-  @include ie7-restore-right-whitespace();
 }
 .icon-white {
   background-image: url($iconWhiteSpritePath);
@@ -149,13 +152,13 @@
 .icon-comment            { background-position: -240px -120px; }
 .icon-magnet             { background-position: -264px -120px; }
 .icon-chevron-up         { background-position: -288px -120px; }
-.icon-chevron-down       { background-position: -313px -119px; } // 1px off
+.icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
 .icon-retweet            { background-position: -336px -120px; }
 .icon-shopping-cart      { background-position: -360px -120px; }
 .icon-folder-close       { background-position: -384px -120px; }
 .icon-folder-open        { background-position: -408px -120px; }
-.icon-resize-vertical    { background-position: -432px -119px; }
-.icon-resize-horizontal  { background-position: -456px -118px; }
+.icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
+.icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off
 
 .icon-hdd                     { background-position: 0      -144px; }
 .icon-bullhorn                { background-position: -24px  -144px; }
@@ -177,3 +180,15 @@
 .icon-filter                  { background-position: -408px -144px; }
 .icon-briefcase               { background-position: -432px -144px; }
 .icon-fullscreen              { background-position: -456px -144px; }
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/_tables.scss b/lib/_tables.scss
index 9c9b74710914..9c1ef65738b1 100644
--- a/lib/_tables.scss
+++ b/lib/_tables.scss
@@ -1,17 +1,21 @@
 //
-// Tables.scss
+// Tables.less
 // Tables for, you guessed it, tabular data
 // ----------------------------------------
 
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
+//  - use an iterator to generate table column .spanX classes
 
 // BASE TABLES
 // -----------------
 
 table {
   max-width: 100%;
+  background-color: $tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: $tableBackground;
 }
 
 // BASELINE STYLES
@@ -37,6 +41,8 @@ table {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
+  caption + thead tr:first-child th,
+  caption + thead tr:first-child td,
   colgroup + thead tr:first-child th,
   colgroup + thead tr:first-child td,
   thead:first-child tr:first-child th,
@@ -67,15 +73,21 @@ table {
 
 .table-bordered {
   border: 1px solid $tableBorder;
-  border-left: 0;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
+  border-left: 0;
   @include border-radius(4px);
   th,
   td {
     border-left: 1px solid $tableBorder;
   }
   // Prevent a double border
+  caption + thead tr:first-child th,
+  caption + tbody tr:first-child th,
+  caption + tbody tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + tbody tr:first-child th,
+  colgroup + tbody tr:first-child td,
   thead:first-child tr:first-child th,
   tbody:first-child tr:first-child th,
   tbody:first-child tr:first-child td {
@@ -84,20 +96,29 @@ table {
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,
   tbody:first-child tr:first-child td:first-child {
-    @include border-radius(4px 0 0 0);
+    -webkit-border-top-left-radius: 4px;
+            border-top-left-radius: 4px;
+        -moz-border-radius-topleft: 4px;
   }
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
-    @include border-radius(0 4px 0 0);
+    -webkit-border-top-right-radius: 4px;
+            border-top-right-radius: 4px;
+        -moz-border-radius-topright: 4px;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:last-child tr:last-child th:first-child,
   tbody:last-child tr:last-child td:first-child {
     @include border-radius(0 0 0 4px);
+    -webkit-border-bottom-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+        -moz-border-radius-bottomleft: 4px;
   }
   thead:last-child tr:last-child th:last-child,
   tbody:last-child tr:last-child td:last-child {
-    @include border-radius(0 0 4px 0);
+    -webkit-border-bottom-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        -moz-border-radius-bottomright: 4px;
   }
 }
 
@@ -132,28 +153,7 @@ table {
 
 // Change the columns
 table {
-  .span1     { @include tableColumns(1); }
-  .span2     { @include tableColumns(2); }
-  .span3     { @include tableColumns(3); }
-  .span4     { @include tableColumns(4); }
-  .span5     { @include tableColumns(5); }
-  .span6     { @include tableColumns(6); }
-  .span7     { @include tableColumns(7); }
-  .span8     { @include tableColumns(8); }
-  .span9     { @include tableColumns(9); }
-  .span10    { @include tableColumns(10); }
-  .span11    { @include tableColumns(11); }
-  .span12    { @include tableColumns(12); }
-  .span13    { @include tableColumns(13); }
-  .span14    { @include tableColumns(14); }
-  .span15    { @include tableColumns(15); }
-  .span16    { @include tableColumns(16); }
-  .span17    { @include tableColumns(17); }
-  .span18    { @include tableColumns(18); }
-  .span19    { @include tableColumns(19); }
-  .span20    { @include tableColumns(20); }
-  .span21    { @include tableColumns(21); }
-  .span22    { @include tableColumns(22); }
-  .span23    { @include tableColumns(23); }
-  .span24    { @include tableColumns(24); }
+  @for $i from 1 through 24 {
+    .span#{i} { @include tableColumns($i); }
+  }
 }
diff --git a/lib/_thumbnails.scss b/lib/_thumbnails.scss
index a9795dc88f30..157218a9edf9 100644
--- a/lib/_thumbnails.scss
+++ b/lib/_thumbnails.scss
@@ -1,15 +1,30 @@
 // THUMBNAILS
 // ----------
+// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+
+// Make wrapper ul behave like the grid
 .thumbnails {
   margin-left: -$gridGutterWidth;
   list-style: none;
   @include clearfix();
 }
+// Fluid rows have no left margin
+.row-fluid .thumbnails {
+  margin-left: 0;
+}
+
+// Float li to make thumbnails appear in a row
 .thumbnails > li {
-  float: left;
-  margin: 0 0 $baseLineHeight $gridGutterWidth;
+  float: left; // Explicity set the float since we don't require .span* classes
+  margin-bottom: $baseLineHeight;
+  margin-left: $gridGutterWidth;
 }
+
+// The actual thumbnail (can be `a` or `div`)
 .thumbnail {
   display: block;
   padding: 4px;
@@ -23,6 +38,7 @@ a.thumbnail:hover {
   border-color: $linkColor;
   @include box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
+
 // Images and captions
 .thumbnail > img {
   display: block;
diff --git a/lib/_tooltip.scss b/lib/_tooltip.scss
index 89d77f93ed63..e208f8a6b838 100644
--- a/lib/_tooltip.scss
+++ b/lib/_tooltip.scss
@@ -1,5 +1,9 @@
 // TOOLTIP
-// -------
+// ------=
+
+// Updates for SASS:
+//  - replace @ with $ for variables
+//  - update mixin definitions
 
 .tooltip {
   position: absolute;
diff --git a/lib/_type.scss b/lib/_type.scss
index 0ddad849f8a1..e3436043e484 100644
--- a/lib/_type.scss
+++ b/lib/_type.scss
@@ -1,7 +1,11 @@
-// Typography.scss
+// Typography.less
 // Headings, body text, lists, code, and more for a versatile and durable typography system
 // ----------------------------------------------------------------------------------------
 
+// Updates for SASS:
+//  - replace @ with $
+//  - update mixin definitions
+//  - use font-shorthand instead of #font > .shorthand
 
 // BODY TEXT
 // ---------
@@ -52,8 +56,8 @@ h2 {
   }
 }
 h3 {
-  line-height: $baseLineHeight * 1.5;
   font-size: 18px;
+  line-height: $baseLineHeight * 1.5;
   small {
     font-size: 14px;
   }
@@ -136,9 +140,10 @@ dd {
 .dl-horizontal {
   dt {
     float: left;
-    clear: left;
     width: 120px;
+    clear: left;
     text-align: right;
+    @include text-overflow();
   }
   dd {
     margin-left: 130px;
@@ -169,8 +174,8 @@ em {
 
 // Abbreviations and acronyms
 abbr[title] {
-  border-bottom: 1px dotted #ddd;
   cursor: help;
+  border-bottom: 1px dotted #ddd;
 }
 abbr.initialism {
   font-size: 90%;
@@ -198,10 +203,10 @@ blockquote {
   // Float right with text-align: right
   &.pull-right {
     float: right;
-    padding-left: 0;
     padding-right: 15px;
-    border-left: 0;
+    padding-left: 0;
     border-right: 5px solid $grayLighter;
+    border-left: 0;
     p,
     small {
       text-align: right;
@@ -212,7 +217,7 @@ blockquote {
 // Quotes
 q:before,
 q:after,
-blockquote:before, 
+blockquote:before,
 blockquote:after {
   content: "";
 }
@@ -221,8 +226,8 @@ blockquote:after {
 address {
   display: block;
   margin-bottom: $baseLineHeight;
-  line-height: $baseLineHeight;
   font-style: normal;
+  line-height: $baseLineHeight;
 }
 
 // Misc
diff --git a/lib/_utilities.scss b/lib/_utilities.scss
index d60d22031199..0e57f58f1d76 100644
--- a/lib/_utilities.scss
+++ b/lib/_utilities.scss
@@ -1,6 +1,9 @@
 // UTILITY CLASSES
 // ---------------
 
+// Updates for SASS:
+//  - none!
+
 // Quick floats
 .pull-right {
   float: right;
diff --git a/lib/_variables.scss b/lib/_variables.scss
index 95cb5b133862..21e56f7a1f43 100644
--- a/lib/_variables.scss
+++ b/lib/_variables.scss
@@ -1,8 +1,13 @@
-// Variables.scss
+// Variables.less
 // Variables to customize the look and feel of Bootstrap
 // -----------------------------------------------------
 
-
+// Updated for SASS:
+//  - replace @ with $
+//  - replace `spin` with `adjust-hue`
+//  - add a $baseFontWeight variable (default: normal) for use with
+//    font-shorthand mixins
+//  - add !default to variable definitions
 
 // GLOBAL VALUES
 // --------------------------------------------------
@@ -40,19 +45,24 @@ $textColor:             $grayDark !default;
 // Links
 // -------------------------
 $linkColor:             #08c !default;
-$linkColorHover:        darken($linkColor, 15) !default;
+$linkColorHover:        darken($linkColor, 15%) !default;
 
 
 // Typography
 // -------------------------
+$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace !default;
+
 $baseFontSize:          13px !default;
-$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$baseFontFamily:        $sansFontFamily !default;
 $baseLineHeight:        18px !default;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif !default;
+$baseFontWeight:        normal !default;
+$altFontFamily:         $serifFontFamily !default;
 
-$headingsFontFamily:    inherit !default; // empty to use BS default, @baseFontFamily
+$headingsFontFamily:    inherit !default; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    bold !default;    // instead of browser default, bold
-$headingsColor:         inherit !default; // empty to use BS default, @textColor
+$headingsColor:         inherit !default; // empty to use BS default, $textColor
 
 
 // Tables
@@ -67,10 +77,10 @@ $tableBorder:                       #ddd !default; // table and cell border
 // -------------------------
 $btnBackground:                     $white !default;
 $btnBackgroundHighlight:            darken($white, 10%) !default;
-$btnBorder:                         darken($white, 20%) !default;
+$btnBorder:                         #ccc !default;
 
 $btnPrimaryBackground:              $linkColor !default;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15) !default;
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%) !default;
 
 $btnInfoBackground:                 #5bc0de !default;
 $btnInfoBackgroundHighlight:        #2f96b4 !default;
@@ -92,8 +102,9 @@ $btnInverseBackgroundHighlight:     $grayDarker !default;
 // -------------------------
 $inputBackground:               $white !default;
 $inputBorder:                   #ccc !default;
+$inputBorderRadius:             3px !default;
 $inputDisabledBackground:       $grayLighter !default;
-
+$formActionsBackground:         #f5f5f5 !default;
 
 // Dropdowns
 // -------------------------
@@ -123,8 +134,8 @@ $zindexModal:             1050 !default;
 
 // Sprite icons path
 // -------------------------
-$iconSpritePath:          "../img/glyphicons-halflings.png";
-$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+$iconSpritePath:          "../img/glyphicons-halflings.png" !default;
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png" !default;
 
 
 // Input placeholder text color
@@ -154,6 +165,7 @@ $navbarSearchBackground:          lighten($navbarBackground, 25%) !default;
 $navbarSearchBackgroundFocus:     $white !default;
 $navbarSearchBorder:              darken($navbarSearchBackground, 30%) !default;
 $navbarSearchPlaceholderColor:    #ccc !default;
+$navbarBrandColor:                $navbarLinkColor !default;
 
 
 // Hero unit
@@ -183,7 +195,6 @@ $infoBorder:              darken(adjust-hue($infoBackground, -10), 7%) !default;
 
 
 
-
 // GRID
 // --------------------------------------------------
 
@@ -194,7 +205,6 @@ $gridColumnWidth:         60px !default;
 $gridGutterWidth:         20px !default;
 $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
 
-
 // Fluid grid
 // -------------------------
 $fluidGridColumnWidth:    6.382978723% !default;
diff --git a/lib/_wells.scss b/lib/_wells.scss
index a2b25da938cb..7d89665709e1 100644
--- a/lib/_wells.scss
+++ b/lib/_wells.scss
@@ -1,6 +1,9 @@
 // WELLS
 // -----
 
+// Updates for SASS:
+//  - update mixin definitions
+
 .well {
   min-height: 20px;
   padding: 19px;
diff --git a/lib/bootstrap.scss b/lib/bootstrap.scss
index 6265be17434c..2abe13163ee8 100644
--- a/lib/bootstrap.scss
+++ b/lib/bootstrap.scss
@@ -1,17 +1,17 @@
 /*!
- * Bootstrap v2.0.2
+ * Bootstrap v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- *
- * Converted to Sass by @johnwlong / @m5o.
- *
- * Date: @DATE
  */
 
+// Updated for SASS:
+//  - remove .less on import filenames
+//  - move @import for reset below mixins, because it uses tab-focus mixin
+
 // Core variables and mixins
 @import "variables"; // Modify this for custom colors, font-sizes, etc
 @import "mixins";
@@ -40,7 +40,7 @@
 // Components: Buttons & Alerts
 @import "buttons";
 @import "button-groups";
-@import "alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.scss
+@import "alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons
 
 // Components: Nav
 @import "navs";
@@ -56,8 +56,7 @@
 
 // Components: Misc
 @import "thumbnails";
-@import "labels";
-@import "badges";
+@import "labels-badges";
 @import "progress-bars";
 @import "accordion";
 @import "carousel";
diff --git a/lib/responsive.scss b/lib/responsive.scss
index 1b227995642e..38e8920187fa 100644
--- a/lib/responsive.scss
+++ b/lib/responsive.scss
@@ -1,21 +1,20 @@
 /*!
- * Bootstrap Responsive v2.0.2
+ * Bootstrap Responsive v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- *
- * Converted to Sass by @johnwlong / @m5o.
- *
- * Date: @DATE
  */
 
-// Responsive.scss
+
+// Responsive.less
 // For phone and tablet devices
 // -------------------------------------------------------------
 
+// Updates for SASS:
+//  - remove .less from import filenames
 
 // REPEAT VARIABLES & MIXINS
 // -------------------------
@@ -28,348 +27,24 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-// Visibility utilities
-
-// For desktops
-.visible-phone     { display: none; }
-.visible-tablet    { display: none; }
-.visible-desktop   { display: block; }
-.hidden-phone      { display: block; }
-.hidden-tablet     { display: block; }
-.hidden-desktop    { display: none; }
-
-// Phones only
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: block; }
-  // Hide
-  .hidden-phone      { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: block; }
-  // Hide
-  .hidden-tablet     { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
-  // Smooth out the collapsing/expanding nav
-  .nav-collapse {
-    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
-  }
-
-  // Block level the page header small tag for readability
-  .page-header h1 small {
-    display: block;
-    line-height: $baseLineHeight;
-  }
-
-  // Update checkboxes for iOS
-  input[type="checkbox"],
-  input[type="radio"] {
-    border: 1px solid #ccc;
-  }
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  // Modals
-  .modal {
-    position: absolute;
-    top:   10px;
-    left:  10px;
-    right: 10px;
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-  .modal-header .close {
-    padding: 10px;
-    margin: -10px;
-  }
-
-  // Carousel
-  .carousel-caption {
-    position: static;
-  }
-
-}
-
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-@media (max-width: 767px) {
-
-  // Padding to set content in a bit
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .navbar-fixed-top {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-
-  // GRID & CONTAINERS
-  // -----------------
-  // Remove width from containers
-  .container {
-    width: auto;
-  }
-  // Fluid rows
-  .row-fluid {
-    width: 100%;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  .row > [class*="span"],
-  .row-fluid > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
+@import "responsive-utilities";
 
-  // THUMBNAILS
-  // ----------
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
 
-  // FORM FIELDS
-  // -----------
-  // Make span* classes full width
-  input[class*="span"],
-  select[class*="span"],
-  textarea[class*="span"],
-  .uneditable-input {
-    @include input-block-level();
-  }
-  // But don't let it screw up prepend/append inputs
-  .input-prepend input[class*="span"],
-  .input-append input[class*="span"] {
-    width: auto;
-  }
-
-}
-
-
-
-// PORTRAIT TABLET TO DEFAULT DESKTOP
-// ----------------------------------
-
-@media (min-width: 768px) and (max-width: 979px) {
-
-  // Fixed grid
-  @include grid-core-generate(42px, 20px);
-
-  // Fluid grid
-  @include grid-fluid-generate(5.801104972%, 2.762430939%);
-
-  // Input grid
-  @include grid-input-generate(42px, 20px);
-
-}
-
-
-
-// TABLETS AND BELOW
-// -----------------
-@media (max-width: 979px) {
-
-  // UNFIX THE TOPBAR
-  // ----------------
-  // Remove any padding from the body
-  body {
-    padding-top: 0;
-  }
-  // Unfix the navbar
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: $baseLineHeight;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  // Account for brand name
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  // Nav collapse clears brand
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  // Block-level the nav
-  .navbar .nav {
-    float: none;
-    margin: 0 0 ($baseLineHeight / 2);
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav .nav-header {
-    color: $navbarText;
-    text-shadow: none;
-  }
-  // Nav and dropdown links in navbar
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: $navbarLinkColor;
-    @include border-radius(3px);
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover {
-    background-color: $navbarBackground;
-  }
-  // Dropdowns in the navbar
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    @include border-radius(0);
-    @include box-shadow(none);
-  }
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  // Forms in navbar
-  .navbar-form,
-  .navbar-search {
-    float: none;
-    padding: ($baseLineHeight / 2) 15px;
-    margin: ($baseLineHeight / 2) 0;
-    border-top: 1px solid $navbarBackground;
-    border-bottom: 1px solid $navbarBackground;
-    $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-    @include box-shadow($shadow);
-  }
-  // Pull right (secondary) nav content
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  // Static navbar
-  .navbar-static .navbar-inner {
-    padding-left:  10px;
-    padding-right: 10px;
-  }
-  // Navbar button
-  .btn-navbar {
-    display: block;
-  }
-
-  // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-
-
-
-// DEFAULT DESKTOP
-// ---------------
-
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
-
-
-
-// LARGE DESKTOP & UP
+// MEDIA QUERIES
 // ------------------
 
-@media (min-width: 1200px) {
+// Phones to portrait tablets and narrow desktops
+@import "responsive-767px-max";
 
-  // Fixed grid
-  @include grid-core-generate(70px, 30px);
+// Tablets to regular desktops
+@import "responsive-768px-979px";
 
-  // Fluid grid
-  @include grid-fluid-generate(5.982905983%, 2.564102564%);
+// Large desktops
+@import "responsive-1200px-min";
 
-  // Input grid
-  @include grid-input-generate(70px, 30px);
 
-  // Thumbnails
-  .thumbnails {
-    margin-left: -30px;
-  }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
+// RESPONSIVE NAVBAR
+// ------------------
 
-}
+// From 979px and below, show a button to toggle navbar contents
+@import "responsive-navbar";
diff --git a/lib/tests/css-tests.css b/lib/tests/css-tests.css
new file mode 100644
index 000000000000..ac764270aa22
--- /dev/null
+++ b/lib/tests/css-tests.css
@@ -0,0 +1,51 @@
+/*!
+ * Bootstrap CSS Tests
+ */
+
+
+/* Remove background image */
+body {
+  background-image: none;
+}
+
+/* Space out subhead */
+.subhead {
+  margin-bottom: 36px;
+}
+h4 {
+  margin-bottom: 5px;
+}
+
+
+/* colgroup tests */
+.col1 {
+  background-color: rgba(255,0,0,.1);
+}
+.col2 {
+  background-color: rgba(0,255,0,.1);
+}
+.col3 {
+  background-color: rgba(0,0,255,.1);
+}
+
+
+/* Fluid row inputs */
+#fluidRowInputs .row-fluid > [class*=span] {
+  background-color: rgba(255,0,0,.1);
+}
+
+
+/* Fluid grid */
+.fluid-grid {
+  margin-bottom: 45px;
+}
+.fluid-grid .row {
+  height: 40px;
+  padding-top: 10px;
+  margin-top: 10px;
+  color: #ddd;
+  text-align: center;
+}
+.fluid-grid .span1 {
+  background-color: #999;
+}
diff --git a/lib/tests/css-tests.html b/lib/tests/css-tests.html
new file mode 100644
index 000000000000..b290186211be
--- /dev/null
+++ b/lib/tests/css-tests.html
@@ -0,0 +1,827 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Tests · Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="../../docs/assets/css/docs.css" rel="stylesheet">
+    <link href="../../docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- CSS just for the tests page -->
+    <link href="css-tests.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="../../docs/index.html">Bootstrap</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>CSS Tests</h1>
+  <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
+</header>
+
+
+
+
+<!-- Fluid grid
+================================================== -->
+
+<div class="page-header">
+  <h1>Fluid grids</h1>
+</div>
+
+<div class="fluid-grid">
+  <div class="row">
+    <div class="span12">12
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span11">11
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span1">1
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span10">10
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span2">2
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span9">9
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span3">3
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span8">8
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span4">4
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span7">7
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span5">5
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span6">6
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+    <div class="span6">6
+      <div class="row-fluid">
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+        <div class="span1">1</div>
+      </div>
+    </div>
+  </div>
+</div> <!-- fluid grids -->
+
+
+
+<!-- Tables
+================================================== -->
+
+<div class="page-header">
+  <h1>Tables</h1>
+</div>
+
+<div class="row">
+  <div class="span6">
+    <h4>Bordered without thead</h4>
+    <table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered without thead, with caption</h4>
+    <table class="table table-bordered">
+      <caption>Table caption</caption>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered without thead, with colgroup</h4>
+    <table class="table table-bordered">
+      <colgroup>
+        <col class="col1">
+        <col class="col2">
+        <col class="col3">
+      </colgroup>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered with thead, with colgroup</h4>
+    <table class="table table-bordered">
+      <colgroup>
+        <col class="col1">
+        <col class="col2">
+        <col class="col3">
+      </colgroup>
+      <thead>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!--/span-->
+  <div class="span6">
+    <h4>Bordered with thead and caption</h4>
+    <table class="table table-bordered">
+      <caption>Table caption</caption>
+      <thead>
+        <tr>
+          <th>1</th>
+          <th>2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+          <td>3</td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Bordered with rowspan and colspan</h4>
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>1</th>
+          <th>2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="2">1 and 2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td rowspan="2">2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td rowspan="2">1</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td colspan="2">2 and 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!--/span-->
+</div><!--/row-->
+
+
+
+<!-- Forms
+================================================== -->
+
+<div class="page-header">
+  <h1>Forms</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <h4>Prepend and append on inputs</h4>
+    <form>
+      <div class="controls">
+        <div class="input-prepend">
+          <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-append">
+          <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-prepend input-append">
+          <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
+        </div>
+      </div>
+    </form>
+  </div><!--/span-->
+  <div class="span6">
+    <h4>Prepend and append with uneditable</h4>
+    <form>
+      <div class="input-prepend">
+        <span class="add-on">$</span><span class="span2 uneditable-input">Some value here</span>
+      </div>
+      <div class="input-append">
+        <span class="span2 uneditable-input">Some value here</span><span class="add-on">.00</span>
+      </div>
+    </form>
+  </div><!--/span-->
+</div><!--/row-->
+
+<h4>Fluid row with inputs</h4>
+<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
+<div id="fluidRowInputs">
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span1" placeholder="span1">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span2" placeholder="span2">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span3" placeholder="span3">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span4" placeholder="span4">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span5" placeholder="span5">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span6" placeholder="span6">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span7" placeholder="span7">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span8" placeholder="span8">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span9" placeholder="span9">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span10" placeholder="span10">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span11" placeholder="span11">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row-fluid">
+    <div class="span12">
+      <input class="span12" placeholder="span12">
+    </div><!--/span-->
+  </div><!--/row-->
+</div>
+<br>
+
+
+<!-- Dropdowns
+================================================== -->
+
+<div class="page-header">
+  <h1>Dropdowns</h1>
+</div>
+
+<h4>Dropdown link with hash URL</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>
+
+<h4>Dropdown link with custom URL and data-target</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>
+
+<h4>Dropdown on a button</h4>
+<div style="position: relative;">
+  <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
+  <ul class="dropdown-menu">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<br>
+
+
+<!-- Thumbnails
+================================================== -->
+
+<div class="page-header">
+  <h1>Thumbnails</h1>
+</div>
+
+<h4>Default thumbnails (no grid sizing)</h4>
+<ul class="thumbnails">
+  <li class="thumbnail">
+    <img src="http://placehold.it/260x180" alt="">
+  </li>
+  <li class="thumbnail">
+    <img src="http://placehold.it/260x180" alt="">
+  </li>
+  <li class="thumbnail">
+    <img src="http://placehold.it/260x180" alt="">
+  </li>
+  <li class="thumbnail">
+    <img src="http://placehold.it/260x180" alt="">
+  </li>
+</ul>
+
+<!-- NOT CURRENTLY SUPPORTED
+<h4>Offset thumbnails</h4>
+<ul class="thumbnails">
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+-->
+
+<h4>Standard grid sizing</h4>
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+
+<h4>Fluid thumbnails</h4>
+<div class="row-fluid">
+  <div class="span8">
+    <ul class="thumbnails">
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span4">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+
+
+<!-- Tabs
+================================================== -->
+
+<div class="page-header">
+  <h1>Tabs</h1>
+</div>
+
+<div class="tabbable tabs-left" style="margin-bottom: 18px;">
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
+  </ul>
+  <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+    <div class="tab-pane active" id="tab1">
+      <p>I'm in Section 1.</p>
+
+      <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
+          <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
+          <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
+        </ul>
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1-1">
+            <p>I'm in Section 1.1.</p>
+          </div>
+          <div class="tab-pane" id="tab1-2">
+            <p>I'm in Section 1.2.</p>
+          </div>
+          <div class="tab-pane" id="tab1-3">
+            <p>I'm in Section 1.3.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+    <div class="tab-pane" id="tab3">
+      <p>What up girl, this is Section 3.</p>
+    </div>
+  </div>
+</div> <!-- /tabbable -->
+
+
+
+<!-- Labels
+================================================== -->
+
+<div class="page-header">
+  <h1>Labels</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <h4>Inline label</h4>
+    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  </div><!--/span-->
+  <div class="span4">
+    <form class="form-horizontal">
+      <label>Example label</label>
+      <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
+    </form>
+  </div><!--/span-->
+  <div class="span4">
+
+  </div><!--/span-->
+</div><!--/row-->
+
+
+
+
+
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="../../docs/assets/js/jquery.js"></script>
+    <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
+    <script src="../../docs/assets/js/bootstrap-transition.js"></script>
+    <script src="../../docs/assets/js/bootstrap-alert.js"></script>
+    <script src="../../docs/assets/js/bootstrap-modal.js"></script>
+    <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
+    <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tab.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
+    <script src="../../docs/assets/js/bootstrap-popover.js"></script>
+    <script src="../../docs/assets/js/bootstrap-button.js"></script>
+    <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
+    <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
+    <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
+    <script src="../../docs/assets/js/application.js"></script>
+
+
+  </body>
+</html>