Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

8 files changed, 222 insertions, 166 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 5eb8a4a7c..a9a104ccc 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan  8 01:50:02 PST 2012
+ * Date: Sun Jan  8 02:58:37 PST 2012
  */
 html, body {
   margin: 0;
@@ -485,6 +485,10 @@ blockquote small:before {
 }
 blockquote.pull-right {
   float: right;
+  padding-left: 0;
+  padding-right: 15px;
+  border-left: 0;
+  border-right: 5px solid #eee;
 }
 blockquote.pull-right p, blockquote.pull-right small {
   text-align: right;
@@ -1600,7 +1604,7 @@ i {
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
-.navbar .brand:hover, .navbar ul .active > a {
+.navbar .brand:hover, .navbar .nav .active > a {
   color: #ffffff;
   text-decoration: none;
   background-color: #333333;
@@ -1921,7 +1925,7 @@ i {
 .pills.stacked > li:last-child > a {
   margin-bottom: 1px;
 }
-.tabs .dropdown-menu, .pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
@@ -1930,19 +1934,26 @@ i {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: #0088cc;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: #005580;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret, .pills .open .caret {
+.nav .open .caret, .nav .open a:hover .caret {
   border-top-color: #fff;
   filter: alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
 }
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
 .tabbable {
   zoom: 1;
 }
@@ -2996,6 +3007,61 @@ a.thumbnail:hover {
   visibility: hidden;
 }
 @media (max-width: 480px) {
+  .navbar .nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 180px;
+    padding-top: 40px;
+    list-style: none;
+  }
+  .navbar .nav, .navbar .nav > li:last-child a {
+    -webkit-border-radius: 0 0 4px 0;
+    -moz-border-radius: 0 0 4px 0;
+    border-radius: 0 0 4px 0;
+  }
+  .navbar .nav > li {
+    float: none;
+    display: none;
+  }
+  .navbar .nav > li > a {
+    float: none;
+    background-color: #222;
+  }
+  .navbar .nav > .active {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .navbar .nav > .active > a {
+    background-color: transparent;
+  }
+  .navbar .nav > .active > a:hover {
+    background-color: #333;
+  }
+  .navbar .nav > .active > a:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-top: 8px;
+    margin-left: 6px;
+    text-indent: -99999px;
+    vertical-align: top;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid #ffffff;
+    filter: alpha(opacity=100);
+    -moz-opacity: 1;
+    opacity: 1;
+    content: "↓";
+  }
+  .navbar .nav:hover > li {
+    display: block;
+  }
+  .navbar .nav:hover > li > a:hover {
+    background-color: #333;
+  }
   .modal {
     width: auto;
     margin: 0;
@@ -3030,6 +3096,12 @@ a.thumbnail:hover {
   }
 }
 @media (max-width: 768px) {
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
   .container {
     width: auto;
     padding: 0 20px;
@@ -3043,55 +3115,6 @@ a.thumbnail:hover {
     width: auto;
     margin: 0;
   }
-  .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .nav, .nav > li:last-child a {
-    -webkit-border-radius: 0 0 4px 0;
-    -moz-border-radius: 0 0 4px 0;
-    border-radius: 0 0 4px 0;
-  }
-  .nav > li {
-    float: none;
-    display: none;
-  }
-  .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar ul .active > a {
-    background-color: transparent;
-  }
-  .nav > .active a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid #ffffff;
-    filter: alpha(opacity=100);
-    -moz-opacity: 1;
-    opacity: 1;
-    content: "↓";
-  }
-  .nav > .active a:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
 }
 @media (min-width: 768px) and (max-width: 940px) {
   .container {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 33e4f7f80..0159780a6 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -87,7 +87,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
 abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
 blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;}
 blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';}
-blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
+blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 address{display:block;margin-bottom:18px;line-height:18px;}
 code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 code{padding:1px 3px;background-color:#fee9cc;}
@@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
 .navbar{overflow:visible;}
 .navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
-.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
+.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
 .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
 .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
 .navbar .btn{margin-top:5px;}
@@ -368,11 +368,13 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;}
 .pills.stacked>li>a{margin-bottom:3px;}
 .pills.stacked>li:last-child>a{margin-bottom:1px;}
-.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;}
+.nav .dropdown-menu{top:33px;border-width:1px;}
 .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
-.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;}
-.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;}
-.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;}
+.nav .dropdown-toggle:hover .caret{border-top-color:#005580;}
+.nav .open .dropdown-toggle{background-color:#999;border-color:#999;}
+.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.tabs.stacked .open>a:hover{border-color:#999;}
 .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;}
 .tabbable:after{clear:both;}
 .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;}
@@ -511,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
 .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
 .hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/components.html b/docs/components.html
index bd8753401..2a9d15846 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -222,9 +222,12 @@
       <h3>Application-style navigation</h3>
       <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
       <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+      <h4>With icons</h4>
+      <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
     </div>
     <div class="span4">
-      <h3>Example sidebar navigation</h3>
+      <h3>Example nav list</h3>
+      <p>Take a list of links and add <code>class="nav list"</code>:</p>
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">List header</li>
@@ -237,9 +240,6 @@
           <li><a href="#">Help</a></li>
         </ul>
       </div> <!-- /well -->
-    </div>
-    <div class="span4">
-      <h3>Simple markup</h3>
 <pre class="prettyprint linenums">
 &lt;ul class="nav list"&gt;
   &lt;li class="nav-header"&gt;
@@ -255,6 +255,34 @@
 &lt;/ul&gt;
 </pre>
     </div>
+    <div class="span4">
+      <h3>Example with icons</h3>
+      <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="book"></i> Library</a></li>
+          <li><a href="#"><i class="pencil"></i> Applications</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#"><i class="user"></i> Profile</a></li>
+          <li><a href="#"><i class="cog"></i> Settings</a></li>
+          <li><a href="#"><i class="flag"></i> Help</a></li>
+        </ul>
+      </div> <!-- /well -->
+<pre class="prettyprint linenums">
+&lt;ul class="nav list"&gt;
+  ...
+  &lt;li&gt;
+    &lt;a href="#"&gt;
+      &lt;i class="book"&gt;&lt;/i&gt;
+      Library
+    &lt;/a&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+    </div>
   </div>
 
 
@@ -262,23 +290,13 @@
   <div class="row">
     <div class="span4">
       <h3>What's included</h3>
-      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p>
-      <ul>
-        <li>top (default)</li>
-        <li>right</li>
-        <li>bottom</li>
-        <li>left</li>
-      </ul>
+      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
       <p>Changing between them is easy and only requires changing very little markup.</p>
-      <hr>
-      <h3>Custom jQuery plugin</h3>
-      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
-      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
     </div>
-    <div class="span8">
+    <div class="span4">
       <h3>Tabbable example</h3>
       <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p>
-      <div class="tabbable">
+      <div class="tabbable" style="margin-bottom: 9px;">
         <ul class="nav tabs">
           <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
           <li><a href="#2" data-toggle="tab">Section 2</a></li>
@@ -296,9 +314,16 @@
           </div>
         </div>
       </div> <!-- /tabbable -->
-      <hr>
-      <h3>Straightforward markup</h3>
-      <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
+    </div>
+    <div class="span4">
+      <h3>Custom jQuery plugin</h3>
+      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
+      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
+    </div>
+  </div>
+    
+  <h3>Straightforward markup</h3>
+  <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 <pre class="prettyprint linenums">
 &lt;div class="tabbable"&gt;
   &lt;ul class="nav tabs"&gt;
@@ -315,8 +340,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
   <h3>Tabbable in any direction</h3>
   <div class="row">
@@ -809,28 +832,6 @@
 
 
 
-<!-- Autocomplete
-================================================== -->
-<section id="autocomplete">
-  <div class="page-header">
-    <h1>Autocomplete <small></small></h1>
-  </div>
-
-</section>
-
-
-
-<!-- Carousel
-================================================== -->
-<section id="carousel">
-  <div class="page-header">
-    <h1>Carousel <small></small></h1>
-  </div>
-
-</section>
-
-
-
 <!-- Alerts & Messages
 ================================================== -->
 <section id="alerts">
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index bf42d4468..10e5a43be 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -243,11 +243,11 @@
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
-  &lt;div class="fluid-container"&gt;
-    &lt;div class="sidebar"&gt;
+  &lt;div class="fluid-container sidebar-left"&gt;
+    &lt;div class="fluid-sidebar"&gt;
       ...
     &lt;/div&gt;
-    &lt;div class="content"&gt;
+    &lt;div class="fluid-content"&gt;
       ...
     &lt;/div&gt;
   &lt;/div&gt;
diff --git a/lib/navbar.less b/lib/navbar.less
index 8ee203307..dbad9dcd8 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -10,7 +10,7 @@
 .navbar {
   overflow: visible;
 }
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
   background-color: @navBarBgEnd;
   #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
@@ -21,7 +21,7 @@
 .navbar {
   // Hover and active states
   .brand:hover,
-  ul .active > a {
+  .nav .active > a {
     color: @white;
     text-decoration: none;
     background-color: @navBarBgStart;
diff --git a/lib/navs.less b/lib/navs.less
index 743d772f3..dee482aea 100644
--- a/lib/navs.less
+++ b/lib/navs.less
@@ -175,29 +175,35 @@
 // ---------
 
 // Position the menu
-.tabs .dropdown-menu,
-.pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
 .pills .dropdown-menu {
   .border-radius(4px);
 }
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: @linkColor;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: @linkColorHover;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret,
-.pills .open .caret {
+.nav .open .caret,
+.nav .open a:hover .caret {
   border-top-color: #fff;
   .opacity(100);
 }
 
+// Dropdowns in stacked tabs
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
+
 
 
 // TABBABLE
diff --git a/lib/responsive.less b/lib/responsive.less
index 7856121be..e87b8495f 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -18,6 +18,64 @@
 // ---------------------
 
 @media (max-width: 480px) {
+
+  // Make the nav work for small devices
+  .navbar {
+    .nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 180px;
+      padding-top: 40px;
+      list-style: none;
+    }
+    .nav,
+    .nav > li:last-child a {
+      .border-radius(0 0 4px 0);
+    }
+    .nav > li {
+      float: none;
+      display: none;
+    }
+    .nav > li > a {
+      float: none;
+      background-color: #222;
+    }
+    .nav > .active {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .nav > .active > a {
+      background-color: transparent;
+    }
+    .nav > .active > a:hover {
+      background-color: #333;
+    }
+    .nav > .active > a:after {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-top: 8px;
+      margin-left: 6px;
+      text-indent: -99999px;
+      vertical-align: top;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid @white;
+      .opacity(100);
+      content: "&darr;";
+    }
+
+    .nav:hover > li {
+      display: block;
+    }
+    .nav:hover > li > a:hover {
+      background-color: #333;
+    }
+  }
+
   // Resize modals
   .modal {
     width: auto;
@@ -63,6 +121,15 @@
 // --------------------------------------------------
 
 @media (max-width: 768px) {
+  
+  // Unfix the navbar
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+
   // Remove width from containers
   .container {
     width: auto;
@@ -80,53 +147,6 @@
     margin: 0;
   }
 
-  // Make the nav work for small devices
-  .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .nav,
-  .nav > li:last-child a {
-    .border-radius(0 0 4px 0);
-  }
-  .nav > li {
-    float: none;
-    display: none;
-  }
-  .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar ul .active > a {
-    background-color: transparent;
-  }
-  .nav > .active a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid @white;
-    .opacity(100);
-    content: "&darr;";
-  }
-  .nav > .active a:hover {
-    background-color: rgba(255,255,255,.05);
-  }
 }
 
 
diff --git a/lib/type.less b/lib/type.less
index 7e2c4a7a8..84130f3fa 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -165,6 +165,10 @@ blockquote {
   // Float right with text-align: right
   &.pull-right {
     float: right;
+    padding-left: 0;
+    padding-right: 15px;
+    border-left: 0;
+    border-right: 5px solid #eee;
     p,
     small {
       text-align: right;