overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class

13 files changed, 999 insertions, 894 deletions

diff --git a/bootstrap.css b/bootstrap.css
index f6dd39226..5c9d4aa97 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: Sat Jan  7 15:52:40 PST 2012
+ * Date: Sat Jan  7 20:25:41 PST 2012
  */
 html, body {
   margin: 0;
@@ -516,9 +516,9 @@ pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
@@ -541,6 +541,7 @@ legend {
   line-height: 36px;
   color: #333333;
   border-bottom: 1px solid #eee;
+  -webkit-margin-collapse: separate;
 }
 label,
 input,
@@ -1502,6 +1503,16 @@ i {
   background-image: linear-gradient(top, #049cdb, #0064cd);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+  background-color: #0077b3;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -ms-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(top, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);
   -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
   -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
@@ -1692,19 +1703,51 @@ i {
   left: 0;
   z-index: 1010;
 }
-.nav {
+.navbar .nav {
   position: relative;
   left: 0;
   display: block;
   float: left;
   margin: 0 10px 0 0;
+  /*  // Dropdowns within the .nav
+  .dropdown-toggle:hover,
+  .dropdown.open .dropdown-toggle {
+    background: #444;
+    background: rgba(255,255,255,.05);
+  }
+  .dropdown-menu {
+    background-color: #333;
+    .dropdown-toggle {
+      color: @white;
+      &.open {
+        background: #444;
+        background: rgba(255,255,255,.05);
+      }
+    }
+    li a {
+      padding: 4px 15px;
+      color: #999;
+      text-shadow: 0 1px 0 rgba(0,0,0,.5);
+      &:hover {
+        #gradient > .vertical(#292929,#191919);
+        color: @white;
+      }
+    }
+    .active a {
+      color: @white;
+    }
+    .divider {
+      background-color: #222;
+      border-color: #444;
+    }
+  }*/
+
 }
-.nav > li {
+.navbar .nav > li {
   display: block;
   float: left;
 }
-.nav a {
-  display: block;
+.navbar .nav a {
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
@@ -1712,15 +1755,15 @@ i {
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-.nav a:hover {
+.navbar .nav a:hover {
   color: #ffffff;
   text-decoration: none;
 }
-.nav .active > a {
+.navbar .nav .active > a {
   background-color: #222;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.nav .vertical-divider {
+.navbar .nav .vertical-divider {
   height: 40px;
   width: 1px;
   margin: 0 5px;
@@ -1728,58 +1771,55 @@ i {
   background-color: #222;
   border-right: 1px solid #444;
 }
-.nav.secondary-nav {
+.navbar .nav.secondary-nav {
   float: right;
   margin-left: 10px;
   margin-right: 0;
 }
-.nav.secondary-nav .dropdown-menu {
+.navbar .nav.secondary-nav .dropdown-menu {
   right: 0;
   border: 0;
 }
-.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
-  background: #444;
-  background: rgba(255, 255, 255, 0.05);
+.nav {
+  margin-left: 0;
+  margin-bottom: 18px;
+  list-style: none;
 }
-.nav .dropdown-menu {
-  background-color: #333;
+.nav > li > a {
+  display: block;
 }
-.nav .dropdown-menu .dropdown-toggle {
-  color: #ffffff;
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: #eee;
 }
-.nav .dropdown-menu .dropdown-toggle.open {
-  background: #444;
-  background: rgba(255, 255, 255, 0.05);
-}
-.nav .dropdown-menu li a {
-  padding: 4px 15px;
-  color: #999;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-}
-.nav .dropdown-menu li a:hover {
-  background-color: #191919;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
-  background-image: -moz-linear-gradient(top, #292929, #191919);
-  background-image: -ms-linear-gradient(top, #292929, #191919);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
-  background-image: -webkit-linear-gradient(top, #292929, #191919);
-  background-image: -o-linear-gradient(top, #292929, #191919);
-  background-image: linear-gradient(top, #292929, #191919);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
-  color: #ffffff;
+.nav.list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
 }
-.nav .dropdown-menu .active a {
-  color: #ffffff;
+.nav.list > li > a, .nav.list .nav-header {
+  display: block;
+  padding: 3px 15px;
+  margin-left: -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.nav .dropdown-menu .divider {
-  background-color: #222;
-  border-color: #444;
+.nav.list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav.list .active > a {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  background-color: #0088cc;
 }
 .tabs, .pills {
-  padding: 0;
-  margin: 0 0 20px;
-  list-style: none;
   zoom: 1;
 }
 .tabs:before,
@@ -1798,29 +1838,26 @@ i {
   float: left;
 }
 .tabs > li > a, .pills > li > a {
-  display: block;
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px;
 }
 .tabs {
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
+  border-bottom: 1px solid #ddd;
 }
 .tabs > li {
-  position: relative;
   margin-bottom: -1px;
 }
 .tabs > li > a {
-  padding: 0 15px;
-  margin-right: 2px;
-  line-height: 36px;
+  padding-top: 9px;
+  padding-bottom: 9px;
   border: 1px solid transparent;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }
 .tabs > li > a:hover {
-  text-decoration: none;
-  background-color: #eee;
   border-color: #eee #eee #ddd;
 }
 .tabs .active > a, .tabs .active > a:hover {
@@ -1830,6 +1867,76 @@ i {
   border-bottom-color: transparent;
   cursor: default;
 }
+.pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.pills .active > a, .pills .active > a:hover {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+.nav.stacked > li {
+  float: none;
+}
+.nav.stacked > li > a {
+  margin-right: 0;
+}
+.tabs.stacked {
+  border-bottom: 0;
+}
+.tabs.stacked > li > a {
+  border: 1px solid #ddd;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.tabs.stacked > li:first-child > a {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.tabs.stacked > li:last-child > a {
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.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;
+}
+.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;
+}
 .tabbable {
   margin-bottom: 18px;
 }
@@ -1929,46 +2036,6 @@ i {
   border-color: #ddd;
   border-left-color: transparent;
 }
-.tabs .dropdown-menu {
-  top: 37px;
-  border-width: 1px;
-}
-.tabs .dropdown-toggle .caret {
-  margin-top: 15px;
-  margin-left: 5px;
-}
-.tabs .open .dropdown-toggle {
-  border-color: #999;
-}
-.tabs .open .dropdown-toggle .caret {
-  border-top-color: #fff;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  opacity: 1;
-}
-.pills > li > a {
-  padding: 0 15px;
-  margin: 5px 3px 5px 0;
-  line-height: 30px;
-  text-shadow: 0 1px 1px #ffffff;
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  border-radius: 15px;
-}
-.pills > li > a:hover {
-  color: #ffffff;
-  text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #005580;
-}
-.pills .active > a {
-  color: #ffffff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #0088cc;
-}
-.pills-vertical > li {
-  float: none;
-}
 .tab-content > .tab-pane, .pill-content > .pill-pane {
   display: none;
 }
@@ -2060,27 +2127,29 @@ i {
   color: #333333;
   background-color: #eee;
 }
-.side-nav {
-  padding: 9px 0;
+/*.side-nav {
+  padding: @baseLineHeight / 2 0;
 }
-.side-nav .nav-label, .side-nav .nav-item {
+.side-nav .nav-label,
+.side-nav .nav-item {
   display: block;
   padding: 3px 15px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
 .side-nav .nav-label {
   font-size: 11px;
-  line-height: 18px;
-  color: #999999;
+  line-height: @baseLineHeight;
+  color: @grayLight;
   text-transform: uppercase;
 }
 .side-nav .nav-group {
-  margin: 0;
+  margin: 0; // clear default ul margins
   list-style: none;
 }
 .side-nav .nav-group + .nav-label {
   margin-top: 9px;
 }
+
 .side-nav .nav-item {
   font-weight: bold;
 }
@@ -2092,22 +2161,11 @@ i {
 }
 .side-nav .active .nav-item {
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
-  background-color: #999999;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
-  background-image: -moz-linear-gradient(top, #cccccc, #999999);
-  background-image: -ms-linear-gradient(top, #cccccc, #999999);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
-  background-image: -webkit-linear-gradient(top, #cccccc, #999999);
-  background-image: -o-linear-gradient(top, #cccccc, #999999);
-  background-image: linear-gradient(top, #cccccc, #999999);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
-  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-}
-.breadcrumb {
+  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+  #gradient > .vertical(#ccc, #999);
+  @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}*/.breadcrumb {
   padding: 7px 14px;
   margin: 0 0 18px;
   background-color: #f5f5f5;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index e08068a78..5597bf1ef 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -91,10 +91,10 @@ blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-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;}
-pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
+pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
 form{margin-bottom:18px;}
-legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
+legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;-webkit-margin-collapse:separate;}
 label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;}
 label{display:block;margin-bottom:5px;color:#333333;}
 input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
@@ -304,7 +304,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .dropdown .caret{margin-top:8px;margin-left:2px;}
 .dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
 .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
-.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
+.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
 .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
 .dropdown.open .dropdown-menu{display:block;}
 .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
@@ -325,21 +325,43 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .navbar-static{margin-bottom:18px;}
 .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 .navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;}
-.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
-.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;}
-.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
-.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
-.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu li a{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
-.nav .dropdown-menu .active a{color:#ffffff;}
-.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
-.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
+.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.navbar .nav>li{display:block;float:left;}
+.navbar .nav a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .nav a:hover{color:#ffffff;text-decoration:none;}
+.navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.navbar .nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
+.navbar .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.navbar .nav.secondary-nav .dropdown-menu{right:0;border:0;}
+.nav{margin-left:0;margin-bottom:18px;list-style:none;}
+.nav>li>a{display:block;}
+.nav>li>a:hover{text-decoration:none;background-color:#eee;}
+.nav.list{padding-left:14px;padding-right:14px;margin-bottom:0;}
+.nav.list>li>a,.nav.list .nav-header{display:block;padding:3px 15px;margin-left:-15px;margin-right:-15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.nav.list .nav-header{font-size:11px;font-weight:bold;line-height:18px;color:#999999;text-transform:uppercase;}
+.nav.list>li+.nav-header{margin-top:9px;}
+.nav.list .active>a{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);background-color:#0088cc;}
+.tabs,.pills{zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
 .tabs:after,.pills:after{clear:both;}
-.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs>li,.pills>li{float:left;}
+.tabs>li>a,.pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px;}
+.tabs{border-bottom:1px solid #ddd;}
+.tabs>li{margin-bottom:-1px;}
+.tabs>li>a{padding-top:9px;padding-bottom:9px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{border-color:#eee #eee #ddd;}
 .tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
+.pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
+.pills .active>a,.pills .active>a:hover{color:#ffffff;background-color:#0088cc;}
+.nav.stacked>li{float:none;}
+.nav.stacked>li>a{margin-right:0;}
+.tabs.stacked{border-bottom:0;}
+.tabs.stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
+.tabs.stacked>li:first-child>a{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}
+.tabs.stacked>li:last-child>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
+.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;}
+.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;}
 .tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
 .tabbable .tab-content{padding:19px;border:1px solid #ddd;}
 .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
@@ -354,13 +376,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .tabbable.tabs-right .tab-content{margin-right:100px;}
 .tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
 .tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
-.tabs .dropdown-menu{top:37px;border-width:1px;}
-.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;}
-.tabs .open .dropdown-toggle{border-color:#999;}
-.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
-.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;}
-.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;}
-.pills-vertical>li{float:none;}
 .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
 .tab-content>.active,.pill-content>.active{display:block;}
 .step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;}
@@ -373,15 +388,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .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:#333333;background-color:#eee;}
-.side-nav{padding:9px 0;}
-.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
-.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;}
-.side-nav .nav-group{margin:0;list-style:none;}
-.side-nav .nav-group+.nav-label{margin-top:9px;}
-.side-nav .nav-item{font-weight:bold;}
-.side-nav .nav-item i{vertical-align:-2px;}
-.side-nav .nav-item:hover{text-decoration:none;}
-.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
 .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
 .breadcrumb .divider{padding:0 5px;color:#999999;}
 .breadcrumb .active a{color:#333333;}
diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css
index f195124a9..0d54905fb 100644
--- a/docs/assets/js/google-code-prettify/prettify.css
+++ b/docs/assets/js/google-code-prettify/prettify.css
@@ -6,21 +6,13 @@
 .kwd, .linenums .tag { color: #1e347b; }
 .typ, .atn, .dec, .var { color: teal; }
 .pln { color: #48484c; }
-pre.prettyprint {
-  background-color: #fefbf3;
-  padding: 9px;
-  margin-bottom: 9px;
-}
-
-pre.prettyprint {
-  color: #ccc;
-  background-color: #252525;
-}
 
-pre.prettyprint {
+.prettyprint {
   padding: 8px;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
   -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
           box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
diff --git a/docs/components.html b/docs/components.html
index ce16c8092..eb9932473 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -54,237 +54,316 @@
       </header>
 
 
-<!-- Media
+
+<!-- Nav, Tabs, & Pills
 ================================================== -->
-<section id="media">
+<section id="tabsAndPills">
   <div class="page-header">
-    <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
+    <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
   </div>
 
+  <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
   <div class="row">
-    <div class="span6">
-      <h2>Default thumbnails</h2>
-      <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
-      <ul class="thumbnails">
-        <li class="span3">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-          </a>
-        </li>
-        <li class="span3">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-          </a>
-        </li>
-        <li class="span3">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-          </a>
-        </li>
-        <li class="span3">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-          </a>
-        </li>
+    <div class="span4">
+      <h3>Powerful base class</h3>
+      <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
+      <h3>Why tabs and pills</h3>
+      <p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
+      <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
+    </div>
+    <div class="span4">
+      <h3>Basic tabs</h3>
+      <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.tabs</code>:</p>
+      <ul class="nav tabs">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
       </ul>
+<pre class="prettyprint linenums">
+&lt;ul class="nav tabs"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
     </div>
-    <div class="span6">
-      <h2>Highly customizable</h2>
-      <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
-      <ul class="thumbnails">
-        <li class="span3">
-          <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-            <div class="caption">
-              <h5>Thumbnail label</h5>
-              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
-            </div>
-          </div>
-        </li>
-        <li class="span3">
-          <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
-            <div class="caption">
-              <h5>Thumbnail label</h5>
-              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
-            </div>
-          </div>
-        </li>
+    <div class="span4">
+      <h3>Basic pills</h3>
+      <p>Take that same HTML, but use <code>.pills</code> instead:</p>
+      <ul class="nav pills">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
       </ul>
+<pre class="prettyprint linenums">
+&lt;ul class="nav pills"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
     </div>
   </div>
 
+  <h2>Stackable <small>Make tabs or pills vertical</small></h2>
   <div class="row">
     <div class="span4">
-      <h3>Why use thumbnails</h3>
-      <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
+      <h3>How to stack 'em</h3>
+      <p>As tabs and pills are horizontal by default, just add a second class, <code>.stacked</code>, to make them appear vertically stacked.</p>
     </div>
     <div class="span4">
-      <h3>Simple, flexible markup</h3>
-      <p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
+      <h3>Stacked tabs</h3>
+      <ul class="nav tabs stacked">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+<pre class="prettyprint linenums">
+&lt;ul class="nav tabs stacked"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
     <div class="span4">
-      <h3>Uses grid column sizes</h3>
-      <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
+      <h3>Stacked pills</h3>
+      <ul class="nav pills stacked">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+<pre class="prettyprint linenums">
+&lt;ul class="nav pills stacked"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
   </div>
 
+  <h2>Dropdowns <small>For advanced nav components</small></h2>
   <div class="row">
-    <div class="span6">
-      <h2>The markup</h2>
-      <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
+    <div class="span4">
+      <h3>Rich menus made easy</h3>
+      <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
+      <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
+    </div>
+    <div class="span4">
+      <h3>Tabs with dropdowns</h3>
+      <ul class="nav tabs">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
 <pre class="prettyprint linenums">
-&lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
-    &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
-    &lt;/a&gt;
+&lt;ul class="nav tabs"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#"&gt;
+        Dropdown
+        &lt;b class="caret"&gt;&lt;/b&gt;
+      &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      &lt;!-- links --&gt;
+    &lt;/ul&gt;
   &lt;/li&gt;
-  ...
 &lt;/ul&gt;
 </pre>
-      <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
+    </div>
+    <div class="span4">
+      <h3>Pills with dropdowns</h3>
+      <ul class="nav pills">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
 <pre class="prettyprint linenums">
-&lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
-    &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
-      &lt;h5&gt;Thumbnail label&lt;/h5&gt;
-      &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
-    &lt;/div&gt;
+&lt;ul class="nav pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#"&gt;
+        Dropdown
+        &lt;b class="caret"&gt;&lt;/b&gt;
+      &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      &lt;!-- links --&gt;
+    &lt;/ul&gt;
   &lt;/li&gt;
-  ...
 &lt;/ul&gt;
 </pre>
     </div>
-    <div class="span6">
-      <h2>More examples</h2>
-      <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
-      <ul class="thumbnails">
-        <li class="span4">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x230" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
-          </a>
-        </li>
-      </ul>
+  </div>
+
+  <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
+  <div class="row">
+    <div class="span4">
+      <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>
+    </div>
+    <div class="span4">
+      <h3>Example sidebar navigation</h3>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Library</a></li>
+          <li><a href="#">Applications</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#">Profile</a></li>
+          <li><a href="#">Settings</a></li>
+          <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;
+    List header
+  &lt;/li&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Library&lt;/a&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
   </div>
 
-</section>
 
 
 
-<!-- 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>
 
+      <h3>Tabbable tabs</h3>
+      <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
 
+      <div class="tabbable">
+        <ul class="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>
+          <li><a href="#3" data-toggle="tab">Section 3</a></li>
+          <li><a href="#4" data-toggle="tab">Section 4</a></li>
+        </ul>
+        <div class="tab-content">
+          <div class="tab-pane active" id="1">
+            <p>Oh hai #1!</p>
+          </div>
+          <div class="tab-pane" id="2">
+            <p>Oh hai #2!</p>
+          </div>
+          <div class="tab-pane" id="3">
+            <p>Oh hai #3!</p>
+          </div>
+          <div class="tab-pane" id="4">
+            <p>Oh hai #4!</p>
+          </div>
+        </div>
+      </div>
 
-<!-- Side nav
-================================================== -->
-<section id="sidenav">
-  <div class="page-header">
-    <h1>Side nav <small>for lists of links</small></h1>
-  </div>
+       <div class="row">
+        <div class="span4">
+          <div class="tabbable tabs-left">
+            <ul class="tabs">
+              <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
+              <li><a href="#6" data-toggle="tab">Section 2</a></li>
+              <li><a href="#7" data-toggle="tab">Section 3</a></li>
+            </ul>
+            <div class="tab-content" id="myTabContent2">
+              <div class="tab-pane active" id="5">
+                <h4>Section 1</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+              <div class="tab-pane" id="6">
+                <h4>Section 2</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+              <div class="tab-pane" id="7">
+                <h4>Section 3</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="span4 offset1">
+          <div class="tabbable tabs-right">
+            <ul class="tabs">
+              <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
+              <li><a href="#9" data-toggle="tab">Section 2</a></li>
+              <li><a href="#10" data-toggle="tab">Section 3</a></li>
+            </ul>
+            <div class="tab-content" id="myTabContent3">
+              <div class="tab-pane active" id="8">
+                <h4>Section 1</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+              <div class="tab-pane" id="9">
+                <h4>Section 2</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+              <div class="tab-pane" id="10">
+                <h4>Section 3</h4>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-  <div class="row">
-    <div class="span3">
-      <h3>Examples</h3>
-      <p>Side navs can be just links, links with headings, and links with icons.</p>
-      <div class="well side-nav">
-        <ul class="nav-group">
-          <li class="active"><a class="nav-item" href="#">Home</a></li>
-          <li><a class="nav-item" href="#">Library</a></li>
-          <li><a class="nav-item" href="#">Help</a></li>
-        </ul>
-        <h6 class="nav-label">Your account</h6>
-        <ul class="nav-group">
-          <li><a class="nav-item" href="#">Profile</a></li>
-          <li><a class="nav-item" href="#">Settings</a></li>
-        </ul>
-        <h6 class="nav-label">Your account</h6>
-        <ul class="nav-group">
-          <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
-          <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
-          <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
-          <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
-          <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
+      <div class="tabbable tabs-bottom">
+        <div class="tab-content">
+          <div class="tab-pane active" id="11">
+            <p>Oh hai #1!</p>
+          </div>
+          <div class="tab-pane" id="12">
+            <p>Oh hai #2!</p>
+          </div>
+          <div class="tab-pane" id="13">
+            <p>Oh hai #3!</p>
+          </div>
+          <div class="tab-pane" id="14">
+            <p>Oh hai #4!</p>
+          </div>
+        </div>
+        <ul class="tabs">
+          <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
+          <li><a href="#12" data-toggle="tab">Section 2</a></li>
+          <li><a href="#13" data-toggle="tab">Section 3</a></li>
+          <li><a href="#14" data-toggle="tab">Section 4</a></li>
         </ul>
       </div>
-    </div>
-    <div class="span3">
-      <h3>Why use it</h3>
-      <p></p>
-    </div>
-    <div class="span6">
-      <h3>Markup</h3>
-      <p>Marking up a side nav is at the core just writing an unordered list of links.</p>
-<pre class="prettyprint linenums">
-  &lt;ul class="nav-group"&gt;
-    &lt;li class="active"&gt;
-      &lt;a class="nav-item" href="#"&gt;Home&lt;/a&gt;
-    &lt;/li&gt;
-    &lt;li&gt;&lt;a class="nav-item" href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a class="nav-item" href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-</pre>
-      <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
-<pre class="prettyprint linenums">
-  &lt;h6 class="nav-label"&gt;&lt;/h6&gt;
-  &lt;ul class="nav-group"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;h6 class="nav-label"&gt;&lt;/h6&gt;
-  &lt;ul class="nav-group"&gt;
-    ...
-  &lt;/ul&gt;
-</pre>
-    </div>
-  </div>
-  
+
 </section>
 
 
@@ -354,7 +433,6 @@
   ...
 &lt;/div&gt;
 </pre>
-      <br>
       <h3>Brand name</h3>
       <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 <pre class="prettyprint linenums">
@@ -362,7 +440,6 @@
   Project name
 &lt;/a&gt;
 </pre>
-      <br>
       <h3>Search form</h3>
       <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
 <pre class="prettyprint linenums">
@@ -405,180 +482,6 @@
 
 
 
-<!-- Tabs & Pills
-================================================== -->
-<section id="tabsAndPills">
-  <div class="page-header">
-    <h1>Tabs and pills <small></small></h1>
-  </div>
-
-  <div class="row">
-    <div class="span3">
-      <p>Create simple secondary navigation with a <code>&lt;ul&gt;</code>. Swap between tabs or pills by adding the appropriate class.</p>
-      <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
-    </div>
-    <div class="span9">
-      <h3>Basic tabs example</h3>
-      <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
-      <ul class="tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-        <li><a href="#">Settings</a></li>
-        <li><a href="#">Contact</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Secondary link</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Another link</a></li>
-          </ul>
-        </li>
-      </ul>
-<pre class="prettyprint linenums">
-&lt;ul class="tabs"&gt;
-  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-      <h3>Tabbable tabs</h3>
-      <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
-
-      <div class="tabbable">
-        <ul class="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>
-          <li><a href="#3" data-toggle="tab">Section 3</a></li>
-          <li><a href="#4" data-toggle="tab">Section 4</a></li>
-        </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="1">
-            <p>Oh hai #1!</p>
-          </div>
-          <div class="tab-pane" id="2">
-            <p>Oh hai #2!</p>
-          </div>
-          <div class="tab-pane" id="3">
-            <p>Oh hai #3!</p>
-          </div>
-          <div class="tab-pane" id="4">
-            <p>Oh hai #4!</p>
-          </div>
-        </div>
-      </div>
-
-       <div class="row">
-        <div class="span4">
-          <div class="tabbable tabs-left">
-            <ul class="tabs">
-              <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
-              <li><a href="#6" data-toggle="tab">Section 2</a></li>
-              <li><a href="#7" data-toggle="tab">Section 3</a></li>
-            </ul>
-            <div class="tab-content" id="myTabContent2">
-              <div class="tab-pane active" id="5">
-                <h4>Section 1</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-              <div class="tab-pane" id="6">
-                <h4>Section 2</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-              <div class="tab-pane" id="7">
-                <h4>Section 3</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="span4 offset1">
-          <div class="tabbable tabs-right">
-            <ul class="tabs">
-              <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
-              <li><a href="#9" data-toggle="tab">Section 2</a></li>
-              <li><a href="#10" data-toggle="tab">Section 3</a></li>
-            </ul>
-            <div class="tab-content" id="myTabContent3">
-              <div class="tab-pane active" id="8">
-                <h4>Section 1</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-              <div class="tab-pane" id="9">
-                <h4>Section 2</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-              <div class="tab-pane" id="10">
-                <h4>Section 3</h4>
-                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="tabbable tabs-bottom">
-        <div class="tab-content">
-          <div class="tab-pane active" id="11">
-            <p>Oh hai #1!</p>
-          </div>
-          <div class="tab-pane" id="12">
-            <p>Oh hai #2!</p>
-          </div>
-          <div class="tab-pane" id="13">
-            <p>Oh hai #3!</p>
-          </div>
-          <div class="tab-pane" id="14">
-            <p>Oh hai #4!</p>
-          </div>
-        </div>
-        <ul class="tabs">
-          <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
-          <li><a href="#12" data-toggle="tab">Section 2</a></li>
-          <li><a href="#13" data-toggle="tab">Section 3</a></li>
-          <li><a href="#14" data-toggle="tab">Section 4</a></li>
-        </ul>
-      </div>
-
-
-      <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
-      <hr>
-      <h3>Basic pills example</h3>
-      <ul class="pills">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-        <li><a href="#">Settings</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-<pre class="prettyprint linenums">
-&lt;ul class="pills"&gt;
-  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-      <h3>Vertical pill nav</h3>
-      <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
-      <ul class="pills pills-vertical span4">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-        <li><a href="#">Settings</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-    </div>
-  </div><!-- /row -->
-
-</section>
-
-
-
 <!-- Breadcrumbs
 ================================================== -->
 <section id="breadcrumbs">
@@ -629,39 +532,6 @@
 
 
 
-<!-- Step nav
-==================================================
-
-COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
-
-<section id="stepNav">
-  <div class="page-header">
-    <h1>Step nav <small></small></h1>
-  </div>
-  <div class="row">
-    <div class="span3">
-      <p>Placeholder for now!</p>
-    </div>
-    <div class="span9">
-      <br>
-      <ul class="step-nav">
-        <li class="prev"><a href="#">&laquo; Overview</a></li>
-        <li class="active"><a class="dot" href="#">1</a></li>
-        <li><a class="dot" href="#">2</a></li>
-        <li><a class="dot" href="#">3</a></li>
-        <li><a class="dot" href="#">4</a></li>
-        <li><a class="dot" href="#">5</a></li>
-        <li class="next"><a href="#">Base CSS &raquo;</a></li>
-      </ul>
-      <br>
-      <br>
-    </div>
-  </div>
-</section>
--->
-
-
-
 <!-- Pagination
 ================================================== -->
 <section id="carousel">
@@ -727,6 +597,175 @@ COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
 
 
 
+<!-- Media
+================================================== -->
+<section id="media">
+  <div class="page-header">
+    <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <h2>Default thumbnails</h2>
+      <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
+      <ul class="thumbnails">
+        <li class="span3">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li class="span3">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li class="span3">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li class="span3">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="span6">
+      <h2>Highly customizable</h2>
+      <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
+      <ul class="thumbnails">
+        <li class="span3">
+          <div class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+            <div class="caption">
+              <h5>Thumbnail label</h5>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+            </div>
+          </div>
+        </li>
+        <li class="span3">
+          <div class="thumbnail">
+            <img src="http://placehold.it/210x150" alt="">
+            <div class="caption">
+              <h5>Thumbnail label</h5>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Why use thumbnails</h3>
+      <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
+    </div>
+    <div class="span4">
+      <h3>Simple, flexible markup</h3>
+      <p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
+    </div>
+    <div class="span4">
+      <h3>Uses grid column sizes</h3>
+      <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <h2>The markup</h2>
+      <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
+<pre class="prettyprint linenums">
+&lt;ul class="thumbnails"&gt;
+  &lt;li class="span3"&gt;
+    &lt;a href="#" class="thumbnail"&gt;
+      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+      <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
+<pre class="prettyprint linenums">
+&lt;ul class="thumbnails"&gt;
+  &lt;li class="span3"&gt;
+    &lt;div class="thumbnail"&gt;
+      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;h5&gt;Thumbnail label&lt;/h5&gt;
+      &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+    </div>
+    <div class="span6">
+      <h2>More examples</h2>
+      <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
+      <ul class="thumbnails">
+        <li class="span4">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/290x230" alt="">
+          </a>
+        </li>
+        <li class="span2">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/130x100" alt="">
+          </a>
+        </li>
+        <li class="span2">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/130x100" alt="">
+          </a>
+        </li>
+        <li class="span2">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/130x100" alt="">
+          </a>
+        </li>
+        <li class="span2">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/130x100" alt="">
+          </a>
+        </li>
+        <li class="span2">
+          <a href="#" class="thumbnail">
+            <img src="http://placehold.it/130x100" alt="">
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</section>
+
+
+
+<!-- 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/upgrading.html b/docs/upgrading.html
index 3e7e2c768..f6070f846 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -113,6 +113,15 @@
       <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
     </ul>
   </li>
+  <li>Navigation
+    <ul>
+      <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
+      <li>New nav list component added that uses the same base class, <code>.nav</code></li>
+      <li>Vertical tabs and pills have been added&mdash;just add <code>.stacked</code> to the <code>&lt;ul&gt;</code></li>
+      <li>Pills were restyled to be less rounded by default</li>
+      <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
+    </ul>
+  </li>
 </ul>
 <!--
   <li>
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index d82dffc65..2bec3dd01 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -33,8 +33,7 @@
 
 // Components: Nav
 @import "navbar.less";
-@import "tabs-pills.less";
-@import "sidenav.less";
+@import "navs.less";
 @import "breadcrumbs.less";
 @import "pagination.less";
 
diff --git a/lib/dropdowns.less b/lib/dropdowns.less
index 00c686dc2..a1b9e37bc 100644
--- a/lib/dropdowns.less
+++ b/lib/dropdowns.less
@@ -1,4 +1,6 @@
-// Dropdown Menus
+// DROPDOWN MENUS
+// --------------
+
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropdown {
   position: relative;
@@ -71,6 +73,7 @@
       text-decoration: none;
       text-shadow: 0 -1px 0 rgba(0,0,0,.25);
       #gradient > .vertical(@blue, @blueDark);
+      #gradient > .vertical(@linkColor, darken(@linkColor, 5%));
       @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
       .box-shadow(@shadow);
     }
diff --git a/lib/forms.less b/lib/forms.less
index 19e2aa8bc..505331044 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -20,6 +20,7 @@ legend {
   line-height: @baseLineHeight * 2;
   color: @grayDark;
   border-bottom: 1px solid #eee;
+  -webkit-margin-collapse: separate;
 }
 
 // Set font for forms
diff --git a/lib/navbar.less b/lib/navbar.less
index 90ff78676..00afe3d8f 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -135,7 +135,7 @@
 
 // Nav for navbar and topbar
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-.nav {
+.navbar .nav {
   position: relative;
   left: 0;
   display: block;
@@ -146,7 +146,6 @@
     float: left;
   }
   a {
-    display: block;
     float: none;
     padding: 10px 10px 11px;
     line-height: 19px;
@@ -182,7 +181,7 @@
       border: 0;
     }
   }
-  // Dropdowns within the .nav
+/*  // Dropdowns within the .nav
   .dropdown-toggle:hover,
   .dropdown.open .dropdown-toggle {
     background: #444;
@@ -213,5 +212,5 @@
       background-color: #222;
       border-color: #444;
     }
-  }
+  }*/
 }
diff --git a/lib/navs.less b/lib/navs.less
new file mode 100644
index 000000000..8616ea047
--- /dev/null
+++ b/lib/navs.less
@@ -0,0 +1,327 @@
+// NAVIGATIONS
+// -----------
+
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+  margin-left: 0;
+  margin-bottom: @baseLineHeight;
+  list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: #eee;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav.list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
+}
+.nav.list > li > a,
+.nav.list .nav-header {
+  display: block;
+  padding: 3px 15px;
+  margin-left:  -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav.list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav.list .active > a {
+  color: @white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: @linkColor;
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.tabs,
+.pills {
+  .clearfix();
+}
+.tabs > li,
+.pills > li {
+  float: left;
+}
+.tabs > li > a,
+.pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.tabs {
+  border-bottom: 1px solid #ddd;
+}
+
+// Make the list-items overlay the bottom border
+.tabs > li {
+  margin-bottom: -1px;
+}
+
+// Actual tabs (as links)
+.tabs > li > a {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  border: 1px solid transparent;
+  .border-radius(4px 4px 0 0);
+  &:hover {
+    border-color: #eee #eee #ddd;
+  }
+}
+// Active state, and it's :hover to override normal :hover
+.tabs .active > a,
+.tabs .active > a:hover {
+  color: @gray;
+  background-color: @white;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  .border-radius(5px);
+}
+
+// Active state
+.pills .active > a,
+.pills .active > a:hover {
+  color: @white;
+  background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav.stacked > li {
+  float: none;
+}
+.nav.stacked > li > a {
+  margin-right: 0; // no need for the gap between nav items
+}
+
+// Tabs
+.tabs.stacked {
+  border-bottom: 0;
+}
+.tabs.stacked > li > a {
+  border: 1px solid #ddd;
+  .border-radius(0);
+}
+.tabs.stacked > li:first-child > a {
+  .border-radius(4px 4px 0 0);
+}
+.tabs.stacked > li:last-child > a {
+  .border-radius(0 0 4px 4px);
+}
+.tabs.stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
+
+// Pills
+.pills.stacked > li > a {
+  margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+// Position the menu
+.tabs .dropdown-menu,
+.pills .dropdown-menu {
+  top: 33px;
+  border-width: 1px;
+}
+.pills .dropdown-menu {
+  .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;
+  .opacity(100);
+}
+
+
+
+// TABBABLE
+// --------
+
+.tabbable {
+  margin-bottom: @baseLineHeight;
+
+  // Tabs on top
+  .tabs {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+  .tab-content {
+    padding: 19px;
+    border: 1px solid #ddd;
+  }
+
+  // Tabs on bottom
+  &.tabs-bottom .tabs > li {
+    margin-top: -1px;
+    margin-bottom: 0;
+  }
+  &.tabs-bottom .tabs > li > a {
+    .border-radius(0 0 4px 4px);
+    &:hover {
+      border-bottom-color: transparent;
+      border-top-color: #ddd;
+    }
+  }
+  &.tabs-bottom .tabs > .active > a,
+  &.tabs-bottom .tabs > .active > a:hover {
+    border-color: transparent #ddd #ddd #ddd;
+  }
+
+  // Tabs on left and right
+  &.tabs-left,
+  &.tabs-right {
+    .clearfix();
+    .tabs {
+      // Give a fixed width to avoid floating .tab-con
+      width: 100px;
+      // Unfloat them so they stack
+      > li {
+        float: none;
+        margin-bottom: -1px;
+        > a {
+          margin-bottom: 2px;
+          &:hover {
+            border-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  // Tabs on left
+  &.tabs-left {
+    .tab-content {
+      margin-left: 100px;
+    }
+    .tabs {
+      float: left;
+      > li {
+        margin-right: -1px;
+        > a {
+          margin-right: 0;
+          .border-radius(4px 0 0 4px);
+
+          &:hover {
+            border-right-color: #ddd;
+          }
+        }
+      }
+      // Active state
+      .active > a,
+      .active > a:hover {
+        border-color: #ddd;
+        border-right-color: transparent;
+      }
+    }
+  }
+
+  // Tabs on right
+  &.tabs-right {
+    .tab-content {
+      margin-right: 100px;
+    }
+    .tabs {
+      float: right;
+      > li {
+        margin-left: -1px;
+        > a {
+          margin-left: 0;
+          .border-radius(0 4px 4px 0);
+
+          &:hover {
+            border-left-color: #ddd;
+          }
+        }
+      }
+      // Active state
+      .active > a,
+      .active > a:hover {
+        border-color: #ddd;
+        border-left-color: transparent;
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+// Tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+  display: block;
+}
+
diff --git a/lib/sidenav.less b/lib/sidenav.less
deleted file mode 100644
index 51f97f44d..000000000
--- a/lib/sidenav.less
+++ /dev/null
@@ -1,43 +0,0 @@
-// SIDE NAV
-// --------
-
-
-.side-nav {
-  padding: @baseLineHeight / 2 0;
-}
-.side-nav .nav-label,
-.side-nav .nav-item {
-  display: block;
-  padding: 3px 15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.side-nav .nav-label {
-  font-size: 11px;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-.side-nav .nav-group {
-  margin: 0; // clear default ul margins
-  list-style: none;
-}
-.side-nav .nav-group + .nav-label {
-  margin-top: 9px;
-}
-
-.side-nav .nav-item {
-  font-weight: bold;
-}
-.side-nav .nav-item i {
-  vertical-align: -2px;
-}
-.side-nav .nav-item:hover {
-  text-decoration: none;
-}
-.side-nav .active .nav-item {
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-  #gradient > .vertical(#ccc, #999);
-  @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-}
\ No newline at end of file
diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less
deleted file mode 100644
index 4a94266a3..000000000
--- a/lib/tabs-pills.less
+++ /dev/null
@@ -1,285 +0,0 @@
-// Tabs and Pills
-.tabs,
-.pills {
-  padding: 0;
-  margin: 0 0 20px;
-  list-style: none;
-  .clearfix();
-  > li {
-    float: left;
-    > a {
-      display: block;
-    }
-  }
-}
-
-// Tabs
-.tabs {
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
-  > li {
-    position: relative; // For the dropdowns mostly
-    margin-bottom: -1px;
-    > a {
-      padding: 0 15px;
-      margin-right: 2px;
-      line-height: @baseLineHeight * 2;
-      border: 1px solid transparent;
-      .border-radius(4px 4px 0 0);
-      &:hover {
-        text-decoration: none;
-        background-color: #eee;
-        border-color: #eee #eee #ddd;
-      }
-    }
-  }
-  // Active state, and it's :hover to override normal :hover
-  .active > a,
-  .active > a:hover {
-    color: @gray;
-    background-color: @white;
-    border: 1px solid #ddd;
-    border-bottom-color: transparent;
-    cursor: default;
-  }
-}
-
-.tabbable {
-  margin-bottom: @baseLineHeight;
-
-  // Tabs on top
-  .tabs {
-    margin-bottom: 0;
-    border-bottom: 0;
-  }
-  .tab-content {
-    padding: 19px;
-    border: 1px solid #ddd;
-  }
-
-  // Tabs on bottom
-  &.tabs-bottom .tabs > li {
-    margin-top: -1px;
-    margin-bottom: 0;
-  }
-  &.tabs-bottom .tabs > li > a {
-    .border-radius(0 0 4px 4px);
-    &:hover {
-      border-bottom-color: transparent;
-      border-top-color: #ddd;
-    }
-  }
-  &.tabs-bottom .tabs > .active > a,
-  &.tabs-bottom .tabs > .active > a:hover {
-    border-color: transparent #ddd #ddd #ddd;
-  }
-
-  // Tabs on left and right
-  &.tabs-left,
-  &.tabs-right {
-    .clearfix();
-    .tabs {
-      // Give a fixed width to avoid floating .tab-con
-      width: 100px;
-      // Unfloat them so they stack
-      > li {
-        float: none;
-        margin-bottom: -1px;
-        > a {
-          margin-bottom: 2px;
-          &:hover {
-            border-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  // Tabs on left
-  &.tabs-left {
-    .tab-content {
-      margin-left: 100px;
-    }
-    .tabs {
-      float: left;
-      > li {
-        margin-right: -1px;
-        > a {
-          margin-right: 0;
-          .border-radius(4px 0 0 4px);
-
-          &:hover {
-            border-right-color: #ddd;
-          }
-        }
-      }
-      // Active state
-      .active > a,
-      .active > a:hover {
-        border-color: #ddd;
-        border-right-color: transparent;
-      }
-    }
-  }
-
-  // Tabs on right
-  &.tabs-right {
-    .tab-content {
-      margin-right: 100px;
-    }
-    .tabs {
-      float: right;
-      > li {
-        margin-left: -1px;
-        > a {
-          margin-left: 0;
-          .border-radius(0 4px 4px 0);
-
-          &:hover {
-            border-left-color: #ddd;
-          }
-        }
-      }
-      // Active state
-      .active > a,
-      .active > a:hover {
-        border-color: #ddd;
-        border-left-color: transparent;
-      }
-    }
-  }
-}
-
-
-// Dropdowns in tabs
-.tabs {
-  .dropdown-menu {
-    top: 37px;
-    border-width: 1px;
-  }
-  .dropdown-toggle .caret {
-    margin-top: 15px;
-    margin-left: 5px;
-  }
-  .open .dropdown-toggle {
-    border-color: #999;
-  }
-  .open .dropdown-toggle .caret {
-    border-top-color: #fff;
-    .opacity(100);
-  }
-}
-
-// Pills
-.pills {
-  > li > a {
-    padding: 0 15px;
-    margin: 5px 3px 5px 0;
-    line-height: 30px;
-    text-shadow: 0 1px 1px @white;
-    .border-radius(15px);
-    &:hover {
-      color: @white;
-      text-decoration: none;
-      text-shadow: 0 1px 1px rgba(0,0,0,.25);
-      background-color: @linkColorHover;
-    }
-  }
-  .active > a {
-    color: @white;
-    text-shadow: 0 1px 1px rgba(0,0,0,.25);
-    background-color: @linkColor;
-  }
-}
-
-// Stacked pills
-.pills-vertical > li {
-  float: none;
-}
-
-// Tabbable areas
-.tab-content > .tab-pane,
-.pill-content > .pill-pane {
-  display: none;
-}
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
-}
-
-
-// Step nav
-.step-nav {
-  position: relative; // for prev/next links
-  margin: 0 0 @baseLineHeight;
-  list-style: none;
-  line-height: 30px;
-  text-align: center;
-  background-color: #f5f5f5;
-  .border-radius(15px);
-  li {
-    display: inline;
-    color: @grayLight;
-  }
-  // prev/next links
-  .prev,
-  .next {
-    position: absolute;
-    top: 6px;
-  }
-  .prev {
-    left: 15px;
-  }
-  .next {
-    right: 15px;
-  }
-  // indicators for each step/page/item/etc
-  .dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin: 0 3px;
-    text-indent: -999em;
-    background-color: @grayLight;
-    .border-radius(5px);
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
-  }
-  .dot:hover,
-  .active .dot {
-    background-color: @grayDark;
-  }
-}
-
-
-// Subnav
-// STILL A WIP
-.subnav {
-  #gradient > .vertical(#f5f5f5, #eeeeee);
-  @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
-  .box-shadow(@shadow);
-  a {
-    padding: 8px 10px;
-    font-size: 12px;
-    color: @linkColor;
-    text-shadow: 0 1px 0 #fff;
-    border-left: 1px solid #f9f9f9;
-    border-right: 1px solid #e5e5e5;
-    &:hover {
-      color: @linkColorHover;
-      background-color: #eee;
-    }
-  }
-  li:first-child a {
-    border-left: 0;
-    .border-radius(6px 0 0 6px);
-  }
-  li:last-child a {
-    border-right: 0;
-    .border-radius(0 6px 6px 0);
-  }
-  ul .active > a {
-    color: @grayDark;
-    background-color: #eee;
-  }
-}
\ No newline at end of file
diff --git a/lib/type.less b/lib/type.less
index 32cb09431..7e2c4a7a8 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -201,7 +201,7 @@ pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.15);
-  .border-radius(3px);
+  .border-radius(4px);
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;