Merge branch 'derp' into derp_navs

Conflicts:
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css

20 files changed, 206 insertions, 159 deletions

diff --git a/less/badges.less b/less/badges.less
index e1dc57826..87f92de6c 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -5,32 +5,38 @@
 
 // Base class
 .badge {
+  position: relative;
+  top: -.1em;
   display: inline-block;
-  min-width: 10px;
-  padding: 3px 7px;
-  font-size: @font-size-small;
+  padding-left: .6em;
+  padding-right: .6em;
+  font-size: .75em;
   font-weight: @badge-font-weight;
   color: @badge-color;
-  line-height: @badge-line-height;
-  vertical-align: baseline;
-  white-space: nowrap;
   text-align: center;
+  white-space: nowrap;
   background-color: @badge-bg;
   .border-radius(@badge-border-radius);
 
-  // Empty badges collapse automatically (not available in IE8)
+  // Empty badges collapse automatically
   &:empty {
     display: none;
   }
 
+  &.pull-left,
+  &.pull-right {
+    top: .2em;
+  }
+
   // Quick fix for badges in buttons
-  .btn & {
+/*  .btn & {
     position: relative;
     top: -1px;
   }
+*/
   .btn-xs & {
-    top: 0;
-    padding: 1px 5px;
+    /*top: 0;*/
+    /*padding: 1px 5px;*/
   }
 
   // Hover state, but only for links
diff --git a/less/button-groups.less b/less/button-groups.less
index 912d2e68f..1e9a8c53d 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -117,11 +117,11 @@
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {
-  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
 
   // Show no shadow for `.btn-link` since it has no other button styles.
   &.btn-link {
-    box-shadow: none;
+    .box-shadow(none);
   }
 }
 
@@ -239,7 +239,7 @@
     input[type="checkbox"] {
       position: absolute;
       z-index: -1;
-      .opacity(0);
+      opacity: 0;
     }
   }
 }
diff --git a/less/buttons.less b/less/buttons.less
index dc76db2ed..609019fe6 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -39,7 +39,7 @@
   &.active {
     outline: 0;
     background-image: none;
-    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   }
 
   &.disabled,
@@ -48,7 +48,7 @@
     cursor: not-allowed;
     pointer-events: none; // Future-proof disabling of clicks
     opacity: .65;
-    box-shadow: none;
+    .box-shadow(none);
   }
 }
 
@@ -90,7 +90,7 @@
   &[disabled],
   fieldset[disabled] & {
     background-color: transparent;
-    box-shadow: none;
+    .box-shadow(none);
   }
   &,
   &:hover,
diff --git a/less/carousel.less b/less/carousel.less
index 612e5c289..f871545cc 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -72,7 +72,7 @@
   left: 0;
   bottom: 0;
   width: @carousel-control-width;
-  .opacity(@carousel-control-opacity);
+  opacity: @carousel-control-opacity;
   font-size: @carousel-control-font-size;
   color: @carousel-control-color;
   text-align: center;
@@ -96,7 +96,7 @@
     outline: 0;
     color: @carousel-control-color;
     text-decoration: none;
-    .opacity(.9);
+    opacity: .9;
   }
 
   // Toggles
@@ -159,15 +159,11 @@
     border-radius: 10px;
     cursor: pointer;
 
-    // IE8-9 hack for event handling
+    // IE9 hack for event handling
     //
-    // Internet Explorer 8-9 does not support clicks on elements without a set
+    // Internet Explorer 9 does not support clicks on elements without a set
     // `background-color`. We cannot use `filter` since that's not viewed as a
     // background color by the browser. Thus, a hack is needed.
-    //
-    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
-    // set alpha transparency for the best results possible.
-    background-color: #000 \9; // IE8
     background-color: rgba(0,0,0,0); // IE9
   }
   .active {
diff --git a/less/code.less b/less/code.less
index d618d302a..0f76b666b 100644
--- a/less/code.less
+++ b/less/code.less
@@ -17,7 +17,7 @@ code {
   font-size: 90%;
   color: @code-color;
   background-color: @code-bg;
-  border-radius: @border-radius-base;
+  .border-radius(@border-radius-base);
 }
 
 // User input typically entered via keyboard
@@ -26,13 +26,13 @@ kbd {
   font-size: 90%;
   color: @kbd-color;
   background-color: @kbd-bg;
-  border-radius: @border-radius-small;
-  box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25);
+  .border-radius(@border-radius-small);
+  .box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
 
   kbd {
     padding: 0;
     font-size: 100%;
-    box-shadow: none;
+    .box-shadow(none);
   }
 }
 
diff --git a/less/component-animations.less b/less/component-animations.less
index a771ec96b..ac48e8514 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -2,11 +2,6 @@
 // Component animations
 // --------------------------------------------------
 
-// Heads up!
-//
-// We don't use the `.opacity()` mixin here since it causes a bug with text
-// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
-
 .fade {
   opacity: 0;
   transition: opacity .15s linear;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index c58e792be..c6f7d56f8 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -42,10 +42,9 @@
   font-size: @font-size-base;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: @dropdown-bg;
-  border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
   .border-radius(@border-radius-base);
-  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  .box-shadow(0 6px 12px rgba(0,0,0,.175));
   background-clip: padding-box;
 
   // Dividers (basically an hr) within the dropdown
diff --git a/less/forms.less b/less/forms.less
index dca78cf24..86669b44e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -31,7 +31,6 @@ legend {
 
 label {
   display: inline-block;
-  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
   margin-bottom: 5px;
   font-weight: bold;
 }
@@ -52,7 +51,7 @@ input[type="search"] {
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
-  margin-top: 1px \9; // IE8-9
+  margin-top: 1px \9; // IE9
   line-height: normal;
 }
 
@@ -124,7 +123,7 @@ output {
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid @input-border;
   .border-radius(@input-border-radius);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
   // Customize the `:focus` state to imitate native WebKit styles.
@@ -182,7 +181,7 @@ input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
   line-height: @input-height-base;
-  // IE8+ misaligns the text within date inputs, so we reset
+  // IE9+ misaligns the text within date inputs, so we reset
   line-height: @line-height-base ~"\0";
 
   &.input-sm {
diff --git a/less/labels.less b/less/labels.less
index 66a2412b6..f34c019b1 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -24,7 +24,7 @@
     }
   }
 
-  // Empty labels collapse automatically (not available in IE8)
+  // Empty labels collapse automatically
   &:empty {
     display: none;
   }
diff --git a/less/mixins.less b/less/mixins.less
index 0dcda5831..10636eba4 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -5,14 +5,13 @@
   border-radius: @radius;
 }
 
-.box-shadow(@shadow: 0 .1rem .2rem rgba(0,0,0,.1)) when (@enable-shadows = true) {
-  box-shadow: @shadow;
+.box-shadow(@shadow) when (@enable-shadows = true) {
+  box-shadow: @arguments;
 }
 
 
 // Utilities
 @import "mixins/hide-text.less";
-@import "mixins/opacity.less";
 @import "mixins/image.less";
 @import "mixins/labels.less";
 @import "mixins/reset-filter.less";
diff --git a/less/mixins/forms.less b/less/mixins/forms.less
index 12af7f746..504ca0880 100644
--- a/less/mixins/forms.less
+++ b/less/mixins/forms.less
@@ -20,10 +20,11 @@
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: @border-color;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
       border-color: darken(@border-color, 10%);
-      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
     }
   }
   // Set validation states also for addons
@@ -51,12 +52,12 @@
 //
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
-.form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+.form-control-focus() {
   &:focus {
-    border-color: @color;
+    border-color: @input-border-focus;
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
+    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus;
+    .box-shadow(@shadow);
   }
 }
 
diff --git a/less/mixins/opacity.less b/less/mixins/opacity.less
deleted file mode 100644
index 33ed25ce6..000000000
--- a/less/mixins/opacity.less
+++ /dev/null
@@ -1,8 +0,0 @@
-// Opacity
-
-.opacity(@opacity) {
-  opacity: @opacity;
-  // IE8 filter
-  @opacity-ie: (@opacity * 100);
-  filter: ~"alpha(opacity=@{opacity-ie})";
-}
diff --git a/less/mixins/progress-bar.less b/less/mixins/progress-bar.less
index f07996a34..e681c9555 100644
--- a/less/mixins/progress-bar.less
+++ b/less/mixins/progress-bar.less
@@ -1,10 +1,15 @@
 // Progress bars
 
-.progress-bar-variant(@color) {
-  background-color: @color;
-
-  // Deprecated parent class requirement as of v3.2.0
-  .progress-striped & {
-    #gradient > .striped();
+.progress-variant(@color) {
+  &[value]::-webkit-progress-value {
+    background-color: @color;
+  }
+  &[value]::-moz-progress-bar {
+    background-color: @color;
+  }
+  @media screen and (~"min-width:0\0") {
+    .progress-bar {
+      background-color: @color;
+    }
   }
 }
diff --git a/less/modals.less b/less/modals.less
index cf3aed5b4..09cef4b31 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -51,10 +51,9 @@
 .modal-content {
   position: relative;
   background-color: @modal-content-bg;
-  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
   border: 1px solid @modal-content-border-color;
   .border-radius(@border-radius-large);
-  box-shadow: 0 3px 9px rgba(0,0,0,.5);
+  .box-shadow(0 3px 9px rgba(0,0,0,.5));
   background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: 0;
@@ -138,7 +137,7 @@
     margin: 30px auto;
   }
   .modal-content {
-    box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    .box-shadow(0 5px 15px rgba(0,0,0,.5));
   }
 
   // Modal sizes
diff --git a/less/navbar.less b/less/navbar.less
index abb4aa291..65e780e68 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -52,7 +52,7 @@
   padding-right: @navbar-padding-horizontal;
   padding-left:  @navbar-padding-horizontal;
   border-top: 1px solid transparent;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+  .box-shadow(inset 0 1px 0 rgba(255,255,255,.1));
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;
 
@@ -63,7 +63,7 @@
   @media (min-width: @grid-float-breakpoint) {
     width: auto;
     border-top: 0;
-    box-shadow: none;
+    .box-shadow(none);
 
     &.collapse {
       display: block !important;
@@ -248,7 +248,7 @@
       margin-top: 0;
       background-color: transparent;
       border: 0;
-      box-shadow: none;
+      .box-shadow(none);
       > li > a,
       .dropdown-header {
         padding: 5px 15px 5px 25px;
@@ -290,7 +290,7 @@
   padding: 10px @navbar-padding-horizontal;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
 
   // Mixin behavior for optimum display
   .form-inline();
@@ -312,7 +312,7 @@
     margin-right: 0;
     padding-top: 0;
     padding-bottom: 0;
-    box-shadow: none;
+    .box-shadow(none);
   }
 }
 
diff --git a/less/navs.less b/less/navs.less
index 97aaab876..3782fdf8d 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -20,6 +20,8 @@
       position: relative;
       display: block;
       padding: @nav-link-padding;
+      line-height: @line-height-base;
+
       &:hover,
       &:focus {
         text-decoration: none;
@@ -59,13 +61,6 @@
   .nav-divider {
     .nav-divider();
   }
-
-  // Prevent IE8 from misplacing imgs
-  //
-  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
-  > li > a > img {
-    max-width: none;
-  }
 }
 
 
diff --git a/less/popovers.less b/less/popovers.less
index 555173c3a..06a1156bb 100644
--- a/less/popovers.less
+++ b/less/popovers.less
@@ -14,10 +14,9 @@
   text-align: left; // Reset given new insertion method
   background-color: @popover-bg;
   background-clip: padding-box;
-  border: 1px solid @popover-fallback-border-color;
   border: 1px solid @popover-border-color;
-  border-radius: @border-radius-large;
-  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  .border-radius(@border-radius-large);
+  .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
   // Overrides for proper insertion
   white-space: normal;
@@ -72,7 +71,6 @@
     left: 50%;
     margin-left: -@popover-arrow-outer-width;
     border-bottom-width: 0;
-    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-top-color: @popover-arrow-outer-color;
     bottom: -@popover-arrow-outer-width;
     &:after {
@@ -88,7 +86,6 @@
     left: -@popover-arrow-outer-width;
     margin-top: -@popover-arrow-outer-width;
     border-left-width: 0;
-    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-right-color: @popover-arrow-outer-color;
     &:after {
       content: " ";
@@ -102,7 +99,6 @@
     left: 50%;
     margin-left: -@popover-arrow-outer-width;
     border-top-width: 0;
-    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-bottom-color: @popover-arrow-outer-color;
     top: -@popover-arrow-outer-width;
     &:after {
@@ -119,7 +115,6 @@
     right: -@popover-arrow-outer-width;
     margin-top: -@popover-arrow-outer-width;
     border-right-width: 0;
-    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-left-color: @popover-arrow-outer-color;
     &:after {
       content: " ";
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 415f7056b..dfaad105e 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -3,98 +3,165 @@
 // --------------------------------------------------
 
 
-// Bar animations
-// -------------------------
+//
+// Progress animations
+//
 
-// WebKit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from  { background-position: @line-height-computed 0; }
   to    { background-position: 0 0; }
 }
 
-// Spec and IE10+
 @keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from  { background-position: @line-height-computed 0; }
   to    { background-position: 0 0; }
 }
 
 
+//
+// Basic progress bar
+//
 
-// Bar itself
-// -------------------------
-
-// Outer container
 .progress {
-  overflow: hidden;
+  display: block;
+  width: 100%;
   height: @line-height-computed;
   margin-bottom: @line-height-computed;
-  background-color: @progress-bg;
+}
+.progress[value] {
+  // Reset the default appearance
+  appearance: none;
+  // Remove Firefox and Opera border
+  border: 0;
+  // IE10 uses `color` to set the bar background-color
+  color: #0074d9;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
   .border-radius(@border-radius-base);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+}
+.progress[value]::-webkit-progress-value::before {
+  content: attr(value);
+}
+.progress[value]::-webkit-progress-value {
+  background-color: #0074d9;
+  border-top-left-radius: @border-radius-base;
+  border-bottom-left-radius: @border-radius-base;
+}
+.progress[value="0"]::-webkit-progress-value {
+  color: @gray-light;
+  min-width: 2rem;
+  background-color: transparent;
+  background-image: none;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: @border-radius-base;
+  border-bottom-right-radius: @border-radius-base;
 }
 
-// Bar of progress
-.progress-bar {
-  float: left;
-  width: 0%;
-  height: 100%;
-  font-size: @font-size-small;
-  line-height: @line-height-computed;
-  color: @progress-bar-color;
-  text-align: center;
-  background-color: @progress-bar-bg;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-  transition: width .6s ease;
+// Firefox styles must be entirely separate or it busts Webkit styles.
+@-moz-document url-prefix() {
+  .progress[value] {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress[value]::-moz-progress-bar {
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[value="0"]::-moz-progress-bar {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[value="100"]::-moz-progress-bar {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
 }
 
-// Striped bars
+// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
+@media screen and (~"min-width:0\0") {
+  .progress {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress-bar {
+    display: inline-block;
+    height: @line-height-computed;
+    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[width^="0"] {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
+}
+
+
 //
-// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar-striped` class, which you just add to an existing
-// `.progress-bar`.
-.progress-striped .progress-bar,
-.progress-bar-striped {
+// Striped
+//
+
+.progress-striped[value]::-webkit-progress-value {
+  #gradient > .striped();
+  background-size: @line-height-computed @line-height-computed;
+}
+.progress-striped[value]::-moz-progress-bar {
   #gradient > .striped();
-  background-size: 40px 40px;
+  background-size: @line-height-computed @line-height-computed;
+}
+@media screen and (~"min-width:0\0") {
+  .progress-bar-striped {
+    #gradient > .striped();
+    background-size: @line-height-computed @line-height-computed;
+  }
 }
 
-// Call animation for the active one
+
+//
+// Animated
 //
-// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar.active` approach.
-.progress.active .progress-bar,
-.progress-bar.active {
+
+.progress-animated[value]::-webkit-progress-value {
   animation: progress-bar-stripes 2s linear infinite;
 }
-
-// Account for lower percentages
-.progress-bar {
-  &[aria-valuenow="0"] {
-    color: @gray-light;
-    min-width: 30px;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
+.progress-animated[value]::-moz-progress-bar {
+  animation: progress-bar-stripes 2s linear infinite;
+}
+@media screen and (~"min-width:0\0") {
+  .progress-animated .progress-bar-striped {
+    animation: progress-bar-stripes 2s linear infinite;
   }
 }
 
 
-
+//
 // Variations
-// -------------------------
+//
 
-.progress-bar-success {
-  .progress-bar-variant(@progress-bar-success-bg);
+.progress-success {
+  .progress-variant(@progress-bar-success-bg);
 }
-
-.progress-bar-info {
-  .progress-bar-variant(@progress-bar-info-bg);
+.progress-info {
+  .progress-variant(@progress-bar-info-bg);
 }
-
-.progress-bar-warning {
-  .progress-bar-variant(@progress-bar-warning-bg);
+.progress-warning {
+  .progress-variant(@progress-bar-warning-bg);
 }
-
-.progress-bar-danger {
-  .progress-bar-variant(@progress-bar-danger-bg);
+.progress-danger {
+  .progress-variant(@progress-bar-danger-bg);
 }
diff --git a/less/theme.less b/less/theme.less
index f9bc280a7..36ecda53a 100644
--- a/less/theme.less
+++ b/less/theme.less
@@ -19,12 +19,13 @@
 .btn-warning,
 .btn-danger {
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+  .box-shadow(@shadow);
 
   // Reset the shadow
   &:active,
   &.active {
-    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   }
 }
 
@@ -77,9 +78,8 @@
 // Images
 // --------------------------------------------------
 
-.thumbnail,
 .img-thumbnail {
-  box-shadow: 0 1px 2px rgba(0,0,0,.075);
+  .box-shadow(0 1px 2px rgba(0,0,0,.075));
 }
 
 
@@ -111,11 +111,12 @@
   #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
   .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
   .border-radius(@navbar-border-radius);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
+  .box-shadow(@shadow);
 
   .navbar-nav > .active > a {
     #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
-    box-shadow: inset 0 3px 9px rgba(0,0,0,.075);
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
   }
 }
 .navbar-brand,
@@ -130,7 +131,7 @@
 
   .navbar-nav > .active > a {
     #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
-    box-shadow: inset 0 3px 9px rgba(0,0,0,.25);
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
   }
 
   .navbar-brand,
@@ -155,7 +156,8 @@
 // Common styles
 .alert {
   text-shadow: 0 1px 0 rgba(255,255,255,.2);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
 }
 
 // Mixin for generating new styles
@@ -206,7 +208,7 @@
 
 .list-group {
   .border-radius(@border-radius-base);
-  box-shadow: 0 1px 2px rgba(0,0,0,.075);
+  .box-shadow(0 1px 2px rgba(0,0,0,.075));
 }
 .list-group-item.active,
 .list-group-item.active:hover,
diff --git a/less/variables.less b/less/variables.less
index ce57ea26a..328380bcc 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -187,6 +187,7 @@
 @input-border-radius:            @border-radius-base;
 //** Border color for inputs on focus
 @input-border-focus:             #66afe9;
+@input-box-shadow-focus:         rgba(102,175,233,.6);
 
 //** Placeholder text color
 @input-color-placeholder:        @gray-light;
@@ -215,8 +216,6 @@
 @dropdown-bg:                    #fff;
 //** Dropdown menu `border-color`.
 @dropdown-border:                rgba(0,0,0,.15);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #ccc;
 //** Divider color for between dropdown items.
 @dropdown-divider-bg:            #e5e5e5;
 
@@ -370,7 +369,7 @@
 //##
 
 //=== Shared nav styles
-@nav-link-padding:                          10px 15px;
+@nav-link-padding:                          .5em 1em;
 @nav-link-hover-bg:                         @gray-lighter;
 
 @nav-disabled-link-color:                   @gray-light;
@@ -551,8 +550,6 @@
 @modal-content-bg:                             #fff;
 //** Modal content border color
 @modal-content-border-color:                   rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
 
 //** Modal backdrop background color
 @modal-backdrop-bg:           #000;
@@ -678,7 +675,7 @@
 
 @badge-font-weight:           bold;
 @badge-line-height:           1;
-@badge-border-radius:         10px;
+@badge-border-radius:         2em;
 
 
 //== Breadcrumbs