Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip

Conflicts: js/tests/unit/bootstrap-collapse.js
author: Ivan Khalopik <[email protected]> 2013-05-07 15:16:45 +0300
committer: Ivan Khalopik <[email protected]> 2013-05-07 15:16:45 +0300
commit: 3c7a43a1f373d0c534476578b96a75ae2e63c985 (patch)
tree: f11fa18c33d1a65ae4422dc3c352c34a2b323b8c /less
parent: 41c782567775d3bbcfc62d163ae22a531277b5e2 (diff)
parent: b352f98f325adbd994f01cb94f4d0a454783bbce (diff)
download: bootstrap-3c7a43a1f373d0c534476578b96a75ae2e63c985.tar.xz
bootstrap-3c7a43a1f373d0c534476578b96a75ae2e63c985.zip
34 files changed, 1118 insertions, 738 deletions
diff --git a/less/alerts.less b/less/alerts.less
index 7f627fadf..882b25bef 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -9,10 +9,10 @@
 .alert {
   padding: 8px 35px 8px 14px;
   margin-bottom: @line-height-base;
-  color: @state-warning-text;
-  background-color: @state-warning-background;
-  border: 1px solid @state-warning-border;
-  border-radius: @border-radius-base;
+  color: @alert-text;
+  background-color: @alert-bg;
+  border: 1px solid @alert-border;
+  border-radius: @alert-border-radius;
 
   // Headings for larger alerts
   h4 {
@@ -22,63 +22,61 @@
   }
   // Match the hr to the border of the alert
   hr {
-    border-top-color: darken(@state-warning-border, 5%);
+    border-top-color: darken(@alert-border, 5%);
   }
   // Inherit color for immediate links and bolden them some
   > a,
   > p > a {
     font-weight: 500;
-    color: darken(@state-warning-text, 10%);
+    color: darken(@alert-text, 10%);
   }
-}
 
-// Adjust close link position
-.close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  line-height: @line-height-base;
-  color: inherit;
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    color: inherit;
+  }
 }
 
 // Alternate styles
 // -------------------------
 
 .alert-success {
-  background-color: @state-success-background;
-  border-color: @state-success-border;
-  color: @state-success-text;
+  background-color: @alert-success-bg;
+  border-color: @alert-success-border;
+  color: @alert-success-text;
   hr {
-    border-top-color: darken(@state-success-border, 5%);
+    border-top-color: darken(@alert-success-border, 5%);
   }
   > a,
   > p > a {
-    color: darken(@state-success-text, 10%);
+    color: darken(@alert-success-text, 10%);
   }
 }
-.alert-danger,
-.alert-error {
-  background-color: @state-error-background;
-  border-color: @state-error-border;
-  color: @state-error-text;
+.alert-danger {
+  background-color: @alert-danger-bg;
+  border-color: @alert-danger-border;
+  color: @alert-danger-text;
   hr {
-    border-top-color: darken(@state-error-border, 5%);
+    border-top-color: darken(@alert-danger-border, 5%);
   }
   > a,
   > p > a {
-    color: darken(@state-error-text, 10%);
+    color: darken(@alert-danger-text, 10%);
   }
 }
 .alert-info {
-  background-color: @state-info-background;
-  border-color: @state-info-border;
-  color: @state-info-text;
+  background-color: @alert-info-bg;
+  border-color: @alert-info-border;
+  color: @alert-info-text;
   hr {
-    border-top-color: darken(@state-info-border, 5%);
+    border-top-color: darken(@alert-info-border, 5%);
   }
   > a,
   > p > a {
-    color: darken(@state-info-text, 10%);
+    color: darken(@alert-info-text, 10%);
   }
 }
 
diff --git a/less/badges.less b/less/badges.less
index 4f1e71eda..4750cfb75 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -8,14 +8,14 @@
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: 12px;
+  font-size: @font-size-small;
   font-weight: bold;
   color: #fff;
   line-height: 1;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
-  background-color: @grayLight;
+  background-color: @gray-light;
   border-radius: 10px;
 
   // Empty labels/badges collapse
@@ -48,7 +48,7 @@ a.badge {
 }
 
 // Account for counters in navs
-.nav-list > .active > a > .badge,
+a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
   color: @link-color;
   background-color: #fff;
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 461f9ecea..c73c85c38 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -30,6 +30,8 @@
 @import "component-animations.less";
 @import "glyphicons.less";
 @import "dropdowns.less";
+@import "list-group.less";
+@import "panels.less";
 @import "wells.less";
 @import "close.less";
 
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index dea69138e..87a6f0e37 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -18,8 +18,11 @@
       padding: 0 5px;
       color: #ccc;
     }
+    &:last-child:after {
+      display: none; // No divider after last element
+    }
   }
   > .active {
-    color: @grayLight;
+    color: @gray-light;
   }
 }
diff --git a/less/button-groups.less b/less/button-groups.less
index 9e6eaa496..3a72d90bf 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -32,7 +32,7 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  .clear_float();
+  .clearfix();
 
   .btn-group {
     float: left;
@@ -73,6 +73,21 @@
   .border-right-radius(@border-radius-large);
 }
 
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:last-child > .btn {
+  .border-right-radius(@border-radius-base);
+}
+.btn-group > .btn-group:first-child > .btn {
+  margin-left: 0;
+  .border-left-radius(@border-radius-base);
+}
+
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
diff --git a/less/buttons.less b/less/buttons.less
index da26f8ab9..b65e3fdc7 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -110,26 +110,26 @@ input[type="button"] {
 
 .btn {
   color: @btn-color;
-  .btn-pseudo-states(@btn-background, @btn-border);
+  .btn-pseudo-states(@btn-bg, @btn-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-background-primary, @btn-border-primary);
+  .btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-background-warning, @btn-border-warning);
+  .btn-pseudo-states(@btn-warning-bg, @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-background-danger, @btn-border-danger);
+  .btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-background-success, @btn-border-success);
+  .btn-pseudo-states(@btn-success-bg, @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-background-info, @btn-border-info);
+  .btn-pseudo-states(@btn-info-bg, @btn-info-border);
 }
 
 
@@ -159,7 +159,7 @@ fieldset[disabled] .btn-link {
 }
 .btn-link:hover,
 .btn-link:focus {
-  color: @link-color-hover;
+  color: @link-hover-color;
   text-decoration: underline;
   background-color: transparent;
 }
@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: @grayDark;
+      color: @gray-dark;
       text-decoration: none;
     }
   }
diff --git a/less/carousel.less b/less/carousel.less
index 7c75a519b..43bef87e1 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -155,19 +155,23 @@
 // Hidden by default for smaller viewports
 .carousel-caption {
   position: absolute;
-  left: 20%;
-  right: 20%;
+  left: 15%;
+  right: 15%;
   bottom: 20px;
-  display: none;
+  z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #fff;
+  text-align: center;
   text-shadow: 0 1px 2px rgba(0,0,0,.6);
+  & .btn {
+    text-shadow: none; // No shadow for button elements in carousel-caption
+  }
 }
 
 
-// Scale up controls for >768px
-@media screen and (min-width: 768px) {
+// Scale up controls for tablets and up
+@media screen and (min-width: @screen-tablet) {
 
   // Scale up the controls a smidge
   .carousel-control .glyphicon {
@@ -180,13 +184,8 @@
 
   // Show and left align the captions
   .carousel-caption {
-    left: 0;
-    right: 0;
-    z-index: 10;
-    display: block;
-    max-width: 60%;
-    padding: 30px;
-    margin-left: 0;
-    margin-right: 0;
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
   }
 }
diff --git a/less/close.less b/less/close.less
index 2bfe9c40f..e879da4d6 100644
--- a/less/close.less
+++ b/less/close.less
@@ -5,12 +5,13 @@
 
 .close {
   float: right;
-  font-size: 20px;
+  font-size: (@font-size-base * 1.5);
   font-weight: bold;
-  line-height: @line-height-base;
+  line-height: 1;
   color: #000;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(.2);
+
   &:hover,
   &:focus {
     color: #000;
@@ -29,4 +30,4 @@ button.close {
   background: transparent;
   border: 0;
   -webkit-appearance: none;
-}
-\ No newline at end of file
+}
diff --git a/less/code.less b/less/code.less
index c55f32fe7..d9ddbc3a4 100644
--- a/less/code.less
+++ b/less/code.less
@@ -9,7 +9,7 @@ pre {
   padding: 0 3px 2px;
   font-family: @font-family-monospace;
   font-size: (@font-size-base - 2);
-  color: @grayDark;
+  color: @gray-dark;
   border-radius: 4px;
 }
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 02d4a87ba..c4fd8598b 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -45,7 +45,7 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
-  background-color: @dropdown-background;
+  background-color: @dropdown-bg;
   border: 1px solid #ccc; // IE8 fallback
   border: 1px solid @dropdown-border;
   border-radius: @border-radius-base;
@@ -71,7 +71,7 @@
     font-weight: normal;
     line-height: @line-height-base;
     color: @dropdown-link-color;
-    white-space: nowrap;
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
   }
 }
 
@@ -82,8 +82,8 @@
 .dropdown-submenu:hover > a,
 .dropdown-submenu:focus > a {
   text-decoration: none;
-  color: @dropdown-link-color-hover;
-  #gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
+  color: @dropdown-link-hover-color;
+  #gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%));
 }
 
 // Active state
@@ -91,10 +91,10 @@
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  color: @dropdown-link-color-active;
+  color: @dropdown-link-active-color;
   text-decoration: none;
   outline: 0;
-  #gradient > .vertical(@dropdown-link-background-active, darken(@dropdown-link-background-active, 5%));
+  #gradient > .vertical(@dropdown-link-active-bg, darken(@dropdown-link-active-bg, 5%));
 }
 
 // Disabled state
@@ -103,7 +103,7 @@
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
-  color: @grayLight;
+  color: @gray-light;
 }
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a:hover,
@@ -186,12 +186,12 @@
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
-  border-left-color: darken(@dropdown-background, 20%);
+  border-left-color: darken(@dropdown-bg, 20%);
   margin-top: 5px;
   margin-right: -10px;
 }
 .dropdown-submenu:hover > a:after {
-  border-left-color: @dropdown-link-color-hover;
+  border-left-color: @dropdown-link-hover-color;
 }
 
 // Left aligned submenus
diff --git a/less/forms.less b/less/forms.less
index 841966bfe..2a1a4e90c 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -23,7 +23,7 @@ legend {
   margin-bottom: @line-height-base;
   font-size: (@font-size-base * 1.5);
   line-height: (@line-height-base * 2);
-  color: @grayDark;
+  color: @gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -62,11 +62,11 @@ input[type="color"] {
   line-height: @line-height-base;
   color: @gray;
   vertical-align: middle;
-  background-color: @input-background;
+  background-color: @input-bg;
   border: 1px solid @input-border;
   border-radius: @input-border-radius;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border linear .2s, box-shadow linear .2s");
+  .transition(~"border-color linear .2s, box-shadow linear .2s");
 }
 
 // Reset appearance properties for textual inputs and textarea
@@ -88,6 +88,11 @@ input[type="checkbox"] {
   width: auto; // Override of generic input selector
 }
 
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+  .box-sizing(border-box);
+}
+
 // Reset height since textareas have rows
 textarea {
   height: auto;
@@ -173,6 +178,7 @@ textarea {
     display: inline;
     margin-bottom: 0;
     font-weight: normal;
+    cursor: pointer;
   }
 }
 
@@ -188,21 +194,24 @@ textarea {
   margin-top: ((@line-height-base / 4) * -1);
 }
 
+/*
 // Move the options list down to align with labels
 .controls > .radio:first-child,
 .controls > .checkbox:first-child {
   padding-top: 5px; // has to be padding because margin collaspes
 }
+*/
 
 // Radios and checkboxes on same line
 .radio-inline,
 .checkbox-inline {
   display: inline-block;
-  padding-top: 5px;
+//  padding-top: 5px;
   padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
   font-weight: normal;
+  cursor: pointer;
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
@@ -286,7 +295,7 @@ textarea {
   &[readonly],
   fieldset[disabled] & {
     cursor: not-allowed;
-    background-color: @input-background-disabled;
+    background-color: @input-bg-disabled;
   }
 }
 // Explicitly reset the colors here
@@ -307,15 +316,15 @@ input[type="checkbox"] {
 
 // Warning
 .has-warning {
-  .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
+  .formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg);
 }
 // Error
 .has-error {
-  .formFieldState(@state-error-text, @state-error-text, @state-error-background);
+  .formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg);
 }
 // Success
 .has-success {
-  .formFieldState(@state-success-text, @state-success-text, @state-success-background);
+  .formFieldState(@state-success-text, @state-success-text, @state-success-bg);
 }
 
 // HTML5 invalid states
@@ -341,9 +350,9 @@ select:focus:invalid {
   padding: (@line-height-base - 1) 20px @line-height-base;
   margin-top: @line-height-base;
   margin-bottom: @line-height-base;
-  background-color: @form-actions-background;
+  background-color: @form-actions-bg;
   border-top: 1px solid #e5e5e5;
-  .clear_float(); // Adding clearfix to allow for .pull-right button containers
+  .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
 
 
@@ -421,7 +430,7 @@ select:focus:invalid {
   line-height: @line-height-base;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
-  background-color: @grayLighter;
+  background-color: @gray-lighter;
   border: 1px solid #ccc;
 
 	&.input-small {
@@ -509,7 +518,7 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .form-horizontal {
 
@@ -517,7 +526,7 @@ select:focus:invalid {
     .control-group {
       position: relative;
       margin-bottom: @line-height-base;
-      .clear_float();
+      .clearfix();
 
       input,
       select,
@@ -539,5 +548,10 @@ select:focus:invalid {
       margin-left: @component-offset-horizontal;
     }
 
+    // Make sure form actions buttons are aligned with controls
+    .form-actions {
+      padding-left: @component-offset-horizontal;
+    }
+
   }
 }
diff --git a/less/glyphicons.less b/less/glyphicons.less
index 6bdae2047..e8a96c05f 100644
--- a/less/glyphicons.less
+++ b/less/glyphicons.less
@@ -26,14 +26,13 @@
        url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
        url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
        url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
-  font-style: normal;
-  font-weight: normal;
 }
 
 // Catchall baseclass
 .glyphicon:before {
   font-family: 'Glyphicons Halflings';
   font-style: normal;
+  font-weight: normal;
   line-height: 1;
 }
 
diff --git a/less/grid.less b/less/grid.less
index 1de1b15f6..6de993c2a 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,38 +12,56 @@
 .row {
   .make-row();
 }
-[class*="col-span-"] {
+
+
+// Common styles for small and large grid columns
+.col {
   position: relative;
+  // Float and set width: 100%; for easy stacking on mobile devices
+  float: left;
+  width: 100%;
+  // Prevent columns from collapsing when empty
   min-height: 1px;
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
+// Generate small grid classes first
+.generate-grid-columns(@grid-columns);
+
+// Then generate the larger grid classes via media query
+@media screen and (min-width: @screen-small) {
+  .generate-large-grid-columns(@grid-columns);
+}
+
+
 // Responsive: Tablets and up
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .container {
     max-width: 728px;
   }
-  // Generate the grid columns and offsets
-  [class*="col-span-"] { float: left; }
-  .generate-grid-columns(@grid-columns);
+  .row {
+    margin-left:  (@grid-gutter-width / -2);
+    margin-right: (@grid-gutter-width / -2);
+  }
 }
 
 // Responsive: Desktops and up
-@media screen and (min-width: 992px) {
+@media screen and (min-width: @screen-desktop) {
   .container {
     max-width: 940px;
   }
 }
 
 // Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: @screen-large-desktop) {
   .container {
     max-width: 1170px;
   }
 }
 
 // Reset utility classes due to specificity
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
diff --git a/less/jumbotron.less b/less/jumbotron.less
index c5d850bf9..39bec9be6 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -6,11 +6,11 @@
 .jumbotron {
   padding: 30px;
   margin-bottom: 30px;
-  font-size: 21px;
+  font-size: (@font-size-base * 1.5);
   font-weight: 200;
   line-height: (@line-height-base * 1.5);
   color: @jumbotron-lead-color;
-  background-color: @jumbotron-background;
+  background-color: @jumbotron-bg;
   h1 {
     line-height: 1;
     color: @jumbotron-heading-color;
@@ -20,13 +20,13 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .jumbotron {
     padding: 50px 60px;
-    border-radius: 6px; // Only round corners at higher resolutions
+    border-radius: @border-radius-large; // Only round corners at higher resolutions
 
     h1 {
-      font-size: 60px;
+      font-size: (@font-size-base * 4.5);
     }
   }
 }
diff --git a/less/labels.less b/less/labels.less
index 2592d0444..92fe8f89e 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -2,45 +2,69 @@
 // Labels
 // --------------------------------------------------
 
-
-// Base classes
 .label {
+  display: inline;
   padding: .25em .6em;
   font-size: 75%;
   font-weight: 500;
-  color: #fff;
   line-height: 1;
-  vertical-align: middle;
-  white-space: nowrap;
+  color: #fff;
   text-align: center;
-  background-color: @grayLight;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: @gray-light;
   border-radius: .25em;
-}
 
-// Hover state, but only for links
-a.label {
-  &:hover,
-  &:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
+  // Add hover effects, but only for links 
+  &[href] {
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+      cursor: pointer;
+      background-color: darken(@gray-light, 10%);
+    }
   }
 }
 
 // Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.label {
-  // Danger (red)
-  &-danger            { background-color: @label-danger-background; }
-  &-danger[href]      { background-color: darken(@label-danger-background, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: @label-warning-background; }
-  &-warning[href]     { background-color: darken(@label-warning-background, 10%); }
-  // Success (green)
-  &-success           { background-color: @label-success-background; }
-  &-success[href]     { background-color: darken(@label-success-background, 10%); }
-  // Info (turquoise)
-  &-info              { background-color: @label-info-background; }
-  &-info[href]        { background-color: darken(@label-info-background, 10%); }
+// Contextual variations (linked labels get darker on :hover)
+.label-danger {
+  background-color: @label-danger-bg;
+  &[href] {
+    &:hover, 
+    &:focus {
+      background-color: darken(@label-danger-bg, 10%);
+    }
+  }
+}
+
+.label-success {
+  background-color: @label-success-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-success-bg, 10%);
+    }
+  }
 }
 
+.label-warning {
+  background-color: @label-warning-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-warning-bg, 10%);
+    }
+  }
+}
+
+.label-info {
+  background-color: @label-info-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-info-bg, 10%);
+    }
+  }
+}
+\ No newline at end of file
diff --git a/less/list-group.less b/less/list-group.less
new file mode 100644
index 000000000..d37027d50
--- /dev/null
+++ b/less/list-group.less
@@ -0,0 +1,96 @@
+//
+// List groups
+// --------------------------------------------------
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+.list-group {
+  // No need to set list-style: none; since .list-group-item is block level
+  margin: 0 0 20px; // reset all margins because ul and ol
+  background-color: @list-group-bg;
+}
+
+// Individual list items
+// -------------------------
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 30px 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  border: 1px solid @list-group-border;
+}
+// Round the first and last items
+.list-group-item:first-child {
+  .border-top-radius(@border-radius-base);
+}
+.list-group-item:last-child {
+  margin-bottom: 0;
+  .border-bottom-radius(@border-radius-base);
+}
+
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+// Linked list items
+// -------------------------
+
+// Custom content within linked items
+a.list-group-item {
+  .list-group-item-heading {
+    color: #333;
+  }
+  .list-group-item-text {
+    color: #555;
+  }
+}
+
+// Hover state
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: @list-group-hover-bg;
+}
+
+// Active class on item itself, not parent
+a.list-group-item.active {
+  z-index: 2; // Place active items above their siblings for proper border styling
+  color: @list-group-active-text;
+  background-color: @list-group-active-bg;
+  border-color: @list-group-active-border;
+
+  // Force color to inherit for custom content
+  .list-group-item-heading {
+    color: inherit;
+  }
+  .list-group-item-text {
+    color: lighten(@list-group-active-bg, 40%);
+  }
+}
+
+// Chevrons and badges within list items
+// -------------------------
+
+.list-group-item > .badge,
+.list-group-item > .glyphicon-chevron-right {
+  float: right;
+  margin-right: -15px;
+}
+.list-group-item > .glyphicon-chevron-right {
+  margin-right: -15px;
+}
+.list-group-item > .glyphicon + .badge {
+  margin-right: 5px;
+}
diff --git a/less/mixins.less b/less/mixins.less
index 7a993b1ae..2323d1203 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -16,7 +16,7 @@
 //    that are clearfixed.
 // 2. The use of `table` rather than `block` is only necessary if using
 //    `:before` to contain the top-margins of child elements.
-.clear_float() {
+.clearfix() {
   &:before,
   &:after {
     content: " "; /* 1 */
@@ -155,7 +155,6 @@
       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
-  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
 }
 .translate3d(@x, @y, @z) {
   -webkit-transform: translate3d(@x, @y, @z);
@@ -249,20 +248,18 @@
 #gradient {
   .horizontal(@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
     background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
     background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
   }
   .vertical(@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
     background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
     background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
@@ -270,9 +267,8 @@
   .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
     background-color: @endColor;
     background-repeat: repeat-x;
-    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
     background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
     background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
   }
   .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
@@ -280,10 +276,9 @@
     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
     background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
     background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
-    background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
     background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
     background-repeat: no-repeat;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
   }
 
   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
@@ -291,7 +286,6 @@
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
     background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
-    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
@@ -301,7 +295,7 @@
     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
     background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
     background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
-    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
+    background-image: radial-gradient(circle, @innerColor, @outerColor);
     background-repeat: no-repeat;
   }
   .striped(@color: #555, @angle: 45deg) {
@@ -309,7 +303,6 @@
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
     background-image: -webkit-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: -moz-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: -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);
   }
 }
@@ -346,7 +339,7 @@
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: #fff) {
-  height: 1px;
+  height: 2px; // 1px for background, one for border
   margin: ((@line-height-base / 2) - 1) 0;
   overflow: hidden;
   background-color: @top;
@@ -400,31 +393,38 @@
 .container-fixed() {
   margin-right: auto;
   margin-left: auto;
-  .clear_float();
+  .clearfix();
 }
 
 // Make a grid
 
 // Creates a wrapper for a series of columns
 .make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
   // Then clear the floated columns
-  .clear_float();
+  .clearfix();
+
+  // Negative margin nested rows out to align the content of columns
+  .row {
+    margin-left:  (@grid-gutter-width / -2);
+    margin-right: (@grid-gutter-width / -2);
+  }
 }
 // Generate the columns
 .make-column(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
-  }
+  position: relative;
+  // Float and set width: 100%; for easy stacking on mobile devices
+  float: left;
+  width: 100%;
   // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Set inner padding as gutters instead of margin
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: @grid-float-breakpoint) {
+    width: percentage((@columns / @grid-columns));
+  }
 }
 // Generate the column offsets
 .make-column-offset(@columns) {
@@ -445,15 +445,41 @@
 
 
 
-// The Grid
+
+// Small grid columns
 .generate-grid-columns(@grid-columns) {
 
-  // Default columns
-  .col-span-X (@index) when (@index > 0) {
-    .col-span-@{index} { .col-span-(@index); }
-    .col-span-X((@index - 1));
+  .col-sm-X (@index) when (@index > 0) {
+    .col-sm-@{index} { .col-sm-(@index); }
+    .col-sm-X((@index - 1));
+  }
+  .col-sm-X (0) {}
+
+  // Generate columns
+  .col-sm-X(@grid-columns);
+
+  // Apply the styles
+  .col-sm-(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Large grid columns
+.generate-large-grid-columns(@grid-columns) {
+
+  .col-lg-X (@index) when (@index > 0) {
+    .col-lg-@{index} { .col-lg-(@index); }
+    .col-lg-X((@index - 1));
+  }
+  .col-lg-X (0) {}
+
+  // Generate the columns
+  .col-lg-X(@grid-columns);
+
+  // Apply the styles
+  .col-lg-(@columns) {
+    width: percentage((@columns / @grid-columns));
   }
-  .col-span-X(0) {}
 
   // Offsets (gaps between columns)
   .col-offset-X (@index) when (@index > 0) {
@@ -477,9 +503,6 @@
   .col-pull-X (0) {}
 
   // Apply the styles
-  .col-span-(@columns) {
-    width: percentage((@columns / @grid-columns));
-  }
   .col-offset-(@columns) {
     margin-left: percentage((@columns / @grid-columns));
   }
@@ -491,7 +514,6 @@
   }
 
   // Generate .spanX and .offsetX
-  .col-span-X(@grid-columns);
   .col-offset-X(@grid-columns);
   .col-push-X(@grid-columns);
   .col-pull-X(@grid-columns);
diff --git a/less/modals.less b/less/modals.less
index 9d9baccea..144588a7b 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -74,18 +74,19 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: 9px 15px;
+  padding: @modal-title-padding;
   border-bottom: 1px solid #e5e5e5;
+  min-height: (@modal-title-padding + @modal-title-line-height);
 }
 // Close icon
 .modal-header .close {
-  margin-top: 2px;
+  margin-top: -2px;
 }
 
 // Title text within header
 .modal-title {
   margin: 0;
-  line-height: 30px; // effectively set a min-height for the header
+  line-height: @modal-title-line-height;
 }
 
 // Modal body
@@ -119,7 +120,7 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .modal-dialog {
     left: 50%;
diff --git a/less/navbar.less b/less/navbar.less
index 15f8a2503..d4e5286a5 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -5,43 +5,45 @@
 // Wrapper and base class
 .navbar {
   position: relative;
-  padding: 10px 15px;
+  margin-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
   background-color: @navbar-bg;
   border-radius: @border-radius-base;
+
   // Prevent floats from breaking the navbar
-  .clear_float();
+  .clearfix();
 }
 
 // Navbar nav links
 // -------------------------
 
-.navbar {
-  .nav {
-    // space out from .navbar .brand and .btn-navbar
-    margin-top: 15px;
-  }
-  .nav > li > a {
+.navbar-nav {
+  // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
+  margin-top: 5px;
+
+  > li > a {
     padding-top: ((@navbar-height - @line-height-base) / 2);
     padding-bottom: ((@navbar-height - @line-height-base) / 2);
     color: @navbar-link-color;
     line-height: 20px;
   }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
-    color: @navbar-link-color-hover;
-    background-color: @navbar-link-bg-hover;
+  > li > a:hover,
+  > li > a:focus {
+    color: @navbar-link-hover-color;
+    background-color: @navbar-link-hover-bg;
   }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
-    color: @navbar-link-color-active;
-    background-color: @navbar-link-bg-active;
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    color: @navbar-link-active-color;
+    background-color: @navbar-link-active-bg;
   }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
-    color: @navbar-link-color-disabled;
-    background-color: @navbar-link-bg-disabled;
+  > .disabled > a,
+  > .disabled > a:hover,
+  > .disabled > a:focus {
+    color: @navbar-link-disabled-color;
+    background-color: @navbar-link-disabled-bg;
   }
 }
 
@@ -65,8 +67,13 @@
   z-index: @zindex-navbar-fixed;
   border-radius: 0;
 }
-.navbar-fixed-top    { top: 0; }
-.navbar-fixed-bottom { bottom: 0; }
+.navbar-fixed-top {
+  top: 0;
+}
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0; // override .navbar defaults
+}
 
 
 
@@ -80,17 +87,17 @@
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 7px 15px;
-  font-size: 18px;
+  padding: 15px;
+  font-size: @font-size-large;
   font-weight: 500;
   line-height: @line-height-base;
   color: @navbar-brand-color;
   text-align: center;
   &:hover,
   &:focus {
-    color: @navbar-brand-color-hover;
+    color: @navbar-brand-hover-color;
     text-decoration: none;
-    background-color: @navbar-brand-bg-hover;
+    background-color: @navbar-brand-hover-bg;
   }
 }
 
@@ -122,11 +129,6 @@
   }
 }
 
-// Dividers in navbar
-.navbar .nav > .divider {
-  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
-}
-
 // Navbar form
 .navbar-form {
   .navbar-vertical-align(34px); // Vertically center in navbar
@@ -135,32 +137,32 @@
 // Dropdown menus
 
 // Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 // Dropdown menu items and carets
-.navbar .nav {
+.navbar-nav {
   // Caret should match text color on hover
   li.dropdown > a:hover .caret,
   li.dropdown > a:focus .caret {
-    border-top-color: @navbar-link-color-hover;
-    border-bottom-color: @navbar-link-color-hover;
+    border-top-color: @navbar-link-hover-color;
+    border-bottom-color: @navbar-link-hover-color;
   }
 
   // Remove background color from open dropdown
   li.dropdown.open > .dropdown-toggle,
   li.dropdown.active > .dropdown-toggle,
   li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbar-link-bg-active;
-    color: @navbar-link-color-active;
+    background-color: @navbar-link-active-bg;
+    color: @navbar-link-active-color;
   }
   li.dropdown > .dropdown-toggle .caret {
     border-top-color: @navbar-link-color;
@@ -169,14 +171,14 @@
   li.dropdown.open > .dropdown-toggle .caret,
   li.dropdown.active > .dropdown-toggle .caret,
   li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbar-link-color-active;
-    border-bottom-color: @navbar-link-color-active;
+    border-top-color: @navbar-link-active-color;
+    border-bottom-color: @navbar-link-active-color;
   }
 }
 
 // Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   left: auto;
   right: 0;
 }
@@ -193,34 +195,36 @@
     color: @navbar-inverse-brand-color;
     &:hover,
     &:focus {
-      color: @navbar-inverse-brand-color-hover;
-      background-color: @navbar-inverse-brand-bg-hover;
+      color: @navbar-inverse-brand-hover-color;
+      background-color: @navbar-inverse-brand-hover-bg;
     }
   }
 
   .navbar-text {
-    color: @navbar-inverse-text;
+    color: @navbar-inverse-color;
   }
 
-  .nav > li > a {
-    color: @navbar-inverse-link-color;
-  }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
-    color: @navbar-inverse-link-color-hover;
-    background-color: @navbar-inverse-link-bg-hover;
-  }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
-    color: @navbar-inverse-link-color-active;
-    background-color: @navbar-inverse-link-bg-active;
-  }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
-    color: @navbar-inverse-link-color-disabled;
-    background-color: @navbar-inverse-link-bg-disabled;
+  .navbar-nav {
+    > li > a {
+      color: @navbar-inverse-link-color;
+    }
+    > li > a:hover,
+    > li > a:focus {
+      color: @navbar-inverse-link-hover-color;
+      background-color: @navbar-inverse-link-hover-bg;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      color: @navbar-inverse-link-active-color;
+      background-color: @navbar-inverse-link-active-bg;
+    }
+    > .disabled > a,
+    > .disabled > a:hover,
+    > .disabled > a:focus {
+      color: @navbar-inverse-link-disabled-color;
+      background-color: @navbar-inverse-link-disabled-bg;
+    }
   }
 
   // Darken the responsive nav toggle
@@ -235,77 +239,56 @@
     }
   }
 
-  // Darken dividers
-  .nav > .divider {
-    background-color: darken(@navbar-inverse-bg, 5%);
-    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
-  }
-
   // Dropdowns
-  .nav li.dropdown.open > .dropdown-toggle,
-  .nav li.dropdown.active > .dropdown-toggle,
-  .nav li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbar-inverse-link-bg-active;
-    color: @navbar-inverse-link-color-active;
-  }
-  .nav li.dropdown > a:hover .caret {
-    border-top-color: @navbar-inverse-link-color-hover;
-    border-bottom-color: @navbar-inverse-link-color-hover;
-  }
-  .nav li.dropdown > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-color;
-    border-bottom-color: @navbar-inverse-link-color;
-  }
-  .nav li.dropdown.open > .dropdown-toggle .caret,
-  .nav li.dropdown.active > .dropdown-toggle .caret,
-  .nav li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-color-active;
-    border-bottom-color: @navbar-inverse-link-color-active;
+  .navbar-nav {
+    li.dropdown.open > .dropdown-toggle,
+    li.dropdown.active > .dropdown-toggle,
+    li.dropdown.open.active > .dropdown-toggle {
+      background-color: @navbar-inverse-link-active-bg;
+      color: @navbar-inverse-link-active-color;
+    }
+    li.dropdown > a:hover .caret {
+      border-top-color: @navbar-inverse-link-hover-color;
+      border-bottom-color: @navbar-inverse-link-hover-color;
+    }
+    li.dropdown > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-color;
+      border-bottom-color: @navbar-inverse-link-color;
+    }
+    li.dropdown.open > .dropdown-toggle .caret,
+    li.dropdown.active > .dropdown-toggle .caret,
+    li.dropdown.open.active > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-active-color;
+      border-bottom-color: @navbar-inverse-link-active-color;
+    }
+
   }
 }
 
 
 
-// Inverse navbar
+// Responsive navbar
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+@media screen and (min-width: @screen-tablet) {
+
   .navbar-brand {
     float: left;
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
-    margin-left: -10px;
+    margin-left: -5px;
+    margin-right: 5px;
   }
   .navbar .nav {
     float: left;
     margin-top: 0; // undo top margin to make nav extend full height of navbar
-    .clear_float();
+
+    > li {
+      float: left;
+    }
 
     &.pull-right {
       float: right;
     }
   }
-  .navbar .nav > li {
-    float: left;
-  }
-
-  // Dividers go vertical
-  // Change the height and height, disable bottom border, then add right border
-  .navbar .nav > .divider {
-    width: 1px;
-    height: (@navbar-height * .6);
-    margin: (@navbar-height * .2) 9px;
-    border-bottom: 0;
-    border-right: 1px solid lighten(@navbar-bg, 5%);
-  }
-  // Since we override the border, we need to specify it again for inverted navbars
-  .navbar-inverse .nav > .divider {
-    border-right-color: lighten(@navbar-inverse-bg, 5%);
-  }
 
   // Required to make the collapsing navbar work on regular desktops
   .navbar-toggle {
@@ -321,59 +304,44 @@
 
 }
 
-/*
 
-// Janky solution for now to account for links outside the .nav
-// -------------------------
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+  margin-top: ((@navbar-height - @input-height-base) / 2);
+}
+
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+
+}
+
+
+
+// Links in navbars
+//
+// Add a class to ensure links outside the navbar nav are colored correctly.
+
+// Default navbar variables
 .navbar-link {
   color: @navbar-link-color;
   &:hover {
-    color: @navbar-link-color-hover;
+    color: @navbar-link-hover-color;
   }
 }
 
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
-  .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn {
-  margin-top: 0; // then undo the margin here so we don't accidentally double it
-}
-
-// Navbar forms
-// -------------------------
-.navbar-form {
-  margin-bottom: 0; // remove default bottom margin
-  .clearfix();
-  input,
-  select,
-  .radio,
-  .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
-  }
-  input,
-  select,
-  .btn {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-  input[type="image"],
-  input[type="checkbox"],
-  input[type="radio"] {
-    margin-top: 3px;
-  }
-  .input-append,
-  .input-prepend {
-    margin-top: 5px;
-    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
-    input {
-      margin-top: 0; // remove the margin on top since it's on the parent
-    }
+// Use the inverse navbar variables
+.navbar-inverse .navbar-link {
+  color: @navbar-inverse-link-color;
+  &:hover {
+    color: @navbar-inverse-link-hover-color;
   }
 }
-
-*/
diff --git a/less/navs.less b/less/navs.less
index 33b5ec3fe..8daeb6fd9 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -11,26 +11,54 @@
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
-  .clear_float();
-}
-.nav > li {
-  display: block;
-}
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-  background-color: @grayLighter;
-}
+  .clearfix();
+  > li {
+    display: block;
+    > a {
+      position: relative;
+      display: block;
+      padding: 10px 15px;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: @gray-lighter;
+      }
+    }
+
+    // Nav states and addons
+    // --------------------------------------------------
+
+    // Disabled state
+    // -------------------------
+
+    // Gray out text
+    &.disabled > a {
+      color: @gray-light;
+    }
+    // Nuke hover effects
+    &.disabled > a:hover,
+    &.disabled > a:focus {
+      color: @gray-light;
+      text-decoration: none;
+      background-color: transparent;
+      cursor: default;
+    }
+    // Space the headers out when they follow another list item (link)
+    &+ .nav-header {
+      margin-top: 9px;
+    }
+  }
+
+  // Redeclare pull classes because of specifity
+  // Todo: consider making these utilities !important to avoid this bullshit
+  > .pull-right {
+    float: right;
+  }
 
-// Redeclare pull classes because of specifity
-// Todo: consider making these utilities !important to avoid this bullshit
-.nav > .pull-right {
-  float: right;
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    .nav-divider();
+  }
 }
 
 
@@ -44,123 +72,112 @@
 // Give the tabs something to sit on
 .nav-tabs {
   border-bottom: 1px solid #ddd;
-}
-.nav-tabs > li {
-  float: left;
-  // Make the list-items overlay the bottom border
-  margin-bottom: -1px;
-}
-// Actual tabs (as links)
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: @line-height-base;
-  border: 1px solid transparent;
-  border-radius: @border-radius-base @border-radius-base 0 0;
-  &:hover {
-    border-color: @grayLighter @grayLighter #ddd;
+  > li {
+    float: left;
+    // Make the list-items overlay the bottom border
+    margin-bottom: -1px;
+
+    // Actual tabs (as links)
+    > a {
+      margin-right: 2px;
+      line-height: @line-height-base;
+      border: 1px solid transparent;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+      &:hover {
+        border-color: @gray-lighter @gray-lighter #ddd;
+      }
+    }
+
+    // Active state, and it's :hover to override normal :hover
+    &.active > a,
+    &.active > a:hover,
+    &.active > a:focus {
+      color: @gray;
+      background-color: @body-bg;
+      border: 1px solid #ddd;
+      border-bottom-color: transparent;
+      cursor: default;
+    }
+  }
+  // pulling this in mainly for less shorthand
+  &.nav-justified {
+    .nav-justified;
+    .nav-tabs-justified;
   }
 }
-// Active state, and it's :hover to override normal :hover
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
-  color: @gray;
-  background-color: @body-background;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
+
 
 // Pills
 // -------------------------
-
-.nav-pills > li {
-  float: left;
-}
-
-// Links rendered as pills
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-.nav-pills > li + li > a {
-  margin-left: 2px;
+.nav-pills {
+  > li {
+    float: left;
+
+    // Links rendered as pills
+    > a {
+      border-radius: 5px;
+    }
+    + li {
+      > a {
+        margin-left: 2px;
+      }
+    }
+
+    // Active state
+    &.active > a,
+    &.active > a:hover,
+    &.active > a:focus {
+      color: #fff;
+      background-color: @component-active-bg;
+    }
+  }
 }
 
-// Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover,
-.nav-pills > .active > a:focus {
-  color: #fff;
-  background-color: @link-color;
-}
 
 // Stacked pills
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0; // no need for this gap between nav items
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      > a {
+        margin-top: 2px;
+        margin-left: 0; // no need for this gap between nav items
+      }
+    }
+  }
 }
 
 // Justified nav links
 // -------------------------
 
 .nav-justified {
-  // Negative margin doesn't work, so we hack it
-  max-height: 40px;
-}
-.nav-justified > li {
-  float: none;
-  display: table-cell;
-  width: 1%;
-  text-align: center;
-}
-
-// Lists
-// -------------------------
-
-.nav-list > li > a {
-  margin-bottom: -1px; // pull up the following link for a 1px border between
-  border: 1px solid #e5e5e5;
-}
-.nav-list > li:first-child > a {
-   border-top-left-radius: @border-radius-base;
-  border-top-right-radius: @border-radius-base;
-}
-.nav-list > li:last-child > a {
-   border-bottom-left-radius: @border-radius-base;
-  border-bottom-right-radius: @border-radius-base;
-}
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
-  z-index: 2; // Bring active item forward so border sits on top of next element
-  color: #fff;
-  background-color: @link-color;
-  border-color: @link-color;
+  width: 100%;
+  > li {
+    float: none;
+    display: table-cell;
+    width: 1%;
+    > a {
+      text-align: center;
+    }
+  }
 }
 
+// Move borders to anchors instead of bottom of list
+.nav-tabs-justified () {
+  border-bottom: 0;
+  > li > a {
+    border-bottom: 1px solid #ddd;
 
+    // Override margin from .nav-tabs
+    margin-right: 0;
+  }
+  > .active > a {
+    border-bottom-color: @body-bg;
+  }
 
-// Nav states and addons
-// --------------------------------------------------
+}
 
-// Disabled state
-// -------------------------
 
-// Gray out text
-.nav > .disabled > a {
-  color: @grayLight;
-}
-// Nuke hover effects
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
-  color: @grayLight;
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
-}
 
 // Nav headers (for dropdowns and lists)
 // -------------------------
@@ -168,22 +185,13 @@
 .nav-header {
   display: block;
   padding: 3px 15px;
-  font-size: 11px;
+  font-size: @font-size-mini;
   font-weight: bold;
   line-height: @line-height-base;
-  color: @grayLight;
+  color: @gray-light;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
 }
-// Space them out when they follow another list item (link)
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-// Dividers (basically an hr) within the dropdown
-.nav .divider {
-  .nav-divider();
-}
 
 
 
@@ -231,8 +239,8 @@
   margin-top: 8px;
 }
 .nav .dropdown-toggle:hover .caret {
-  border-top-color: @link-color-hover;
-  border-bottom-color: @link-color-hover;
+  border-top-color: @link-hover-color;
+  border-bottom-color: @link-hover-color;
 }
 
 // Active dropdown links
@@ -258,8 +266,8 @@
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
   color: #fff;
-  background-color: @grayLight;
-  border-color: @grayLight;
+  background-color: @gray-light;
+  border-color: @gray-light;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
@@ -271,7 +279,7 @@
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover {
-  border-color: @grayLight;
+  border-color: @gray-light;
 }
 
 */
diff --git a/less/pager.less b/less/pager.less
index 89ce70c29..cc1947a91 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -7,37 +7,48 @@
   margin: @line-height-base 0;
   list-style: none;
   text-align: center;
-  .clear_float();
-}
-.pager li {
-  display: inline;
-}
-.pager li > a,
-.pager li > span {
-  display: inline-block;
-  padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 15px;
-}
-.pager li > a:hover,
-.pager li > a:focus {
-  text-decoration: none;
-  background-color: #f5f5f5;
-}
-.pager .next > a,
-.pager .next > span {
-  float: right;
-}
-.pager .previous > a,
-.pager .previous > span {
-  float: left;
+  .clearfix();
+  li {
+    display: inline;
+    > a,
+    > span {
+      display: inline-block;
+      padding: 5px 14px;
+      background-color: @pagination-bg;
+      border: 1px solid @pagination-border;
+      border-radius: 15px;
+    }
+
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      background-color: @pagination-active-bg;
+    }
+  }
+
+  .next {
+    > a,
+    > span {
+      float: right;
+    }
+  }
+
+  .previous {
+    > a,
+    > span {
+      float: left;
+    }
+  }
+
+  .disabled {
+    > a,
+    > a:hover,
+    > a:focus,
+    > span {
+      color: @gray-light;
+      background-color: @pagination-bg;
+      cursor: default;
+    }
+  }
+
 }
-.pager .disabled > a,
-.pager .disabled > a:hover,
-.pager .disabled > a:focus,
-.pager .disabled > span {
-  color: @grayLight;
-  background-color: #fff;
-  cursor: default;
-}
-\ No newline at end of file
diff --git a/less/pagination.less b/less/pagination.less
index 4cb4767cf..bb44fa8cf 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -15,7 +15,7 @@
   padding: 4px 12px;
   line-height: @line-height-base;
   text-decoration: none;
-  background-color: @pagination-background;
+  background-color: @pagination-bg;
   border: 1px solid @pagination-border;
   border-left-width: 0;
 }
@@ -23,19 +23,19 @@
 .pagination > li > a:focus,
 .pagination > .active > a,
 .pagination > .active > span {
-  background-color: @pagination-background-active;
+  background-color: @pagination-active-bg;
 }
 .pagination > .active > a,
 .pagination > .active > span {
-  color: @grayLight;
+  color: @gray-light;
   cursor: default;
 }
 .pagination > .disabled > span,
 .pagination > .disabled > a,
 .pagination > .disabled > a:hover,
 .pagination > .disabled > a:focus {
-  color: @grayLight;
-  background-color: @pagination-background;
+  color: @gray-light;
+  background-color: @pagination-bg;
   cursor: default;
 }
 .pagination > li:first-child > a,
diff --git a/less/panels.less b/less/panels.less
new file mode 100644
index 000000000..0d5a07ad4
--- /dev/null
+++ b/less/panels.less
@@ -0,0 +1,86 @@
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: @panel-bg;
+  border: 1px solid @panel-border;
+  border-radius: @panel-border-radius;
+  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+}
+
+// Optional heading
+.panel-heading {
+  margin: -15px -15px 15px;
+  padding: 10px 15px;
+  font-size: (@font-size-base * 1.25);
+  font-weight: 500;
+  background-color: @panel-heading-bg;
+  border-bottom: 1px solid @panel-border;
+  border-top-left-radius:  (@panel-border-radius - 1);
+  border-top-right-radius: (@panel-border-radius - 1);
+}
+
+// Contextual variations
+.panel-primary {
+  border-color: @panel-primary-border;
+  .panel-heading {
+    color: @panel-primary-text;
+    background-color: @panel-primary-heading-bg;
+    border-color: @panel-primary-border;
+  }
+}
+.panel-success {
+  border-color: @panel-success-border;
+  .panel-heading {
+    color: @panel-success-text;
+    background-color: @panel-success-heading-bg;
+    border-color: @panel-success-border;
+  }
+}
+.panel-warning {
+  border-color: @panel-warning-border;
+  .panel-heading {
+    color: @panel-warning-text;
+    background-color: @panel-warning-heading-bg;
+    border-color: @panel-warning-border;
+  }
+}
+.panel-danger {
+  border-color: @panel-danger-border;
+  .panel-heading {
+    color: @panel-danger-text;
+    background-color: @panel-danger-heading-bg;
+    border-color: @panel-danger-border;
+  }
+}
+.panel-info {
+  border-color: @panel-info-border;
+  .panel-heading {
+    color: @panel-info-text;
+    background-color: @panel-info-heading-bg;
+    border-color: @panel-info-border;
+  }
+}
+
+// List groups in panels
+.list-group-flush {
+  margin: 15px -15px -15px;
+
+  .list-group-item {
+    border-width: 1px 0;
+
+    // Remove border radius for top one
+    &:first-child {
+      .border-top-radius(0);
+    }
+    // But keep it for the last one
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/less/popovers.less b/less/popovers.less
index feca92ad3..fb16d79d6 100644
--- a/less/popovers.less
+++ b/less/popovers.less
@@ -12,9 +12,9 @@
   max-width: 276px;
   padding: 1px;
   text-align: left; // Reset given new insertion method
-  background-color: @popover-background;
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
+  background-color: @popover-bg;
+  -webkit-bg-clip: padding-box;
+     -moz-bg-clip: padding;
           background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.2);
@@ -34,11 +34,11 @@
 .popover-title {
   margin: 0; // reset heading margin
   padding: 8px 14px;
-  font-size: 14px;
+  font-size: @font-size-base;
   font-weight: normal;
   line-height: 18px;
-  background-color: @popover-title-background;
-  border-bottom: 1px solid darken(@popover-title-background, 5%);
+  background-color: @popover-title-bg;
+  border-bottom: 1px solid darken(@popover-title-bg, 5%);
   border-radius: 5px 5px 0 0;
 
   &:empty {
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 5f62ae279..e5e6b65a5 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -56,13 +56,14 @@
   float: left;
   width: 0%;
   height: 100%;
-  font-size: 12px;
+  font-size: @font-size-small;
   color: #fff;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @progress-bar-bg;
   .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
   .transition(width .6s ease);
+  .backface-visibility(hidden);
 }
 
 // Striped bars
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index bf43e8ef7..c69851bb9 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -5,11 +5,27 @@
 
 // IE10 Metro responsive
 // Required for Windows 8 Metro split-screen snapping with IE10
+//
 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
 @-ms-viewport{
   width: device-width;
 }
 
+// IE10 on Windows Phone 8
+// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
+// other words, say on a Lumia, you'll get 768px as the device width,
+// meaning users will see the tablet styles and not phone styles.
+//
+// Alternatively you can override this with JS (see source below), but
+// we won't be doing that here given our limited scope.
+//
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+@media screen and (max-width: 400px) {
+  @-ms-viewport{
+    width: 320px;
+  }
+}
+
 // Hide from screenreaders and browsers
 // Credit: HTML5 Boilerplate
 .hidden {
@@ -19,34 +35,36 @@
 
 // Visibility utilities
 
-// For desktops
-.visible-phone     { display: none !important; }
+// For Phones
+.visible-phone     { display: inherit !important; }
 .visible-tablet    { display: none !important; }
-.hidden-phone      { }
-.hidden-tablet     { }
-.hidden-desktop    { display: none !important; }
-.visible-desktop   { display: inherit !important; }
+.visible-desktop   { display: none !important; }
+
+.hidden-phone      { display: none !important; }
+.hidden-tablet     { display: inherit !important; }
+.hidden-desktop    { display: inherit !important; }
+
 
 // Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important ; }
-  // Show
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  .visible-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
-  // Hide
+  .visible-desktop   { display: none !important; }
+
+  .hidden-phone      { display: inherit !important; }
   .hidden-tablet     { display: none !important; }
+  .hidden-desktop    { display: inherit !important; }
 }
 
-// Phones only
-@media (max-width: 767px) {
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important; }
-  // Show
-  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
-  // Hide
-  .hidden-phone      { display: none !important; }
+// For desktops
+@media (min-width: @screen-desktop) {
+  .visible-phone     { display: none !important; }
+  .visible-tablet    { display: none !important; }
+  .visible-desktop   { display: inherit !important; }
+
+  .hidden-phone      { display: inherit !important; }
+  .hidden-tablet     { display: inherit !important; }
+  .hidden-desktop    { display: none !important; }
 }
 
 // Print utilities
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 633222ed8..6781a9582 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -22,7 +22,7 @@ html {
 }
 
 // Disable iOS/WinMobile font size changes
-@media screen and (max-device-width: 480px) {
+@media screen and (max-device-width: @screen-phone) {
   html {
     -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
@@ -31,10 +31,10 @@ html {
 
 body {
   font-family: @font-family-base;
-  .font-size();
+  font-size: @font-size-base;
   line-height: @line-height-base;
   color: @text-color;
-  background-color: @body-background;
+  background-color: @body-bg;
 }
 
 // Reset fonts for revelant elements
@@ -57,7 +57,7 @@ a {
 }
 a:hover,
 a:focus {
-  color: @link-color-hover;
+  color: @link-hover-color;
   text-decoration: underline;
 }
 a:focus {
@@ -71,7 +71,6 @@ a:focus {
 img {
   // Responsive images (ensure images don't scale beyond their parents)
   max-width: 100%; // Part 1: Set a maxium relative to the parent
-  width: auto\9; // IE8 need help adjusting responsive images
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 
   // Match vertical alignment with other comment elements
diff --git a/less/tables.less b/less/tables.less
index f70d46396..5c8fe82ad 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -5,9 +5,7 @@
 
 table {
   max-width: 100%;
-  background-color: @table-background;
-  border-collapse: collapse;
-  border-spacing: 0;
+  background-color: @table-bg;
 }
 th {
   text-align: left;
@@ -21,15 +19,17 @@ th {
   width: 100%;
   margin-bottom: @line-height-base;
   // Cells
-  th,
-  td {
+  thead > tr > th,
+  tbody > tr > th,
+  thead > tr > td,
+  tbody > tr > td {
     padding: 8px;
     line-height: @line-height-base;
     vertical-align: top;
-    border-top: 1px solid @table-border;
+    border-top: 1px solid @table-border-color;
   }
   // Bottom align for column headings
-  thead th {
+  thead > tr > th {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
@@ -43,12 +43,12 @@ th {
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid @table-border;
+    border-top: 2px solid @table-border-color;
   }
 
   // Nesting
   .table {
-    background-color: @body-background;
+    background-color: @body-bg;
   }
 }
 
@@ -58,8 +58,10 @@ th {
 // -------------------------------
 
 .table-condensed {
-  th,
-  td {
+  thead > tr > th,
+  tbody > tr > th,
+  thead > tr > td,
+  tbody > tr > td {
     padding: 4px 5px;
   }
 }
@@ -70,74 +72,77 @@ th {
 // ----------------
 
 .table-bordered {
-  border: 1px solid @table-border;
+  border: 1px solid @table-border-color;
   border-collapse: separate; // Done so we can round those corners!
   border-left: 0;
   border-radius: @border-radius-base;
-  th,
-  td {
-    border-left: 1px solid @table-border;
+
+  > thead > tr > th,
+  > tbody > tr > th,
+  > thead > tr > td,
+  > tbody > tr > td {
+    border-left: 1px solid @table-border-color;
   }
   // 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 {
+  > 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 {
     border-top: 0;
   }
   // For first th/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,
-  tbody:first-child tr:first-child > th:first-child {
+  > thead:first-child > tr:first-child > th:first-child,
+  > tbody:first-child > tr:first-child > td:first-child,
+  > tbody:first-child > tr:first-child > th:first-child {
     border-top-left-radius: @border-radius-base;
   }
   // For last th/td in the first row in the first thead or tbody
-  thead:first-child tr:first-child > th:last-child,
-  tbody:first-child tr:first-child > td:last-child,
-  tbody:first-child tr:first-child > th:last-child {
+  > thead:first-child > tr:first-child > th:last-child,
+  > tbody:first-child > tr:first-child > td:last-child,
+  > tbody:first-child > tr:first-child > th:last-child {
     border-top-right-radius: @border-radius-base;
   }
   // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:first-child,
-  tbody:last-child tr:last-child > td:first-child,
-  tbody:last-child tr:last-child > th:first-child,
-  tfoot:last-child tr:last-child > td:first-child,
-  tfoot:last-child tr:last-child > th:first-child {
+  > thead:last-child > tr:last-child > th:first-child,
+  > tbody:last-child > tr:last-child > td:first-child,
+  > tbody:last-child > tr:last-child > th:first-child,
+  > tfoot:last-child > tr:last-child > td:first-child,
+  > tfoot:last-child > tr:last-child > th:first-child {
     border-bottom-left-radius: @border-radius-base;
   }
   // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:last-child,
-  tbody:last-child tr:last-child > td:last-child,
-  tbody:last-child tr:last-child > th:last-child,
-  tfoot:last-child tr:last-child > td:last-child,
-  tfoot:last-child tr:last-child > th:last-child {
+  > thead:last-child > tr:last-child > th:last-child,
+  > tbody:last-child > tr:last-child > td:last-child,
+  > tbody:last-child > tr:last-child > th:last-child,
+  > tfoot:last-child > tr:last-child > td:last-child,
+  > tfoot:last-child > tr:last-child > th:last-child {
     border-bottom-right-radius: @border-radius-base;
   }
 
   // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
-  tfoot + tbody:last-child tr:last-child > td:first-child {
+  > tfoot + tbody:last-child > tr:last-child > td:first-child {
     border-bottom-left-radius: 0;
   }
-  tfoot + tbody:last-child tr:last-child > td:last-child {
+  > tfoot + tbody:last-child > tr:last-child > td:last-child {
     border-bottom-right-radius: 0;
   }
 
   // Special fixes to round the left border on the first td/th
-  caption + thead tr:first-child th:first-child,
-  caption + tbody tr:first-child td:first-child,
-  colgroup + thead tr:first-child th:first-child,
-  colgroup + tbody tr:first-child td:first-child {
+  > caption + thead > tr:first-child > th:first-child,
+  > caption + tbody > tr:first-child > td:first-child,
+  > colgroup + thead > tr:first-child > th:first-child,
+  > colgroup + tbody > tr:first-child > td:first-child {
     border-top-left-radius: @border-radius-base;
   }
-  caption + thead tr:first-child th:last-child,
-  caption + tbody tr:first-child td:last-child,
-  colgroup + thead tr:first-child th:last-child,
-  colgroup + tbody tr:first-child td:last-child {
+  > caption + thead > tr:first-child > th:last-child,
+  > caption + tbody > tr:first-child > td:last-child,
+  > colgroup + thead > tr:first-child > th:last-child,
+  > colgroup + tbody > tr:first-child > td:last-child {
     border-top-right-radius: @border-radius-base;
   }
 
@@ -153,7 +158,7 @@ th {
   > tbody {
     > tr:nth-child(odd) > td,
     > tr:nth-child(odd) > th {
-      background-color: @table-background-accent;
+      background-color: @table-bg-accent;
     }
   }
 }
@@ -168,7 +173,7 @@ th {
   > tbody {
     > tr:hover > td,
     > tr:hover > th {
-      background-color: @table-background-hover;
+      background-color: @table-bg-hover;
     }
   }
 }
@@ -197,19 +202,19 @@ table th[class*="col-span-"] {
   > td.success,
   > th.success,
   &.success > td {
-    background-color: @state-success-background;
+    background-color: @state-success-bg;
     border-color: @state-success-border;
   }
-  > td.error,
-  > th.error,
-  &.error > td {
-    background-color: @state-error-background;
-    border-color: @state-error-border;
+  > td.danger,
+  > th.danger,
+  &.danger > td {
+    background-color: @state-danger-bg;
+    border-color: @state-danger-border;
   }
   > td.warning,
   > th.warning,
   &.warning > td {
-    background-color: @state-warning-background;
+    background-color: @state-warning-bg;
     border-color: @state-warning-border;
   }
 }
@@ -219,19 +224,19 @@ table th[class*="col-span-"] {
   > td.success:hover,
   > th.success:hover,
   &.success:hover > td {
-    background-color: darken(@state-success-background, 5%);
+    background-color: darken(@state-success-bg, 5%);
     border-color: darken(@state-success-border, 5%);
   }
-  > td.error:hover,
-  > th.error:hover,
-  &.error:hover > td {
-    background-color: darken(@state-error-background, 5%);
-    border-color: darken(@state-error-border, 5%);
+  > td.danger:hover,
+  > th.danger:hover,
+  &.danger:hover > td {
+    background-color: darken(@state-danger-bg, 5%);
+    border-color: darken(@state-danger-border, 5%);
   }
   > td.warning:hover,
   > th.warning:hover,
   &.warning:hover > td {
-    background-color: darken(@state-warning-background, 5%);
+    background-color: darken(@state-warning-bg, 5%);
     border-color: darken(@state-warning-border, 5%);
   }
 }
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 4ea27f517..f31d78617 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -12,8 +12,9 @@
 .img-thumbnail {
   padding: 4px;
   line-height: @line-height-base;
-  border: 1px solid #ddd;
-  border-radius: @border-radius-base;
+  background-color: @thumbnail-bg;
+  border: 1px solid @thumbnail-border;
+  border-radius: @thumbnail-border-radius;
   .transition(all .2s ease-in-out);
 }
 .thumbnail {
@@ -38,5 +39,5 @@ a.thumbnail:focus {
 }
 .thumbnail .caption {
   padding: 9px;
-  color: @gray;
+  color: @thumbnail-caption-color;
 }
diff --git a/less/tooltip.less b/less/tooltip.less
index 5eb6413de..9dba6f04f 100644
--- a/less/tooltip.less
+++ b/less/tooltip.less
@@ -9,7 +9,7 @@
   z-index: @zindex-tooltip;
   display: block;
   visibility: visible;
-  font-size: 11px;
+  font-size: @font-size-mini;
   line-height: 1.4;
   .opacity(0);
 
@@ -27,7 +27,7 @@
   color: @tooltip-color;
   text-align: center;
   text-decoration: none;
-  background-color: @tooltip-background;
+  background-color: @tooltip-bg;
   border-radius: @border-radius-base;
 }
 
diff --git a/less/type.less b/less/type.less
index 193078c72..f6b5eecd5 100644
--- a/less/type.less
+++ b/less/type.less
@@ -11,9 +11,9 @@ p {
 }
 .lead {
   margin-bottom: @line-height-base;
-  .font-size((@font-size-base * 1.5));
+  font-size: (@font-size-base * 1.5);
   font-weight: 200;
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
 
@@ -28,17 +28,17 @@ em      { font-style: italic; }
 cite    { font-style: normal; }
 
 // Utility classes
-.muted               { color: @grayLight; }
-a.muted:hover,
-a.muted:focus        { color: darken(@grayLight, 10%); }
+.text-muted          { color: @gray-light; }
+a.text-muted:hover,
+a.text-muted:focus   { color: darken(@gray-light, 10%); }
 
 .text-warning        { color: @state-warning-text; }
 a.text-warning:hover,
 a.text-warning:focus { color: darken(@state-warning-text, 10%); }
 
-.text-error          { color: @state-error-text; }
-a.text-error:hover,
-a.text-error:focus   { color: darken(@state-error-text, 10%); }
+.text-danger         { color: @state-danger-text; }
+a.text-danger:hover,
+a.text-danger:focus  { color: darken(@state-danger-text, 10%); }
 
 .text-success        { color: @state-success-text; }
 a.text-success:hover,
@@ -57,11 +57,10 @@ h1, h2, h3, h4, h5, h6,
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @line-height-base;
-  text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
     font-weight: normal;
     line-height: 1;
-    color: @grayLight;
+    color: @gray-light;
   }
 }
 
@@ -82,12 +81,12 @@ h6 {
   margin-bottom: (@line-height-base / 2);
 }
 
-h1, .h1 { font-size: (@font-size-base * 2.75); font-size: 4rem; } // ~38px
-h2, .h2 { font-size: (@font-size-base * 2.25); font-size: 3rem; } // ~32px
-h3, .h3 { font-size: (@font-size-base * 1.75); font-size: 2.5rem; } // ~24px
-h4, .h4 { font-size: (@font-size-base * 1.25); font-size: 2rem; } // ~18px
-h5, .h5 { font-size:  @font-size-base; font-size: 1.6rem; }
-h6, .h6 { font-size: (@font-size-base * 0.85); font-size: 1.2rem; } // ~12px
+h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
+h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
+h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
+h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
+h5, .h5 { font-size:  @font-size-base; }
+h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
 
 h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
 h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
@@ -101,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
 .page-header {
   padding-bottom: ((@line-height-base / 2) - 1);
   margin: (@line-height-base * 2) 0 @line-height-base;
-  border-bottom: 1px solid @grayLighter;
+  border-bottom: 1px solid @gray-lighter;
 }
 
 
@@ -126,18 +125,20 @@ li {
 }
 
 // List options
+
 // Unstyled keeps list items block level, just removes list-style
-.list-unstyled,
-// Inline turns list items into inline-block
-.list-inline {
+.list-unstyled {
   margin-left: 0;
   list-style: none;
 }
-// Single-line list items
-.list-inline > li {
-  display: inline-block;
-  padding-left: 5px;
-  padding-right: 5px;
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 // Description Lists
@@ -156,7 +157,7 @@ dd {
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
-  .clear_float(); // Ensure dl clears floats if empty dd elements present
+  .clearfix(); // Ensure dl clears floats if empty dd elements present
   dt {
     float: left;
     width: (@component-offset-horizontal - 20);
@@ -186,7 +187,7 @@ abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted @grayLight;
+  border-bottom: 1px dotted @gray-light;
 }
 abbr.initialism {
   font-size: 90%;
@@ -195,19 +196,21 @@ abbr.initialism {
 
 // Blockquotes
 blockquote {
-  padding: 0 0 0 15px;
+  padding: (@line-height-base/2) @line-height-base;
   margin: 0 0 @line-height-base;
-  border-left: 5px solid @grayLighter;
+  border-left: 5px solid @gray-lighter;
   p {
-    margin-bottom: 0;
     font-size: (@font-size-base * 1.25);
     font-weight: 300;
     line-height: 1.25;
   }
+  p:last-child {
+    margin-bottom: 0;
+  }
   small {
     display: block;
     line-height: @line-height-base;
-    color: @grayLight;
+    color: @gray-light;
     &:before {
       content: '\2014 \00A0';
     }
@@ -218,7 +221,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid @grayLighter;
+    border-right: 5px solid @gray-lighter;
     border-left: 0;
     p,
     small {
diff --git a/less/utilities.less b/less/utilities.less
index f31070710..d296b32c2 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 .clearfix {
-  .clear_float();
+  .clearfix();
 }
 .pull-right {
   float: right;
diff --git a/less/variables.less b/less/variables.less
index 45495a9e1..37d51e16e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -10,11 +10,11 @@
 // Grays
 // -------------------------
 
-@grayDarker:            #222;
-@grayDark:              #333;
-@gray:                  #555;
-@grayLight:             #999;
-@grayLighter:           #eee;
+@gray-darker:            lighten(#000, 13.5%); // #222
+@gray-dark:              lighten(#000, 20%);   // #333
+@gray:                   lighten(#000, 33.5%); // #555
+@gray-light:             lighten(#000, 60%);   // #999
+@gray-lighter:           lighten(#000, 93.5%); // #eee
 
 // Brand colors
 // -------------------------
@@ -28,14 +28,14 @@
 // Scaffolding
 // -------------------------
 
-@body-background:       #fff;
-@text-color:            @grayDark;
+@body-bg:               #fff;
+@text-color:            @gray-dark;
 
 // Links
 // -------------------------
 
-@link-color:            #428bca;
-@link-color-hover:      darken(@link-color, 15%);
+@link-color:            @brand-primary;
+@link-hover-color:      darken(@link-color, 15%);
 
 // Typography
 // -------------------------
@@ -45,7 +45,7 @@
 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          14;
+@font-size-base:          14px;
 @font-size-large:         (@font-size-base * 1.25); // ~18px
 @font-size-small:         (@font-size-base * 0.85); // ~12px
 @font-size-mini:          (@font-size-base * 0.75); // ~11px
@@ -56,7 +56,7 @@
 @headings-font-weight:    500;
 
 
-// Component sizing
+// Components
 // -------------------------
 // Based on 14px font-size and 1.5 line-height
 
@@ -68,78 +68,75 @@
 @border-radius-large:     6px;
 @border-radius-small:     3px;
 
+@component-active-bg:            @brand-primary;
+
 
 // Tables
 // -------------------------
 
-@table-background:                   transparent; // overall background-color
-@table-background-accent:            #f9f9f9; // for striping
-@table-background-hover:             #f5f5f5; // for hover
+@table-bg:                           transparent; // overall background-color
+@table-bg-accent:                    #f9f9f9; // for striping
+@table-bg-hover:                     #f5f5f5; // for hover
 
-@table-border:                       #ddd; // table and cell border
+@table-border-color:                 #ddd; // table and cell border
 
 
 // Buttons
 // -------------------------
 
-@btn-color:                          #fff;
-@btn-background:                     #a7a9aa;
-@btn-border:                         @btn-background;
+@btn-color:                      #fff;
+@btn-bg:                         #a7a9aa;
+@btn-border:                     @btn-bg;
 
-@btn-background-primary:             @brand-primary;
-@btn-border-primary:                 @btn-background-primary;
+@btn-primary-bg:                 @brand-primary;
+@btn-primary-border:             @btn-primary-bg;
 
-@btn-background-success:             @brand-success;
-@btn-border-success:                 @btn-background-success;
+@btn-success-bg:                 @brand-success;
+@btn-success-border:             @btn-success-bg;
 
-@btn-background-warning:             @brand-warning;
-@btn-border-warning:                 @btn-background-warning;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             @btn-warning-bg;
 
-@btn-background-danger:              @brand-danger;
-@btn-border-danger:                  @btn-background-danger;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              @btn-danger-bg;
 
-@btn-background-info:                @brand-info;
-@btn-border-info:                    @btn-background-info;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                @btn-info-bg;
 
 
 
 // Forms
 // -------------------------
 
-@input-background:               #fff;
-@input-background-disabled:      @grayLighter;
+@input-bg:                       #fff;
+@input-bg-disabled:              @gray-lighter;
 
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
-@input-border-radius-search:     20px;
 
-@input-color-placeholder:        @grayLight;
+@input-color-placeholder:        @gray-light;
 
 @input-height-base:              (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
 @input-height-large:             (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
 @input-height-small:             (@line-height-base + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
 
-// adjust min-height on input sizes
-
-
-@form-actions-background:        #f5f5f5;
+@form-actions-bg:                 #f5f5f5;
 
 
 // Dropdowns
 // -------------------------
 
-@dropdown-background:            #fff;
+@dropdown-bg:                    #fff;
 @dropdown-border:                rgba(0,0,0,.15);
 @dropdown-divider-top:           #e5e5e5;
 @dropdown-divider-bottom:        #fff;
 
-@dropdown-link-color:            @grayDark;
-@dropdown-link-color-hover:      #fff;
-@dropdown-link-color-active:     #fff;
-
-@dropdown-link-background-active:  @link-color;
-@dropdown-link-background-hover:   @dropdown-link-background-active;
+@dropdown-link-active-color:     #fff;
+@dropdown-link-active-bg:        @component-active-bg;
 
+@dropdown-link-color:            @gray-dark;
+@dropdown-link-hover-color:      #fff;
+@dropdown-link-hover-bg:         @dropdown-link-active-bg;
 
 
 // COMPONENT VARIABLES
@@ -167,68 +164,63 @@
 // Navbar
 // -------------------------
 
-// Responsive collapsing
-// @navbar-collapse-width:            979px;
-// @navbar-collapse-width-desktop:    @navbar-collapse-width + 1;
-
 // Basics of a navbar
 @navbar-height:                    50px;
-@navbar-text:                      #777;
+@navbar-color:                     #777;
 @navbar-bg:                        #eee;
 
-// Navbar brand label
-@navbar-brand-color:               @navbar-link-color;
-@navbar-brand-color-hover:         darken(@navbar-link-color, 10%);
-@navbar-brand-bg-hover:            transparent;
-
 // Navbar links
 @navbar-link-color:                #777;
-@navbar-link-color-hover:          #333;
-@navbar-link-bg-hover:             transparent;
-@navbar-link-color-active:         #555;
-@navbar-link-bg-active:            darken(@navbar-bg, 10%);
-@navbar-link-color-disabled:       #ccc;
-@navbar-link-bg-disabled:          transparent;
+@navbar-link-hover-color:          #333;
+@navbar-link-hover-bg:             transparent;
+@navbar-link-active-color:         #555;
+@navbar-link-active-bg:            darken(@navbar-bg, 10%);
+@navbar-link-disabled-color:       #ccc;
+@navbar-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-brand-color:               @navbar-link-color;
+@navbar-brand-hover-color:         darken(@navbar-link-color, 10%);
+@navbar-brand-hover-bg:            transparent;
 
 // Inverted navbar
-@navbar-inverse-text:                       @grayLight;
+@navbar-inverse-color:                       @gray-light;
 @navbar-inverse-bg:                         #222;
 
+// Inverted navbar links
+@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-hover-bg:              transparent;
+@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color:        #444;
+@navbar-inverse-link-disabled-bg:           transparent;
+
 // Inverted navbar brand label
 @navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-color-hover:          #fff;
-@navbar-inverse-brand-bg-hover:             transparent;
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 @grayLight;
-@navbar-inverse-link-color-hover:           #fff;
-@navbar-inverse-link-bg-hover:              transparent;
-@navbar-inverse-link-color-active:          @navbar-inverse-link-color-hover;
-@navbar-inverse-link-bg-active:             darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-color-disabled:        #444;
-@navbar-inverse-link-bg-disabled:           transparent;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
 
 // Inverted navbar search
 // Normal navbar needs no special styles or vars
-@navbar-inverse-search-background:          lighten(@navbar-inverse-bg, 25%);
-@navbar-inverse-search-background-focus:    #fff;
+@navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
+@navbar-inverse-search-bg-focus:            #fff;
 @navbar-inverse-search-border:              @navbar-inverse-bg;
 @navbar-inverse-search-placeholder-color:   #ccc;
 
 
-
 // Pagination
 // -------------------------
 
-@pagination-background:                #fff;
-@pagination-background-active:         #f5f5f5;
+@pagination-bg:                        #fff;
 @pagination-border:                    #ddd;
+@pagination-active-bg:                 #f5f5f5;
 
 
 // Jumbotron
 // -------------------------
 
-@jumbotron-background:           @grayLighter;
+@jumbotron-bg:                   @gray-lighter;
 @jumbotron-heading-color:        inherit;
 @jumbotron-lead-color:           inherit;
 
@@ -237,33 +229,33 @@
 // -------------------------
 
 @state-warning-text:             #c09853;
-@state-warning-background:       #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-background, -10), 3%);
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);
 
-@state-error-text:               #b94a48;
-@state-error-background:         #f2dede;
-@state-error-border:             darken(spin(@state-error-background, -10), 3%);
+@state-danger-text:              #b94a48;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);
 
 @state-success-text:             #468847;
-@state-success-background:       #dff0d8;
-@state-success-border:           darken(spin(@state-success-background, -10), 5%);
+@state-success-bg:               #dff0d8;
+@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 
 @state-info-text:                #3a87ad;
-@state-info-background:          #d9edf7;
-@state-info-border:              darken(spin(@state-info-background, -10), 7%);
+@state-info-bg:                  #d9edf7;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
 
 
 // Tooltips and popovers
 // -------------------------
 @tooltip-color:               #fff;
-@tooltip-background:          rgba(0,0,0,.9);
+@tooltip-bg:                  rgba(0,0,0,.9);
 @tooltip-arrow-width:         5px;
-@tooltip-arrow-color:         @tooltip-background;
+@tooltip-arrow-color:         @tooltip-bg;
 
-@popover-background:          #fff;
+@popover-bg:                  #fff;
 @popover-arrow-width:         10px;
 @popover-arrow-color:         #fff;
-@popover-title-background:    darken(@popover-background, 3%);
+@popover-title-bg:            darken(@popover-bg, 3%);
 
 // Special enhancement for popovers
 @popover-arrow-outer-width:   (@popover-arrow-width + 1);
@@ -272,17 +264,38 @@
 
 // Labels
 // -------------------------
-@label-success-background:    @brand-success;
-@label-info-background:       @brand-info;
-@label-warning-background:    @brand-warning;
-@label-danger-background:     @brand-danger;
+@label-success-bg:            @brand-success;
+@label-info-bg:               @brand-info;
+@label-warning-bg:            @brand-warning;
+@label-danger-bg:             @brand-danger;
 
 
 // Modals
 // -------------------------
-
 @modal-inner-padding:         20px;
 
+@modal-title-padding:         15px;
+@modal-title-line-height:     @line-height-base;
+
+// Alerts
+// -------------------------
+@alert-bg:                    @state-warning-bg;
+@alert-text:                  @state-warning-text;
+@alert-border:                @state-warning-border;
+@alert-border-radius:         @border-radius-base;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
 
 // Progress bars
 // -------------------------
@@ -294,23 +307,98 @@
 @progress-bar-info-bg:        @brand-info;
 
 
+// List group
+// -------------------------
+@list-group-bg:               #fff;
+@list-group-border:           #ddd;
+@list-group-border-radius:    @border-radius-base;
+
+@list-group-hover-bg:         #f5f5f5;
+@list-group-active-text:      #fff;
+@list-group-active-bg:        @component-active-bg;
+@list-group-active-border:    @list-group-active-bg;
+
+// Panels
+// -------------------------
+@panel-bg:                    #fff;
+@panel-border:                #ddd;
+@panel-border-radius:         @border-radius-base;
+@panel-heading-bg:            #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        @brand-primary;
+@panel-primary-heading-bg:    @brand-primary;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-bg;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-bg;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-bg;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
+
+// Thumbnails
+// -------------------------
+@thumbnail-caption-color:     @text-color;
+@thumbnail-bg:                @body-bg;
+@thumbnail-border:            #ddd;
+@thumbnail-border-radius:     @border-radius-base;
+
+
+// Wells
+// -------------------------
+@well-bg:                     #f5f5f5;
+
+
 // Miscellaneous
 // -------------------------
 
 // Hr border color
-@hr-border:                   @grayLighter;
+@hr-border:                   @gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
 
-// Wells
-@well-background:             #f5f5f5;
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Tiny screen / phone
+@screen-tiny:                480px;
+@screen-phone:               @screen-tiny;
+
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          @screen-small-max;
+
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
 
 
 // Grid system
 // --------------------------------------------------
 
+// Number of columns in the grid system
 @grid-columns:              12;
+// Padding, to be divided by two and applied to the left and right of all columns
 @grid-gutter-width:         30px;
-@grid-float-breakpoint:     768px;
+// Point at which the navbar stops collapsing
+@grid-float-breakpoint:     @screen-tablet;
diff --git a/less/wells.less b/less/wells.less
index 23cd13bfb..6a909f44b 100644
--- a/less/wells.less
+++ b/less/wells.less
@@ -8,8 +8,8 @@
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: @well-background;
-  border: 1px solid darken(@well-background, 7%);
+  background-color: @well-bg;
+  border: 1px solid darken(@well-bg, 7%);
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {
author	Ivan Khalopik <[email protected]>	2013-05-07 15:16:45 +0300
committer	Ivan Khalopik <[email protected]>	2013-05-07 15:16:45 +0300
commit	3c7a43a1f373d0c534476578b96a75ae2e63c985 (patch)
tree	f11fa18c33d1a65ae4422dc3c352c34a2b323b8c /less
parent	41c782567775d3bbcfc62d163ae22a531277b5e2 (diff)
parent	b352f98f325adbd994f01cb94f4d0a454783bbce (diff)
download	bootstrap-3c7a43a1f373d0c534476578b96a75ae2e63c985.tar.xz bootstrap-3c7a43a1f373d0c534476578b96a75ae2e63c985.zip