Merge branch '2.0.4-wip'

13 files changed, 525 insertions, 129 deletions

diff --git a/less/component-animations.less b/less/component-animations.less
index da1f2e535..1e1e78b85 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -2,10 +2,10 @@
 // --------------------
 
 .fade {
-  .opacity(0);
+  opacity: 0;
   .transition(opacity .15s linear);
   &.in {
-    .opacity(100);
+    opacity: 1;
   }
 }
 
@@ -17,4 +17,4 @@
   &.in {
     height: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 6c60385e5..5e232556a 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -71,7 +71,7 @@
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    .nav-divider();
+    .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
   }
 
   // Links within the dropdown menu
@@ -103,14 +103,14 @@
   // make the menu appear below buttons that appeared later on the page
   *z-index: @zindexDropdown;
 
-  .dropdown-menu {
+  & > .dropdown-menu {
     display: block;
   }
 }
 
 // Right aligned dropdowns
 // ---------------------------
-.pull-right .dropdown-menu {
+.pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
diff --git a/less/forms.less b/less/forms.less
index 7d967c6b3..1163fe914 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -27,7 +27,7 @@ legend {
   line-height: @baseLineHeight * 2;
   color: @grayDark;
   border: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #e5e5e5;
 
   // Small
   small {
@@ -55,72 +55,101 @@ textarea {
 label {
   display: block;
   margin-bottom: 5px;
-  color: @grayDark;
 }
 
-// Inputs, Textareas, Selects
-input,
-textarea,
+// Form controls
+// -------------------------
+
+// Shared size and type resets
 select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
 .uneditable-input {
   display: inline-block;
-  width: 210px;
   height: @baseLineHeight;
   padding: 4px;
   margin-bottom: 9px;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @gray;
-  background-color: @inputBackground;
-  border: 1px solid @inputBorder;
-  .border-radius(@inputBorderRadius);
 }
-.uneditable-textarea {
-  width: auto;
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea {
+  width: 210px;
+}
+// Reset height since textareas have rows
+textarea {
   height: auto;
 }
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  background-color: @inputBackground;
+  border: 1px solid @inputBorder;
+  .border-radius(@inputBorderRadius);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @transition: border linear .2s, box-shadow linear .2s;
+  .transition(@transition);
 
-// Inputs within a label
-label input,
-label textarea,
-label select {
-  display: block;
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+  }
 }
 
-// Mini reset for unique input types
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
-  width: auto;
-  height: auto;
-  padding: 0;
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
   cursor: pointer;
-  background-color: transparent;
-  border: 0 \9; /* IE9 and down */
-  .border-radius(0);
-}
-input[type="image"] {
-  border: 0;
 }
 
-// Reset the file input to browser defaults
-input[type="file"] {
-  width: auto;
-  padding: initial;
-  line-height: initial;
-  background-color: @inputBackground;
-  background-color: initial;
-  border: initial;
-  .box-shadow(none);
+// Reset width of input buttons, radios, checkboxes
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
 }
 
-// Help out input buttons
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
   width: auto;
   height: auto;
 }
@@ -133,15 +162,10 @@ input[type="file"] {
   line-height: 28px;
 }
 
-// Reset line-height for IE
-input[type="file"] {
-  line-height: 18px \9;
-}
-
-// Chrome on Linux and Mobile Safari need background-color
+// Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  background-color: @inputBackground;
+  border: 1px solid #bbb;
 }
 
 // Make multiple select elements height not fixed
@@ -150,19 +174,12 @@ select[size] {
   height: auto;
 }
 
-// Remove shadow from image inputs
-input[type="image"] {
-  .box-shadow(none);
-}
-
-// Make textarea height behave
-textarea {
-  height: auto;
-}
-
-// Hidden inputs
-input[type="hidden"] {
-  display: none;
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  .tab-focus();
 }
 
 
@@ -204,32 +221,6 @@ input[type="hidden"] {
 
 
 
-// FOCUS STATE
-// -----------
-
-input,
-textarea {
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @transition: border linear .2s, box-shadow linear .2s;
-  .transition(@transition);
-}
-input:focus,
-textarea:focus {
-  border-color: rgba(82,168,236,.8);
-  outline: 0;
-  outline: thin dotted \9; /* IE6-9 */
-  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-}
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus {
-  .tab-focus();
-  .box-shadow(none); // override for file inputs
-}
-
-
-
 // INPUT SIZES
 // -----------
 
@@ -254,14 +245,22 @@ textarea[class*="span"],
   float: none;
   margin-left: 0;
 }
+// Ensure input-prepend/append never wraps
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"],
+.row-fluid .input-prepend [class*="span"],
+.row-fluid .input-append [class*="span"] {
+  display: inline-block;
+}
 
 
 
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-#grid > .input (@gridColumnWidth, @gridGutterWidth);
-
+#grid > .input(@gridColumnWidth, @gridGutterWidth);
 
 
 
@@ -329,7 +328,7 @@ select:focus:required:invalid {
   margin-top: @baseLineHeight;
   margin-bottom: @baseLineHeight;
   background-color: @formActionsBackground;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
 
@@ -344,7 +343,7 @@ select:focus:required:invalid {
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
-.placeholder(@grayLight);
+.placeholder();
 
 
 
diff --git a/less/mixins.less b/less/mixins.less
index b107955f5..c3b57ed14 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -81,10 +81,13 @@
 // Placeholder text
 // -------------------------
 .placeholder(@color: @placeholderText) {
-  :-moz-placeholder {
+  &:-moz-placeholder {
     color: @color;
   }
-  ::-webkit-input-placeholder {
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  &::-webkit-input-placeholder {
     color: @color;
   }
 }
@@ -166,6 +169,8 @@
     color: @textColor;
   }
   // Style inputs accordingly
+  .checkbox,
+  .radio,
   input,
   select,
   textarea {
@@ -312,6 +317,16 @@
           column-gap: @columnGap;
 }
 
+// Optional hyphenation
+.hyphens(@mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: @mode;
+     -moz-hyphens: @mode;
+      -ms-hyphens: @mode;
+       -o-hyphens: @mode;
+          hyphens: @mode;
+}
+
 // Opacity
 .opacity(@opacity) {
   opacity: @opacity / 100;
@@ -417,7 +432,7 @@
 // Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider() {
+.nav-divider(@top: #e5e5e5, @bottom: @white) {
   // IE7 needs a set width since we gave a height. Restricting just
   // to IE7 to keep the 1px left/right space in other browsers.
   // It is unclear where IE is getting the extra space that we need
@@ -427,8 +442,8 @@
   margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
   *margin: -5px 0 5px;
   overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid @white;
+  background-color: @top;
+  border-bottom: 1px solid @bottom;
 }
 
 // Button backgrounds
diff --git a/less/navbar.less b/less/navbar.less
index 4faa7255b..818f8a5a2 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -123,13 +123,7 @@
     .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
     .transition(none);
 
-    // Placeholder text gets special styles; can't be a grouped selector
-    &:-moz-placeholder {
-      color: @navbarSearchPlaceholderColor;
-    }
-    &::-webkit-input-placeholder {
-      color: @navbarSearchPlaceholderColor;
-    }
+    .placeholder(@navbarSearchPlaceholderColor);
 
     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
diff --git a/less/reset.less b/less/reset.less
index d9ce2b110..2332e03c3 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -81,6 +81,11 @@ img {
   -ms-interpolation-mode: bicubic;
 }
 
+// Prevent max-width from affecting Google Maps
+#map_canvas img {
+  max-width: none;
+}
+
 // Forms
 // -------------------------
 
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index d49b8ae12..8d31db531 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -9,11 +9,18 @@
     padding-top: 0;
   }
   // Unfix the navbar
-  .navbar-fixed-top {
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
     position: static;
+  }
+  .navbar-fixed-top {
     margin-bottom: @baseLineHeight;
   }
-  .navbar-fixed-top .navbar-inner {
+  .navbar-fixed-bottom {
+    margin-top: @baseLineHeight;
+  }
+  .navbar-fixed-top .navbar-inner,
+  .navbar-fixed-bottom .navbar-inner {
     padding: 5px;
   }
   .navbar .container {
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index ac764270a..e0870be44 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -30,6 +30,7 @@ h4 {
 
 
 /* Fluid row inputs */
+#rowInputs .row > [class*=span],
 #fluidRowInputs .row-fluid > [class*=span] {
   background-color: rgba(255,0,0,.1);
 }
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index b29018621..b7177e5c6 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -500,67 +500,157 @@
   </div><!--/span-->
 </div><!--/row-->
 
+<h4>Fluid prepended and appended inputs</h4>
+<div class="row-fluid">
+  <div class="span6">
+    <form>
+      <div class="controls">
+        <div class="input-prepend">
+          <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-append">
+          <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
+        </div>
+      </div>
+      <div class="controls">
+        <div class="input-prepend input-append">
+          <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<h4>Fixed row with inputs</h4>
+<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
+
+<div class="rowInputs">
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span1" placeholder="span1">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span2" placeholder="span2">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span3" placeholder="span3">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span4" placeholder="span4">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span5" placeholder="span5">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span6" placeholder="span6">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span7" placeholder="span7">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span8" placeholder="span8">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span9" placeholder="span9">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span10" placeholder="span10">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span11" placeholder="span11">
+    </div><!--/span-->
+  </div><!--/row-->
+  <div class="row">
+    <div class="span12">
+      <input type="text" class="span12" placeholder="span12">
+    </div><!--/span-->
+  </div><!--/row-->
+</div>
+<br>
+
 <h4>Fluid row with inputs</h4>
 <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
 <div id="fluidRowInputs">
   <div class="row-fluid">
     <div class="span12">
-      <input class="span1" placeholder="span1">
+      <input type="text" class="span1" placeholder="span1">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span2" placeholder="span2">
+      <input type="text" class="span2" placeholder="span2">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span3" placeholder="span3">
+      <input type="text" class="span3" placeholder="span3">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span4" placeholder="span4">
+      <input type="text" class="span4" placeholder="span4">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span5" placeholder="span5">
+      <input type="text" class="span5" placeholder="span5">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span6" placeholder="span6">
+      <input type="text" class="span6" placeholder="span6">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span7" placeholder="span7">
+      <input type="text" class="span7" placeholder="span7">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span8" placeholder="span8">
+      <input type="text" class="span8" placeholder="span8">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span9" placeholder="span9">
+      <input type="text" class="span9" placeholder="span9">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span10" placeholder="span10">
+      <input type="text" class="span10" placeholder="span10">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span11" placeholder="span11">
+      <input type="text" class="span11" placeholder="span11">
     </div><!--/span-->
   </div><!--/row-->
   <div class="row-fluid">
     <div class="span12">
-      <input class="span12" placeholder="span12">
+      <input type="text" class="span12" placeholder="span12">
     </div><!--/span-->
   </div><!--/row-->
 </div>
diff --git a/less/tests/forms.html b/less/tests/forms.html
new file mode 100644
index 000000000..a63d728a0
--- /dev/null
+++ b/less/tests/forms.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 30px;
+        padding-bottom: 30px;
+      }
+    </style>
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <form class="container">
+
+      <div class="page-header">
+        <h1>Form controls</h1>
+      </div>
+
+      <div class="row">
+        <div class="span4">
+
+          <label>Select</label>
+          <select>
+            <option>Select</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+          </select>
+
+          <hr>
+
+          <label>textarea</label>
+          <textarea>Textarea</textarea>
+
+          <hr>
+
+          <label>text</label>
+          <input type="text" value="Text input">
+
+          <hr>
+
+          <label>password</label>
+          <input type="password" value="Password input">
+
+          <hr>
+
+          <label>checkbox</label>
+          <input type="checkbox" value="">
+
+          <hr>
+
+          <label>radio</label>
+          <input type="radio" value="">
+
+          <hr>
+
+          <label>button</label>
+          <input type="button" value="Button">
+
+          <hr>
+
+          <label>submit</label>
+          <input type="submit" value="Submit">
+
+          <hr>
+
+          <label>reset</label>
+          <input type="reset" value="Reset">
+
+        </div><!-- /span4 -->
+        <div class="span4">
+
+          <label>file</label>
+          <input type="file" value="">
+
+          <hr>
+
+          <label>hidden</label>
+          <input type="hidden" value="hidden">
+
+          <hr>
+
+          <label>image</label>
+          <input type="image" value="">
+
+          <hr>
+
+          <label>datetime</label>
+          <input type="datetime" value="">
+
+          <hr>
+
+          <label>datetime-local</label>
+          <input type="datetime-local" value="">
+
+          <hr>
+
+          <label>date</label>
+          <input type="date" value="">
+
+          <hr>
+
+          <label>month</label>
+          <input type="month" value="">
+
+          <hr>
+
+          <label>time</label>
+          <input type="time" value="">
+
+          <hr>
+
+          <label>week</label>
+          <input type="week" value="">
+
+        </div><!-- /span4 -->
+        <div class="span4">
+
+          <label>number</label>
+          <input type="number" value="">
+
+          <hr>
+
+          <label>range</label>
+          <input type="range" value="">
+
+          <hr>
+
+          <label>email</label>
+          <input type="email" value="">
+
+          <hr>
+
+          <label>url</label>
+          <input type="url" value="">
+
+          <hr>
+
+          <label>search</label>
+          <input type="search" value="">
+
+          <hr>
+
+          <label>tel</label>
+          <input type="tel" value="">
+
+          <hr>
+
+          <label>color</label>
+          <input type="color" value="">
+
+        </div><!-- /span4 -->
+      </div><!-- /row -->
+
+    </form> <!-- /container -->
+
+  </body>
+</html>
diff --git a/less/tests/navbar.html b/less/tests/navbar.html
new file mode 100644
index 000000000..17754bf6e
--- /dev/null
+++ b/less/tests/navbar.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 60px;
+        padding-bottom: 30px;
+      }
+    </style>
+    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <!-- Fixed navbar -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Static navbar -->
+      <div class="navbar">
+        <div class="navbar-inner">
+          <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </a>
+            <a class="brand" href="#">Project name</a>
+            <div class="nav-collapse">
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+              </ul>
+            </div><!--/.nav-collapse -->
+          </div>
+        </div>
+      </div>
+
+      <!-- Main hero unit for a primary marketing message or call to action -->
+      <div class="hero-unit">
+        <h1>Navbar example</h1>
+        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>
+          <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a>
+        </p>
+      </div>
+
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../assets/js/jquery.js"></script>
+    <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
+    <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
+
+  </body>
+</html>
diff --git a/less/type.less b/less/type.less
index 0d5621934..bdf8e605e 100644
--- a/less/type.less
+++ b/less/type.less
@@ -8,9 +8,6 @@
 
 p {
   margin: 0 0 @baseLineHeight / 2;
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
   small {
     font-size: @baseFontSize - 2;
     color: @grayLight;
@@ -171,7 +168,7 @@ em {
 // Abbreviations and acronyms
 abbr[title] {
   cursor: help;
-  border-bottom: 1px dotted #ddd;
+  border-bottom: 1px dotted @grayLight;
 }
 abbr.initialism {
   font-size: 90%;
diff --git a/less/variables.less b/less/variables.less
index d8825fb07..b931d3d2a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -107,7 +107,8 @@
 @dropdownLinkColor:             @grayDark;
 @dropdownLinkColorHover:        @white;
 @dropdownLinkBackgroundHover:   @linkColor;
-
+@dropdownDividerTop:            #e5e5e5;
+@dropdownDividerBottom:         @white;