updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings

10 files changed, 234 insertions, 178 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 2bef99e1a..d0c78d037 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: Wed Nov 30 00:54:47 PST 2011
+ * Date: Fri Dec  9 11:23:25 PST 2011
  */
 html, body {
   margin: 0;
@@ -1175,7 +1175,6 @@ table {
   }
 }*/
 .navbar {
-  height: 40px;
   overflow: visible;
 }
 .navbar-inner {
@@ -2131,7 +2130,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   background-color: #404040;
 }
 .subnav {
-  position: relative;
   background-color: #eeeeee;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));
   background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee);
@@ -2142,12 +2140,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   background-image: linear-gradient(top, #f5f5f5, #eeeeee);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
 }
 .subnav a {
-  padding: 10px 15px;
+  padding: 8px 10px;
+  font-size: 12px;
   color: #0069d6;
   text-shadow: 0 1px 0 #fff;
   border-left: 1px solid #f9f9f9;
@@ -2515,44 +2514,35 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
   box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
 }
+.hidden {
+  display: none;
+  visibility: hidden;
+}
 @media (max-width: 480px) {
-  .container {
-    width: auto;
-    padding: 0 15px;
-  }
-  .row {
-    margin-left: 0;
-  }
-  [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
   .modal {
     width: auto;
     margin: 0;
   }
-  .form-horizontal .control-group > label {
+  .horizontal-form .control-group > label {
     float: none;
     width: auto;
     padding-top: 0;
     text-align: left;
   }
-  .form-horizontal .controls {
+  .horizontal-form .controls {
     margin-left: 0;
   }
-  .form-horizontal .control-list {
+  .horizontal-form .control-list {
     padding-top: 0;
   }
-  .form-horizontal .form-actions {
+  .horizontal-form .form-actions {
     padding-left: 0;
   }
 }
-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
   .container {
     width: auto;
-    padding: 0 10px;
+    padding: 0 20px;
   }
   .row {
     margin-left: 0;
@@ -2563,6 +2553,55 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
     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 {
@@ -2641,60 +2680,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
     margin-left: 768px;
   }
 }
-/*
-// LARGE DESKTOP & UP
-// ------------------
-
 @media (min-width: 1210px) {
-
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columnSpan: 1) {
-    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-  }
-  .offset(@columnOffset: 1) {
-    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
-  }
-
   .container {
-    width: @siteWidth;
+    width: 1170px;
   }
   [class*="span"] {
-    margin-left: @gridGutterWidth;
+    margin-left: 30px;
+  }
+  .span1 {
+    width: 70px;
+  }
+  .span2 {
+    width: 170px;
+  }
+  .span3 {
+    width: 270px;
+  }
+  .span4 {
+    width: 370px;
+  }
+  .span5 {
+    width: 470px;
+  }
+  .span6 {
+    width: 570px;
+  }
+  .span7 {
+    width: 670px;
+  }
+  .span8 {
+    width: 770px;
+  }
+  .span9 {
+    width: 870px;
+  }
+  .span10 {
+    width: 970px;
+  }
+  .span11 {
+    width: 1070px;
+  }
+  .span12 {
+    width: 1170px;
+  }
+  .offset1 {
+    margin-left: 100px;
+  }
+  .offset2 {
+    margin-left: 200px;
+  }
+  .offset3 {
+    margin-left: 300px;
+  }
+  .offset4 {
+    margin-left: 400px;
+  }
+  .offset5 {
+    margin-left: 500px;
+  }
+  .offset6 {
+    margin-left: 600px;
+  }
+  .offset7 {
+    margin-left: 700px;
+  }
+  .offset8 {
+    margin-left: 800px;
+  }
+  .offset9 {
+    margin-left: 900px;
+  }
+  .offset10 {
+    margin-left: 1000px;
+  }
+  .offset11 {
+    margin-left: 1100px;
+  }
+  .offset12 {
+    margin-left: 1200px;
   }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
 }
-*/
\ No newline at end of file
diff --git a/bootstrap.min.css b/bootstrap.min.css
index d8ee06c15..4ee8f84fa 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -173,7 +173,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
 .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
 .bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
 .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
-.navbar{height:40px;overflow:visible;}
+.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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
 .navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
@@ -285,7 +285,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .step-nav .next{right:15px;}
 .step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
 .step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
-.subnav{position:relative;background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.subnav a{padding:10px 15px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;}
+.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;}
 .subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;}
 .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}
 .subnav ul .active>a{color:#404040;background-color:#eee;}
@@ -328,4 +328,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid li{display:inline;}
 .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
 .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
-@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [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;}}
+.hidden{display:none;visibility:hidden;}
+@media (max-width: 480px){.modal{width:auto;margin:0;} .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;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [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 (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a7b52821e..281b224e3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -315,11 +315,6 @@ h2 + table {
 -------------------------------------------------- */
 @media (max-width: 480px) {
 
-  /* Hide the nav for now */
-  body > .navbar-fixed .nav {
-    display: none;
-  }
-
   /* Change up some type stuff */
   h1 small {
     display: block;
@@ -365,11 +360,6 @@ h2 + table {
 
 @media (max-width: 768px) {
 
-  /* Hide the nav for now */
-  body > .navbar-fixed .nav {
-    display: none;
-  }
-
   /* Adjust the jumbotron */
   .jumbotron .benefits {
     position: relative;
@@ -394,6 +384,9 @@ h2 + table {
   .footer .pull-right {
     float: none;
   }
+  .footer p {
+    margin-bottom: 9px;
+  }
 
 }
 
@@ -423,7 +416,7 @@ h2 + table {
   /* Provide enough space on right-hand side for benefits list */
   .jumbotron h1,
   .jumbotron p {
-    margin-right: 40%;
+    margin-right: 20%;
   }
 }
 
diff --git a/docs/assets/img/less-small.png b/docs/assets/img/less-small.png
new file mode 100644
index 000000000..763b847e8
--- /dev/null
+++ b/docs/assets/img/less-small.png
diff --git a/docs/index.html b/docs/index.html
index ff7d56976..16eed36c8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -151,7 +151,7 @@
               <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
             </div>
             <div class="span4">
-              <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+              <img class="icon" src="assets/img/less-small.png">
               <h2>Built on LESS</h2>
               <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
             </div>
@@ -175,7 +175,7 @@
             <div class="span3">
               <img class="small-icon" src="assets/img/icon-twitter.png">
               <h3>Made at Twitter</h3>
-              <p>Brought to you by experienced engineers and designers.</p>
+              <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
             </div>
           </div><!--/row-->
         </div>
@@ -196,6 +196,16 @@
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+
+    <script type="text/javascript">
+      $(document).ready(function() {
+        $('.nav .active a').click(function(e) {
+          e.preventDefault();
+          $(this).parent().siblings().toggle();
+        });
+      });
+    </script>
+
     <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
diff --git a/docs/less.html b/docs/less.html
index 97d95a3ab..e9334a552 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -63,7 +63,7 @@
       <div class="row">
         <div class="span4">
           <h3>Why LESS?</h3>
-          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p>
+          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
         </div>
         <div class="span4">
           <h3>What's included?</h3>
@@ -72,7 +72,7 @@
         <div class="span4">
           <h3>Learn more</h3>
           <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
-          <p>Visit the official website at http://lesscss.org to learn more.</p>
+          <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
         </div>
       </div>
       <div class="row">
@@ -98,11 +98,7 @@
         <h1>Variables <small>from variables.less</small></h1>
       </div>
 
-      <div class="row">
-        <div class="span3">
           <h3>Hyperlinks</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <thead>
               <tr>
@@ -124,92 +120,70 @@
               </tr>
             </tbody>
           </table>
-        </div>
-      </div>
 
       <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Grayscale colors</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@black</code></td>
                 <td>#000</td>
-                <td>Black</td>
               </tr>
               <tr>
                 <td><code>@grayDark</code></td>
                 <td><code>lighten(@black, 25%)</code></td>
-                <td>Dark gray</td>
               </tr>
               <tr>
                 <td><code>@gray</code></td>
                 <td><code>lighten(@black, 50%)</code></td>
-                <td>Medium gray</td>
               </tr>
               <tr>
                 <td><code>@grayLight</code></td>
                 <td><code>lighten(@black, 75%)</code></td>
-                <td>Light gray</td>
               </tr>
               <tr>
                 <td><code>@grayLighter</code></td>
                 <td><code>lighten(@black, 90%)</code></td>
-                <td>Lighter gray</td>
               </tr>
               <tr>
                 <td><code>@white</code></td>
                 <td>#fff</td>
-                <td>White</td>
               </tr>
             </tbody>
           </table>
         </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Accent colors</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@blue</code></td>
                 <td>#049CDB</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@green</code></td>
                 <td>#46a546</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@red</code></td>
                 <td>#9d261d</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@yellow</code></td>
                 <td>#ffc40d</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@orange</code></td>
                 <td>#f89406</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@pink</code></td>
                 <td>#c3325f</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@purple</code></td>
                 <td>#7a43b6</td>
-                <td></td>
               </tr>
             </tbody>
           </table>
@@ -217,48 +191,36 @@
       </div>
 
       <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Grid system</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@gridColumns</code></td>
                 <td>12</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@gridColumnWidth</code></td>
                 <td>60px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@gridGutterWidth</code></td>
                 <td>20px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@siteWidth</code></td>
                 <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-                <td></td>
               </tr>
             </tbody>
           </table>
         </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Typography</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@baseFontSize</code></td>
                 <td>13px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@baseFontFamily</code></td>
@@ -268,7 +230,6 @@
               <tr>
                 <td><code>@baseLineHeight</code></td>
                 <td>18px</td>
-                <td></td>
               </tr>
             </tbody>
           </table>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index dd7f05bc6..d4d1c6526 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -53,15 +53,6 @@
         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
       </header>
 
-      <!-- Work in progress sub nav for docs -->
-      <div class="navbar subnav docked-top">
-        <ul class="nav">
-          <li class="active"><a href="#">Grid system</a></li>
-          <li><a href="#">Layouts</a></li>
-          <li><a href="#">Responsive</a></li>
-        </ul>
-      </div>
-
 
 
 <!-- Grid system
diff --git a/lib/patterns.less b/lib/patterns.less
index 15c3c9c06..cd2fdc01e 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -13,7 +13,6 @@
 
 // Common styles
 .navbar {
-  height: @navBarHeight;
   overflow: visible;
 }
 // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
@@ -303,8 +302,6 @@
 
 
 
-
-
 // PAGE HEADERS
 // ------------
 
diff --git a/lib/responsive.less b/lib/responsive.less
index f63f90c98..e0772b111 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -3,26 +3,21 @@
 // -------------------------------------------------------------
 
 
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5BP
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+
 // UP TO LANDSCAPE PHONE
 // ---------------------
 
 @media (max-width: 480px) {
-  // Remove width from containers
-  .container {
-    width: auto;
-    padding: 0 15px;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
   // Resize modals
   .modal {
     width: auto;
@@ -30,36 +25,35 @@
   }
 
   // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
+  .horizontal-form .control-group > label {
     float: none;
     width: auto;
     padding-top: 0;
     text-align: left;
   }
   // Move over all input controls and content
-  .form-horizontal .controls {
+  .horizontal-form .controls {
     margin-left: 0;
   }
   // Move the options list down to align with labels
-  .form-horizontal .control-list {
+  .horizontal-form .control-list {
     padding-top: 0; // has to be padding because margin collaspes
   }
   // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
+  .horizontal-form .form-actions {
     padding-left: 0;
   }
-
 }
 
 
 // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
 // --------------------------------------------------
 
-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
   // Remove width from containers
   .container {
     width: auto;
-    padding: 0 10px;
+    padding: 0 20px;
   }
   // Undo negative margin on rows
   .row {
@@ -72,6 +66,54 @@
     width: auto;
     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);
+  }
 }
 
 
@@ -129,7 +171,6 @@
 
 }
 
-/*
 // LARGE DESKTOP & UP
 // ------------------
 
@@ -185,4 +226,3 @@
   .offset12  { .offset(12); }
 
 }
-*/
\ No newline at end of file
diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less
index e9b58d04a..ad6459c0d 100644
--- a/lib/tabs-pills.less
+++ b/lib/tabs-pills.less
@@ -264,11 +264,12 @@
 // Subnav
 // STILL A WIP
 .subnav {
-  position: relative;
   #gradient > .vertical(#f5f5f5, #eeeeee);
-  .border-radius(6px);
+  @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
+  .box-shadow(@shadow);
   a {
-    padding: 10px 15px;
+    padding: 8px 10px;
+    font-size: 12px;
     color: @linkColor;
     text-shadow: 0 1px 0 #fff;
     border-left: 1px solid #f9f9f9;