From 5b298a2aaf5286564b1dc614bb439eb19edf2c25 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 26 Mar 2013 23:54:17 -0700
Subject: docs fixes with new .bs-docs-container; fixing some lingering grid
 classes

---
 docs/assets/css/docs.css  | 14 +++++++++++++-
 docs/components.html      |  2 +-
 docs/css.html             |  2 +-
 docs/customize.html       |  2 +-
 docs/getting-started.html | 32 ++++++++++++++++----------------
 docs/index.html           |  2 +-
 docs/javascript.html      |  2 +-
 7 files changed, 34 insertions(+), 22 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f3d7c156e..76a45b45e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -14,6 +14,11 @@ body {
   /* We add the padding to the body for >768px only */
 }
 
+.bs-docs-container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
 /*  */
 .bs-docs-footer {
   padding-left:  15px;
@@ -486,7 +491,8 @@ section > ul li {
 
 .bs-docs-footer {
   text-align: center;
-  padding: 30px 0;
+  padding-top: 30px;
+  padding-bottom: 30px;
   margin-top: 100px;
   border-top: 1px solid #e5e5e5;
 }
@@ -610,6 +616,12 @@ input.focused {
     padding-top: 50px; /* Default height of navbar */
   }
 
+  /* Undo custom padding */
+  .bs-docs-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   /* Tweak display of docs jumbotrons */
   .masthead {
     padding-top:    100px;
diff --git a/docs/components.html b/docs/components.html
index 5e17a6a3e..06cbe3720 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -14,7 +14,7 @@ title: Components
 </header>
 
 
-  <div class="container">
+  <div class="container bs-docs-container">
 
     <!-- Docs nav
     ================================================== -->
diff --git a/docs/css.html b/docs/css.html
index 874e00ed0..226b55d6d 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -13,7 +13,7 @@ title: CSS
 </header>
 
 
-  <div class="container">
+  <div class="container bs-docs-container">
 
     <!-- Docs nav
     ================================================== -->
diff --git a/docs/customize.html b/docs/customize.html
index 544f41310..f4e01b340 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -14,7 +14,7 @@ title: Customize and download
 </header>
 
 
-  <div class="container">
+  <div class="container bs-docs-container">
 
     <!-- Docs nav
     ================================================== -->
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 79b31d25d..5717bfbaa 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -14,7 +14,7 @@ description: Overview of the project, its contents, and how to get started with
 </header>
 
 
-<div class="container">
+<div class="container bs-docs-container">
 
   <!-- Docs nav
   ================================================== -->
@@ -42,17 +42,17 @@ description: Overview of the project, its contents, and how to get started with
         <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
 
         <div class="row">
-          <div class="span6">
+          <div class="col-span-6">
             <h2>Compiled</h2>
             <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
             <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
           </div>
-          <div class="span6">
+          <div class="col-span-6">
             <h2>Source</h2>
             <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
             <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
           </div>
-          <div class="span6">
+          <div class="col-span-6">
             <h2>Bower</h2>
             <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
             {% highlight bash %}bower install bootstrap{% endhighlight %}
@@ -179,56 +179,56 @@ description: Overview of the project, its contents, and how to get started with
         </div>
         <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
         <div class="row bs-docs-examples">
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/starter-template/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
             </a>
             <h4>Starter template</h4>
             <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
             </a>
             <h4>Basic marketing site</h4>
             <p>Featuring a hero unit for a primary message and three supporting elements.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
             </a>
             <h4>Narrow marketing</h4>
             <p>Slim, lightweight marketing template for small projects or teams.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
             </a>
             <h4>Justified nav</h4>
             <p>Marketing page with equal-width navigation links in a modified navbar.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/signin/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
             </a>
             <h4>Sign in</h4>
             <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
             </a>
             <h4>Sticky footer</h4>
             <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
             </a>
             <h4>Sticky footer w/ navbar</h4>
             <p>Add a fixed navbar to the default sticky footer template.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/carousel/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
             </a>
@@ -237,28 +237,28 @@ description: Overview of the project, its contents, and how to get started with
           </div>
 
 
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/navbar/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
             </a>
             <h4>Navbar</h4>
             <p>Basic template for showcasing how the navbar works.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
             </a>
             <h4>Static top navbar</h4>
             <p>Basic template for showcasing the static navbar variation.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
             </a>
             <h4>Fixed top navbar</h4>
             <p>Basic template for showcasing the fixed navbar variation.</p>
           </div>
-          <div class="span4">
+          <div class="col-span-4">
             <a class="thumbnail" href="/examples/grid/" target="_blank">
               <img src="/assets/img/examples/bootstrap-example-.png" alt="">
             </a>
diff --git a/docs/index.html b/docs/index.html
index 17afe11c4..d2aece152 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,7 +22,7 @@ title: Bootstrap
   </div>
 </div>
 
-<div class="container">
+<div class="container bs-docs-container">
 
   <div class="bs-docs-marketing">
 
diff --git a/docs/javascript.html b/docs/javascript.html
index 8e65c61d5..e64908672 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -12,7 +12,7 @@ title: JavaScript plugins
   </div>
 </header>
 
-  <div class="container">
+  <div class="container bs-docs-container">
 
     <!-- Docs nav
     ================================================== -->
-- 
cgit v1.2.3


From f0f33eb9a3a25ae2f0032f630ff84c58cb0ca431 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 27 Mar 2013 15:42:11 -0700
Subject: Refactor .list-inline and .list-unstyled

* Instead of shared and separate CSS, isolate by class for easier mixin-ability
* .list-unstyled is now used as a mixin in .list-inline
---
 docs/assets/css/bootstrap.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5632d3aad..50d207001 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -546,7 +546,11 @@ li {
   line-height: 20px;
 }
 
-.list-unstyled,
+.list-unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
 .list-inline {
   margin-left: 0;
   list-style: none;
-- 
cgit v1.2.3


From 6696ff5d927fd2d584ddc226521b89fc8b9882eb Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 27 Mar 2013 15:54:17 -0700
Subject: clarify docs on unstyled lists

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/css.html b/docs/css.html
index 226b55d6d..f3ab7a00a 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -576,7 +576,7 @@ title: CSS
 {% endhighlight %}
 
         <h3>Unstyled</h3>
-        <p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
+        <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
         <div class="bs-docs-example">
           <ul class="list-unstyled">
             <li>Lorem ipsum dolor sit amet</li>
-- 
cgit v1.2.3


From fe414d8566f647e65dc20bc7505630ce798e5445 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 27 Mar 2013 23:33:45 -0700
Subject: turn docs navbar into left navbar

---
 docs/_includes/navbar.html    | 20 ++++++++++----------
 docs/assets/css/bootstrap.css | 20 ++++++++++++++++++++
 docs/assets/css/docs.css      | 35 ++++++++++++++++++++++++++++++-----
 docs/assets/js/application.js |  5 +++++
 4 files changed, 65 insertions(+), 15 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index dcbb23556..5e6c5ae63 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -1,32 +1,32 @@
 <!-- Navbar
 ================================================== -->
-<div class="navbar navbar-fixed-top bs-docs-navbar">
+<div class="navbar navbar-inverse navbar-fixed-left bs-docs-navbar">
   <div class="container">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="navbar-brand" href="/">Bootstrap</a>
+    <a class="navbar-brand" href="/">B</a>
     <div class="nav-collapse collapse">
       <ul class="nav">
-        <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
-          <a href="/">Home</a>
+<!--         <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
+          <a href="/"><span class="glyphicon glyphicon-home"></span></a>
         </li>
-        <li {% if page.title == "Getting started" %}class="active"{% endif %}>
-          <a href="/getting-started">Getting started</a>
+ -->        <li {% if page.title == "Getting started" %}class="active"{% endif %}>
+          <a href="/getting-started" data-toggle="tooltip" data-placement="right" title="Getting started"><span class="glyphicon glyphicon-list"></span></a>
         </li>
         <li {% if page.title == "CSS" %}class="active"{% endif %}>
-          <a href="/css">CSS</a>
+          <a href="/css" data-toggle="tooltip" data-placement="right" title="CSS"><span class="glyphicon glyphicon-tint"></span></a>
         </li>
         <li {% if page.title == "Components" %}class="active"{% endif %}>
-          <a href="/components">Components</a>
+          <a href="/components" data-toggle="tooltip" data-placement="right" title="Components"><span class="glyphicon glyphicon-fire"></span></a>
         </li>
         <li {% if page.title == "JavaScript plugins" %}class="active"{% endif %}>
-          <a href="/javascript">JavaScript</a>
+          <a href="/javascript" data-toggle="tooltip" data-placement="right" title="JavaScript plugins"><span class="glyphicon glyphicon-dashboard"></span></a>
         </li>
         <li {% if page.title == "Customize and download" %}class="active"{% endif %}>
-          <a href="/customize">Customize</a>
+          <a href="/customize" data-toggle="tooltip" data-placement="right" title="Customize"><span class="glyphicon glyphicon-cog"></span></a>
         </li>
       </ul>
     </div>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 50d207001..ac0ea34e5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3255,6 +3255,7 @@ button.close {
 }
 
 .navbar-fixed-top,
+.navbar-fixed-left,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
@@ -3271,6 +3272,16 @@ button.close {
   bottom: 0;
 }
 
+.navbar-fixed-left {
+  top: 0;
+  right: auto;
+  bottom: 0;
+}
+
+.navbar-fixed-left .container {
+  max-width: none;
+}
+
 .navbar-brand {
   display: block;
   max-width: 200px;
@@ -3496,6 +3507,15 @@ button.close {
   .navbar-inverse .nav > .divider {
     border-right-color: #2f2f2f;
   }
+  .navbar-fixed-left {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .navbar-fixed-left .navbar-brand,
+  .navbar-fixed-left .nav,
+  .navbar-fixed-left .nav > li {
+    float: none;
+  }
   .navbar-toggle {
     position: relative;
     top: auto;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 76a45b45e..6b71176f8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -49,9 +49,9 @@ section > ul li {
 /* Navbar
 -------------------------------------------------- */
 
-.bs-docs-navbar {
+/*.bs-docs-navbar {
   background-color: #fff;
-  border-bottom: 1px solid #ccc; /* IE8 */
+  border-bottom: 1px solid #ccc;
   border-bottom: 1px solid rgba(0,0,0,.1);
 }
 .bs-docs-navbar .nav > .active > a,
@@ -59,7 +59,30 @@ section > ul li {
   font-weight: 500;
   background-color: transparent;
 }
+*/
 
+.bs-docs-navbar .navbar-brand {
+  padding: 15px;
+  font-size: 32px;
+  margin-left: 0;
+}
+.bs-docs-navbar .nav {
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #333;
+}
+.bs-docs-navbar .nav > li > a {
+  width: 60px;
+  text-align: center;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #111;
+}
+.bs-docs-navbar .glyphicon {
+  display: block;
+  font-size: 20px;
+}
+.bs-docs-navbar .nav .tooltip {
+  white-space: nowrap;
+}
 
 
 /* Jumbotrons
@@ -181,7 +204,7 @@ section > ul li {
 
 /* Base styles are not affixable given mobile-first */
 .bs-docs-sidenav {
-  margin: 20px 0 0;
+  margin: 0;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
@@ -613,7 +636,9 @@ input.focused {
 
   /* Account for fixed navbar (which is static to start) */
   body {
-    padding-top: 50px; /* Default height of navbar */
+    /*padding-top: 50px;*/ /* Default height of navbar */
+    padding-top: 0;
+    padding-left: 60px;
   }
 
   /* Undo custom padding */
@@ -644,7 +669,7 @@ input.focused {
   /* From here, start to affix the nav because we keep columns here */
   .bs-docs-sidenav.affix {
     position: fixed;
-    top: 54px;
+    top: 20px;
   }
   .bs-docs-sidenav {
     width: 170px;
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4b0b59618..18e9e84cd 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -49,6 +49,11 @@
     $('.tooltip-test').tooltip()
     $('.popover-test').popover()
 
+    $('.bs-docs-navbar').tooltip({
+      selector: "a[data-toggle=tooltip]",
+      container: ".bs-docs-navbar .nav"
+    })
+
     // popover demo
     $("a[data-toggle=popover]")
       .popover()
-- 
cgit v1.2.3


From 081c061281c96818bf9a904a7e5e2a673aa7a54d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 00:21:21 -0700
Subject: new subnav on all pages

---
 docs/assets/css/docs.css      |  89 +++++++++++++------
 docs/assets/js/application.js |  16 ++--
 docs/components.html          |  58 +++++-------
 docs/css.html                 |  49 ++++------
 docs/customize.html           | 201 +++++++++++++++++++-----------------------
 docs/getting-started.html     |  43 +++------
 docs/javascript.html          |  55 ++++--------
 7 files changed, 229 insertions(+), 282 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6b71176f8..926ae3913 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -15,6 +15,7 @@ body {
 }
 
 .bs-docs-container {
+  max-width: 860px;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -49,32 +50,23 @@ section > ul li {
 /* Navbar
 -------------------------------------------------- */
 
-/*.bs-docs-navbar {
-  background-color: #fff;
-  border-bottom: 1px solid #ccc;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-}
-.bs-docs-navbar .nav > .active > a,
-.bs-docs-navbar .nav > .active > a:hover {
-  font-weight: 500;
-  background-color: transparent;
+.bs-docs-navbar {
+  background-color: #333;
 }
-*/
-
 .bs-docs-navbar .navbar-brand {
   padding: 15px;
-  font-size: 32px;
+  font-size: 30px;
   margin-left: 0;
 }
 .bs-docs-navbar .nav {
-  border-top: 1px solid #111;
-  border-bottom: 1px solid #333;
+  border-top: 1px solid #222;
+  border-bottom: 1px solid #444;
 }
 .bs-docs-navbar .nav > li > a {
   width: 60px;
   text-align: center;
-  border-top: 1px solid #333;
-  border-bottom: 1px solid #111;
+  border-top: 1px solid #444;
+  border-bottom: 1px solid #222;
 }
 .bs-docs-navbar .glyphicon {
   display: block;
@@ -202,6 +194,53 @@ section > ul li {
 /* Sidenav
 -------------------------------------------------- */
 
+.bs-docs-sidebar {
+  position: fixed;
+  top: 0;
+  left: 60px;
+  bottom: 0;
+  width: 240px;
+  background-color: #f5f5f5;
+  border-right: 1px solid #e5e5e5;
+}
+.bs-docs-sidenav > li > a {
+  color: #555;
+  padding: 8px 20px;
+}
+.bs-docs-sidenav > .active > a,
+.bs-docs-sidenav > .active:hover > a,
+.bs-docs-sidenav > .active:focus > a {
+  color: #fff;
+  background-color: #428bca;
+}
+
+.bs-docs-sidenav-heading {
+  margin: 0;
+  padding: 15px 20px;
+  color: #999;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 1px 0 #fff;
+}
+
+.bs-docs-navbar:after,
+.bs-docs-sidebar:after {
+  position: absolute;
+  top: -20px;
+  right: 0;
+  bottom: -20px;
+  left: -10px;
+  z-index: 10;
+  display: block;
+  content: " ";
+  box-shadow: inset -5px 0 25px rgba(0,0,0,.05);
+}
+.bs-docs-navbar .container,
+.bs-docs-sidenav {
+  position: relative;
+  z-index: 15;
+}
+
+
 /* Base styles are not affixable given mobile-first */
 .bs-docs-sidenav {
   margin: 0;
@@ -209,13 +248,13 @@ section > ul li {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }
-.bs-docs-sidenav.affix {
+/*.bs-docs-sidenav.affix {
   position: static;
   top: 0;
-}
+}*/
 
 /* Chevrons within each link */
-.bs-docs-sidenav .glyphicon-chevron-right {
+/*.bs-docs-sidenav .glyphicon-chevron-right {
   float: right;
   margin-top: 1px;
   margin-right: -6px;
@@ -230,7 +269,7 @@ section > ul li {
   color: #fff;
   opacity: 1;
 }
-
+*/
 
 
 /* Bootstrap code examples
@@ -638,7 +677,7 @@ input.focused {
   body {
     /*padding-top: 50px;*/ /* Default height of navbar */
     padding-top: 0;
-    padding-left: 60px;
+    padding-left: 300px;
   }
 
   /* Undo custom padding */
@@ -690,13 +729,13 @@ input.focused {
   }
 
   .bs-docs-sidenav {
-    width: 220px;
+    width: 240px;
   }
 }
 
 /* Large desktops and up */
 @media screen and (min-width: 1200px) {
-  .bs-docs-sidenav {
-    width: 260px;
+/*  .bs-docs-sidenav {
+    width: 240px;
   }
-}
+*/}
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 18e9e84cd..2a0d3a6c6 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -14,14 +14,14 @@
     })
 
     // side bar
-    setTimeout(function () {
-      $('.bs-docs-sidenav').affix({
-        offset: {
-          top: function () { return $window.width() <= 980 ? 290 : 210 }
-        , bottom: 270
-        }
-      })
-    }, 100)
+    // setTimeout(function () {
+    //   $('.bs-docs-sidenav').affix({
+    //     offset: {
+    //       top: function () { return $window.width() <= 980 ? 290 : 210 }
+    //     , bottom: 270
+    //     }
+    //   })
+    // }, 100)
 
     // make code pretty
     window.prettyPrint && prettyPrint()
diff --git a/docs/components.html b/docs/components.html
index 06cbe3720..b42fad00b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -4,43 +4,30 @@ title: Components
 ---
 
 
-<!-- Subhead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>Components</h1>
-    <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
-  </div>
-</header>
-
-
-  <div class="container bs-docs-container">
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">Components</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#dropdowns">Dropdowns</a></li>
+    <li><a href="#buttonGroups">Button groups</a></li>
+    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+    <li><a href="#navs">Navs</a></li>
+    <li><a href="#navbar">Navbar</a></li>
+    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#pagination">Pagination</a></li>
+    <li><a href="#labels">Labels</a></li>
+    <li><a href="#badges">Badges</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#thumbnails">Thumbnails</a></li>
+    <li><a href="#alerts">Alerts</a></li>
+    <li><a href="#progress">Progress bars</a></li>
+    <li><a href="#media">Media object</a></li>
+    <li><a href="#misc">Misc</a></li>
+  </ul>
+</div>
 
-    <!-- Docs nav
-    ================================================== -->
-    <div class="row">
-      <div class="col-span-3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
-          <li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdowns</a></li>
-          <li><a href="#buttonGroups"><i class="glyphicon glyphicon-chevron-right"></i> Button groups</a></li>
-          <li><a href="#buttonDropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Button dropdowns</a></li>
-          <li><a href="#navs"><i class="glyphicon glyphicon-chevron-right"></i> Navs</a></li>
-          <li><a href="#navbar"><i class="glyphicon glyphicon-chevron-right"></i> Navbar</a></li>
-          <li><a href="#breadcrumbs"><i class="glyphicon glyphicon-chevron-right"></i> Breadcrumbs</a></li>
-          <li><a href="#pagination"><i class="glyphicon glyphicon-chevron-right"></i> Pagination</a></li>
-          <li><a href="#labels"><i class="glyphicon glyphicon-chevron-right"></i> Labels</a></li>
-          <li><a href="#badges"><i class="glyphicon glyphicon-chevron-right"></i> Badges</a></li>
-          <li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
-          <li><a href="#thumbnails"><i class="glyphicon glyphicon-chevron-right"></i> Thumbnails</a></li>
-          <li><a href="#alerts"><i class="glyphicon glyphicon-chevron-right"></i> Alerts</a></li>
-          <li><a href="#progress"><i class="glyphicon glyphicon-chevron-right"></i> Progress bars</a></li>
-          <li><a href="#media"><i class="glyphicon glyphicon-chevron-right"></i> Media object</a></li>
-          <li><a href="#misc"><i class="glyphicon glyphicon-chevron-right"></i> Misc</a></li>
-        </ul>
-      </div>
-      <div class="col-span-9">
 
 
+  <div class="container bs-docs-container">
 
         <!-- Dropdowns
         ================================================== -->
@@ -1971,7 +1958,4 @@ title: Components
 
 
 
-      </div><!-- /span9 -->
-    </div><!-- row -->
-
   </div><!-- /.container -->
diff --git a/docs/css.html b/docs/css.html
index f3ab7a00a..1c317d2cd 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -3,39 +3,25 @@ layout: default
 title: CSS
 ---
 
-<!-- Subhead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>CSS</h1>
-    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
-  </div>
-</header>
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">CSS</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#global">Global settings</a></li>
+    <li><a href="#grid">Grid system</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#code">Code</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#images">Images</a></li>
+    <li><a href="#icons">Glyphicons</a></li>
+    <li><a href="#responsive-utilities">Responsive utilities</a></li>
+  </ul>
+</div>
 
 
   <div class="container bs-docs-container">
 
-    <!-- Docs nav
-    ================================================== -->
-    <div class="row">
-      <div class="col-span-3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
-          <li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
-          <li><a href="#grid"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</a></li>
-          <li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
-          <li><a href="#code"><i class="glyphicon glyphicon-chevron-right"></i> Code</a></li>
-          <li><a href="#tables"><i class="glyphicon glyphicon-chevron-right"></i> Tables</a></li>
-          <li><a href="#forms"><i class="glyphicon glyphicon-chevron-right"></i> Forms</a></li>
-          <li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Buttons</a></li>
-          <li><a href="#images"><i class="glyphicon glyphicon-chevron-right"></i> Images</a></li>
-          <li><a href="#icons"><i class="glyphicon glyphicon-chevron-right"></i> Glyphicons</a></li>
-          <li><a href="#responsive-utilities"><i class="glyphicon glyphicon-chevron-right"></i> Responsive utilities</a></li>
-        </ul>
-      </div>
-      <div class="col-span-9">
-
-
-
         <!-- Global Bootstrap settings
         ================================================== -->
         <section id="global">
@@ -2420,9 +2406,4 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
         </section>
 
-
-
-      </div><!-- /span9 -->
-    </div><!-- row -->
-
   </div><!-- /.container -->
diff --git a/docs/customize.html b/docs/customize.html
index f4e01b340..61a789b1a 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -3,33 +3,18 @@ layout: default
 title: Customize and download
 ---
 
-
-<!-- Masthead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>Customize and download</h1>
-    <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
-  </div>
-</header>
-
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">Customize and download</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#components">1. Choose components</a></li>
+    <li><a href="#plugins">2. Select jQuery plugins</a></li>
+    <li><a href="#variables">3. Customize variables</a></li>
+    <li><a href="#download">4. Download</a></li>
+  </ul>
+</div>
 
   <div class="container bs-docs-container">
 
-    <!-- Docs nav
-    ================================================== -->
-    <div class="row">
-      <div class="col-span-3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
-          <li><a href="#components"><i class="glyphicon glyphicon-chevron-right"></i> 1. Choose components</a></li>
-          <li><a href="#plugins"><i class="glyphicon glyphicon-chevron-right"></i> 2. Select jQuery plugins</a></li>
-          <li><a href="#variables"><i class="glyphicon glyphicon-chevron-right"></i> 3. Customize variables</a></li>
-          <li><a href="#download"><i class="glyphicon glyphicon-chevron-right"></i> 4. Download</a></li>
-        </ul>
-      </div>
-      <div class="col-span-9">
-
-
         <!-- Customize form
         ================================================== -->
         <form>
@@ -41,7 +26,7 @@ title: Customize and download
               </h1>
             </div>
             <div class="row download-builder">
-              <div class="span3">
+              <div class="col-span-3">
                 <h3>Scaffolding</h3>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
@@ -57,7 +42,7 @@ title: Customize and download
                 <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
                 <h3>Components</h3>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
@@ -78,7 +63,7 @@ title: Customize and download
                 <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
                 <h3>Miscellaneous</h3>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
                 <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
@@ -102,7 +87,7 @@ title: Customize and download
               </h1>
             </div>
             <div class="row download-builder">
-              <div class="span3">
+              <div class="col-span-3">
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-transition.js">
                   Transitions <small>(required for any animation)</small>
@@ -132,7 +117,7 @@ title: Customize and download
                   Popovers <small>(requires Tooltips)</small>
                 </label>
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-affix.js">
                   Affix
@@ -158,7 +143,7 @@ title: Customize and download
                   Typeahead
                 </label>
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
                 <h4 class="muted">Heads up!</h4>
                 <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
               </div><!-- /span -->
@@ -174,183 +159,183 @@ title: Customize and download
               </h1>
             </div>
             <div class="row download-builder">
-              <div class="span3">
+              <div class="col-span-3">
                 <h3>Scaffolding</h3>
                 <label>@body-background</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@text-color</label>
-                <input type="text" class="span3" placeholder="@grayDark">
+                <input type="text" placeholder="@grayDark">
 
                 <h3>Links</h3>
                 <label>@link-color</label>
-                <input type="text" class="span3" placeholder="#08c">
+                <input type="text" placeholder="#08c">
                 <label>@link-color-hover</label>
-                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
+                <input type="text" placeholder="darken(@link-color, 15%)">
 
                 <h3>Grid system</h3>
                 <label>@grid-columns</label>
-                <input type="text" class="span3" placeholder="12">
+                <input type="text" placeholder="12">
                 <label>@grid-column-width</label>
-                <input type="text" class="span3" placeholder="60px">
+                <input type="text" placeholder="60px">
                 <label>@grid-gutter-width</label>
-                <input type="text" class="span3" placeholder="20px">
+                <input type="text" placeholder="20px">
                 <label>@grid-column-width-1200</label>
-                <input type="text" class="span3" placeholder="70px">
+                <input type="text" placeholder="70px">
                 <label>@grid-gutter-width-1200</label>
-                <input type="text" class="span3" placeholder="30px">
+                <input type="text" placeholder="30px">
                 <label>@grid-column-width-768</label>
-                <input type="text" class="span3" placeholder="42px">
+                <input type="text" placeholder="42px">
                 <label>@grid-gutter-width-768</label>
-                <input type="text" class="span3" placeholder="20px">
+                <input type="text" placeholder="20px">
 
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
 
                 <h3>Typography</h3>
                 <label>@font-family-sans-serif</label>
-                <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+                <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
                 <label>@font-family-serif</label>
-                <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+                <input type="text" placeholder="Georgia, 'Times New Roman', Times, serif">
                 <label>@font-family-monospace</label>
-                <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
+                <input type="text" placeholder="Menlo, Monaco, 'Courier New', monospace">
 
                 <label>@font-size-base</label>
-                <input type="text" class="span3" placeholder="14px">
+                <input type="text" placeholder="14px">
                 <label>@font-family-base</label>
-                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <input type="text" placeholder="@font-family-sans-serif">
                 <label>@line-height-base</label>
-                <input type="text" class="span3" placeholder="20px">
+                <input type="text" placeholder="20px">
 
                 <label>@headings-font-family</label>
-                <input type="text" class="span3" placeholder="inherit">
+                <input type="text" placeholder="inherit">
                 <label>@headings-font-weight</label>
-                <input type="text" class="span3" placeholder="bold">
+                <input type="text" placeholder="bold">
                 <label>@headingsColor</label>
-                <input type="text" class="span3" placeholder="inherit">
+                <input type="text" placeholder="inherit">
 
                 <label>@font-size-large</label>
-                <input type="text" class="span3" placeholder="@font-size-base * 1.25">
+                <input type="text" placeholder="@font-size-base * 1.25">
                 <label>@font-size-small</label>
-                <input type="text" class="span3" placeholder="@font-size-base * 0.85">
+                <input type="text" placeholder="@font-size-base * 0.85">
                 <label>@font-size-mini</label>
-                <input type="text" class="span3" placeholder="@font-size-base * 0.75">
+                <input type="text" placeholder="@font-size-base * 0.75">
 
                 <label>@padding-large</label>
-                <input type="text" class="span3" placeholder="11px 19px">
+                <input type="text" placeholder="11px 19px">
                 <label>@padding-small</label>
-                <input type="text" class="span3" placeholder="2px 10px">
+                <input type="text" placeholder="2px 10px">
                 <label>@padding-mini</label>
-                <input type="text" class="span3" placeholder="1px 6px">
+                <input type="text" placeholder="1px 6px">
 
                 <label>@border-radius-base</label>
-                <input type="text" class="span3" placeholder="4px">
+                <input type="text" placeholder="4px">
                 <label>@border-radius-large</label>
-                <input type="text" class="span3" placeholder="6px">
+                <input type="text" placeholder="6px">
                 <label>@border-radius-small</label>
-                <input type="text" class="span3" placeholder="3px">
+                <input type="text" placeholder="3px">
 
                 <label>@hero-background</label>
-                <input type="text" class="span3" placeholder="@grayLighter">
+                <input type="text" placeholder="@grayLighter">
                 <label>@hero-heading-color</label>
-                <input type="text" class="span3" placeholder="inherit">
+                <input type="text" placeholder="inherit">
                 <label>@hero-lead-color</label>
-                <input type="text" class="span3" placeholder="inherit">
+                <input type="text" placeholder="inherit">
 
                 <h3>Tables</h3>
                 <label>@table-background</label>
-                <input type="text" class="span3" placeholder="transparent">
+                <input type="text" placeholder="transparent">
                 <label>@table-background-accent</label>
-                <input type="text" class="span3" placeholder="#f9f9f9">
+                <input type="text" placeholder="#f9f9f9">
                 <label>@table-background-hover</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
+                <input type="text" placeholder="#f5f5f5">
                 <label>@table-border</label>
-                <input type="text" class="span3" placeholder="#ddd">
+                <input type="text" placeholder="#ddd">
 
                 <h3>Forms</h3>
                 <label>@input-color-placeholder</label>
-                <input type="text" class="span3" placeholder="@grayLight">
+                <input type="text" placeholder="@grayLight">
                 <label>@input-background</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@input-border</label>
-                <input type="text" class="span3" placeholder="#ccc">
+                <input type="text" placeholder="#ccc">
                 <label>@input-border-radius</label>
-                <input type="text" class="span3" placeholder="3px">
+                <input type="text" placeholder="3px">
                 <label>@input-background-disabled</label>
-                <input type="text" class="span3" placeholder="@grayLighter">
+                <input type="text" placeholder="@grayLighter">
                 <label>@form-actions-background</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
+                <input type="text" placeholder="#f5f5f5">
                 <label>@btn-backround-primary</label>
-                <input type="text" class="span3" placeholder="@link-color">
+                <input type="text" placeholder="@link-color">
                 <label>@btn-backround-primary-highlight</label>
-                <input type="text" class="span3" placeholder="darken(#fff, 10%)">
+                <input type="text" placeholder="darken(#fff, 10%)">
 
               </div><!-- /span -->
-              <div class="span3">
+              <div class="col-span-3">
 
                 <h3>Form states &amp; alerts</h3>
                 <label>@state-warning-text</label>
-                <input type="text" class="span3" placeholder="#c09853">
+                <input type="text" placeholder="#c09853">
                 <label>@state-warning-background</label>
-                <input type="text" class="span3" placeholder="#fcf8e3">
+                <input type="text" placeholder="#fcf8e3">
                 <label>@state-error-text</label>
-                <input type="text" class="span3" placeholder="#b94a48">
+                <input type="text" placeholder="#b94a48">
                 <label>@state-error-background</label>
-                <input type="text" class="span3" placeholder="#f2dede">
+                <input type="text" placeholder="#f2dede">
                 <label>@state-success-text</label>
-                <input type="text" class="span3" placeholder="#468847">
+                <input type="text" placeholder="#468847">
                 <label>@state-success-background</label>
-                <input type="text" class="span3" placeholder="#dff0d8">
+                <input type="text" placeholder="#dff0d8">
                 <label>@state-info-text</label>
-                <input type="text" class="span3" placeholder="#3a87ad">
+                <input type="text" placeholder="#3a87ad">
                 <label>@state-info-background</label>
-                <input type="text" class="span3" placeholder="#d9edf7">
+                <input type="text" placeholder="#d9edf7">
 
                 <h3>Navbar</h3>
                 <label>@navbar-height</label>
-                <input type="text" class="span3" placeholder="40px">
+                <input type="text" placeholder="40px">
                 <label>@navbar-background</label>
-                <input type="text" class="span3" placeholder="@grayDarker">
+                <input type="text" placeholder="@grayDarker">
                 <label>@navbar-background-highlight</label>
-                <input type="text" class="span3" placeholder="@grayDark">
+                <input type="text" placeholder="@grayDark">
                 <label>@navbar-text</label>
-                <input type="text" class="span3" placeholder="@grayLight">
+                <input type="text" placeholder="@grayLight">
                 <label>@navbar-brand-color</label>
-                <input type="text" class="span3" placeholder="@navbar-link-color">
+                <input type="text" placeholder="@navbar-link-color">
                 <label>@navbar-link-color</label>
-                <input type="text" class="span3" placeholder="@grayLight">
+                <input type="text" placeholder="@grayLight">
                 <label>@navbar-link-color-hover</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@navbar-link-color-active</label>
-                <input type="text" class="span3" placeholder="@navbar-link-color-hover">
+                <input type="text" placeholder="@navbar-link-color-hover">
                 <label>@navbar-link-background-hover</label>
-                <input type="text" class="span3" placeholder="transparent">
+                <input type="text" placeholder="transparent">
                 <label>@navbar-link-background-active</label>
-                <input type="text" class="span3" placeholder="@navbar-background">
+                <input type="text" placeholder="@navbar-background">
                 <label>@navbarSearchBackground</label>
-                <input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
+                <input type="text" placeholder="lighten(@navbar-background, 25%)">
                 <label>@navbarSearchBackgroundFocus</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@navbarSearchBorder</label>
-                <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
+                <input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
                 <label>@navbarSearchPlaceholderColor</label>
-                <input type="text" class="span3" placeholder="#ccc">
+                <input type="text" placeholder="#ccc">
 
                 <label>@navbar-collapse-width</label>
-                <input type="text" class="span3" placeholder="979px">
+                <input type="text" placeholder="979px">
                 <label>@navbar-collapse-width-desktop</label>
-                <input type="text" class="span3" placeholder="@navbar-collapse-width + 1">
+                <input type="text" placeholder="@navbar-collapse-width + 1">
 
                 <h3>Dropdowns</h3>
                 <label>@dropdown-background</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@dropdown-border</label>
-                <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
+                <input type="text" placeholder="rgba(0,0,0,.2)">
                 <label>@dropdown-link-color</label>
-                <input type="text" class="span3" placeholder="@grayDark">
+                <input type="text" placeholder="@grayDark">
                 <label>@dropdown-link-color-hover</label>
-                <input type="text" class="span3" placeholder="#fff">
+                <input type="text" placeholder="#fff">
                 <label>@dropdown-link-background-hover</label>
-                <input type="text" class="span3" placeholder="@link-color">
+                <input type="text" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
@@ -370,8 +355,4 @@ title: Customize and download
         </form>
 
 
-
-      </div><!-- /span9 -->
-    </div><!-- row -->
-
   </div><!-- /.container -->
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 5717bfbaa..a2b3ba514 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -4,35 +4,20 @@ title: Getting started
 description: Overview of the project, its contents, and how to get started with a simple template.
 ---
 
-<!-- Subhead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>Getting started</h1>
-    <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
-  </div>
-</header>
-
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">Getting started</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#download-bootstrap">Download</a></li>
+    <li><a href="#file-structure">File structure</a></li>
+    <li><a href="#contents">What's included</a></li>
+    <li><a href="#html-template">HTML template</a></li>
+    <li><a href="#examples">Examples</a></li>
+    <li><a href="#what-next">What next?</a></li>
+  </ul>
+</div>
 
 <div class="container bs-docs-container">
 
-  <!-- Docs nav
-  ================================================== -->
-  <div class="row">
-    <div class="col-span-3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav">
-        <li><a href="#download-bootstrap"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
-        <li><a href="#file-structure"><i class="glyphicon glyphicon-chevron-right"></i> File structure</a></li>
-        <li><a href="#contents"><i class="glyphicon glyphicon-chevron-right"></i> What's included</a></li>
-        <li><a href="#html-template"><i class="glyphicon glyphicon-chevron-right"></i> HTML template</a></li>
-        <li><a href="#examples"><i class="glyphicon glyphicon-chevron-right"></i> Examples</a></li>
-        <li><a href="#what-next"><i class="glyphicon glyphicon-chevron-right"></i> What next?</a></li>
-      </ul>
-    </div>
-    <div class="col-span-9">
-
-
-
       <!-- Download
       ================================================== -->
       <section id="download-bootstrap">
@@ -282,10 +267,4 @@ description: Overview of the project, its contents, and how to get started with
         <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
       </section>
 
-
-
-
-    </div><!-- /span9 -->
-  </div><!-- row -->
-
 </div><!-- /.container -->
diff --git a/docs/javascript.html b/docs/javascript.html
index e64908672..f5388461b 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -3,41 +3,28 @@ layout: default
 title: JavaScript plugins
 ---
 
-<!-- Subhead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>JavaScript</h1>
-    <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
-  </div>
-</header>
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">JavaScript plugins</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#overview">Overview</a></li>
+    <li><a href="#transitions">Transitions</a></li>
+    <li><a href="#modals">Modal</a></li>
+    <li><a href="#dropdowns">Dropdown</a></li>
+    <li><a href="#scrollspy">Scrollspy</a></li>
+    <li><a href="#tabs">Tab</a></li>
+    <li><a href="#tooltips">Tooltip</a></li>
+    <li><a href="#popovers">Popover</a></li>
+    <li><a href="#alerts">Alert</a></li>
+    <li><a href="#buttons">Button</a></li>
+    <li><a href="#collapse">Collapse</a></li>
+    <li><a href="#carousel">Carousel</a></li>
+    <li><a href="#typeahead">Typeahead</a></li>
+    <li><a href="#affix">Affix</a></li>
+  </ul>
+</div>
 
   <div class="container bs-docs-container">
 
-    <!-- Docs nav
-    ================================================== -->
-    <div class="row">
-      <div class="col-span-3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
-          <li><a href="#overview"><i class="glyphicon glyphicon-chevron-right"></i> Overview</a></li>
-          <li><a href="#transitions"><i class="glyphicon glyphicon-chevron-right"></i> Transitions</a></li>
-          <li><a href="#modals"><i class="glyphicon glyphicon-chevron-right"></i> Modal</a></li>
-          <li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdown</a></li>
-          <li><a href="#scrollspy"><i class="glyphicon glyphicon-chevron-right"></i> Scrollspy</a></li>
-          <li><a href="#tabs"><i class="glyphicon glyphicon-chevron-right"></i> Tab</a></li>
-          <li><a href="#tooltips"><i class="glyphicon glyphicon-chevron-right"></i> Tooltip</a></li>
-          <li><a href="#popovers"><i class="glyphicon glyphicon-chevron-right"></i> Popover</a></li>
-          <li><a href="#alerts"><i class="glyphicon glyphicon-chevron-right"></i> Alert</a></li>
-          <li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Button</a></li>
-          <li><a href="#collapse"><i class="glyphicon glyphicon-chevron-right"></i> Collapse</a></li>
-          <li><a href="#carousel"><i class="glyphicon glyphicon-chevron-right"></i> Carousel</a></li>
-          <li><a href="#typeahead"><i class="glyphicon glyphicon-chevron-right"></i> Typeahead</a></li>
-          <li><a href="#affix"><i class="glyphicon glyphicon-chevron-right"></i> Affix</a></li>
-        </ul>
-      </div>
-      <div class="col-span-9">
-
-
         <!-- Overview
         ================================================== -->
         <section id="overview">
@@ -1857,8 +1844,4 @@ $('[data-spy="affix"]').each(function () {
         </section>
 
 
-
-      </div><!-- /span9 -->
-    </div><!-- row -->
-
   </div><!-- /.container -->
-- 
cgit v1.2.3


From 4b8b8d2e46e25820d190db957b4e837b66198f72 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 01:08:14 -0700
Subject: holy crap new docs layout separate from home, no more top navbar

---
 docs/_includes/header.html |    2 +-
 docs/_layouts/default.html |    5 +-
 docs/_layouts/home.html    |   20 +
 docs/assets/css/docs.css   |  150 +-
 docs/components.html       | 1961 --------------
 docs/css.html              | 2409 -----------------
 docs/customize.html        |  358 ---
 docs/docs.html             | 6454 ++++++++++++++++++++++++++++++++++++++++++++
 docs/getting-started.html  |  270 --
 docs/index.html            |    5 +-
 docs/javascript.html       | 1847 -------------
 11 files changed, 6519 insertions(+), 6962 deletions(-)
 create mode 100644 docs/_layouts/home.html
 delete mode 100644 docs/components.html
 delete mode 100644 docs/css.html
 delete mode 100644 docs/customize.html
 create mode 100644 docs/docs.html
 delete mode 100644 docs/getting-started.html
 delete mode 100644 docs/javascript.html

(limited to 'docs')

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index f738b9146..af2104ebb 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -14,7 +14,7 @@
 <!-- Bootstrap core CSS -->
 <link href="/assets/css/bootstrap.css" rel="stylesheet">
 
-{% if page.layout == "default" %}
+{% if page.layout != "example" %}
 <!-- Documentation extras -->
 <link href="/assets/css/docs.css" rel="stylesheet">
 <link href="/assets/css/pygments-manni.css" rel="stylesheet">
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index acab46de9..11b78f3f9 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -5,10 +5,7 @@
     {% include header.html %}
     <!-- Place anything custom after this. -->
   </head>
-  <body class="bs-docs-body" data-spy="scroll" data-target=".bs-docs-sidebar">
-
-    <!-- Main navbar for all docs pages. -->
-    {% include navbar.html %}
+  <body class="bs-docs-docs" data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Page content of course! -->
     {{ content }}
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
new file mode 100644
index 000000000..e837f9517
--- /dev/null
+++ b/docs/_layouts/home.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Meta, title, CSS, favicons, etc. -->
+    {% include header.html %}
+    <!-- Place anything custom after this. -->
+  </head>
+  <body class="bs-docs-home">
+
+    <!-- Page content of course! -->
+    {{ content }}
+
+    <!-- Main docs footer (social buttons, copyright, etc). -->
+    {% include colophon.html %}
+
+    <!-- JS and analytics only. -->
+    {% include footer.html %}
+
+  </body>
+</html>
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 926ae3913..9bab1a0ea 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -9,16 +9,18 @@
 -------------------------------------------------- */
 
 body {
-  padding-top: 54px;
   position: relative; /* For scrollyspy */
   /* We add the padding to the body for >768px only */
 }
 
-.bs-docs-container {
-  max-width: 860px;
+.bs-docs-container,
+.bs-home-container {
   padding-left: 15px;
   padding-right: 15px;
 }
+.bs-docs-container {
+  max-width: 860px;
+}
 
 /*  */
 .bs-docs-footer {
@@ -47,36 +49,6 @@ section > ul li {
 
 
 
-/* Navbar
--------------------------------------------------- */
-
-.bs-docs-navbar {
-  background-color: #333;
-}
-.bs-docs-navbar .navbar-brand {
-  padding: 15px;
-  font-size: 30px;
-  margin-left: 0;
-}
-.bs-docs-navbar .nav {
-  border-top: 1px solid #222;
-  border-bottom: 1px solid #444;
-}
-.bs-docs-navbar .nav > li > a {
-  width: 60px;
-  text-align: center;
-  border-top: 1px solid #444;
-  border-bottom: 1px solid #222;
-}
-.bs-docs-navbar .glyphicon {
-  display: block;
-  font-size: 20px;
-}
-.bs-docs-navbar .nav .tooltip {
-  white-space: nowrap;
-}
-
-
 /* Jumbotrons
 -------------------------------------------------- */
 
@@ -195,23 +167,33 @@ section > ul li {
 -------------------------------------------------- */
 
 .bs-docs-sidebar {
+  display: none;
   position: fixed;
   top: 0;
-  left: 60px;
+  left: 0;
   bottom: 0;
   width: 240px;
   background-color: #f5f5f5;
-  border-right: 1px solid #e5e5e5;
+  overflow-y: scroll;
+  text-shadow: 0 1px 0 #fff;
+  box-shadow: inset -1px 0 0 #e5e5e5;
+}
+.bs-docs-sidenav {
+  margin: 0 0 25px;
 }
 .bs-docs-sidenav > li > a {
-  color: #555;
-  padding: 8px 20px;
+  color: #666;
+  padding: 4px 20px;
+}
+.bs-docs-sidenav > li > a:hover {
+  border-right: 1px solid #d5d5d5;
 }
 .bs-docs-sidenav > .active > a,
 .bs-docs-sidenav > .active:hover > a,
 .bs-docs-sidenav > .active:focus > a {
-  color: #fff;
-  background-color: #428bca;
+  font-weight: 500;
+  color: #428bca;
+  border-right: 1px solid #428bca;
 }
 
 .bs-docs-sidenav-heading {
@@ -222,54 +204,15 @@ section > ul li {
   box-shadow: 0 1px 0 #fff;
 }
 
-.bs-docs-navbar:after,
-.bs-docs-sidebar:after {
-  position: absolute;
-  top: -20px;
-  right: 0;
-  bottom: -20px;
-  left: -10px;
-  z-index: 10;
-  display: block;
-  content: " ";
-  box-shadow: inset -5px 0 25px rgba(0,0,0,.05);
-}
-.bs-docs-navbar .container,
-.bs-docs-sidenav {
-  position: relative;
-  z-index: 15;
-}
-
-
-/* Base styles are not affixable given mobile-first */
-.bs-docs-sidenav {
-  margin: 0;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-/*.bs-docs-sidenav.affix {
-  position: static;
-  top: 0;
-}*/
-
-/* Chevrons within each link */
-/*.bs-docs-sidenav .glyphicon-chevron-right {
-  float: right;
-  margin-top: 1px;
-  margin-right: -6px;
-  opacity: .25;
-  color: #000;
-}
-.bs-docs-sidenav a:hover .glyphicon-chevron-right {
-  opacity: .5;
+.bs-docs-sidenav .nav-header {
+  padding: 25px 20px 5px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
 }
-.bs-docs-sidenav .active .glyphicon-chevron-right,
-.bs-docs-sidenav .active a:hover .glyphicon-chevron-right {
-  color: #fff;
-  opacity: 1;
+.bs-docs-sidenav > li + .nav-header {
+  margin-top: 0;
 }
-*/
 
 
 /* Bootstrap code examples
@@ -674,18 +617,23 @@ input.focused {
 @media screen and (min-width: 768px) {
 
   /* Account for fixed navbar (which is static to start) */
-  body {
-    /*padding-top: 50px;*/ /* Default height of navbar */
-    padding-top: 0;
-    padding-left: 300px;
+  .bs-docs-docs {
+    padding-left: 260px;
+    padding-right: 20px;
   }
 
   /* Undo custom padding */
-  .bs-docs-container {
+  .bs-docs-container,
+  .bs-home-container {
     padding-left: 0;
     padding-right: 0;
   }
 
+  /* Show the docs nav */
+  .bs-docs-sidebar {
+    display: block;
+  }
+
   /* Tweak display of docs jumbotrons */
   .masthead {
     padding-top:    100px;
@@ -705,19 +653,6 @@ input.focused {
     text-align: left;
   }
 
-  /* From here, start to affix the nav because we keep columns here */
-  .bs-docs-sidenav.affix {
-    position: fixed;
-    top: 20px;
-  }
-  .bs-docs-sidenav {
-    width: 170px;
-  }
-  .bs-docs-sidenav.affix-bottom {
-    position: absolute;
-    top: auto;
-    bottom: 270px;
-  }
 }
 
 /* Tablets/desktops and up */
@@ -728,14 +663,9 @@ input.focused {
     width: 12.5%;
   }
 
-  .bs-docs-sidenav {
-    width: 240px;
-  }
 }
 
 /* Large desktops and up */
 @media screen and (min-width: 1200px) {
-/*  .bs-docs-sidenav {
-    width: 240px;
-  }
-*/}
+
+}
diff --git a/docs/components.html b/docs/components.html
deleted file mode 100644
index b42fad00b..000000000
--- a/docs/components.html
+++ /dev/null
@@ -1,1961 +0,0 @@
----
-layout: default
-title: Components
----
-
-
-<div class="bs-docs-sidebar">
-  <h5 class="bs-docs-sidenav-heading">Components</h5>
-  <ul class="nav bs-docs-sidenav">
-    <li><a href="#dropdowns">Dropdowns</a></li>
-    <li><a href="#buttonGroups">Button groups</a></li>
-    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
-    <li><a href="#navs">Navs</a></li>
-    <li><a href="#navbar">Navbar</a></li>
-    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
-    <li><a href="#pagination">Pagination</a></li>
-    <li><a href="#labels">Labels</a></li>
-    <li><a href="#badges">Badges</a></li>
-    <li><a href="#typography">Typography</a></li>
-    <li><a href="#thumbnails">Thumbnails</a></li>
-    <li><a href="#alerts">Alerts</a></li>
-    <li><a href="#progress">Progress bars</a></li>
-    <li><a href="#media">Media object</a></li>
-    <li><a href="#misc">Misc</a></li>
-  </ul>
-</div>
-
-
-
-  <div class="container bs-docs-container">
-
-        <!-- Dropdowns
-        ================================================== -->
-        <section id="dropdowns">
-          <div class="page-header">
-            <h1>Dropdown menus</h1>
-          </div>
-          <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
-
-          <h3>Example</h3>
-          <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
-          <div class="bs-docs-example">
-            <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                <li><a tabindex="-1" href="#">Action</a></li>
-                <li><a tabindex="-1" href="#">Another action</a></li>
-                <li><a tabindex="-1" href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li><a tabindex="-1" href="#">Separated link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="dropdown">
-  <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-    <li><a tabindex="-1" href="#">Action</a></li>
-    <li><a tabindex="-1" href="#">Another action</a></li>
-    <li><a tabindex="-1" href="#">Something else here</a></li>
-    <li class="divider"></li>
-    <li><a tabindex="-1" href="#">Separated link</a></li>
-  </ul>
-</div>
-{% endhighlight %}
-
-          <h3>Aligning the menus</h3>
-          <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
-{% highlight html linenos %}
-<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
-  ...
-</ul>
-{% endhighlight %}
-
-          <h3>Disabled menu options</h3>
-          <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
-          <div class="bs-docs-example">
-            <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                <li><a tabindex="-1" href="#">Regular link</a></li>
-                <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
-                <li><a tabindex="-1" href="#">Another link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Regular link</a></li>
-  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
-  <li><a tabindex="-1" href="#">Another link</a></li>
-</ul>
-{% endhighlight %}
-
-          <h3>Sub menus on dropdowns</h3>
-          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
-          <div class="bs-docs-example bs-docs-example-submenu">
-
-            <div class="pull-left">
-              <p class="muted">Default</p>
-              <div class="dropdown clearfix">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="pull-left">
-              <p class="muted">Dropup</p>
-              <div class="dropup">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="pull-left">
-              <p class="muted">Left submenu</p>
-              <div class="dropdown">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu pull-left">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-          </div>
-{% highlight html linenos %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  ...
-  <li class="dropdown-submenu pull-left">
-    <a tabindex="-1" href="#">More options</a>
-    <ul class="dropdown-menu">
-      <li><a tabindex="-1" href="#">Second level link</a></li>
-      <li><a tabindex="-1" href="#">Second level link</a></li>
-      <li><a tabindex="-1" href="#">Second level link</a></li>
-      <li><a tabindex="-1" href="#">Second level link</a></li>
-      <li><a tabindex="-1" href="#">Second level link</a></li>
-    </ul>
-  </li>
-  ...
-</ul>
-{% endhighlight %}
-
-        </section>
-
-
-
-
-        <!-- Button Groups
-        ================================================== -->
-        <section id="buttonGroups">
-          <div class="page-header">
-            <h1>Button groups</h1>
-          </div>
-          <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
-
-          <h3>Single button group</h3>
-          <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group" style="margin: 9px 0 5px;">
-              <button type="button" class="btn">Left</button>
-              <button type="button" class="btn">Middle</button>
-              <button type="button" class="btn">Right</button>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="btn-group">
-  <button type="button" class="btn">Left</button>
-  <button type="button" class="btn">Middle</button>
-  <button type="button" class="btn">Right</button>
-</div>
-{% endhighlight %}
-
-          <h3>Multiple button groups</h3>
-          <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button type="button" class="btn">1</button>
-                <button type="button" class="btn">2</button>
-                <button type="button" class="btn">3</button>
-                <button type="button" class="btn">4</button>
-              </div>
-              <div class="btn-group">
-                <button type="button" class="btn">5</button>
-                <button type="button" class="btn">6</button>
-                <button type="button" class="btn">7</button>
-              </div>
-              <div class="btn-group">
-                <button type="button" class="btn">8</button>
-              </div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="btn-toolbar">
-  <div class="btn-group">...</div>
-  <div class="btn-group">...</div>
-  <div class="btn-group">...</div>
-</div>
-{% endhighlight %}
-
-          <h3>Vertical button groups</h3>
-          <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group btn-group-vertical">
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="btn-group btn-group-vertical">
-  ...
-</div>
-{% endhighlight %}
-
-          <h3>Justified button groups</h3>
-          <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group btn-group-justified">
-              <a href="#" class="btn">Left</a>
-              <a href="#" class="btn">Right</a>
-              <a href="#" class="btn">Middle</a>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="btn-group btn-group-justified">
-  ...
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Split button dropdowns
-        ================================================== -->
-        <section id="buttonDropdowns">
-          <div class="page-header">
-            <h1>Button dropdown menus</h1>
-          </div>
-          <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
-
-          <h3>Single or split button</h3>
-          <p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin-bottom: 10px;">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div>
-
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button class="btn">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-primary">Action</button>
-                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-danger">Danger</button>
-                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-warning">Warning</button>
-                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-success">Success</button>
-                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /btn-toolbar -->
-          </div>
-{% highlight html linenos %}
-<!-- Single button -->
-<div class="btn-group">
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    Action <span class="caret"></span>
-  </button>
-  <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>
-</div>
-
-<!-- Split button -->
-<div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <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>
-</div>
-{% endhighlight %}
-
-          <h3>Works with all button sizes</h3>
-          <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
-                  Large button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
-                  Small button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
-                  Mini button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /btn-toolbar -->
-          </div><!-- /example -->
-{% highlight html linenos %}
-<!-- Large button group -->
-<div class="btn-group">
-  <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
-    Large button <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    ...
-  </ul>
-</div>
-
-<!-- Small button group -->
-<div class="btn-group">
-  <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
-    Small button <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    ...
-  </ul>
-</div>
-
-<!-- Mini button group -->
-<div class="btn-group">
-  <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
-    Mini button <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    ...
-  </ul>
-</div>
-{% endhighlight %}
-
-          <h3>Dropup buttons</h3>
-          <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar">
-              <div class="btn-group dropup">
-                <button class="btn">Dropup</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group dropup">
-                <button class="btn primary">Right dropup</button>
-                <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <ul class="dropdown-menu pull-right">
-                  <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>
-              </div><!-- /btn-group -->
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="btn-group dropup">
-  <button class="btn">Dropup</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- Dropdown menu links -->
-  </ul>
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Navs
-        ================================================== -->
-        <section id="navs">
-          <div class="page-header">
-            <h1>Navs</small></h1>
-          </div>
-
-          <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
-
-          <h2>Tabs</h2>
-          <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-tabs">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-</ul>
-{% endhighlight %}
-
-          <h2>List</h2>
-          <p>Swap the tabs class for <code>.nav-list</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-list" style="max-width: 300px;">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-list">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-</ul>
-{% endhighlight %}
-
-          <h2>Pills</h2>
-          <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-pills">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-</ul>
-{% endhighlight %}
-          <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-pills nav-stacked">
-  ...
-</ul>
-{% endhighlight %}
-
-          <h2>Options</h2>
-
-          <h3>Justified links</h3>
-          <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs nav-justified">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-            <br>
-            <ul class="nav nav-pills nav-justified">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-tabs nav-justified">
-  ...
-</ul>
-<ul class="nav nav-pills nav-justified">
-  ...
-</ul>
-{% endhighlight %}
-
-          <h3>Disabled state</h3>
-          <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li><a href="#">Clickable link</a></li>
-              <li><a href="#">Clickable link</a></li>
-              <li class="disabled"><a href="#">Disabled link</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-tabs">
-  ...
-  <li class="disabled"><a href="#">Disabled link</a></li>
-  ...
-</ul>
-{% endhighlight %}
-
-
-          <h3>Component alignment</h3>
-          <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Dropdowns</h2>
-          <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
-
-          <h3>Tabs with dropdowns</h3>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Help</a></li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                  Dropdown <span class="caret"></span>
-                </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>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-tabs">
-  ...
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-      Dropdown <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-  ...
-</ul>
-{% endhighlight %}
-
-          <h3>Pills with dropdowns</h3>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Help</a></li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                  Dropdown <span class="caret"></span>
-                </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>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="nav nav-pills">
-  ...
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-      Dropdown <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-  ...
-</ul>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Navbar
-        ================================================== -->
-        <section id="navbar">
-          <div class="page-header">
-            <h1>Navbar</h1>
-          </div>
-
-
-          <h2>Basic navbar</h2>
-          <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <a class="navbar-brand" href="#">Title</a>
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Link</a></li>
-                <li><a href="#">Link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar">
-  <a class="navbar-brand" href="#">Title</a>
-  <ul class="nav">
-    <li class="active"><a href="#">Home</a></li>
-    <li><a href="#">Link</a></li>
-    <li><a href="#">Link</a></li>
-  </ul>
-</div>
-{% endhighlight %}
-
-          <h2>Navbar components</h2>
-
-          <h3>Brand</h3>
-          <p>A simple link to show your brand or project name only requires an anchor tag.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <a class="navbar-brand" href="#">Title</a>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<a class="navbar-brand" href="#">Title</a>
-{% endhighlight %}
-
-          <h3>Nav links</h3>
-          <p>Nav items are simple to add via unordered lists.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Link</a></li>
-                <li class="disabled"><a href="#">Disabled</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="nav">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Link</a></li>
-  <li class="disabled"><a href="#">Disabled</a></li>
-</ul>
-{% endhighlight %}
-          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Link</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Link</a></li>
-                <li class="divider"></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="nav">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
-{% endhighlight %}
-
-          <h3>Forms</h3>
-          <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <form class="navbar-form pull-left">
-                <input type="text" style="width: 200px;">
-                <button type="submit" class="btn">Submit</button>
-              </form>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<form class="navbar-form pull-left">
-  <input type="text" style="width: 200px;">
-  <button type="submit" class="btn">Submit</button>
-</form>
-{% endhighlight %}
-
-          <h3>Component alignment</h3>
-          <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-
-          <h3>Using dropdowns</h3>
-          <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
-
-          <h3>Text</h3>
-          <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
-
-
-          <h2>Optional display variations</h2>
-          <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
-
-          <h3>Fixed to top</h3>
-          <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
-          <div class="bs-docs-example bs-navbar-top-example">
-            <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar navbar-fixed-top">
-  ...
-</div>
-{% endhighlight %}
-
-          <h3>Fixed to bottom</h3>
-          <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
-          <div class="bs-docs-example bs-navbar-bottom-example">
-            <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar navbar-fixed-bottom">
-  ...
-</div>
-{% endhighlight %}
-
-          <h3>Static top navbar</h3>
-          <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
-          <div class="bs-docs-example bs-navbar-top-example">
-            <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar navbar-static-top">
-  ...
-</div>
-{% endhighlight %}
-
-
-          <h2>Responsive navbar</h2>
-          <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <div class="container">
-                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </a>
-                <a class="navbar-brand" href="#">Title</a>
-                <div class="nav-collapse collapse navbar-responsive-collapse">
-                  <ul class="nav">
-                    <li class="active"><a href="#">Home</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
-                        <li><a href="#">Separated link</a></li>
-                        <li><a href="#">One more separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                  <form class="navbar-form pull-left" action="">
-                    <input type="text" class="span8" placeholder="Search">
-                  </form>
-                  <ul class="nav pull-right">
-                    <li><a href="#">Link</a></li>
-                    <li class="divider"></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
-                </div><!-- /.nav-collapse -->
-              </div><!-- /.container -->
-            </div><!-- /.navbar -->
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar">
-  <div class="container">
-
-    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
-    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </a>
-
-    <!-- Be sure to leave the brand out there if you want it shown -->
-    <a class="navbar-brand" href="#">Title</a>
-
-    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
-    <div class="nav-collapse collapse navbar-responsive-collapse">
-      ...
-    </div><!-- /.nav-collapse -->
-  </div><!-- /.container -->
-</div><!-- /.navbar -->
-{% endhighlight %}
-
-          <div class="alert alert-info">
-            <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
-          </div>
-
-
-          <h2>Inverted variation</h2>
-          <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
-          <div class="bs-docs-example">
-            <div class="navbar navbar-inverse" style="position: static;">
-              <div class="container">
-                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </a>
-                <a class="navbar-brand" href="#">Title</a>
-                <div class="nav-collapse collapse navbar-inverse-collapse">
-                  <ul class="nav">
-                    <li class="active"><a href="#">Home</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
-                        <li><a href="#">Separated link</a></li>
-                        <li><a href="#">One more separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                  <form class="navbar-form pull-left" action="">
-                    <input type="text" class="span8" placeholder="Search">
-                  </form>
-                  <ul class="nav pull-right">
-                    <li><a href="#">Link</a></li>
-                    <li class="divider"></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
-                </div><!-- /.nav-collapse -->
-              </div>
-            </div><!-- /navbar -->
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="navbar navbar-inverse">
-  ...
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Breadcrumbs
-        ================================================== -->
-        <section id="breadcrumbs">
-          <div class="page-header">
-            <h1>Breadcrumbs <small></small></h1>
-          </div>
-          <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
-
-          <div class="bs-docs-example">
-            <ul class="breadcrumb">
-              <li class="active">Home</li>
-            </ul>
-            <ul class="breadcrumb">
-              <li><a href="#">Home</a></li>
-              <li class="active">Library</li>
-            </ul>
-            <ul class="breadcrumb" style="margin-bottom: 5px;">
-              <li><a href="#">Home</a></li>
-              <li><a href="#">Library</a></li>
-              <li class="active">Data</li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="breadcrumb">
-  <li><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  <li class="active">Data</li>
-</ul>
-{% endhighlight %}
-
-
-        </section>
-
-
-
-        <!-- Pagination
-        ================================================== -->
-        <section id="pagination">
-          <div class="page-header">
-            <h1>Pagination</h1>
-          </div>
-          <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
-
-          <h2>Standard pagination</h2>
-          <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
-          <div class="bs-docs-example">
-            <ul class="pagination">
-              <li><a href="#">&laquo;</a></li>
-              <li><a href="#">1</a></li>
-              <li><a href="#">2</a></li>
-              <li><a href="#">3</a></li>
-              <li><a href="#">4</a></li>
-              <li><a href="#">5</a></li>
-              <li><a href="#">&raquo;</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="pagination">
-  <li><a href="#">&laquo;</a></li>
-  <li><a href="#">1</a></li>
-  <li><a href="#">2</a></li>
-  <li><a href="#">3</a></li>
-  <li><a href="#">4</a></li>
-  <li><a href="#">5</a></li>
-  <li><a href="#">&raquo;</a></li>
-</ul>
-{% endhighlight %}
-
-          <h3>Disabled and active states</h3>
-          <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
-          <div class="bs-docs-example">
-            <ul class="pagination">
-              <li class="disabled"><a href="#">&laquo;</a></li>
-              <li class="active"><a href="#">1</a></li>
-              <li><a href="#">2</a></li>
-              <li><a href="#">3</a></li>
-              <li><a href="#">4</a></li>
-              <li><a href="#">5</a></li>
-              <li><a href="#">&raquo;</a></li>
-           </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="pagination">
-  <li class="disabled"><a href="#">&laquo;</a></li>
-  <li class="active"><a href="#">1</a></li>
-  ...
-</ul>
-{% endhighlight %}
-          <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
-{% highlight html linenos %}
-<ul class="pagination">
-  <li class="disabled"><span>&laquo;</span></li>
-  <li class="active"><span>1</span></li>
-  ...
-</ul>
-{% endhighlight %}
-
-
-          <h3>Sizes</h3>
-          <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
-          <div class="bs-docs-example">
-            <div>
-              <ul class="pagination pagination-large">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination pagination-small">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination pagination-mini">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-          </div>
-{% highlight html linenos %}
-<ul class="pagination pagination-large">...</ul>
-<ul class="pagination pagination">...</ul>
-<ul class="pagination pagination-small">...</ul>
-<ul class="pagination pagination-mini">...</ul>
-{% endhighlight %}
-
-
-          <h2 id="pagination-pager">Pager</h2>
-          <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
-
-          <h3>Default example</h3>
-          <p>By default, the pager centers links.</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li><a href="#">Previous</a></li>
-              <li><a href="#">Next</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="pager">
-  <li><a href="#">Previous</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
-{% endhighlight %}
-
-          <h3>Aligned links</h3>
-          <p>Alternatively, you can align each link to the sides:</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li class="previous"><a href="#">&larr; Older</a></li>
-              <li class="next"><a href="#">Newer &rarr;</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="pager">
-  <li class="previous"><a href="#">&larr; Older</a></li>
-  <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
-{% endhighlight %}
-
-
-          <h3>Optional disabled state</h3>
-          <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li class="previous disabled"><a href="#">&larr; Older</a></li>
-              <li class="next"><a href="#">Newer &rarr;</a></li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="pager">
-  <li class="previous disabled"><a href="#">&larr; Older</a></li>
-  <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
-{% endhighlight %}
-
-
-        </section>
-
-
-
-        <!-- Labels
-        ================================================== -->
-        <section id="labels">
-          <div class="page-header">
-            <h1>Labels</h1>
-          </div>
-          <p class="lead"></p>
-
-          <h3>Example</h3>
-          <div class="bs-docs-example">
-            <h1>Example heading <span class="label">New</span></h1>
-            <h2>Example heading <span class="label">New</span></h2>
-            <h3>Example heading <span class="label">New</span></h3>
-            <h4>Example heading <span class="label">New</span></h4>
-            <h5>Example heading <span class="label">New</span></h5>
-            <h6>Example heading <span class="label">New</span></h6>
-          </div>
-{% highlight html linenos %}
-<h3>Example heading <span class="label">New</span></h3>
-{% endhighlight %}
-
-          <h3>Available variations</h3>
-          <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Labels</th>
-                <th>Markup</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <span class="label">Default</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-success">Success</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-warning">Warning</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-danger">Danger</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-info">Info</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-        </section>
-
-
-
-        <!-- Badges
-        ================================================== -->
-        <section id="badges">
-          <div class="page-header">
-            <h1>Badges</h1>
-          </div>
-          <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
-
-          <div class="bs-docs-example">
-            <a href="#">Inbox <span class="badge">42</span></a>
-          </div>
-{% highlight html linenos %}
-<a href="#">Inbox <span class="badge">42</span></a>
-{% endhighlight %}
-
-          <h4>Self collapsing</h4>
-          <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
-
-          <h4>Adapts to active nav states</h4>
-          <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages <span class="badge">3</span></a></li>
-            </ul>
-            <br>
-            <ul class="nav nav-list" style="max-width: 260px;">
-              <li class="active">
-                <a href="#">
-                  <span class="badge pull-right">42</span>
-                  Home
-                </a>
-              </li>
-              <li><a href="#">Profile</a></li>
-              <li>
-                <a href="#">
-                  <span class="badge pull-right">3</span>
-                  Messages
-                </a>
-              </li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="nav nav-list">
-  <li class="active">
-    <a href="#">
-      <span class="badge pull-right">42</span>
-      Home
-    </a>
-  </li>
-  ...
-</ul>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Typographic components
-        ================================================== -->
-        <section id="typography">
-          <div class="page-header">
-            <h1>Typographic components</h1>
-          </div>
-
-          <h2>Jumbotron</h2>
-          <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
-          <div class="bs-docs-example">
-            <div class="jumbotron">
-              <h1>Hello, world!</h1>
-              <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-              <p><a class="btn btn-primary btn-large">Learn more</a></p>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="jumbotron">
-  <h1>Hello, world!</h1>
-  <p>...</p>
-  <p><a class="btn btn-primary btn-large">Learn more</a></p>
-</div>
-{% endhighlight %}
-
-          <h2>Page header</h2>
-          <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
-          <div class="bs-docs-example">
-            <div class="page-header">
-              <h1>Example page header <small>Subtext for header</small></h1>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="page-header">
-  <h1>Example page header <small>Subtext for header</small></h1>
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Thumbnails
-        ================================================== -->
-        <section id="thumbnails">
-          <div class="page-header">
-            <h1>Thumbnails</h1>
-          </div>
-          <p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
-
-          <h3>Default thumbnails</h3>
-          <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
-          <div class="bs-docs-example">
-            <div class="row">
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-            </div>
-          </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
-<div class="row">
-  <div class="span3">
-    <a href="#" class="thumbnail">
-      <img data-src="holder.js/260x180" alt="">
-    </a>
-  </div>
-  ...
-</div>
-{% endhighlight %}
-
-          <h3>Custom content thumbnails</h3>
-          <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>
-          <div class="bs-docs-example">
-            <div class="row">
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
-<div class="row">
-  <div class="span3">
-    <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="">
-      <div class="caption">
-        <h3>Thumbnail label</h3>
-        <p>...</p>
-        <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-      </div>
-    </div>
-  </div>
-</div>
-{% endhighlight %}
-
-
-        </section>
-
-
-
-
-        <!-- Alerts
-        ================================================== -->
-        <section id="alerts">
-          <div class="page-header">
-            <h1>Alerts</h1>
-          </div>
-          <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
-
-          <h3>Default alert</h3>
-          <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
-          <div class="bs-docs-example">
-            <div class="alert">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Warning!</strong> Best check yo self, you're not looking too good.
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="alert">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <strong>Warning!</strong> Best check yo self, you're not looking too good.
-</div>
-{% endhighlight %}
-
-          <h3>Block alerts</h3>
-          <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
-          <div class="bs-docs-example">
-            <div class="alert alert-block">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <h4>Warning!</h4>
-              <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="alert alert-block">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <h4>Warning!</h4>
-  <p>...</p>
-</div>
-{% endhighlight %}
-
-          <h3>Contextual alternatives</h3>
-          <p>Add optional classes to change an alert's connotation.</p>
-          <div class="bs-docs-example">
-            <div class="alert alert-error">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Oh snap!</strong> Change a few things up and try submitting again.
-            </div>
-            <div class="alert alert-success">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Well done!</strong> You successfully read this important alert message.
-            </div>
-            <div class="alert alert-info">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="alert alert-error">...</div>
-<div class="alert alert-success">...</div>
-<div class="alert alert-info">...</div>
-{% endhighlight %}
-        </section>
-
-
-
-
-        <!-- Progress bars
-        ================================================== -->
-        <section id="progress">
-          <div class="page-header">
-            <h1>Progress bars</h1>
-          </div>
-          <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
-
-          <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
-
-          <h3>Basic</h3>
-          <p>Default progress bar with a vertical gradient.</p>
-          <div class="bs-docs-example">
-            <div class="progress">
-              <div class="progress-bar" style="width: 60%;"></div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="progress">
-  <div class="progress-bar" style="width: 60%;"></div>
-</div>
-{% endhighlight %}
-
-          <h3>Additional colors</h3>
-          <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
-          <div class="bs-docs-example">
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-            </div>
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-            </div>
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-            </div>
-            <div class="progress">
-              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="progress">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-{% endhighlight %}
-
-          <h3>Striped</h3>
-          <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
-          <div class="bs-docs-example">
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-            </div>
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-            </div>
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-            </div>
-            <div class="progress progress-striped">
-              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-{% endhighlight %}
-
-          <h3>Animated</h3>
-          <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
-          <div class="bs-docs-example">
-            <div class="progress progress-striped active">
-              <div class="progress-bar" style="width: 45%"></div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="progress progress-striped active">
-  <div class="progress-bar" style="width: 45%"></div>
-</div>
-{% endhighlight %}
-
-          <h3>Stacked</h3>
-          <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
-          <div class="bs-docs-example">
-            <div class="progress">
-              <div class="progress-bar progress-bar-success" style="width: 35%"></div>
-              <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
-              <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-
-        <!-- Media object
-        ================================================== -->
-        <section id="media">
-          <div class="page-header">
-            <h1>Media object</h1>
-          </div>
-          <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
-
-          <h3>Default example</h3>
-          <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
-          <div class="bs-docs-example">
-            <div class="media">
-              <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64">
-              </a>
-              <div class="media-body">
-                <h4 class="media-heading">Media heading</h4>
-                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-              </div>
-            </div>
-            <div class="media">
-              <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64">
-              </a>
-              <div class="media-body">
-                <h4 class="media-heading">Media heading</h4>
-                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-                <div class="media">
-                  <a class="pull-left" href="#">
-                    <img class="media-object" data-src="holder.js/64x64">
-                  </a>
-                  <div class="media-body">
-                    <h4 class="media-heading">Media heading</h4>
-                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
-<div class="media">
-  <a class="pull-left" href="#">
-    <img class="media-object" src="...">
-  </a>
-  <div class="media-body">
-    <h4 class="media-heading">Media heading</h4>
-    ...
-  </div>
-</div>
-{% endhighlight %}
-
-          <h3>Media list</h3>
-          <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
-          <div class="bs-docs-example">
-            <ul class="media-list">
-              <li class="media">
-                <a class="pull-left" href="#">
-                  <img class="media-object" data-src="holder.js/64x64">
-                </a>
-                <div class="media-body">
-                  <h4 class="media-heading">Media heading</h4>
-                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
-                  <!-- Nested media object -->
-                  <div class="media">
-                    <a class="pull-left" href="#">
-                      <img class="media-object" data-src="holder.js/64x64">
-                    </a>
-                    <div class="media-body">
-                      <h4 class="media-heading">Nested media heading</h4>
-                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                      <!-- Nested media object -->
-                      <div class="media">
-                        <a class="pull-left" href="#">
-                          <img class="media-object" data-src="holder.js/64x64">
-                        </a>
-                        <div class="media-body">
-                          <h4 class="media-heading">Nested media heading</h4>
-                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Nested media object -->
-                  <div class="media">
-                    <a class="pull-left" href="#">
-                      <img class="media-object" data-src="holder.js/64x64">
-                    </a>
-                    <div class="media-body">
-                      <h4 class="media-heading">Nested media heading</h4>
-                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li class="media">
-                <a class="pull-right" href="#">
-                  <img class="media-object" data-src="holder.js/64x64">
-                </a>
-                <div class="media-body">
-                  <h4 class="media-heading">Media heading</h4>
-                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                </div>
-              </li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul class="media-list">
-  <li class="media">
-    <a class="pull-left" href="#">
-      <img class="media-object" src="...">
-    </a>
-    <div class="media-body">
-      <h4 class="media-heading">Media heading</h4>
-      ...
-    </div>
-  </li>
-</ul>
-{% endhighlight %}
-
-</section>
-
-
-
-
-
-        <!-- Miscellaneous
-        ================================================== -->
-        <section id="misc">
-          <div class="page-header">
-            <h1>Miscellaneous <small>Lightweight utility components</small></h1>
-          </div>
-
-          <h2>Wells</h2>
-          <p>Use the well as a simple effect on an element to give it an inset effect.</p>
-          <div class="bs-docs-example">
-            <div class="well">
-              Look, I'm in a well!
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="well">...</div>
-{% endhighlight %}
-          <h3>Optional classes</h3>
-          <p>Control padding and rounded corners with two optional modifier classes.</p>
-          <div class="bs-docs-example">
-            <div class="well well-large">
-              Look, I'm in a well!
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="well well-large">...</div>
-{% endhighlight %}
-
-          <div class="bs-docs-example">
-            <div class="well well-small">
-              Look, I'm in a well!
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="well well-small">...</div>
-{% endhighlight %}
-
-
-          <h2>Close icon</h2>
-          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-          <div class="bs-docs-example">
-            <p><button class="close" style="float: none;">&times;</button></p>
-          </div>
-{% highlight html linenos %}
-<button class="close" style="float: none;">&times;</button>
-{% endhighlight %}
-
-          <h2>Helper classes</h2>
-          <p>Simple, focused classes for small display or behavior tweaks.</p>
-
-          <h4>.pull-left</h4>
-          <p>Float an element left</p>
-{% highlight html linenos %}
-<div class="pull-left">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-left {
-  float: left;
-}
-{% endhighlight %}
-
-          <h4>.pull-right</h4>
-          <p>Float an element right</p>
-{% highlight html linenos %}
-<div class="pull-right">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-right {
-  float: right;
-}
-{% endhighlight %}
-
-          <h4>.muted</h4>
-          <p>Change an element's color to <code>#999</code></p>
-{% highlight html linenos %}
-<p class="muted">...</p>
-{% endhighlight %}
-{% highlight css linenos %}
-.muted {
-  color: #999;
-}
-{% endhighlight %}
-
-
-          <h4>.clearfix</h4>
-          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
-{% highlight html linenos %}
-<div class="clearfix">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.clearfix {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}
-{% endhighlight %}
-
-
-        </section>
-
-
-
-  </div><!-- /.container -->
diff --git a/docs/css.html b/docs/css.html
deleted file mode 100644
index 1c317d2cd..000000000
--- a/docs/css.html
+++ /dev/null
@@ -1,2409 +0,0 @@
----
-layout: default
-title: CSS
----
-
-<div class="bs-docs-sidebar">
-  <h5 class="bs-docs-sidenav-heading">CSS</h5>
-  <ul class="nav bs-docs-sidenav">
-    <li><a href="#global">Global settings</a></li>
-    <li><a href="#grid">Grid system</a></li>
-    <li><a href="#typography">Typography</a></li>
-    <li><a href="#code">Code</a></li>
-    <li><a href="#tables">Tables</a></li>
-    <li><a href="#forms">Forms</a></li>
-    <li><a href="#buttons">Buttons</a></li>
-    <li><a href="#images">Images</a></li>
-    <li><a href="#icons">Glyphicons</a></li>
-    <li><a href="#responsive-utilities">Responsive utilities</a></li>
-  </ul>
-</div>
-
-
-  <div class="container bs-docs-container">
-
-        <!-- Global Bootstrap settings
-        ================================================== -->
-        <section id="global">
-          <div class="page-header">
-            <h1>Global settings</h1>
-          </div>
-          <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
-
-          <h3>Requires HTML5 doctype</h3>
-          <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
-
-{% highlight html linenos %}
-<!DOCTYPE html>
-<html lang="en">
-  ...
-</html>
-{% endhighlight %}
-
-          <h3>Mobile first</h3>
-          <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
-          <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
-
-{% highlight html linenos %}
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-{% endhighlight %}
-
-          <h3>Typography and links</h3>
-          <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
-          <ul>
-            <li>Remove <code>margin</code> on the body</li>
-            <li>Set <code>background-color: white;</code> on the <code>body</code></li>
-            <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
-            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
-          </ul>
-          <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
-
-          <h3>Normalize reset</h3>
-          <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
-
-        </section>
-
-
-
-        <!-- Grid system
-        ================================================== -->
-        <section id="grid">
-          <div class="page-header">
-            <h1>Grid system</h1>
-          </div>
-          <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
-
-          <h3 id="grid-example">Grid example</h3>
-          <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-            </div>
-            <div class="row show-grid">
-              <div class="col-span-4">4</div>
-              <div class="col-span-4">4</div>
-              <div class="col-span-4">4</div>
-            </div>
-            <div class="row show-grid">
-              <div class="col-span-6">6</div>
-              <div class="col-span-6">6</div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="row">
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-</div>
-<div class="row">
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
-</div>
-<div class="row">
-  <div class="col-span-6">6</div>
-  <div class="col-span-6">6</div>
-</div>
-{% endhighlight %}
-
-          <h3 id="grid-offsetting">Offsetting columns</h3>
-          <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="col-span-4">4</div>
-              <div class="col-span-4 col-offset-4">4 offset 4</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="col-span-3 col-offset-3">3 offset 3</div>
-              <div class="col-span-3 col-offset-3">3 offset 3</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="col-span-6 col-offset-6">6 offset 6</div>
-            </div><!-- /row -->
-          </div>
-{% highlight html linenos %}
-<div class="row">
-  <div class="col-span-4">...</div>
-  <div class="col-span-4 col-offset-4">...</div>
-</div>
-{% endhighlight %}
-
-
-          <h3 id="grid-nesting">Nesting columns</h3>
-          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
-          <div class="row show-grid">
-            <div class="col-span-9">
-              Level 1: 9 columns
-              <div class="row show-grid">
-                <div class="col-span-6">
-                  Level 2: 6 columns
-                </div>
-                <div class="col-span-6">
-                  Level 2: 6 columns
-                </div>
-              </div>
-            </div>
-          </div>
-{% highlight html linenos %}
-<div class="row">
-  <div class="col-span-9">
-    Level 1: 9 columns
-    <div class="row">
-      <div class="col-span-6">
-        Level 2: 6 columns
-      </div>
-      <div class="col-span-6">
-        Level 2: 6 columns
-      </div>
-    </div>
-  </div>
-</div>
-{% endhighlight %}
-
-          <h3 id="grid-column-ordering">Column ordering</h3>
-          <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
-<div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
-</div>
-
-{% highlight html linenos %}
-<div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
-</div>
-{% endhighlight %}
-
-          <h3 id="grid-less">LESS mixins and variables</h3>
-          <p>In addition to <a href="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
-
-          <h4>Variables</h4>
-          <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
-{% highlight css linenos %}
-@grid-columns:              12;
-@grid-gutter-width:         30px;
-@grid-float-breakpoint:     768px;
-{% endhighlight %}
-
-          <h4>Mixins</h4>
-          <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
-{% highlight css linenos %}
-// Creates a wrapper for a series of columns
-.make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
-  // Then clear the floated columns
-  .clear_float();
-}
-
-// Generate the columns
-.make-column(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
-  }
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Set inner padding as gutters instead of margin
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
-}
-
-// Generate the column offsets
-.make-column-offset(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-{% endhighlight %}
-
-          <h4>Example usage</h4>
-          <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
-{% highlight css linenos %}
-.wrapper {
-  .make-row();
-}
-.content-main {
-  .make-column(8);
-}
-.content-secondary {
-  .make-column(3);
-  .make-column-offset(1);
-}
-{% endhighlight %}
-{% highlight html linenos %}
-<div class="wrapper">
-  <div class="content-main">...</div>
-  <div class="content-secondary">...</div>
-</div>
-{% endhighlight %}
-
-
-
-        </section>
-
-
-
-
-        <!-- Typography
-        ================================================== -->
-        <section id="typography">
-          <div class="page-header">
-            <h1>Typography</h1>
-          </div>
-
-          <!-- Headings -->
-          <h2 id="headings">Headings</h2>
-          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
-
-          <div class="bs-docs-example bs-docs-example-type">
-            <table class="table">
-              <tbody>
-                <tr>
-                  <th><h1>Bootstrap heading</h1></th>
-                  <td>Semibold 38px</td>
-                </tr>
-                <tr>
-                  <th><h2>Bootstrap heading</h2></th>
-                  <td>Semibold 32px</td>
-                </tr>
-                <tr>
-                  <th><h3>Bootstrap heading</h3></th>
-                  <td>Semibold 24px</td>
-                </tr>
-                <tr>
-                  <th><h4>Bootstrap heading</h4></th>
-                  <td>Semibold 18px</td>
-                </tr>
-                <tr>
-                  <th><h5>Bootstrap heading</h5></th>
-                  <td>Semibold 16px</td>
-                </tr>
-                <tr>
-                  <th><h6>Bootstrap heading</h6></th>
-                  <td>Semibold 12px</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-<!--           <div class="bs-docs-example">
-            <h1>h1. Heading 1</h1>
-            <h2>h2. Heading 2</h2>
-            <h3>h3. Heading 3</h3>
-            <h4>h4. Heading 4</h4>
-            <h5>h5. Heading 5</h5>
-            <h6>h6. Heading 6</h6>
-          </div>
- -->
-          <!-- Body copy -->
-          <h2 id="body-copy">Body copy</h2>
-          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
-          <div class="bs-docs-example">
-            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
-            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
-            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
-          </div>
-{% highlight html linenos %}
-<p>...</p>
-{% endhighlight %}
-
-          <!-- Body copy .lead -->
-          <h3>Lead body copy</h3>
-          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
-          <div class="bs-docs-example">
-            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
-          </div>
-{% highlight html linenos %}
-<p class="lead">...</p>
-{% endhighlight %}
-
-          <!-- Using LESS -->
-          <h3>Built with Less</h3>
-          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
-
-
-          <!-- Emphasis -->
-          <h2 id="emphasis">Emphasis</h2>
-          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
-
-          <h3>Small text</h3>
-          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
-          <div class="bs-docs-example">
-            <p><small>This line of text is meant to be treated as fine print.</small></p>
-          </div>
-{% highlight html linenos %}
-<small>This line of text is meant to be treated as fine print.</small>
-{% endhighlight %}
-
-
-          <h3>Bold</h3>
-          <p>For emphasizing a snippet of text with a heavier font-weight.</p>
-          <div class="bs-docs-example">
-            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
-          </div>
-{% highlight html linenos %}
-<strong>rendered as bold text</strong>
-{% endhighlight %}
-
-          <h3>Italics</h3>
-          <p>For emphasizing a snippet of text with italics.</p>
-          <div class="bs-docs-example">
-            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
-          </div>
-{% highlight html linenos %}
-<em>rendered as italicized text</em>
-{% endhighlight %}
-
-          <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
-
-          <h3>Alignment classes</h3>
-          <p>Easily realign text to components with text alignment classes.</p>
-          <div class="bs-docs-example">
-            <p class="text-left">Left aligned text.</p>
-            <p class="text-center">Center aligned text.</p>
-            <p class="text-right">Right aligned text.</p>
-          </div>
-{% highlight html linenos %}
-<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
-{% endhighlight %}
-
-          <h3>Emphasis classes</h3>
-          <p>Convey meaning through color with a handful of emphasis utility classes.</p>
-          <div class="bs-docs-example">
-            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-          </div>
-{% highlight html linenos %}
-<p class="muted">...</p>
-<p class="text-warning">...</p>
-<p class="text-error">...</p>
-<p class="text-success">...</p>
-{% endhighlight %}
-
-
-          <!-- Abbreviations -->
-          <h2 id="abbreviations">Abbreviations</h2>
-          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
-
-          <h3>Basic abbreviation</h3>
-          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
-          <div class="bs-docs-example">
-            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
-          </div>
-{% highlight html linenos %}
-<abbr title="attribute">attr</abbr>
-{% endhighlight %}
-
-          <h3>Initialism</h3>
-          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
-          <div class="bs-docs-example">
-            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
-          </div>
-{% highlight html linenos %}
-<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
-{% endhighlight %}
-
-
-          <!-- Addresses -->
-          <h2 id="addresses">Addresses</h2>
-          <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <address>
-              <strong>Twitter, Inc.</strong><br>
-              795 Folsom Ave, Suite 600<br>
-              San Francisco, CA 94107<br>
-              <abbr title="Phone">P:</abbr> (123) 456-7890
-            </address>
-            <address>
-              <strong>Full Name</strong><br>
-              <a href="mailto:#">first.last@example.com</a>
-            </address>
-          </div>
-{% highlight html linenos %}
-<address>
-  <strong>Twitter, Inc.</strong><br>
-  795 Folsom Ave, Suite 600<br>
-  San Francisco, CA 94107<br>
-  <abbr title="Phone">P:</abbr> (123) 456-7890
-</address>
-
-<address>
-  <strong>Full Name</strong><br>
-  <a href="mailto:#">first.last@example.com</a>
-</address>
-{% endhighlight %}
-
-
-          <!-- Blockquotes -->
-          <h2 id="blockquotes">Blockquotes</h2>
-          <p>For quoting blocks of content from another source within your document.</p>
-
-          <h3>Default blockquote</h3>
-          <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <blockquote>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-            </blockquote>
-          </div>
-{% highlight html linenos %}
-<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-</blockquote>
-{% endhighlight %}
-
-          <h3>Blockquote options</h3>
-          <p>Style and content changes for simple variations on a standard blockquote.</p>
-
-          <h4>Naming a source</h4>
-          <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <blockquote>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
-          </div>
-{% highlight html linenos %}
-<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
-</blockquote>
-{% endhighlight %}
-
-          <h4>Alternate displays</h4>
-          <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
-          <div class="bs-docs-example" style="overflow: hidden;">
-            <blockquote class="pull-right">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
-          </div>
-{% highlight html linenos %}
-<blockquote class="pull-right">
-  ...
-</blockquote>
-{% endhighlight %}
-
-
-          <!-- Lists -->
-          <h2 id="lists">Lists</h2>
-
-          <h3>Unordered</h3>
-          <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
-          <div class="bs-docs-example">
-            <ul>
-              <li>Lorem ipsum dolor sit amet</li>
-              <li>Consectetur adipiscing elit</li>
-              <li>Integer molestie lorem at massa</li>
-              <li>Facilisis in pretium nisl aliquet</li>
-              <li>Nulla volutpat aliquam velit
-                <ul>
-                  <li>Phasellus iaculis neque</li>
-                  <li>Purus sodales ultricies</li>
-                  <li>Vestibulum laoreet porttitor sem</li>
-                  <li>Ac tristique libero volutpat at</li>
-                </ul>
-              </li>
-              <li>Faucibus porta lacus fringilla vel</li>
-              <li>Aenean sit amet erat nunc</li>
-              <li>Eget porttitor lorem</li>
-            </ul>
-          </div>
-{% highlight html linenos %}
-<ul>
-  <li>...</li>
-</ul>
-{% endhighlight %}
-
-          <h3>Ordered</h3>
-          <p>A list of items in which the order <em>does</em> explicitly matter.</p>
-          <div class="bs-docs-example">
-            <ol>
-              <li>Lorem ipsum dolor sit amet</li>
-              <li>Consectetur adipiscing elit</li>
-              <li>Integer molestie lorem at massa</li>
-              <li>Facilisis in pretium nisl aliquet</li>
-              <li>Nulla volutpat aliquam velit</li>
-              <li>Faucibus porta lacus fringilla vel</li>
-              <li>Aenean sit amet erat nunc</li>
-              <li>Eget porttitor lorem</li>
-            </ol>
-          </div>
-{% highlight html linenos %}
-<ol>
-  <li>...</li>
-</ol>
-{% endhighlight %}
-
-        <h3>Unstyled</h3>
-        <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
-        <div class="bs-docs-example">
-          <ul class="list-unstyled">
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Consectetur adipiscing elit</li>
-            <li>Integer molestie lorem at massa</li>
-            <li>Facilisis in pretium nisl aliquet</li>
-            <li>Nulla volutpat aliquam velit
-              <ul>
-                <li>Phasellus iaculis neque</li>
-                <li>Purus sodales ultricies</li>
-                <li>Vestibulum laoreet porttitor sem</li>
-                <li>Ac tristique libero volutpat at</li>
-              </ul>
-            </li>
-            <li>Faucibus porta lacus fringilla vel</li>
-            <li>Aenean sit amet erat nunc</li>
-            <li>Eget porttitor lorem</li>
-          </ul>
-        </div>
-{% highlight html linenos %}
-<ul class="list-unstyled">
-  <li>...</li>
-</ul>
-{% endhighlight %}
-
-        <h3>Inline</h3>
-        <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
-        <div class="bs-docs-example">
-          <ul class="list-inline">
-            <li>Lorem ipsum</li>
-            <li>Phasellus iaculis</li>
-            <li>Nulla volutpat</li>
-          </ul>
-        </div>
-{% highlight html linenos %}
-<ul class="list-inline">
-  <li>...</li>
-</ul>
-{% endhighlight %}
-
-        <h3>Description</h3>
-        <p>A list of terms with their associated descriptions.</p>
-        <div class="bs-docs-example">
-          <dl>
-            <dt>Description lists</dt>
-            <dd>A description list is perfect for defining terms.</dd>
-            <dt>Euismod</dt>
-            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-            <dt>Malesuada porta</dt>
-            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-          </dl>
-        </div>
-{% highlight html linenos %}
-<dl>
-  <dt>...</dt>
-  <dd>...</dd>
-</dl>
-{% endhighlight %}
-
-        <h4>Horizontal description</h4>
-        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
-        <div class="bs-docs-example">
-          <dl class="dl-horizontal">
-            <dt>Description lists</dt>
-            <dd>A description list is perfect for defining terms.</dd>
-            <dt>Euismod</dt>
-            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-            <dt>Malesuada porta</dt>
-            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-            <dt>Felis euismod semper eget lacinia</dt>
-            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-          </dl>
-        </div>
-{% highlight html linenos %}
-<dl class="dl-horizontal">
-  <dt>...</dt>
-  <dd>...</dd>
-</dl>
-{% endhighlight %}
-
-        <h5>Auto-truncating</h5>
-        <p>
-          Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
-        </p>
-      </section>
-
-
-
-
-
-        <!-- Code
-        ================================================== -->
-        <section id="code">
-          <div class="page-header">
-            <h1>Code</h1>
-          </div>
-
-          <h2>Inline</h2>
-          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
-<div class="bs-docs-example">
-  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-</div>
-{% highlight html linenos %}
-For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-{% endhighlight %}
-
-          <h2>Basic block</h2>
-          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
-<div class="bs-docs-example">
-  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
-</div>
-{% highlight html linenos %}
-<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
-{% endhighlight %}
-
-          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
-        </section>
-
-
-
-        <!-- Tables
-        ================================================== -->
-        <section id="tables">
-          <div class="page-header">
-            <h1>Tables</h1>
-          </div>
-
-          <h2>Default styles</h2>
-          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<table class="table">
-  ...
-</table>
-{% endhighlight %}
-
-
-          <h2>Optional classes</h2>
-          <p>Add any of the following classes to the <code>.table</code> base class.</p>
-
-          <h3>Striped</h3>
-          <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
-          <div class="bs-docs-example">
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<table class="table table-striped">
-  ...
-</table>
-{% endhighlight %}
-
-          <h3>Bordered</h3>
-          <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
-          <div class="bs-docs-example">
-            <table class="table table-bordered">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td rowspan="2">1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@TwBootstrap</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<table class="table table-bordered">
-  ...
-</table>
-{% endhighlight %}
-
-          <h3>Hover rows</h3>
-          <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <table class="table table-hover">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<table class="table table-hover">
-  ...
-</table>
-{% endhighlight %}
-
-
-          <h3>Condensed</h3>
-          <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
-          <div class="bs-docs-example">
-            <table class="table table-condensed">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<table class="table table-condensed">
-  ...
-</table>
-{% endhighlight %}
-
-
-
-          <h2>Optional row classes</h2>
-          <p>Use contextual classes to color table rows.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>.success</code>
-                </td>
-                <td>Indicates a successful or positive action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.error</code>
-                </td>
-                <td>Indicates a dangerous or potentially negative action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.warning</code>
-                </td>
-                <td>Indicates a warning that might need attention.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.info</code>
-                </td>
-                <td>Used as an alternative to the default styles.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Product</th>
-                  <th>Payment Taken</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr class="success">
-                  <td>1</td>
-                  <td>TB - Monthly</td>
-                  <td>01/04/2012</td>
-                  <td>Approved</td>
-                </tr>
-                <tr class="error">
-                  <td>2</td>
-                  <td>TB - Monthly</td>
-                  <td>02/04/2012</td>
-                  <td>Declined</td>
-                </tr>
-                <tr class="warning">
-                  <td>3</td>
-                  <td>TB - Monthly</td>
-                  <td>03/04/2012</td>
-                  <td>Pending</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
-{% highlight html linenos %}
-...
-<tr class="success">
-  <td>1</td>
-  <td>TB - Monthly</td>
-  <td>01/04/2012</td>
-  <td>Approved</td>
-</tr>
-...
-{% endhighlight %}
-
-
-
-          <h2>Supported table markup</h2>
-          <p>List of supported table HTML elements and how they should be used.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Tag</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>&lt;table&gt;</code>
-                </td>
-                <td>
-                  Wrapping element for displaying data in a tabular format
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;thead&gt;</code>
-                </td>
-                <td>
-                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tbody&gt;</code>
-                </td>
-                <td>
-                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tr&gt;</code>
-                </td>
-                <td>
-                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;td&gt;</code>
-                </td>
-                <td>
-                  Default table cell
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;th&gt;</code>
-                </td>
-                <td>
-                  Special table cell for column (or row, depending on scope and placement) labels
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;caption&gt;</code>
-                </td>
-                <td>
-                  Description or summary of what the table holds, especially useful for screen readers
-                </td>
-              </tr>
-            </tbody>
-          </table>
-{% highlight html linenos %}
-<table>
-  <caption>...</caption>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Forms
-        ================================================== -->
-        <section id="forms">
-          <div class="page-header">
-            <h1>Forms</h1>
-          </div>
-
-          <h2 id="forms-default">Default styles</h2>
-          <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
-          <form class="bs-docs-example">
-            <fieldset>
-              <legend>Legend</legend>
-              <label>Label name</label>
-              <input type="text" placeholder="Type something…">
-              <p class="help-block">Example block-level help text here.</p>
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox"> Check me out
-                </label>
-              </div>
-              <button type="submit" class="btn">Submit</button>
-            </fieldset>
-          </form><!-- /example -->
-{% highlight html linenos %}
-<form>
-  <fieldset>
-    <legend>Legend</legend>
-    <label>Label name</label>
-    <input type="text" placeholder="Type something…">
-    <p class="help-block">Example block-level help text here.</p>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Check me out
-      </label>
-    </div>
-    <button type="submit" class="btn">Submit</button>
-  </fieldset>
-</form>
-{% endhighlight %}
-
-
-          <h2 id="forms-layouts">Optional layouts</h2>
-          <p>Included with Bootstrap are optional form layouts for common use cases.</p>
-
-          <h3>Inline form</h3>
-          <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
-          <form class="bs-docs-example form-inline">
-            <input type="text" class="span3" placeholder="Email">
-            <input type="password" class="span3" placeholder="Password">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox"> Remember me
-              </label>
-            </div>
-            <button type="submit" class="btn">Sign in</button>
-          </form><!-- /example -->
-{% highlight html linenos %}
-<form class="form-inline">
-  <input type="text" class="span3" placeholder="Email">
-  <input type="password" class="span3" placeholder="Password">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox"> Remember me
-    </label>
-  </div>
-  <button type="submit" class="btn">Sign in</button>
-</form>
-{% endhighlight %}
-
-          <h3>Horizontal form</h3>
-          <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
-          <ul>
-            <li>Add <code>.form-horizontal</code> to the form</li>
-            <li>Wrap labels and controls in <code>.control-group</code></li>
-            <li>Add <code>.control-label</code> to the label</li>
-            <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
-          </ul>
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="inputEmail">Email</label>
-              <div class="controls">
-                <input type="text" id="inputEmail" placeholder="Email">
-              </div>
-            </div>
-            <div class="control-group">
-              <label class="control-label" for="inputPassword">Password</label>
-              <div class="controls">
-                <input type="password" id="inputPassword" placeholder="Password">
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox"> Remember me
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div class="control-group">
-              <div class="controls">
-                <button type="submit" class="btn">Sign in</button>
-              </div>
-            </div>
-          </form>
-{% highlight html linenos %}
-<form class="form-horizontal">
-  <div class="control-group">
-    <label class="control-label" for="inputEmail">Email</label>
-    <div class="controls">
-      <input type="text" id="inputEmail" placeholder="Email">
-    </div>
-  </div>
-  <div class="control-group">
-    <label class="control-label" for="inputPassword">Password</label>
-    <div class="controls">
-      <input type="password" id="inputPassword" placeholder="Password">
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Remember me
-        </label>
-      </div>
-    </div>
-  </div>
-  <div class="control-group">
-    <div class="controls">
-      <button type="submit" class="btn">Sign in</button>
-    </div>
-  </div>
-</form>
-{% endhighlight %}
-
-
-          <h2 id="forms-controls">Supported form controls</h2>
-          <p>Examples of standard form controls supported in an example form layout.</p>
-
-          <h3>Inputs</h3>
-          <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
-          <p>Requires the use of a specified <code>type</code> at all times.</p>
-          <form class="bs-docs-example form-inline">
-            <input type="text" placeholder="Text input">
-          </form>
-{% highlight html linenos %}
-<input type="text" placeholder="Text input">
-{% endhighlight %}
-
-          <h3>Textarea</h3>
-          <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
-          <form class="bs-docs-example form-inline">
-            <textarea rows="3"></textarea>
-          </form>
-{% highlight html linenos %}
-<textarea rows="3"></textarea>
-{% endhighlight %}
-
-          <h3>Checkboxes and radios</h3>
-          <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
-          <h4>Default (stacked)</h4>
-          <form class="bs-docs-example">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox" value="">
-                Option one is this and that&mdash;be sure to include why it's great
-              </label>
-            </div>
-            <br>
-            <div class="radio">
-              <label>
-                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-                Option one is this and that&mdash;be sure to include why it's great
-              </label>
-            </div>
-            <div class="radio">
-              <label>
-                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-                Option two can be something else and selecting it will deselect option one
-              </label>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="checkbox">
-  <label>
-    <input type="checkbox" value="">
-    Option one is this and that&mdash;be sure to include why it's great
-  </label>
-</div>
-
-<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-    Option one is this and that&mdash;be sure to include why it's great
-  </label>
-</div>
-{% endhighlight %}
-
-          <h4>Inline checkboxes</h4>
-          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
-          <form class="bs-docs-example">
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-            </label>
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-            </label>
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-            </label>
-          </form>
-{% highlight html linenos %}
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-{% endhighlight %}
-
-          <h3>Selects</h3>
-          <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
-          <form class="bs-docs-example">
-            <select>
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-            <br>
-            <select multiple="multiple">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-          </form>
-{% highlight html linenos %}
-<select>
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
-<select multiple="multiple">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-{% endhighlight %}
-
-
-
-          <h2>Form control states</h2>
-          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
-
-          <h3 id="forms-input-focus">Input focus</h3>
-          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="focused" id="focusedInput" type="text" value="This is focused...">
-          </form>
-{% highlight html linenos %}
-<input id="focusedInput" type="text" value="This is focused...">
-{% endhighlight %}
-
-          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-          <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="span3" type="email" placeholder="test@example.com" required>
-          </form>
-{% highlight html linenos %}
-<input class="span3" type="email" placeholder="test@example.com" required>
-{% endhighlight %}
-
-          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
-          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-          </form>
-{% highlight html linenos %}
-<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-{% endhighlight %}
-
-          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
-          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
-          <form class="bs-docs-example form-inline">
-            <fieldset disabled>
-              <div>
-                <input type="text" class="span4" placeholder="Disabled input">
-              </div>
-              <div>
-                <select class="span4">
-                  <option>Disabled select</option>
-                </select>
-              </div>
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox"> Can't check this
-                </label>
-              </div>
-              <button type="submit" class="btn btn-primary">Submit</button>
-            </fieldset>
-          </form>
-{% highlight html linenos %}
-<form class="form-inline">
-  <fieldset disabled>
-    <div>
-      <input type="text" class="span4" placeholder="Disabled input">
-    </div>
-    <div>
-      <select class="span4">
-        <option>Disabled select</option>
-      </select>
-    </div>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-{% endhighlight %}
-
-          <h3 id="forms-validation">Validation states</h3>
-          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
-          <ul>
-            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
-            <li>Add .input-with-feedback to the field(s) in question</li>
-          </ul>
-          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
-
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group has-warning">
-              <label class="control-label" for="inputWarning">Input with warning</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputWarning">
-              </div>
-            </div>
-            <div class="control-group has-error">
-              <label class="control-label" for="inputError">Input with error</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputError">
-              </div>
-            </div>
-            <div class="control-group has-success">
-              <label class="control-label" for="inputSuccess">Input with success</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputSuccess">
-              </div>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="control-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
-  </div>
-</div>
-<div class="control-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
-  </div>
-</div>
-<div class="control-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputSuccess">
-  </div>
-</div>
-{% endhighlight %}
-
-
-
-          <h2 id="forms-extending">Extending form controls</h2>
-          <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
-
-          <h3>Input groups</h3>
-          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
-          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span9">
-              <span class="input-group-addon">@</span>
-              <input type="text" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span6">
-              <input type="text">
-              <span class="input-group-addon">.00</span>
-            </div>
-            <br>
-            <div class="input-group span3">
-              <span class="input-group-addon">$</span>
-              <input type="text">
-              <span class="input-group-addon">.00</span>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="input-group span9">
-  <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
-</div>
-
-<div class="input-group span6">
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
-
-<div class="input-group span3">
-  <span class="input-group-addon">$</span>
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
-{% endhighlight %}
-
-          <h4>Optional sizes</h4>
-          <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span9">
-              <span class="input-group-addon input-large">@</span>
-              <input type="text" class="input-large" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span9">
-              <span class="input-group-addon">@</span>
-              <input type="text" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span9">
-              <span class="input-group-addon input-small">@</span>
-              <input type="text" class="input-small" placeholder="Username">
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="input-group span9">
-  <span class="input-group-addon input-large">@</span>
-  <input type="text" class="input-large" placeholder="Username">
-</div>
-
-<div class="input-group span9">
-  <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
-</div>
-
-<div class="input-group span9">
-  <span class="input-group-addon input-small">@</span>
-  <input type="text" class="input-small" placeholder="Username">
-</div>
-{% endhighlight %}
-
-          <h4>Buttons instead of text</h4>
-          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <span class="input-group-btn">
-                <button class="btn" type="button">Go!</button>
-              </span>
-              <input type="text">
-            </div>
-            <br>
-            <div class="input-group span7">
-              <input type="text">
-              <span class="input-group-btn">
-                <button class="btn" type="button">Go!</button>
-              </span>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="input-group span7">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-  <input type="text">
-</div>
-
-<div class="input-group span7">
-  <input type="text">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-</div>
-{% endhighlight %}
-
-          <h4>Button dropdowns</h4>
-          <p></p>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <div class="input-group-btn">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <input type="text">
-            </div><!-- /input-group -->
-            <br>
-            <div class="input-group span7">
-              <input type="text">
-              <div class="input-group-btn">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /input-group -->
-          </form>
-{% highlight html linenos %}
-<div class="input-group span7">
-  <div class="input-group-btn">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-    <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>
-  </div><!-- /btn-group -->
-  <input type="text">
-</div><!-- /input-group -->
-
-<div class="input-group span7">
-  <input type="text">
-  <div class="input-group-btn">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-    <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>
-  </div><!-- /btn-group -->
-</div><!-- /input-group -->
-{% endhighlight %}
-
-          <h4>Segmented dropdown groups</h4>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <div class="input-group-btn">
-                <button class="btn" tabindex="-1">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <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>
-              </div>
-              <input type="text">
-            </div>
-
-            <br>
-
-            <div class="input-group span7">
-              <input type="text">
-              <div class="input-group-btn">
-                <button class="btn" tabindex="-1">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <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>
-              </div>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="input-group span7">
-  <div class="input-group-btn">
-    <!-- Button and dropdown menu -->
-  </div>
-  <input type="text">
-</div>
-
-<div class="input-group span7">
-  <input type="text">
-  <div class="input-group-btn btn-group">
-    <!-- Button and dropdown menu -->
-  </div>
-</div>
-{% endhighlight %}
-
-          <h3 id="forms-extending-sizes">Control sizing</h3>
-          <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
-
-          <h4>Relative sizing</h4>
-          <p>Create larger or smaller form controls that match button sizes.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls docs-input-sizes">
-              <input class="input-large" type="text" placeholder=".input-large">
-              <input type="text" placeholder="Default input">
-              <input class="input-small" type="text" placeholder=".input-small">
-            </div>
-          </form>
-{% highlight html linenos %}
-<input class="input-large" type="text" placeholder=".input-large">
-<input type="text" placeholder="Default input">
-<input class="input-small" type="text" placeholder=".input-small">
-{% endhighlight %}
-
-          <h4>Column sizing</h4>
-          <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls docs-input-sizes">
-              <input class="span1" type="text" placeholder=".span1">
-              <input class="span2" type="text" placeholder=".span2">
-              <input class="span3" type="text" placeholder=".span3">
-              <select class="span1">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-              <select class="span2">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-              <select class="span3">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-          </form>
-{% highlight html linenos %}
-<input class="span1" type="text" placeholder=".span1">
-<input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
-<select class="span1">
-  ...
-</select>
-<select class="span2">
-  ...
-</select>
-<select class="span3">
-  ...
-</select>
-{% endhighlight %}
-
-          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="row">
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="row">
-  <div class="span4">
-    <input type="text" placeholder=".span4">
-  </div>
-  <div class="span4">
-    <input type="text" placeholder=".span4">
-  </div>
-  <div class="span4">
-    <input type="text" placeholder=".span4">
-  </div>
-</div>
-{% endhighlight %}
-
-          <h3>Uneditable inputs</h3>
-          <p>Present data in a form that's not editable without using actual form markup.</p>
-          <form class="bs-docs-example">
-            <span class="input-xlarge uneditable-input">Some value here</span>
-          </form>
-{% highlight html linenos %}
-<span class="uneditable-input">Some value here</span>
-{% endhighlight %}
-
-          <h3>Form actions</h3>
-          <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
-          <form class="bs-docs-example">
-            <div class="form-actions">
-              <button type="submit" class="btn btn-primary">Save changes</button>
-              <button type="button" class="btn">Cancel</button>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="form-actions">
-  <button type="submit" class="btn btn-primary">Save changes</button>
-  <button type="button" class="btn">Cancel</button>
-</div>
-{% endhighlight %}
-
-          <h3>Help text</h3>
-          <p>Inline and block level support for help text that appears around form controls.</p>
-          <h4>Inline help</h4>
-          <form class="bs-docs-example form-inline">
-            <input type="text"> <span class="help-inline">Inline help text</span>
-          </form>
-{% highlight html linenos %}
-<input type="text">
-<span class="help-inline">Inline help text</span>
-{% endhighlight %}
-
-          <h4>Block help</h4>
-          <form class="bs-docs-example form-inline">
-            <input type="text">
-            <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-          </form>
-{% highlight html linenos %}
-<input type="text">
-<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Buttons
-        ================================================== -->
-        <section id="buttons">
-          <div class="page-header">
-            <h1>Buttons</h1>
-          </div>
-
-          <h2>Default buttons</h2>
-          <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
-          <div class="bs-docs-example">
-            <button type="button" class="btn btn-default">Default</button>
-            <button type="button" class="btn btn-primary">Primary</button>
-            <button type="button" class="btn btn-success">Success</button>
-            <button type="button" class="btn btn-info">Info</button>
-            <button type="button" class="btn btn-warning">Warning</button>
-            <button type="button" class="btn btn-danger">Danger</button>
-            <button type="button" class="btn btn-link">Link</button>
-          </div>
-{% highlight html linenos %}
-<!-- Standard gray button with gradient -->
-<button type="button" class="btn btn-default">Default</button>
-
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
-<button type="button" class="btn btn-link">Link</button>
-{% endhighlight %}
-
-          <h4>Cross browser compatibility</h4>
-          <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
-
-
-          <h2>Button sizes</h2>
-          <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
-          <div class="bs-docs-example">
-            <p>
-              <button type="button" class="btn btn-large btn-primary">Large button</button>
-              <button type="button" class="btn btn-large">Large button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-primary">Default button</button>
-              <button type="button" class="btn">Default button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-small btn-primary">Small button</button>
-              <button type="button" class="btn btn-small">Small button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-              <button type="button" class="btn btn-mini">Mini button</button>
-            </p>
-          </div>
-{% highlight html linenos %}
-<p>
-  <button type="button" class="btn btn-large btn-primary">Large button</button>
-  <button type="button" class="btn btn-large">Large button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-primary">Default button</button>
-  <button type="button" class="btn">Default button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-small btn-primary">Small button</button>
-  <button type="button" class="btn btn-small">Small button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-  <button type="button" class="btn btn-mini">Mini button</button>
-</p>
-{% endhighlight %}
-
-          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
-          <div class="bs-docs-example">
-            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
-              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-              <button type="button" class="btn btn-large btn-block">Block level button</button>
-            </div>
-          </div>
-{% highlight html linenos %}
-<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-<button type="button" class="btn btn-large btn-block">Block level button</button>
-{% endhighlight %}
-
-
-          <h2>Disabled state</h2>
-          <p>Make buttons look unclickable by fading them back 50%.</p>
-
-          <h3>Button element</h3>
-          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-            <button type="button" class="btn btn-large" disabled="disabled">Button</button>
-          </p>
-{% highlight html linenos %}
-<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled="disabled">Button</button>
-{% endhighlight %}
-
-          <h3>Anchor element</h3>
-          <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-            <a href="#" class="btn btn-large disabled">Link</a>
-          </p>
-{% highlight html linenos %}
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
-{% endhighlight %}
-          <p>
-            We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
-          </p>
-
-
-          <h2>One class, multiple tags</h2>
-          <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-          <form class="bs-docs-example">
-            <a class="btn" href="">Link</a>
-            <button class="btn" type="submit">Button</button>
-            <input class="btn" type="button" value="Input">
-            <input class="btn" type="submit" value="Submit">
-          </form>
-{% highlight html linenos %}
-<a class="btn" href="">Link</a>
-<button class="btn" type="submit">Button</button>
-<input class="btn" type="button" value="Input">
-<input class="btn" type="submit" value="Submit">
-{% endhighlight %}
-          <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
-
-        </section>
-
-
-
-        <!-- Images
-        ================================================== -->
-        <section id="images">
-          <div class="page-header">
-            <h1>Images</h1>
-          </div>
-
-          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
-          <div class="bs-docs-example bs-docs-example-images">
-            <img data-src="holder.js/140x140" class="img-rounded">
-            <img data-src="holder.js/140x140" class="img-circle">
-            <img data-src="holder.js/140x140" class="img-thumbnail">
-          </div>
-{% highlight html linenos %}
-<img src="..." class="img-rounded">
-<img src="..." class="img-circle">
-<img src="..." class="img-thumbnail">
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Icons
-        ================================================== -->
-        <section id="icons">
-          <div class="page-header">
-            <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
-          </div>
-
-          <h2>Included glyphs</h2>
-          <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>
-
-          <ul class="the-icons clearfix">
-            <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
-            <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
-            <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
-            <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
-            <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
-            <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
-            <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
-            <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
-            <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
-            <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
-            <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
-            <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
-            <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
-            <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
-            <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
-            <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
-            <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
-            <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
-            <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
-            <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
-            <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
-            <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
-            <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
-            <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
-            <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
-            <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
-            <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
-            <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
-
-            <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
-            <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
-            <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
-            <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
-            <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
-            <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
-            <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
-            <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
-            <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
-            <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
-            <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
-            <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
-            <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
-            <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
-            <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
-            <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
-            <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
-            <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
-            <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
-            <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
-            <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
-            <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
-            <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
-            <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
-            <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
-            <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
-            <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
-            <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>
-
-            <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
-            <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
-            <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
-            <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
-            <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
-            <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
-            <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
-            <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
-            <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
-            <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
-            <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
-            <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
-            <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
-            <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
-            <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
-            <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
-            <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
-            <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
-            <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
-            <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
-            <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
-            <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
-            <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
-            <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
-            <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
-            <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
-            <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
-            <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
-
-            <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
-            <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
-            <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
-            <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
-            <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
-            <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
-            <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
-            <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
-            <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
-            <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
-            <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
-            <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
-            <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
-            <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
-            <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
-            <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
-            <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
-            <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
-            <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
-            <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
-            <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
-            <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
-            <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
-            <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
-            <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
-            <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
-            <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
-            <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>
-
-            <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
-            <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
-            <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
-            <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
-            <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
-            <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
-            <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
-            <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
-            <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
-            <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
-            <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
-            <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
-            <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
-            <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
-            <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
-            <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
-            <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
-            <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
-            <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
-            <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
-            <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
-            <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
-            <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
-            <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
-
-            <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
-            <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
-            <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
-            <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
-            <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
-            <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
-            <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
-            <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
-            <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
-            <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
-            <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
-            <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
-            <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
-            <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
-            <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
-            <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
-            <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
-            <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
-            <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
-            <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
-
-          </ul>
-
-          <h3>Glyphicons attribution</h3>
-          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
-
-
-          <h2>How to use</h2>
-          <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
-{% highlight html linenos %}
-<span class="glyphicon glyphicon-search"></span>
-{% endhighlight %}
-          <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
-          <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
-
-
-          <h2>Icon examples</h2>
-          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
-
-          <h4>Buttons</h4>
-
-          <h5>Button group in a button toolbar</h5>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar">
-              <div class="btn-group">
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
-              </div>
-            </div>
-          </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
-<div class="btn-toolbar">
-  <div class="btn-group">
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
-  </div>
-</div>
-{% endhighlight %}
-
-          <h5>Dropdown in a button group</h5>
-          <div class="bs-docs-example">
-            <div class="btn-group">
-              <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
-              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
-                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
-                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
-                <li class="divider"></li>
-                <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
-              </ul>
-            </div>
-          </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
-<div class="btn-group">
-  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
-  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-  <ul class="dropdown-menu">
-    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
-    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
-    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
-    <li class="divider"></li>
-    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
-  </ul>
-</div>
-{% endhighlight %}
-
-          <h5>Large button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
-          </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
-<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
-{% endhighlight %}
-
-          <h5>Small button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
-          </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
-<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
-{% endhighlight %}
-
-
-          <h4>Navigation</h4>
-          <div class="bs-docs-example">
-            <ul class="nav nav-list">
-              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
-            </ul>
-          </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
-<ul class="nav nav-list">
-  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
-  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
-  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
-  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
-</ul>
-{% endhighlight %}
-
-          <h4>Form fields</h4>
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="inputIcon">Email address</label>
-              <div class="controls">
-                <div class="input-group">
-                  <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-                  <input class="span2" id="inputIcon" type="text">
-                </div>
-              </div>
-            </div>
-          </form>
-{% highlight html linenos %}
-<div class="control-group">
-  <label class="control-label" for="inputIcon">Email address</label>
-  <div class="controls">
-    <div class="input-group">
-      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="span2" id="inputIcon" type="text">
-    </div>
-  </div>
-</div>
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Responsive design
-        ================================================== -->
-        <section id="responsive-utilities">
-          <div class="page-header">
-            <h1>Responsive utilities</h1>
-          </div>
-          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
-
-          <h3>Responsive classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Phones <small>767px and below</small></th>
-                <th>Tablets <small>979px to 768px</small></th>
-                <th>Desktops <small>Default</small></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-phone</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-tablet</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-desktop</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-phone</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-tablet</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-desktop</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>Print classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Browser</th>
-                <th>Print</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-print</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-print</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>When to use</h3>
-          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
-
-          <h3>Test case</h3>
-          <p>Resize your browser or load on different devices to test the above classes.</p>
-          <h4>Visible on...</h4>
-          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
-          <ul class="responsive-utilities-test">
-            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
-          </ul>
-          <h4>Hidden on...</h4>
-          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
-          <ul class="responsive-utilities-test hidden-on">
-            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
-          </ul>
-
-        </section>
-
-  </div><!-- /.container -->
diff --git a/docs/customize.html b/docs/customize.html
deleted file mode 100644
index 61a789b1a..000000000
--- a/docs/customize.html
+++ /dev/null
@@ -1,358 +0,0 @@
----
-layout: default
-title: Customize and download
----
-
-<div class="bs-docs-sidebar">
-  <h5 class="bs-docs-sidenav-heading">Customize and download</h5>
-  <ul class="nav bs-docs-sidenav">
-    <li><a href="#components">1. Choose components</a></li>
-    <li><a href="#plugins">2. Select jQuery plugins</a></li>
-    <li><a href="#variables">3. Customize variables</a></li>
-    <li><a href="#download">4. Download</a></li>
-  </ul>
-</div>
-
-  <div class="container bs-docs-container">
-
-        <!-- Customize form
-        ================================================== -->
-        <form>
-          <section class="download" id="components">
-            <div class="page-header">
-              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
-              <h1>
-                1. Choose components
-              </h1>
-            </div>
-            <div class="row download-builder">
-              <div class="col-span-3">
-                <h3>Scaffolding</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
-                <h3>Base CSS</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
-              </div><!-- /span -->
-              <div class="col-span-3">
-                <h3>Components</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media component</label>
-                <h3>JS Components</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
-              </div><!-- /span -->
-              <div class="col-span-3">
-                <h3>Miscellaneous</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
-                <h3>Responsive</h3>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
-                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
-              </div><!-- /span -->
-            </div><!-- /row -->
-          </section>
-
-          <section class="download" id="plugins">
-            <div class="page-header">
-              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
-              <h1>
-                2. Select jQuery plugins
-              </h1>
-            </div>
-            <div class="row download-builder">
-              <div class="col-span-3">
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-transition.js">
-                  Transitions <small>(required for any animation)</small>
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-modal.js">
-                  Modals
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-dropdown.js">
-                  Dropdowns
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
-                  Scrollspy
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-tab.js">
-                  Togglable tabs
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
-                  Tooltips
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-popover.js">
-                  Popovers <small>(requires Tooltips)</small>
-                </label>
-              </div><!-- /span -->
-              <div class="col-span-3">
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-affix.js">
-                  Affix
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-alert.js">
-                  Alert messages
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-button.js">
-                  Buttons
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-collapse.js">
-                  Collapse
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-carousel.js">
-                  Carousel
-                </label>
-                <label class="checkbox">
-                  <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
-                  Typeahead
-                </label>
-              </div><!-- /span -->
-              <div class="col-span-3">
-                <h4 class="muted">Heads up!</h4>
-                <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
-              </div><!-- /span -->
-            </div><!-- /row -->
-          </section>
-
-
-          <section class="download" id="variables">
-            <div class="page-header">
-              <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
-              <h1>
-                3. Customize variables
-              </h1>
-            </div>
-            <div class="row download-builder">
-              <div class="col-span-3">
-                <h3>Scaffolding</h3>
-                <label>@body-background</label>
-                <input type="text" placeholder="#fff">
-                <label>@text-color</label>
-                <input type="text" placeholder="@grayDark">
-
-                <h3>Links</h3>
-                <label>@link-color</label>
-                <input type="text" placeholder="#08c">
-                <label>@link-color-hover</label>
-                <input type="text" placeholder="darken(@link-color, 15%)">
-
-                <h3>Grid system</h3>
-                <label>@grid-columns</label>
-                <input type="text" placeholder="12">
-                <label>@grid-column-width</label>
-                <input type="text" placeholder="60px">
-                <label>@grid-gutter-width</label>
-                <input type="text" placeholder="20px">
-                <label>@grid-column-width-1200</label>
-                <input type="text" placeholder="70px">
-                <label>@grid-gutter-width-1200</label>
-                <input type="text" placeholder="30px">
-                <label>@grid-column-width-768</label>
-                <input type="text" placeholder="42px">
-                <label>@grid-gutter-width-768</label>
-                <input type="text" placeholder="20px">
-
-              </div><!-- /span -->
-              <div class="col-span-3">
-
-                <h3>Typography</h3>
-                <label>@font-family-sans-serif</label>
-                <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
-                <label>@font-family-serif</label>
-                <input type="text" placeholder="Georgia, 'Times New Roman', Times, serif">
-                <label>@font-family-monospace</label>
-                <input type="text" placeholder="Menlo, Monaco, 'Courier New', monospace">
-
-                <label>@font-size-base</label>
-                <input type="text" placeholder="14px">
-                <label>@font-family-base</label>
-                <input type="text" placeholder="@font-family-sans-serif">
-                <label>@line-height-base</label>
-                <input type="text" placeholder="20px">
-
-                <label>@headings-font-family</label>
-                <input type="text" placeholder="inherit">
-                <label>@headings-font-weight</label>
-                <input type="text" placeholder="bold">
-                <label>@headingsColor</label>
-                <input type="text" placeholder="inherit">
-
-                <label>@font-size-large</label>
-                <input type="text" placeholder="@font-size-base * 1.25">
-                <label>@font-size-small</label>
-                <input type="text" placeholder="@font-size-base * 0.85">
-                <label>@font-size-mini</label>
-                <input type="text" placeholder="@font-size-base * 0.75">
-
-                <label>@padding-large</label>
-                <input type="text" placeholder="11px 19px">
-                <label>@padding-small</label>
-                <input type="text" placeholder="2px 10px">
-                <label>@padding-mini</label>
-                <input type="text" placeholder="1px 6px">
-
-                <label>@border-radius-base</label>
-                <input type="text" placeholder="4px">
-                <label>@border-radius-large</label>
-                <input type="text" placeholder="6px">
-                <label>@border-radius-small</label>
-                <input type="text" placeholder="3px">
-
-                <label>@hero-background</label>
-                <input type="text" placeholder="@grayLighter">
-                <label>@hero-heading-color</label>
-                <input type="text" placeholder="inherit">
-                <label>@hero-lead-color</label>
-                <input type="text" placeholder="inherit">
-
-                <h3>Tables</h3>
-                <label>@table-background</label>
-                <input type="text" placeholder="transparent">
-                <label>@table-background-accent</label>
-                <input type="text" placeholder="#f9f9f9">
-                <label>@table-background-hover</label>
-                <input type="text" placeholder="#f5f5f5">
-                <label>@table-border</label>
-                <input type="text" placeholder="#ddd">
-
-                <h3>Forms</h3>
-                <label>@input-color-placeholder</label>
-                <input type="text" placeholder="@grayLight">
-                <label>@input-background</label>
-                <input type="text" placeholder="#fff">
-                <label>@input-border</label>
-                <input type="text" placeholder="#ccc">
-                <label>@input-border-radius</label>
-                <input type="text" placeholder="3px">
-                <label>@input-background-disabled</label>
-                <input type="text" placeholder="@grayLighter">
-                <label>@form-actions-background</label>
-                <input type="text" placeholder="#f5f5f5">
-                <label>@btn-backround-primary</label>
-                <input type="text" placeholder="@link-color">
-                <label>@btn-backround-primary-highlight</label>
-                <input type="text" placeholder="darken(#fff, 10%)">
-
-              </div><!-- /span -->
-              <div class="col-span-3">
-
-                <h3>Form states &amp; alerts</h3>
-                <label>@state-warning-text</label>
-                <input type="text" placeholder="#c09853">
-                <label>@state-warning-background</label>
-                <input type="text" placeholder="#fcf8e3">
-                <label>@state-error-text</label>
-                <input type="text" placeholder="#b94a48">
-                <label>@state-error-background</label>
-                <input type="text" placeholder="#f2dede">
-                <label>@state-success-text</label>
-                <input type="text" placeholder="#468847">
-                <label>@state-success-background</label>
-                <input type="text" placeholder="#dff0d8">
-                <label>@state-info-text</label>
-                <input type="text" placeholder="#3a87ad">
-                <label>@state-info-background</label>
-                <input type="text" placeholder="#d9edf7">
-
-                <h3>Navbar</h3>
-                <label>@navbar-height</label>
-                <input type="text" placeholder="40px">
-                <label>@navbar-background</label>
-                <input type="text" placeholder="@grayDarker">
-                <label>@navbar-background-highlight</label>
-                <input type="text" placeholder="@grayDark">
-                <label>@navbar-text</label>
-                <input type="text" placeholder="@grayLight">
-                <label>@navbar-brand-color</label>
-                <input type="text" placeholder="@navbar-link-color">
-                <label>@navbar-link-color</label>
-                <input type="text" placeholder="@grayLight">
-                <label>@navbar-link-color-hover</label>
-                <input type="text" placeholder="#fff">
-                <label>@navbar-link-color-active</label>
-                <input type="text" placeholder="@navbar-link-color-hover">
-                <label>@navbar-link-background-hover</label>
-                <input type="text" placeholder="transparent">
-                <label>@navbar-link-background-active</label>
-                <input type="text" placeholder="@navbar-background">
-                <label>@navbarSearchBackground</label>
-                <input type="text" placeholder="lighten(@navbar-background, 25%)">
-                <label>@navbarSearchBackgroundFocus</label>
-                <input type="text" placeholder="#fff">
-                <label>@navbarSearchBorder</label>
-                <input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
-                <label>@navbarSearchPlaceholderColor</label>
-                <input type="text" placeholder="#ccc">
-
-                <label>@navbar-collapse-width</label>
-                <input type="text" placeholder="979px">
-                <label>@navbar-collapse-width-desktop</label>
-                <input type="text" placeholder="@navbar-collapse-width + 1">
-
-                <h3>Dropdowns</h3>
-                <label>@dropdown-background</label>
-                <input type="text" placeholder="#fff">
-                <label>@dropdown-border</label>
-                <input type="text" placeholder="rgba(0,0,0,.2)">
-                <label>@dropdown-link-color</label>
-                <input type="text" placeholder="@grayDark">
-                <label>@dropdown-link-color-hover</label>
-                <input type="text" placeholder="#fff">
-                <label>@dropdown-link-background-hover</label>
-                <input type="text" placeholder="@link-color">
-              </div><!-- /span -->
-            </div><!-- /row -->
-          </section>
-
-          <section class="download" id="download">
-            <div class="page-header">
-              <h1>
-                4. Download
-              </h1>
-            </div>
-            <div class="download-btn">
-              <a class="btn btn-primary" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
-              <h4>What's included?</h4>
-              <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
-            </div>
-          </section><!-- /download -->
-        </form>
-
-
-  </div><!-- /.container -->
diff --git a/docs/docs.html b/docs/docs.html
new file mode 100644
index 000000000..4708907f6
--- /dev/null
+++ b/docs/docs.html
@@ -0,0 +1,6454 @@
+---
+layout: default
+title: Getting started
+description: Overview of the project, its contents, and how to get started with a simple template.
+---
+
+<div class="bs-docs-sidebar">
+  <ul class="nav bs-docs-sidenav">
+    <li class="nav-header">Getting started</li>
+    <li><a href="#download-bootstrap">Download</a></li>
+    <li><a href="#file-structure">File structure</a></li>
+    <li><a href="#contents">What's included</a></li>
+    <li><a href="#html-template">HTML template</a></li>
+    <li><a href="#examples">Examples</a></li>
+    <li><a href="#what-next">What next?</a></li>
+
+    <li class="nav-header">CSS</li>
+    <li><a href="#global">Global settings</a></li>
+    <li><a href="#grid">Grid system</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#code">Code</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#images">Images</a></li>
+    <li><a href="#icons">Glyphicons</a></li>
+    <li><a href="#responsive-utilities">Responsive utilities</a></li>
+
+    <li class="nav-header">Components</li>
+    <li><a href="#dropdowns">Dropdowns</a></li>
+    <li><a href="#buttonGroups">Button groups</a></li>
+    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+    <li><a href="#navs">Navs</a></li>
+    <li><a href="#navbar">Navbar</a></li>
+    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#pagination">Pagination</a></li>
+    <li><a href="#labels">Labels</a></li>
+    <li><a href="#badges">Badges</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#thumbnails">Thumbnails</a></li>
+    <li><a href="#alerts">Alerts</a></li>
+    <li><a href="#progress">Progress bars</a></li>
+    <li><a href="#media">Media object</a></li>
+    <li><a href="#misc">Misc</a></li>
+
+    <li class="nav-header">JavaScript</li>
+    <li><a href="#overview">Overview</a></li>
+    <li><a href="#transitions">Transitions</a></li>
+    <li><a href="#modals">Modal</a></li>
+    <li><a href="#dropdowns">Dropdown</a></li>
+    <li><a href="#scrollspy">Scrollspy</a></li>
+    <li><a href="#tabs">Tab</a></li>
+    <li><a href="#tooltips">Tooltip</a></li>
+    <li><a href="#popovers">Popover</a></li>
+    <li><a href="#alerts">Alert</a></li>
+    <li><a href="#buttons">Button</a></li>
+    <li><a href="#collapse">Collapse</a></li>
+    <li><a href="#carousel">Carousel</a></li>
+    <li><a href="#typeahead">Typeahead</a></li>
+    <li><a href="#affix">Affix</a></li>
+  </ul>
+</div>
+
+<div class="container bs-docs-container">
+
+      <!-- Download
+      ================================================== -->
+      <section id="download-bootstrap">
+        <div class="page-header">
+          <h1>1. Download</h1>
+        </div>
+        <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
+
+        <div class="row">
+          <div class="col-span-6">
+            <h2>Compiled</h2>
+            <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
+            <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+          </div>
+          <div class="col-span-6">
+            <h2>Source</h2>
+            <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
+            <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
+          </div>
+          <div class="col-span-6">
+            <h2>Bower</h2>
+            <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
+            {% highlight bash %}bower install bootstrap{% endhighlight %}
+          </div>
+        </div>
+      </section>
+
+
+
+      <!-- File structure
+      ================================================== -->
+      <section id="file-structure">
+        <div class="page-header">
+          <h1>2. File structure</h1>
+        </div>
+        <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
+        <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
+
+{% highlight bash %}
+  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   ├── bootstrap.min.js
+  └── fonts/
+      ├── glyphiconshalflings-regular.eot
+      ├── glyphiconshalflings-regular.otf
+      ├── glyphiconshalflings-regular.svg
+      ├── glyphiconshalflings-regular.ttf
+      └── glyphiconshalflings-regular.woff
+{% endhighlight %}
+
+        <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+        <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
+      </section>
+
+
+
+      <!-- Contents
+      ================================================== -->
+      <section id="contents">
+        <div class="page-header">
+          <h1>3. What's included</h1>
+        </div>
+        <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
+
+        <h2>Docs sections</h2>
+        <p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
+
+        <h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
+        <p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
+        <h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
+        <p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
+        <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
+        <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
+      </section>
+
+
+
+      <!-- HTML template
+      ================================================== -->
+      <section id="html-template">
+        <div class="page-header">
+          <h1>4. Basic HTML template</h1>
+        </div>
+        <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
+        <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
+
+{% highlight html linenos %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery.js"></script>
+  </body>
+</html>
+{% endhighlight %}
+
+        <p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
+
+{% highlight html linenos %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</html>
+{% endhighlight %}
+
+        <p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
+
+        <hr>
+
+        <h4>Responsive features in IE8</h4>
+        <p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
+<pre class="prettyprint linenums">
+&lt;!--[if lt IE 9]&gt;
+  &lt;script src="/assets/js/respond/respond.js"&gt;&lt;/script&gt;
+&lt;![endif]--&gt;
+</pre>
+      </section>
+
+
+
+      <!-- Examples
+      ================================================== -->
+      <section id="examples">
+        <div class="page-header">
+          <h1>5. Examples</h1>
+        </div>
+        <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+        <div class="row bs-docs-examples">
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/starter-template/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
+            </a>
+            <h4>Starter template</h4>
+            <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
+            </a>
+            <h4>Basic marketing site</h4>
+            <p>Featuring a hero unit for a primary message and three supporting elements.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
+            </a>
+            <h4>Narrow marketing</h4>
+            <p>Slim, lightweight marketing template for small projects or teams.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
+            </a>
+            <h4>Justified nav</h4>
+            <p>Marketing page with equal-width navigation links in a modified navbar.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/signin/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
+            </a>
+            <h4>Sign in</h4>
+            <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
+            </a>
+            <h4>Sticky footer</h4>
+            <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
+            </a>
+            <h4>Sticky footer w/ navbar</h4>
+            <p>Add a fixed navbar to the default sticky footer template.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/carousel/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
+            </a>
+            <h4>Carousel jumbotron</h4>
+            <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
+          </div>
+
+
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/navbar/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
+            </a>
+            <h4>Navbar</h4>
+            <p>Basic template for showcasing how the navbar works.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
+            </a>
+            <h4>Static top navbar</h4>
+            <p>Basic template for showcasing the static navbar variation.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
+            </a>
+            <h4>Fixed top navbar</h4>
+            <p>Basic template for showcasing the fixed navbar variation.</p>
+          </div>
+          <div class="col-span-4">
+            <a class="thumbnail" href="/examples/grid/" target="_blank">
+              <img src="/assets/img/examples/bootstrap-example-.png" alt="">
+            </a>
+            <h4>Grid examples</h4>
+            <p></p>
+          </div>
+        </div>
+      </section>
+
+
+
+
+      <!-- Next
+      ================================================== -->
+      <section id="what-next">
+        <div class="page-header">
+          <h1>What next?</h1>
+        </div>
+        <p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
+        <a class="btn btn-large btn-primary" href="./css.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
+        <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
+      </section>
+
+
+
+
+        <!-- Global Bootstrap settings
+        ================================================== -->
+        <section id="global">
+          <div class="page-header">
+            <h1>Global settings</h1>
+          </div>
+          <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
+
+          <h3>Requires HTML5 doctype</h3>
+          <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
+
+{% highlight html linenos %}
+<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+{% endhighlight %}
+
+          <h3>Mobile first</h3>
+          <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
+          <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
+
+{% highlight html linenos %}
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% endhighlight %}
+
+          <h3>Typography and links</h3>
+          <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
+          <ul>
+            <li>Remove <code>margin</code> on the body</li>
+            <li>Set <code>background-color: white;</code> on the <code>body</code></li>
+            <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
+            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
+          </ul>
+          <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
+
+          <h3>Normalize reset</h3>
+          <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
+
+        </section>
+
+
+
+        <!-- Grid system
+        ================================================== -->
+        <section id="grid">
+          <div class="page-header">
+            <h1>Grid system</h1>
+          </div>
+          <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
+
+          <h3 id="grid-example">Grid example</h3>
+          <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+              <div class="col-span-1">1</div>
+            </div>
+            <div class="row show-grid">
+              <div class="col-span-4">4</div>
+              <div class="col-span-4">4</div>
+              <div class="col-span-4">4</div>
+            </div>
+            <div class="row show-grid">
+              <div class="col-span-6">6</div>
+              <div class="col-span-6">6</div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="row">
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+  <div class="col-span-1">1</div>
+</div>
+<div class="row">
+  <div class="col-span-4">4</div>
+  <div class="col-span-4">4</div>
+  <div class="col-span-4">4</div>
+</div>
+<div class="row">
+  <div class="col-span-6">6</div>
+  <div class="col-span-6">6</div>
+</div>
+{% endhighlight %}
+
+          <h3 id="grid-offsetting">Offsetting columns</h3>
+          <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="col-span-4">4</div>
+              <div class="col-span-4 col-offset-4">4 offset 4</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="col-span-3 col-offset-3">3 offset 3</div>
+              <div class="col-span-3 col-offset-3">3 offset 3</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="col-span-6 col-offset-6">6 offset 6</div>
+            </div><!-- /row -->
+          </div>
+{% highlight html linenos %}
+<div class="row">
+  <div class="col-span-4">...</div>
+  <div class="col-span-4 col-offset-4">...</div>
+</div>
+{% endhighlight %}
+
+
+          <h3 id="grid-nesting">Nesting columns</h3>
+          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
+          <div class="row show-grid">
+            <div class="col-span-9">
+              Level 1: 9 columns
+              <div class="row show-grid">
+                <div class="col-span-6">
+                  Level 2: 6 columns
+                </div>
+                <div class="col-span-6">
+                  Level 2: 6 columns
+                </div>
+              </div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="row">
+  <div class="col-span-9">
+    Level 1: 9 columns
+    <div class="row">
+      <div class="col-span-6">
+        Level 2: 6 columns
+      </div>
+      <div class="col-span-6">
+        Level 2: 6 columns
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+          <h3 id="grid-column-ordering">Column ordering</h3>
+          <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
+<div class="row show-grid">
+  <div class="col-span-9 col-push-3">9</div>
+  <div class="col-span-3 col-pull-9">3</div>
+</div>
+
+{% highlight html linenos %}
+<div class="row show-grid">
+  <div class="col-span-9 col-push-3">9</div>
+  <div class="col-span-3 col-pull-9">3</div>
+</div>
+{% endhighlight %}
+
+          <h3 id="grid-less">LESS mixins and variables</h3>
+          <p>In addition to <a href="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
+
+          <h4>Variables</h4>
+          <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
+{% highlight css linenos %}
+@grid-columns:              12;
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     768px;
+{% endhighlight %}
+
+          <h4>Mixins</h4>
+          <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
+{% highlight css linenos %}
+// Creates a wrapper for a series of columns
+.make-row() {
+  // Negative margin the row out to align the content of columns
+  margin-left:  (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
+  // Then clear the floated columns
+  .clear_float();
+}
+
+// Generate the columns
+.make-column(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    // Calculate width based on number of columns available
+    width: percentage(@columns / @grid-columns);
+  }
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Set inner padding as gutters instead of margin
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+{% endhighlight %}
+
+          <h4>Example usage</h4>
+          <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
+{% highlight css linenos %}
+.wrapper {
+  .make-row();
+}
+.content-main {
+  .make-column(8);
+}
+.content-secondary {
+  .make-column(3);
+  .make-column-offset(1);
+}
+{% endhighlight %}
+{% highlight html linenos %}
+<div class="wrapper">
+  <div class="content-main">...</div>
+  <div class="content-secondary">...</div>
+</div>
+{% endhighlight %}
+
+
+
+        </section>
+
+
+
+
+        <!-- Typography
+        ================================================== -->
+        <section id="typography">
+          <div class="page-header">
+            <h1>Typography</h1>
+          </div>
+
+          <!-- Headings -->
+          <h2 id="headings">Headings</h2>
+          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
+
+          <div class="bs-docs-example bs-docs-example-type">
+            <table class="table">
+              <tbody>
+                <tr>
+                  <th><h1>Bootstrap heading</h1></th>
+                  <td>Semibold 38px</td>
+                </tr>
+                <tr>
+                  <th><h2>Bootstrap heading</h2></th>
+                  <td>Semibold 32px</td>
+                </tr>
+                <tr>
+                  <th><h3>Bootstrap heading</h3></th>
+                  <td>Semibold 24px</td>
+                </tr>
+                <tr>
+                  <th><h4>Bootstrap heading</h4></th>
+                  <td>Semibold 18px</td>
+                </tr>
+                <tr>
+                  <th><h5>Bootstrap heading</h5></th>
+                  <td>Semibold 16px</td>
+                </tr>
+                <tr>
+                  <th><h6>Bootstrap heading</h6></th>
+                  <td>Semibold 12px</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+<!--           <div class="bs-docs-example">
+            <h1>h1. Heading 1</h1>
+            <h2>h2. Heading 2</h2>
+            <h3>h3. Heading 3</h3>
+            <h4>h4. Heading 4</h4>
+            <h5>h5. Heading 5</h5>
+            <h6>h6. Heading 6</h6>
+          </div>
+ -->
+          <!-- Body copy -->
+          <h2 id="body-copy">Body copy</h2>
+          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
+          <div class="bs-docs-example">
+            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+          </div>
+{% highlight html linenos %}
+<p>...</p>
+{% endhighlight %}
+
+          <!-- Body copy .lead -->
+          <h3>Lead body copy</h3>
+          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
+          <div class="bs-docs-example">
+            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
+          </div>
+{% highlight html linenos %}
+<p class="lead">...</p>
+{% endhighlight %}
+
+          <!-- Using LESS -->
+          <h3>Built with Less</h3>
+          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
+
+
+          <!-- Emphasis -->
+          <h2 id="emphasis">Emphasis</h2>
+          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
+
+          <h3>Small text</h3>
+          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
+          <div class="bs-docs-example">
+            <p><small>This line of text is meant to be treated as fine print.</small></p>
+          </div>
+{% highlight html linenos %}
+<small>This line of text is meant to be treated as fine print.</small>
+{% endhighlight %}
+
+
+          <h3>Bold</h3>
+          <p>For emphasizing a snippet of text with a heavier font-weight.</p>
+          <div class="bs-docs-example">
+            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
+          </div>
+{% highlight html linenos %}
+<strong>rendered as bold text</strong>
+{% endhighlight %}
+
+          <h3>Italics</h3>
+          <p>For emphasizing a snippet of text with italics.</p>
+          <div class="bs-docs-example">
+            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
+          </div>
+{% highlight html linenos %}
+<em>rendered as italicized text</em>
+{% endhighlight %}
+
+          <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+
+          <h3>Alignment classes</h3>
+          <p>Easily realign text to components with text alignment classes.</p>
+          <div class="bs-docs-example">
+            <p class="text-left">Left aligned text.</p>
+            <p class="text-center">Center aligned text.</p>
+            <p class="text-right">Right aligned text.</p>
+          </div>
+{% highlight html linenos %}
+<p class="text-left">Left aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+{% endhighlight %}
+
+          <h3>Emphasis classes</h3>
+          <p>Convey meaning through color with a handful of emphasis utility classes.</p>
+          <div class="bs-docs-example">
+            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+          </div>
+{% highlight html linenos %}
+<p class="muted">...</p>
+<p class="text-warning">...</p>
+<p class="text-error">...</p>
+<p class="text-success">...</p>
+{% endhighlight %}
+
+
+          <!-- Abbreviations -->
+          <h2 id="abbreviations">Abbreviations</h2>
+          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+
+          <h3>Basic abbreviation</h3>
+          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
+          <div class="bs-docs-example">
+            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+          </div>
+{% highlight html linenos %}
+<abbr title="attribute">attr</abbr>
+{% endhighlight %}
+
+          <h3>Initialism</h3>
+          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
+          <div class="bs-docs-example">
+            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
+          </div>
+{% highlight html linenos %}
+<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
+{% endhighlight %}
+
+
+          <!-- Addresses -->
+          <h2 id="addresses">Addresses</h2>
+          <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
+          <div class="bs-docs-example">
+            <address>
+              <strong>Twitter, Inc.</strong><br>
+              795 Folsom Ave, Suite 600<br>
+              San Francisco, CA 94107<br>
+              <abbr title="Phone">P:</abbr> (123) 456-7890
+            </address>
+            <address>
+              <strong>Full Name</strong><br>
+              <a href="mailto:#">first.last@example.com</a>
+            </address>
+          </div>
+{% highlight html linenos %}
+<address>
+  <strong>Twitter, Inc.</strong><br>
+  795 Folsom Ave, Suite 600<br>
+  San Francisco, CA 94107<br>
+  <abbr title="Phone">P:</abbr> (123) 456-7890
+</address>
+
+<address>
+  <strong>Full Name</strong><br>
+  <a href="mailto:#">first.last@example.com</a>
+</address>
+{% endhighlight %}
+
+
+          <!-- Blockquotes -->
+          <h2 id="blockquotes">Blockquotes</h2>
+          <p>For quoting blocks of content from another source within your document.</p>
+
+          <h3>Default blockquote</h3>
+          <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
+          <div class="bs-docs-example">
+            <blockquote>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+            </blockquote>
+          </div>
+{% highlight html linenos %}
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+{% endhighlight %}
+
+          <h3>Blockquote options</h3>
+          <p>Style and content changes for simple variations on a standard blockquote.</p>
+
+          <h4>Naming a source</h4>
+          <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
+          <div class="bs-docs-example">
+            <blockquote>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+            </blockquote>
+          </div>
+{% highlight html linenos %}
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
+</blockquote>
+{% endhighlight %}
+
+          <h4>Alternate displays</h4>
+          <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
+          <div class="bs-docs-example" style="overflow: hidden;">
+            <blockquote class="pull-right">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+            </blockquote>
+          </div>
+{% highlight html linenos %}
+<blockquote class="pull-right">
+  ...
+</blockquote>
+{% endhighlight %}
+
+
+          <!-- Lists -->
+          <h2 id="lists">Lists</h2>
+
+          <h3>Unordered</h3>
+          <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
+          <div class="bs-docs-example">
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetur adipiscing elit</li>
+              <li>Integer molestie lorem at massa</li>
+              <li>Facilisis in pretium nisl aliquet</li>
+              <li>Nulla volutpat aliquam velit
+                <ul>
+                  <li>Phasellus iaculis neque</li>
+                  <li>Purus sodales ultricies</li>
+                  <li>Vestibulum laoreet porttitor sem</li>
+                  <li>Ac tristique libero volutpat at</li>
+                </ul>
+              </li>
+              <li>Faucibus porta lacus fringilla vel</li>
+              <li>Aenean sit amet erat nunc</li>
+              <li>Eget porttitor lorem</li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul>
+  <li>...</li>
+</ul>
+{% endhighlight %}
+
+          <h3>Ordered</h3>
+          <p>A list of items in which the order <em>does</em> explicitly matter.</p>
+          <div class="bs-docs-example">
+            <ol>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetur adipiscing elit</li>
+              <li>Integer molestie lorem at massa</li>
+              <li>Facilisis in pretium nisl aliquet</li>
+              <li>Nulla volutpat aliquam velit</li>
+              <li>Faucibus porta lacus fringilla vel</li>
+              <li>Aenean sit amet erat nunc</li>
+              <li>Eget porttitor lorem</li>
+            </ol>
+          </div>
+{% highlight html linenos %}
+<ol>
+  <li>...</li>
+</ol>
+{% endhighlight %}
+
+        <h3>Unstyled</h3>
+        <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
+        <div class="bs-docs-example">
+          <ul class="list-unstyled">
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Consectetur adipiscing elit</li>
+            <li>Integer molestie lorem at massa</li>
+            <li>Facilisis in pretium nisl aliquet</li>
+            <li>Nulla volutpat aliquam velit
+              <ul>
+                <li>Phasellus iaculis neque</li>
+                <li>Purus sodales ultricies</li>
+                <li>Vestibulum laoreet porttitor sem</li>
+                <li>Ac tristique libero volutpat at</li>
+              </ul>
+            </li>
+            <li>Faucibus porta lacus fringilla vel</li>
+            <li>Aenean sit amet erat nunc</li>
+            <li>Eget porttitor lorem</li>
+          </ul>
+        </div>
+{% highlight html linenos %}
+<ul class="list-unstyled">
+  <li>...</li>
+</ul>
+{% endhighlight %}
+
+        <h3>Inline</h3>
+        <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
+        <div class="bs-docs-example">
+          <ul class="list-inline">
+            <li>Lorem ipsum</li>
+            <li>Phasellus iaculis</li>
+            <li>Nulla volutpat</li>
+          </ul>
+        </div>
+{% highlight html linenos %}
+<ul class="list-inline">
+  <li>...</li>
+</ul>
+{% endhighlight %}
+
+        <h3>Description</h3>
+        <p>A list of terms with their associated descriptions.</p>
+        <div class="bs-docs-example">
+          <dl>
+            <dt>Description lists</dt>
+            <dd>A description list is perfect for defining terms.</dd>
+            <dt>Euismod</dt>
+            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+            <dt>Malesuada porta</dt>
+            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+          </dl>
+        </div>
+{% highlight html linenos %}
+<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+{% endhighlight %}
+
+        <h4>Horizontal description</h4>
+        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+        <div class="bs-docs-example">
+          <dl class="dl-horizontal">
+            <dt>Description lists</dt>
+            <dd>A description list is perfect for defining terms.</dd>
+            <dt>Euismod</dt>
+            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+            <dt>Malesuada porta</dt>
+            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+            <dt>Felis euismod semper eget lacinia</dt>
+            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+          </dl>
+        </div>
+{% highlight html linenos %}
+<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+{% endhighlight %}
+
+        <h5>Auto-truncating</h5>
+        <p>
+          Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+        </p>
+      </section>
+
+
+
+
+
+        <!-- Code
+        ================================================== -->
+        <section id="code">
+          <div class="page-header">
+            <h1>Code</h1>
+          </div>
+
+          <h2>Inline</h2>
+          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
+<div class="bs-docs-example">
+  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+</div>
+{% highlight html linenos %}
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+{% endhighlight %}
+
+          <h2>Basic block</h2>
+          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
+<div class="bs-docs-example">
+  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
+</div>
+{% highlight html linenos %}
+<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
+{% endhighlight %}
+
+          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
+        </section>
+
+
+
+        <!-- Tables
+        ================================================== -->
+        <section id="tables">
+          <div class="page-header">
+            <h1>Tables</h1>
+          </div>
+
+          <h2>Default styles</h2>
+          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
+          <div class="bs-docs-example">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                  <th>Username</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <td>2</td>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td>Larry</td>
+                  <td>the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<table class="table">
+  ...
+</table>
+{% endhighlight %}
+
+
+          <h2>Optional classes</h2>
+          <p>Add any of the following classes to the <code>.table</code> base class.</p>
+
+          <h3>Striped</h3>
+          <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
+          <div class="bs-docs-example">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                  <th>Username</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <td>2</td>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td>Larry</td>
+                  <td>the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<table class="table table-striped">
+  ...
+</table>
+{% endhighlight %}
+
+          <h3>Bordered</h3>
+          <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
+          <div class="bs-docs-example">
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                  <th>Username</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td rowspan="2">1</td>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@TwBootstrap</td>
+                </tr>
+                <tr>
+                  <td>2</td>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td colspan="2">Larry the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<table class="table table-bordered">
+  ...
+</table>
+{% endhighlight %}
+
+          <h3>Hover rows</h3>
+          <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+          <div class="bs-docs-example">
+            <table class="table table-hover">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                  <th>Username</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <td>2</td>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td colspan="2">Larry the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<table class="table table-hover">
+  ...
+</table>
+{% endhighlight %}
+
+
+          <h3>Condensed</h3>
+          <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
+          <div class="bs-docs-example">
+            <table class="table table-condensed">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                  <th>Username</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <td>2</td>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td colspan="2">Larry the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<table class="table table-condensed">
+  ...
+</table>
+{% endhighlight %}
+
+
+
+          <h2>Optional row classes</h2>
+          <p>Use contextual classes to color table rows.</p>
+          <table class="table table-bordered table-striped">
+            <colgroup>
+              <col class="span1">
+              <col class="span7">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>.success</code>
+                </td>
+                <td>Indicates a successful or positive action.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.error</code>
+                </td>
+                <td>Indicates a dangerous or potentially negative action.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.warning</code>
+                </td>
+                <td>Indicates a warning that might need attention.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.info</code>
+                </td>
+                <td>Used as an alternative to the default styles.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="bs-docs-example">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Product</th>
+                  <th>Payment Taken</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="success">
+                  <td>1</td>
+                  <td>TB - Monthly</td>
+                  <td>01/04/2012</td>
+                  <td>Approved</td>
+                </tr>
+                <tr class="error">
+                  <td>2</td>
+                  <td>TB - Monthly</td>
+                  <td>02/04/2012</td>
+                  <td>Declined</td>
+                </tr>
+                <tr class="warning">
+                  <td>3</td>
+                  <td>TB - Monthly</td>
+                  <td>03/04/2012</td>
+                  <td>Pending</td>
+                </tr>
+              </tbody>
+            </table>
+          </div><!-- /example -->
+{% highlight html linenos %}
+...
+<tr class="success">
+  <td>1</td>
+  <td>TB - Monthly</td>
+  <td>01/04/2012</td>
+  <td>Approved</td>
+</tr>
+...
+{% endhighlight %}
+
+
+
+          <h2>Supported table markup</h2>
+          <p>List of supported table HTML elements and how they should be used.</p>
+          <table class="table table-bordered table-striped">
+            <colgroup>
+              <col class="span1">
+              <col class="span7">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Tag</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>&lt;table&gt;</code>
+                </td>
+                <td>
+                  Wrapping element for displaying data in a tabular format
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;thead&gt;</code>
+                </td>
+                <td>
+                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;tbody&gt;</code>
+                </td>
+                <td>
+                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;tr&gt;</code>
+                </td>
+                <td>
+                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;td&gt;</code>
+                </td>
+                <td>
+                  Default table cell
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;th&gt;</code>
+                </td>
+                <td>
+                  Special table cell for column (or row, depending on scope and placement) labels
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;caption&gt;</code>
+                </td>
+                <td>
+                  Description or summary of what the table holds, especially useful for screen readers
+                </td>
+              </tr>
+            </tbody>
+          </table>
+{% highlight html linenos %}
+<table>
+  <caption>...</caption>
+  <thead>
+    <tr>
+      <th>...</th>
+      <th>...</th>
+      <th>...</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Forms
+        ================================================== -->
+        <section id="forms">
+          <div class="page-header">
+            <h1>Forms</h1>
+          </div>
+
+          <h2 id="forms-default">Default styles</h2>
+          <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
+          <form class="bs-docs-example">
+            <fieldset>
+              <legend>Legend</legend>
+              <label>Label name</label>
+              <input type="text" placeholder="Type something…">
+              <p class="help-block">Example block-level help text here.</p>
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox"> Check me out
+                </label>
+              </div>
+              <button type="submit" class="btn">Submit</button>
+            </fieldset>
+          </form><!-- /example -->
+{% highlight html linenos %}
+<form>
+  <fieldset>
+    <legend>Legend</legend>
+    <label>Label name</label>
+    <input type="text" placeholder="Type something…">
+    <p class="help-block">Example block-level help text here.</p>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Check me out
+      </label>
+    </div>
+    <button type="submit" class="btn">Submit</button>
+  </fieldset>
+</form>
+{% endhighlight %}
+
+
+          <h2 id="forms-layouts">Optional layouts</h2>
+          <p>Included with Bootstrap are optional form layouts for common use cases.</p>
+
+          <h3>Inline form</h3>
+          <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
+          <form class="bs-docs-example form-inline">
+            <input type="text" class="span3" placeholder="Email">
+            <input type="password" class="span3" placeholder="Password">
+            <div class="checkbox">
+              <label>
+                <input type="checkbox"> Remember me
+              </label>
+            </div>
+            <button type="submit" class="btn">Sign in</button>
+          </form><!-- /example -->
+{% highlight html linenos %}
+<form class="form-inline">
+  <input type="text" class="span3" placeholder="Email">
+  <input type="password" class="span3" placeholder="Password">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <button type="submit" class="btn">Sign in</button>
+</form>
+{% endhighlight %}
+
+          <h3>Horizontal form</h3>
+          <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
+          <ul>
+            <li>Add <code>.form-horizontal</code> to the form</li>
+            <li>Wrap labels and controls in <code>.control-group</code></li>
+            <li>Add <code>.control-label</code> to the label</li>
+            <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
+          </ul>
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group">
+              <label class="control-label" for="inputEmail">Email</label>
+              <div class="controls">
+                <input type="text" id="inputEmail" placeholder="Email">
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label" for="inputPassword">Password</label>
+              <div class="controls">
+                <input type="password" id="inputPassword" placeholder="Password">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox"> Remember me
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="control-group">
+              <div class="controls">
+                <button type="submit" class="btn">Sign in</button>
+              </div>
+            </div>
+          </form>
+{% highlight html linenos %}
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
+
+          <h2 id="forms-controls">Supported form controls</h2>
+          <p>Examples of standard form controls supported in an example form layout.</p>
+
+          <h3>Inputs</h3>
+          <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
+          <p>Requires the use of a specified <code>type</code> at all times.</p>
+          <form class="bs-docs-example form-inline">
+            <input type="text" placeholder="Text input">
+          </form>
+{% highlight html linenos %}
+<input type="text" placeholder="Text input">
+{% endhighlight %}
+
+          <h3>Textarea</h3>
+          <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
+          <form class="bs-docs-example form-inline">
+            <textarea rows="3"></textarea>
+          </form>
+{% highlight html linenos %}
+<textarea rows="3"></textarea>
+{% endhighlight %}
+
+          <h3>Checkboxes and radios</h3>
+          <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
+          <h4>Default (stacked)</h4>
+          <form class="bs-docs-example">
+            <div class="checkbox">
+              <label>
+                <input type="checkbox" value="">
+                Option one is this and that&mdash;be sure to include why it's great
+              </label>
+            </div>
+            <br>
+            <div class="radio">
+              <label>
+                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+                Option one is this and that&mdash;be sure to include why it's great
+              </label>
+            </div>
+            <div class="radio">
+              <label>
+                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+                Option two can be something else and selecting it will deselect option one
+              </label>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="checkbox">
+  <label>
+    <input type="checkbox" value="">
+    Option one is this and that&mdash;be sure to include why it's great
+  </label>
+</div>
+
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    Option one is this and that&mdash;be sure to include why it's great
+  </label>
+</div>
+{% endhighlight %}
+
+          <h4>Inline checkboxes</h4>
+          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
+          <form class="bs-docs-example">
+            <label class="checkbox-inline">
+              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+            </label>
+            <label class="checkbox-inline">
+              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+            </label>
+            <label class="checkbox-inline">
+              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+            </label>
+          </form>
+{% highlight html linenos %}
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+{% endhighlight %}
+
+          <h3>Selects</h3>
+          <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
+          <form class="bs-docs-example">
+            <select>
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </select>
+            <br>
+            <select multiple="multiple">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </select>
+          </form>
+{% highlight html linenos %}
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+{% endhighlight %}
+
+
+
+          <h2>Form control states</h2>
+          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
+
+          <h3 id="forms-input-focus">Input focus</h3>
+          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="focused" id="focusedInput" type="text" value="This is focused...">
+          </form>
+{% highlight html linenos %}
+<input id="focusedInput" type="text" value="This is focused...">
+{% endhighlight %}
+
+          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
+          <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+{% highlight html linenos %}
+<input class="span3" type="email" placeholder="test@example.com" required>
+{% endhighlight %}
+
+          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
+          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+          </form>
+{% highlight html linenos %}
+<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+{% endhighlight %}
+
+          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
+          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
+          <form class="bs-docs-example form-inline">
+            <fieldset disabled>
+              <div>
+                <input type="text" class="span4" placeholder="Disabled input">
+              </div>
+              <div>
+                <select class="span4">
+                  <option>Disabled select</option>
+                </select>
+              </div>
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox"> Can't check this
+                </label>
+              </div>
+              <button type="submit" class="btn btn-primary">Submit</button>
+            </fieldset>
+          </form>
+{% highlight html linenos %}
+<form class="form-inline">
+  <fieldset disabled>
+    <div>
+      <input type="text" class="span4" placeholder="Disabled input">
+    </div>
+    <div>
+      <select class="span4">
+        <option>Disabled select</option>
+      </select>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+{% endhighlight %}
+
+          <h3 id="forms-validation">Validation states</h3>
+          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
+          <ul>
+            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
+            <li>Add .input-with-feedback to the field(s) in question</li>
+          </ul>
+          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
+
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group has-warning">
+              <label class="control-label" for="inputWarning">Input with warning</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputWarning">
+              </div>
+            </div>
+            <div class="control-group has-error">
+              <label class="control-label" for="inputError">Input with error</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputError">
+              </div>
+            </div>
+            <div class="control-group has-success">
+              <label class="control-label" for="inputSuccess">Input with success</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputSuccess">
+              </div>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="control-group has-warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputWarning">
+  </div>
+</div>
+<div class="control-group has-error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputError">
+  </div>
+</div>
+<div class="control-group has-success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputSuccess">
+  </div>
+</div>
+{% endhighlight %}
+
+
+
+          <h2 id="forms-extending">Extending form controls</h2>
+          <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
+
+          <h3>Input groups</h3>
+          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+          <form class="bs-docs-example">
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
+            </div>
+            <br>
+            <div class="input-group span6">
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+            <br>
+            <div class="input-group span3">
+              <span class="input-group-addon">$</span>
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
+</div>
+
+<div class="input-group span6">
+  <input type="text">
+  <span class="input-group-addon">.00</span>
+</div>
+
+<div class="input-group span3">
+  <span class="input-group-addon">$</span>
+  <input type="text">
+  <span class="input-group-addon">.00</span>
+</div>
+{% endhighlight %}
+
+          <h4>Optional sizes</h4>
+          <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
+          <form class="bs-docs-example">
+            <div class="input-group span9">
+              <span class="input-group-addon input-large">@</span>
+              <input type="text" class="input-large" placeholder="Username">
+            </div>
+            <br>
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
+            </div>
+            <br>
+            <div class="input-group span9">
+              <span class="input-group-addon input-small">@</span>
+              <input type="text" class="input-small" placeholder="Username">
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="input-group span9">
+  <span class="input-group-addon input-large">@</span>
+  <input type="text" class="input-large" placeholder="Username">
+</div>
+
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
+</div>
+
+<div class="input-group span9">
+  <span class="input-group-addon input-small">@</span>
+  <input type="text" class="input-small" placeholder="Username">
+</div>
+{% endhighlight %}
+
+          <h4>Buttons instead of text</h4>
+          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
+          <form class="bs-docs-example">
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+              <input type="text">
+            </div>
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
+  <input type="text">
+</div>
+
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
+</div>
+{% endhighlight %}
+
+          <h4>Button dropdowns</h4>
+          <p></p>
+          <form class="bs-docs-example">
+            <div class="input-group span7">
+              <div class="input-group-btn">
+                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <input type="text">
+            </div><!-- /input-group -->
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn">
+                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+            </div><!-- /input-group -->
+          </form>
+{% highlight html linenos %}
+<div class="input-group span7">
+  <div class="input-group-btn">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+    <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>
+  </div><!-- /btn-group -->
+  <input type="text">
+</div><!-- /input-group -->
+
+<div class="input-group span7">
+  <input type="text">
+  <div class="input-group-btn">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+    <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>
+  </div><!-- /btn-group -->
+</div><!-- /input-group -->
+{% endhighlight %}
+
+          <h4>Segmented dropdown groups</h4>
+          <form class="bs-docs-example">
+            <div class="input-group span7">
+              <div class="input-group-btn">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <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>
+              </div>
+              <input type="text">
+            </div>
+
+            <br>
+
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <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>
+              </div>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="input-group span7">
+  <div class="input-group-btn">
+    <!-- Button and dropdown menu -->
+  </div>
+  <input type="text">
+</div>
+
+<div class="input-group span7">
+  <input type="text">
+  <div class="input-group-btn btn-group">
+    <!-- Button and dropdown menu -->
+  </div>
+</div>
+{% endhighlight %}
+
+          <h3 id="forms-extending-sizes">Control sizing</h3>
+          <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
+
+          <h4>Relative sizing</h4>
+          <p>Create larger or smaller form controls that match button sizes.</p>
+          <form class="bs-docs-example" style="padding-bottom: 15px;">
+            <div class="controls docs-input-sizes">
+              <input class="input-large" type="text" placeholder=".input-large">
+              <input type="text" placeholder="Default input">
+              <input class="input-small" type="text" placeholder=".input-small">
+            </div>
+          </form>
+{% highlight html linenos %}
+<input class="input-large" type="text" placeholder=".input-large">
+<input type="text" placeholder="Default input">
+<input class="input-small" type="text" placeholder=".input-small">
+{% endhighlight %}
+
+          <h4>Column sizing</h4>
+          <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+          <form class="bs-docs-example" style="padding-bottom: 15px;">
+            <div class="controls docs-input-sizes">
+              <input class="span1" type="text" placeholder=".span1">
+              <input class="span2" type="text" placeholder=".span2">
+              <input class="span3" type="text" placeholder=".span3">
+              <select class="span1">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span2">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span3">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
+          </form>
+{% highlight html linenos %}
+<input class="span1" type="text" placeholder=".span1">
+<input class="span2" type="text" placeholder=".span2">
+<input class="span3" type="text" placeholder=".span3">
+<select class="span1">
+  ...
+</select>
+<select class="span2">
+  ...
+</select>
+<select class="span3">
+  ...
+</select>
+{% endhighlight %}
+
+          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+          <form class="bs-docs-example" style="padding-bottom: 15px;">
+            <div class="row">
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="row">
+  <div class="span4">
+    <input type="text" placeholder=".span4">
+  </div>
+  <div class="span4">
+    <input type="text" placeholder=".span4">
+  </div>
+  <div class="span4">
+    <input type="text" placeholder=".span4">
+  </div>
+</div>
+{% endhighlight %}
+
+          <h3>Uneditable inputs</h3>
+          <p>Present data in a form that's not editable without using actual form markup.</p>
+          <form class="bs-docs-example">
+            <span class="input-xlarge uneditable-input">Some value here</span>
+          </form>
+{% highlight html linenos %}
+<span class="uneditable-input">Some value here</span>
+{% endhighlight %}
+
+          <h3>Form actions</h3>
+          <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
+          <form class="bs-docs-example">
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">Save changes</button>
+              <button type="button" class="btn">Cancel</button>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="form-actions">
+  <button type="submit" class="btn btn-primary">Save changes</button>
+  <button type="button" class="btn">Cancel</button>
+</div>
+{% endhighlight %}
+
+          <h3>Help text</h3>
+          <p>Inline and block level support for help text that appears around form controls.</p>
+          <h4>Inline help</h4>
+          <form class="bs-docs-example form-inline">
+            <input type="text"> <span class="help-inline">Inline help text</span>
+          </form>
+{% highlight html linenos %}
+<input type="text">
+<span class="help-inline">Inline help text</span>
+{% endhighlight %}
+
+          <h4>Block help</h4>
+          <form class="bs-docs-example form-inline">
+            <input type="text">
+            <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+          </form>
+{% highlight html linenos %}
+<input type="text">
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Buttons
+        ================================================== -->
+        <section id="buttons">
+          <div class="page-header">
+            <h1>Buttons</h1>
+          </div>
+
+          <h2>Default buttons</h2>
+          <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
+          <div class="bs-docs-example">
+            <button type="button" class="btn btn-default">Default</button>
+            <button type="button" class="btn btn-primary">Primary</button>
+            <button type="button" class="btn btn-success">Success</button>
+            <button type="button" class="btn btn-info">Info</button>
+            <button type="button" class="btn btn-warning">Warning</button>
+            <button type="button" class="btn btn-danger">Danger</button>
+            <button type="button" class="btn btn-link">Link</button>
+          </div>
+{% highlight html linenos %}
+<!-- Standard gray button with gradient -->
+<button type="button" class="btn btn-default">Default</button>
+
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+<button type="button" class="btn btn-primary">Primary</button>
+
+<!-- Indicates a successful or positive action -->
+<button type="button" class="btn btn-success">Success</button>
+
+<!-- Contextual button for informational alert messages -->
+<button type="button" class="btn btn-info">Info</button>
+
+<!-- Indicates caution should be taken with this action -->
+<button type="button" class="btn btn-warning">Warning</button>
+
+<!-- Indicates a dangerous or potentially negative action -->
+<button type="button" class="btn btn-danger">Danger</button>
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+<button type="button" class="btn btn-link">Link</button>
+{% endhighlight %}
+
+          <h4>Cross browser compatibility</h4>
+          <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
+
+
+          <h2>Button sizes</h2>
+          <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
+          <div class="bs-docs-example">
+            <p>
+              <button type="button" class="btn btn-large btn-primary">Large button</button>
+              <button type="button" class="btn btn-large">Large button</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-primary">Default button</button>
+              <button type="button" class="btn">Default button</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-small btn-primary">Small button</button>
+              <button type="button" class="btn btn-small">Small button</button>
+            </p>
+            <p>
+              <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+              <button type="button" class="btn btn-mini">Mini button</button>
+            </p>
+          </div>
+{% highlight html linenos %}
+<p>
+  <button type="button" class="btn btn-large btn-primary">Large button</button>
+  <button type="button" class="btn btn-large">Large button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-primary">Default button</button>
+  <button type="button" class="btn">Default button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-small btn-primary">Small button</button>
+  <button type="button" class="btn btn-small">Small button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+  <button type="button" class="btn btn-mini">Mini button</button>
+</p>
+{% endhighlight %}
+
+          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
+          <div class="bs-docs-example">
+            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
+              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
+              <button type="button" class="btn btn-large btn-block">Block level button</button>
+            </div>
+          </div>
+{% highlight html linenos %}
+<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
+<button type="button" class="btn btn-large btn-block">Block level button</button>
+{% endhighlight %}
+
+
+          <h2>Disabled state</h2>
+          <p>Make buttons look unclickable by fading them back 50%.</p>
+
+          <h3>Button element</h3>
+          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
+          <p class="bs-docs-example">
+            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+            <button type="button" class="btn btn-large" disabled="disabled">Button</button>
+          </p>
+{% highlight html linenos %}
+<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-large" disabled="disabled">Button</button>
+{% endhighlight %}
+
+          <h3>Anchor element</h3>
+          <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
+          <p class="bs-docs-example">
+            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+            <a href="#" class="btn btn-large disabled">Link</a>
+          </p>
+{% highlight html linenos %}
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+{% endhighlight %}
+          <p>
+            We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
+          </p>
+
+
+          <h2>One class, multiple tags</h2>
+          <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+          <form class="bs-docs-example">
+            <a class="btn" href="">Link</a>
+            <button class="btn" type="submit">Button</button>
+            <input class="btn" type="button" value="Input">
+            <input class="btn" type="submit" value="Submit">
+          </form>
+{% highlight html linenos %}
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">Button</button>
+<input class="btn" type="button" value="Input">
+<input class="btn" type="submit" value="Submit">
+{% endhighlight %}
+          <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+
+        </section>
+
+
+
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>Images</h1>
+          </div>
+
+          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img data-src="holder.js/140x140" class="img-rounded">
+            <img data-src="holder.js/140x140" class="img-circle">
+            <img data-src="holder.js/140x140" class="img-thumbnail">
+          </div>
+{% highlight html linenos %}
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-thumbnail">
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Icons
+        ================================================== -->
+        <section id="icons">
+          <div class="page-header">
+            <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
+          </div>
+
+          <h2>Included glyphs</h2>
+          <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>
+
+          <ul class="the-icons clearfix">
+            <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
+            <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
+            <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
+            <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
+            <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
+            <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
+            <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
+            <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
+            <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
+            <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
+            <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
+            <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
+            <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
+            <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
+            <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
+            <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
+            <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
+            <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
+            <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
+            <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
+            <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
+            <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
+            <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
+            <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
+            <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
+            <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
+            <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
+            <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
+
+            <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
+            <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
+            <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
+            <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
+            <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
+            <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
+            <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
+            <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
+            <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
+            <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
+            <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
+            <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
+            <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
+            <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
+            <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
+            <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
+            <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
+            <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
+            <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
+            <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
+            <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
+            <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
+            <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
+            <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
+            <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
+            <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
+            <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
+            <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>
+
+            <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
+            <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
+            <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
+            <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
+            <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
+            <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
+            <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
+            <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
+            <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
+            <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
+            <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
+            <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
+            <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
+            <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
+            <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
+            <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
+            <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
+            <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
+            <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
+            <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
+            <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
+            <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
+            <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
+            <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
+            <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
+            <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
+            <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
+            <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
+
+            <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
+            <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
+            <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
+            <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
+            <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
+            <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
+            <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
+            <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
+            <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
+            <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
+            <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
+            <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
+            <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
+            <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
+            <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
+            <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
+            <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
+            <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
+            <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
+            <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
+            <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
+            <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
+            <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
+            <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
+            <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
+            <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
+            <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
+            <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>
+
+            <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
+            <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
+            <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
+            <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
+            <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
+            <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
+            <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
+            <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
+            <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
+            <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
+            <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
+            <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
+            <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
+            <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
+            <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
+            <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
+            <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
+            <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
+            <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
+            <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
+            <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
+            <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
+            <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
+            <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
+            <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
+            <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
+            <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
+            <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
+
+            <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
+            <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
+            <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
+            <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
+            <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
+            <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
+            <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
+            <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
+            <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
+            <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
+            <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
+            <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
+            <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
+            <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
+            <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
+            <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
+            <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
+            <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
+            <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
+            <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
+
+          </ul>
+
+          <h3>Glyphicons attribution</h3>
+          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
+
+
+          <h2>How to use</h2>
+          <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
+{% highlight html linenos %}
+<span class="glyphicon glyphicon-search"></span>
+{% endhighlight %}
+          <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
+          <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
+
+
+          <h2>Icon examples</h2>
+          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
+
+          <h4>Buttons</h4>
+
+          <h5>Button group in a button toolbar</h5>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar">
+              <div class="btn-group">
+                <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+                <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+                <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+                <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+              </div>
+            </div>
+          </div><!-- /bs-docs-example -->
+{% highlight html linenos %}
+<div class="btn-toolbar">
+  <div class="btn-group">
+    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+  </div>
+</div>
+{% endhighlight %}
+
+          <h5>Dropdown in a button group</h5>
+          <div class="bs-docs-example">
+            <div class="btn-group">
+              <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
+              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
+                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
+                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
+                <li class="divider"></li>
+                <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
+              </ul>
+            </div>
+          </div><!-- /bs-docs-example -->
+{% highlight html linenos %}
+<div class="btn-group">
+  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
+    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
+    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+          <h5>Large button</h5>
+          <div class="bs-docs-example">
+            <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+          </div><!-- /bs-docs-example -->
+{% highlight html linenos %}
+<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+{% endhighlight %}
+
+          <h5>Small button</h5>
+          <div class="bs-docs-example">
+            <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+          </div><!-- /bs-docs-example -->
+{% highlight html linenos %}
+<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+{% endhighlight %}
+
+
+          <h4>Navigation</h4>
+          <div class="bs-docs-example">
+            <ul class="nav nav-list">
+              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
+              <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
+              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
+              <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
+            </ul>
+          </div><!-- /bs-docs-example -->
+{% highlight html linenos %}
+<ul class="nav nav-list">
+  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
+  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
+  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
+  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
+</ul>
+{% endhighlight %}
+
+          <h4>Form fields</h4>
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group">
+              <label class="control-label" for="inputIcon">Email address</label>
+              <div class="controls">
+                <div class="input-group">
+                  <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
+                  <input class="span2" id="inputIcon" type="text">
+                </div>
+              </div>
+            </div>
+          </form>
+{% highlight html linenos %}
+<div class="control-group">
+  <label class="control-label" for="inputIcon">Email address</label>
+  <div class="controls">
+    <div class="input-group">
+      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
+      <input class="span2" id="inputIcon" type="text">
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Responsive design
+        ================================================== -->
+        <section id="responsive-utilities">
+          <div class="page-header">
+            <h1>Responsive utilities</h1>
+          </div>
+          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+
+          <h3>Responsive classes</h3>
+          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Phones <small>767px and below</small></th>
+                <th>Tablets <small>979px to 768px</small></th>
+                <th>Desktops <small>Default</small></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-phone</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+              <tr>
+                <th><code>.visible-tablet</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+              <tr>
+                <th><code>.visible-desktop</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-phone</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-tablet</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-desktop</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Print classes</h3>
+          <table class="table table-bordered table-striped responsive-utilities">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Browser</th>
+                <th>Print</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-print</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-print</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>When to use</h3>
+          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
+
+          <h3>Test case</h3>
+          <p>Resize your browser or load on different devices to test the above classes.</p>
+          <h4>Visible on...</h4>
+          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
+          <ul class="responsive-utilities-test">
+            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
+            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
+            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+          </ul>
+          <h4>Hidden on...</h4>
+          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
+          <ul class="responsive-utilities-test hidden-on">
+            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
+            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
+            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+          </ul>
+
+        </section>
+
+
+
+
+
+        <!-- Dropdowns
+        ================================================== -->
+        <section id="dropdowns">
+          <div class="page-header">
+            <h1>Dropdown menus</h1>
+          </div>
+          <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
+
+          <h3>Example</h3>
+          <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
+          <div class="bs-docs-example">
+            <div class="dropdown clearfix">
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                <li><a tabindex="-1" href="#">Action</a></li>
+                <li><a tabindex="-1" href="#">Another action</a></li>
+                <li><a tabindex="-1" href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a tabindex="-1" href="#">Separated link</a></li>
+              </ul>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="dropdown">
+  <!-- Link or button to toggle dropdown -->
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+    <li><a tabindex="-1" href="#">Action</a></li>
+    <li><a tabindex="-1" href="#">Another action</a></li>
+    <li><a tabindex="-1" href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+          <h3>Aligning the menus</h3>
+          <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+{% highlight html linenos %}
+<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+  ...
+</ul>
+{% endhighlight %}
+
+          <h3>Disabled menu options</h3>
+          <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
+          <div class="bs-docs-example">
+            <div class="dropdown clearfix">
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                <li><a tabindex="-1" href="#">Regular link</a></li>
+                <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+                <li><a tabindex="-1" href="#">Another link</a></li>
+              </ul>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  <li><a tabindex="-1" href="#">Regular link</a></li>
+  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+  <li><a tabindex="-1" href="#">Another link</a></li>
+</ul>
+{% endhighlight %}
+
+          <h3>Sub menus on dropdowns</h3>
+          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
+          <div class="bs-docs-example bs-docs-example-submenu">
+
+            <div class="pull-left">
+              <p class="muted">Default</p>
+              <div class="dropdown clearfix">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">More options</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="pull-left">
+              <p class="muted">Dropup</p>
+              <div class="dropup">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">More options</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="pull-left">
+              <p class="muted">Left submenu</p>
+              <div class="dropdown">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu pull-left">
+                    <a tabindex="-1" href="#">More options</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+          </div>
+{% highlight html linenos %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  ...
+  <li class="dropdown-submenu pull-left">
+    <a tabindex="-1" href="#">More options</a>
+    <ul class="dropdown-menu">
+      <li><a tabindex="-1" href="#">Second level link</a></li>
+      <li><a tabindex="-1" href="#">Second level link</a></li>
+      <li><a tabindex="-1" href="#">Second level link</a></li>
+      <li><a tabindex="-1" href="#">Second level link</a></li>
+      <li><a tabindex="-1" href="#">Second level link</a></li>
+    </ul>
+  </li>
+  ...
+</ul>
+{% endhighlight %}
+
+        </section>
+
+
+
+
+        <!-- Button Groups
+        ================================================== -->
+        <section id="buttonGroups">
+          <div class="page-header">
+            <h1>Button groups</h1>
+          </div>
+          <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
+
+          <h3>Single button group</h3>
+          <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
+          <div class="bs-docs-example">
+            <div class="btn-group" style="margin: 9px 0 5px;">
+              <button type="button" class="btn">Left</button>
+              <button type="button" class="btn">Middle</button>
+              <button type="button" class="btn">Right</button>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="btn-group">
+  <button type="button" class="btn">Left</button>
+  <button type="button" class="btn">Middle</button>
+  <button type="button" class="btn">Right</button>
+</div>
+{% endhighlight %}
+
+          <h3>Multiple button groups</h3>
+          <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar" style="margin: 0;">
+              <div class="btn-group">
+                <button type="button" class="btn">1</button>
+                <button type="button" class="btn">2</button>
+                <button type="button" class="btn">3</button>
+                <button type="button" class="btn">4</button>
+              </div>
+              <div class="btn-group">
+                <button type="button" class="btn">5</button>
+                <button type="button" class="btn">6</button>
+                <button type="button" class="btn">7</button>
+              </div>
+              <div class="btn-group">
+                <button type="button" class="btn">8</button>
+              </div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="btn-toolbar">
+  <div class="btn-group">...</div>
+  <div class="btn-group">...</div>
+  <div class="btn-group">...</div>
+</div>
+{% endhighlight %}
+
+          <h3>Vertical button groups</h3>
+          <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
+          <div class="bs-docs-example">
+            <div class="btn-group btn-group-vertical">
+              <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
+              <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
+              <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
+              <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="btn-group btn-group-vertical">
+  ...
+</div>
+{% endhighlight %}
+
+          <h3>Justified button groups</h3>
+          <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
+          <div class="bs-docs-example">
+            <div class="btn-group btn-group-justified">
+              <a href="#" class="btn">Left</a>
+              <a href="#" class="btn">Right</a>
+              <a href="#" class="btn">Middle</a>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="btn-group btn-group-justified">
+  ...
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Split button dropdowns
+        ================================================== -->
+        <section id="buttonDropdowns">
+          <div class="page-header">
+            <h1>Button dropdown menus</h1>
+          </div>
+          <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
+
+          <h3>Single or split button</h3>
+          <p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar" style="margin-bottom: 10px;">
+              <div class="btn-group">
+                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+            </div>
+
+            <div class="btn-toolbar" style="margin: 0;">
+              <div class="btn-group">
+                <button class="btn">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-primary">Action</button>
+                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-danger">Danger</button>
+                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-warning">Warning</button>
+                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-success">Success</button>
+                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+            </div><!-- /btn-toolbar -->
+          </div>
+{% highlight html linenos %}
+<!-- Single button -->
+<div class="btn-group">
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    Action <span class="caret"></span>
+  </button>
+  <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>
+</div>
+
+<!-- Split button -->
+<div class="btn-group">
+  <button class="btn">Action</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <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>
+</div>
+{% endhighlight %}
+
+          <h3>Works with all button sizes</h3>
+          <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar" style="margin: 0;">
+              <div class="btn-group">
+                <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+                  Large button <span class="caret"></span>
+                </button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+                  Small button <span class="caret"></span>
+                </button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group">
+                <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+                  Mini button <span class="caret"></span>
+                </button>
+                <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>
+              </div><!-- /btn-group -->
+            </div><!-- /btn-toolbar -->
+          </div><!-- /example -->
+{% highlight html linenos %}
+<!-- Large button group -->
+<div class="btn-group">
+  <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+    Large button <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    ...
+  </ul>
+</div>
+
+<!-- Small button group -->
+<div class="btn-group">
+  <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+    Small button <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    ...
+  </ul>
+</div>
+
+<!-- Mini button group -->
+<div class="btn-group">
+  <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+    Mini button <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    ...
+  </ul>
+</div>
+{% endhighlight %}
+
+          <h3>Dropup buttons</h3>
+          <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar">
+              <div class="btn-group dropup">
+                <button class="btn">Dropup</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <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>
+              </div><!-- /btn-group -->
+              <div class="btn-group dropup">
+                <button class="btn primary">Right dropup</button>
+                <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                <ul class="dropdown-menu pull-right">
+                  <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>
+              </div><!-- /btn-group -->
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="btn-group dropup">
+  <button class="btn">Dropup</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </ul>
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Navs
+        ================================================== -->
+        <section id="navs">
+          <div class="page-header">
+            <h1>Navs</small></h1>
+          </div>
+
+          <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
+
+          <h2>Tabs</h2>
+          <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-tabs">
+  <li class="active"><a href="#">Home</a></li>
+  <li><a href="#">Profile</a></li>
+  <li><a href="#">Messages</a></li>
+</ul>
+{% endhighlight %}
+
+          <h2>List</h2>
+          <p>Swap the tabs class for <code>.nav-list</code>.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-list" style="max-width: 300px;">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-list">
+  <li class="active"><a href="#">Home</a></li>
+  <li><a href="#">Profile</a></li>
+  <li><a href="#">Messages</a></li>
+</ul>
+{% endhighlight %}
+
+          <h2>Pills</h2>
+          <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Home</a></li>
+  <li><a href="#">Profile</a></li>
+  <li><a href="#">Messages</a></li>
+</ul>
+{% endhighlight %}
+          <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-pills nav-stacked">
+  ...
+</ul>
+{% endhighlight %}
+
+          <h2>Options</h2>
+
+          <h3>Justified links</h3>
+          <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-pills nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-tabs nav-justified">
+  ...
+</ul>
+<ul class="nav nav-pills nav-justified">
+  ...
+</ul>
+{% endhighlight %}
+
+          <h3>Disabled state</h3>
+          <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li><a href="#">Clickable link</a></li>
+              <li><a href="#">Clickable link</a></li>
+              <li class="disabled"><a href="#">Disabled link</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-tabs">
+  ...
+  <li class="disabled"><a href="#">Disabled link</a></li>
+  ...
+</ul>
+{% endhighlight %}
+
+
+          <h3>Component alignment</h3>
+          <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Dropdowns</h2>
+          <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
+
+          <h3>Tabs with dropdowns</h3>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Help</a></li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                  Dropdown <span class="caret"></span>
+                </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>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-tabs">
+  ...
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+{% endhighlight %}
+
+          <h3>Pills with dropdowns</h3>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Help</a></li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                  Dropdown <span class="caret"></span>
+                </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>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<ul class="nav nav-pills">
+  ...
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Navbar
+        ================================================== -->
+        <section id="navbar">
+          <div class="page-header">
+            <h1>Navbar</h1>
+          </div>
+
+
+          <h2>Basic navbar</h2>
+          <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <a class="navbar-brand" href="#">Title</a>
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#">Link</a></li>
+                <li><a href="#">Link</a></li>
+              </ul>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar">
+  <a class="navbar-brand" href="#">Title</a>
+  <ul class="nav">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+          <h2>Navbar components</h2>
+
+          <h3>Brand</h3>
+          <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <a class="navbar-brand" href="#">Title</a>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<a class="navbar-brand" href="#">Title</a>
+{% endhighlight %}
+
+          <h3>Nav links</h3>
+          <p>Nav items are simple to add via unordered lists.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#">Link</a></li>
+                <li class="disabled"><a href="#">Disabled</a></li>
+              </ul>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<ul class="nav">
+  <li class="active"><a href="#">Home</a></li>
+  <li><a href="#">Link</a></li>
+  <li class="disabled"><a href="#">Disabled</a></li>
+</ul>
+{% endhighlight %}
+          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link</a></li>
+                <li class="divider"></li>
+              </ul>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<ul class="nav">
+  ...
+  <li class="divider"></li>
+  ...
+</ul>
+{% endhighlight %}
+
+          <h3>Forms</h3>
+          <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <form class="navbar-form pull-left">
+                <input type="text" style="width: 200px;">
+                <button type="submit" class="btn">Submit</button>
+              </form>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<form class="navbar-form pull-left">
+  <input type="text" style="width: 200px;">
+  <button type="submit" class="btn">Submit</button>
+</form>
+{% endhighlight %}
+
+          <h3>Component alignment</h3>
+          <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+
+          <h3>Using dropdowns</h3>
+          <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
+
+          <h3>Text</h3>
+          <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+
+
+          <h2>Optional display variations</h2>
+          <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+
+          <h3>Fixed to top</h3>
+          <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+          <div class="bs-docs-example bs-navbar-top-example">
+            <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
+              <div class="container" style="width: auto;">
+                <a class="navbar-brand" href="#">Title</a>
+                <ul class="nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li><a href="#">Link</a></li>
+                  <li><a href="#">Link</a></li>
+                </ul>
+              </div>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar navbar-fixed-top">
+  ...
+</div>
+{% endhighlight %}
+
+          <h3>Fixed to bottom</h3>
+          <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
+          <div class="bs-docs-example bs-navbar-bottom-example">
+            <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
+              <div class="container" style="width: auto;">
+                <a class="navbar-brand" href="#">Title</a>
+                <ul class="nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li><a href="#">Link</a></li>
+                  <li><a href="#">Link</a></li>
+                </ul>
+              </div>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar navbar-fixed-bottom">
+  ...
+</div>
+{% endhighlight %}
+
+          <h3>Static top navbar</h3>
+          <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
+          <div class="bs-docs-example bs-navbar-top-example">
+            <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+              <div class="container" style="width: auto;">
+                <a class="navbar-brand" href="#">Title</a>
+                <ul class="nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li><a href="#">Link</a></li>
+                  <li><a href="#">Link</a></li>
+                </ul>
+              </div>
+            </div>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar navbar-static-top">
+  ...
+</div>
+{% endhighlight %}
+
+
+          <h2>Responsive navbar</h2>
+          <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="container">
+                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </a>
+                <a class="navbar-brand" href="#">Title</a>
+                <div class="nav-collapse collapse navbar-responsive-collapse">
+                  <ul class="nav">
+                    <li class="active"><a href="#">Home</a></li>
+                    <li><a href="#">Link</a></li>
+                    <li><a href="#">Link</a></li>
+                    <li class="dropdown">
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
+                        <li><a href="#">Separated link</a></li>
+                        <li><a href="#">One more separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <form class="navbar-form pull-left" action="">
+                    <input type="text" class="span8" placeholder="Search">
+                  </form>
+                  <ul class="nav pull-right">
+                    <li><a href="#">Link</a></li>
+                    <li class="divider"></li>
+                    <li class="dropdown">
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+                </div><!-- /.nav-collapse -->
+              </div><!-- /.container -->
+            </div><!-- /.navbar -->
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar">
+  <div class="container">
+
+    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
+    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
+
+    <!-- Be sure to leave the brand out there if you want it shown -->
+    <a class="navbar-brand" href="#">Title</a>
+
+    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
+    <div class="nav-collapse collapse navbar-responsive-collapse">
+      ...
+    </div><!-- /.nav-collapse -->
+  </div><!-- /.container -->
+</div><!-- /.navbar -->
+{% endhighlight %}
+
+          <div class="alert alert-info">
+            <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
+          </div>
+
+
+          <h2>Inverted variation</h2>
+          <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
+          <div class="bs-docs-example">
+            <div class="navbar navbar-inverse" style="position: static;">
+              <div class="container">
+                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </a>
+                <a class="navbar-brand" href="#">Title</a>
+                <div class="nav-collapse collapse navbar-inverse-collapse">
+                  <ul class="nav">
+                    <li class="active"><a href="#">Home</a></li>
+                    <li><a href="#">Link</a></li>
+                    <li><a href="#">Link</a></li>
+                    <li class="dropdown">
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
+                        <li><a href="#">Separated link</a></li>
+                        <li><a href="#">One more separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <form class="navbar-form pull-left" action="">
+                    <input type="text" class="span8" placeholder="Search">
+                  </form>
+                  <ul class="nav pull-right">
+                    <li><a href="#">Link</a></li>
+                    <li class="divider"></li>
+                    <li class="dropdown">
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+                </div><!-- /.nav-collapse -->
+              </div>
+            </div><!-- /navbar -->
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="navbar navbar-inverse">
+  ...
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Breadcrumbs
+        ================================================== -->
+        <section id="breadcrumbs">
+          <div class="page-header">
+            <h1>Breadcrumbs <small></small></h1>
+          </div>
+          <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
+
+          <div class="bs-docs-example">
+            <ul class="breadcrumb">
+              <li class="active">Home</li>
+            </ul>
+            <ul class="breadcrumb">
+              <li><a href="#">Home</a></li>
+              <li class="active">Library</li>
+            </ul>
+            <ul class="breadcrumb" style="margin-bottom: 5px;">
+              <li><a href="#">Home</a></li>
+              <li><a href="#">Library</a></li>
+              <li class="active">Data</li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="breadcrumb">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Library</a></li>
+  <li class="active">Data</li>
+</ul>
+{% endhighlight %}
+
+
+        </section>
+
+
+
+        <!-- Pagination
+        ================================================== -->
+        <section id="pagination">
+          <div class="page-header">
+            <h1>Pagination</h1>
+          </div>
+          <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
+
+          <h2>Standard pagination</h2>
+          <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
+          <div class="bs-docs-example">
+            <ul class="pagination">
+              <li><a href="#">&laquo;</a></li>
+              <li><a href="#">1</a></li>
+              <li><a href="#">2</a></li>
+              <li><a href="#">3</a></li>
+              <li><a href="#">4</a></li>
+              <li><a href="#">5</a></li>
+              <li><a href="#">&raquo;</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="pagination">
+  <li><a href="#">&laquo;</a></li>
+  <li><a href="#">1</a></li>
+  <li><a href="#">2</a></li>
+  <li><a href="#">3</a></li>
+  <li><a href="#">4</a></li>
+  <li><a href="#">5</a></li>
+  <li><a href="#">&raquo;</a></li>
+</ul>
+{% endhighlight %}
+
+          <h3>Disabled and active states</h3>
+          <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
+          <div class="bs-docs-example">
+            <ul class="pagination">
+              <li class="disabled"><a href="#">&laquo;</a></li>
+              <li class="active"><a href="#">1</a></li>
+              <li><a href="#">2</a></li>
+              <li><a href="#">3</a></li>
+              <li><a href="#">4</a></li>
+              <li><a href="#">5</a></li>
+              <li><a href="#">&raquo;</a></li>
+           </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="pagination">
+  <li class="disabled"><a href="#">&laquo;</a></li>
+  <li class="active"><a href="#">1</a></li>
+  ...
+</ul>
+{% endhighlight %}
+          <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
+{% highlight html linenos %}
+<ul class="pagination">
+  <li class="disabled"><span>&laquo;</span></li>
+  <li class="active"><span>1</span></li>
+  ...
+</ul>
+{% endhighlight %}
+
+
+          <h3>Sizes</h3>
+          <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
+          <div class="bs-docs-example">
+            <div>
+              <ul class="pagination pagination-large">
+                <li><a href="#">&laquo;</a></li>
+                <li><a href="#">1</a></li>
+                <li><a href="#">2</a></li>
+                <li><a href="#">3</a></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">&raquo;</a></li>
+              </ul>
+            </div>
+            <div>
+              <ul class="pagination">
+                <li><a href="#">&laquo;</a></li>
+                <li><a href="#">1</a></li>
+                <li><a href="#">2</a></li>
+                <li><a href="#">3</a></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">&raquo;</a></li>
+              </ul>
+            </div>
+            <div>
+              <ul class="pagination pagination-small">
+                <li><a href="#">&laquo;</a></li>
+                <li><a href="#">1</a></li>
+                <li><a href="#">2</a></li>
+                <li><a href="#">3</a></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">&raquo;</a></li>
+              </ul>
+            </div>
+            <div>
+              <ul class="pagination pagination-mini">
+                <li><a href="#">&laquo;</a></li>
+                <li><a href="#">1</a></li>
+                <li><a href="#">2</a></li>
+                <li><a href="#">3</a></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">&raquo;</a></li>
+              </ul>
+            </div>
+          </div>
+{% highlight html linenos %}
+<ul class="pagination pagination-large">...</ul>
+<ul class="pagination pagination">...</ul>
+<ul class="pagination pagination-small">...</ul>
+<ul class="pagination pagination-mini">...</ul>
+{% endhighlight %}
+
+
+          <h2 id="pagination-pager">Pager</h2>
+          <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
+
+          <h3>Default example</h3>
+          <p>By default, the pager centers links.</p>
+          <div class="bs-docs-example">
+            <ul class="pager">
+              <li><a href="#">Previous</a></li>
+              <li><a href="#">Next</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="pager">
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
+</ul>
+{% endhighlight %}
+
+          <h3>Aligned links</h3>
+          <p>Alternatively, you can align each link to the sides:</p>
+          <div class="bs-docs-example">
+            <ul class="pager">
+              <li class="previous"><a href="#">&larr; Older</a></li>
+              <li class="next"><a href="#">Newer &rarr;</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="pager">
+  <li class="previous"><a href="#">&larr; Older</a></li>
+  <li class="next"><a href="#">Newer &rarr;</a></li>
+</ul>
+{% endhighlight %}
+
+
+          <h3>Optional disabled state</h3>
+          <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
+          <div class="bs-docs-example">
+            <ul class="pager">
+              <li class="previous disabled"><a href="#">&larr; Older</a></li>
+              <li class="next"><a href="#">Newer &rarr;</a></li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="pager">
+  <li class="previous disabled"><a href="#">&larr; Older</a></li>
+  <li class="next"><a href="#">Newer &rarr;</a></li>
+</ul>
+{% endhighlight %}
+
+
+        </section>
+
+
+
+        <!-- Labels
+        ================================================== -->
+        <section id="labels">
+          <div class="page-header">
+            <h1>Labels</h1>
+          </div>
+          <p class="lead"></p>
+
+          <h3>Example</h3>
+          <div class="bs-docs-example">
+            <h1>Example heading <span class="label">New</span></h1>
+            <h2>Example heading <span class="label">New</span></h2>
+            <h3>Example heading <span class="label">New</span></h3>
+            <h4>Example heading <span class="label">New</span></h4>
+            <h5>Example heading <span class="label">New</span></h5>
+            <h6>Example heading <span class="label">New</span></h6>
+          </div>
+{% highlight html linenos %}
+<h3>Example heading <span class="label">New</span></h3>
+{% endhighlight %}
+
+          <h3>Available variations</h3>
+          <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+              <tr>
+                <th>Labels</th>
+                <th>Markup</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <span class="label">Default</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-success">Success</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-warning">Warning</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-danger">Danger</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-info">Info</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </section>
+
+
+
+        <!-- Badges
+        ================================================== -->
+        <section id="badges">
+          <div class="page-header">
+            <h1>Badges</h1>
+          </div>
+          <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
+
+          <div class="bs-docs-example">
+            <a href="#">Inbox <span class="badge">42</span></a>
+          </div>
+{% highlight html linenos %}
+<a href="#">Inbox <span class="badge">42</span></a>
+{% endhighlight %}
+
+          <h4>Self collapsing</h4>
+          <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
+
+          <h4>Adapts to active nav states</h4>
+          <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages <span class="badge">3</span></a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-list" style="max-width: 260px;">
+              <li class="active">
+                <a href="#">
+                  <span class="badge pull-right">42</span>
+                  Home
+                </a>
+              </li>
+              <li><a href="#">Profile</a></li>
+              <li>
+                <a href="#">
+                  <span class="badge pull-right">3</span>
+                  Messages
+                </a>
+              </li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="nav nav-list">
+  <li class="active">
+    <a href="#">
+      <span class="badge pull-right">42</span>
+      Home
+    </a>
+  </li>
+  ...
+</ul>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Typographic components
+        ================================================== -->
+        <section id="typography">
+          <div class="page-header">
+            <h1>Typographic components</h1>
+          </div>
+
+          <h2>Jumbotron</h2>
+          <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
+          <div class="bs-docs-example">
+            <div class="jumbotron">
+              <h1>Hello, world!</h1>
+              <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+              <p><a class="btn btn-primary btn-large">Learn more</a></p>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="jumbotron">
+  <h1>Hello, world!</h1>
+  <p>...</p>
+  <p><a class="btn btn-primary btn-large">Learn more</a></p>
+</div>
+{% endhighlight %}
+
+          <h2>Page header</h2>
+          <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
+          <div class="bs-docs-example">
+            <div class="page-header">
+              <h1>Example page header <small>Subtext for header</small></h1>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="page-header">
+  <h1>Example page header <small>Subtext for header</small></h1>
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Thumbnails
+        ================================================== -->
+        <section id="thumbnails">
+          <div class="page-header">
+            <h1>Thumbnails</h1>
+          </div>
+          <p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
+
+          <h3>Default thumbnails</h3>
+          <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
+          <div class="bs-docs-example">
+            <div class="row">
+              <div class="span3">
+                <a href="#" class="thumbnail">
+                  <img data-src="holder.js/260x180" alt="">
+                </a>
+              </div>
+              <div class="span3">
+                <a href="#" class="thumbnail">
+                  <img data-src="holder.js/260x180" alt="">
+                </a>
+              </div>
+              <div class="span3">
+                <a href="#" class="thumbnail">
+                  <img data-src="holder.js/260x180" alt="">
+                </a>
+              </div>
+              <div class="span3">
+                <a href="#" class="thumbnail">
+                  <img data-src="holder.js/260x180" alt="">
+                </a>
+              </div>
+            </div>
+          </div><!-- /.bs-docs-example -->
+{% highlight html linenos %}
+<div class="row">
+  <div class="span3">
+    <a href="#" class="thumbnail">
+      <img data-src="holder.js/260x180" alt="">
+    </a>
+  </div>
+  ...
+</div>
+{% endhighlight %}
+
+          <h3>Custom content thumbnails</h3>
+          <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>
+          <div class="bs-docs-example">
+            <div class="row">
+              <div class="span4">
+                <div class="thumbnail">
+                  <img data-src="holder.js/300x200" alt="">
+                  <div class="caption">
+                    <h3>Thumbnail label</h3>
+                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+                  </div>
+                </div>
+              </div>
+              <div class="span4">
+                <div class="thumbnail">
+                  <img data-src="holder.js/300x200" alt="">
+                  <div class="caption">
+                    <h3>Thumbnail label</h3>
+                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+                  </div>
+                </div>
+              </div>
+              <div class="span4">
+                <div class="thumbnail">
+                  <img data-src="holder.js/300x200" alt="">
+                  <div class="caption">
+                    <h3>Thumbnail label</h3>
+                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div><!-- /.bs-docs-example -->
+{% highlight html linenos %}
+<div class="row">
+  <div class="span3">
+    <div class="thumbnail">
+      <img data-src="holder.js/300x200" alt="">
+      <div class="caption">
+        <h3>Thumbnail label</h3>
+        <p>...</p>
+        <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+
+        </section>
+
+
+
+
+        <!-- Alerts
+        ================================================== -->
+        <section id="alerts">
+          <div class="page-header">
+            <h1>Alerts</h1>
+          </div>
+          <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
+
+          <h3>Default alert</h3>
+          <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
+          <div class="bs-docs-example">
+            <div class="alert">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>Warning!</strong> Best check yo self, you're not looking too good.
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="alert">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <strong>Warning!</strong> Best check yo self, you're not looking too good.
+</div>
+{% endhighlight %}
+
+          <h3>Block alerts</h3>
+          <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
+          <div class="bs-docs-example">
+            <div class="alert alert-block">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <h4>Warning!</h4>
+              <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="alert alert-block">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <h4>Warning!</h4>
+  <p>...</p>
+</div>
+{% endhighlight %}
+
+          <h3>Contextual alternatives</h3>
+          <p>Add optional classes to change an alert's connotation.</p>
+          <div class="bs-docs-example">
+            <div class="alert alert-error">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>Oh snap!</strong> Change a few things up and try submitting again.
+            </div>
+            <div class="alert alert-success">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>Well done!</strong> You successfully read this important alert message.
+            </div>
+            <div class="alert alert-info">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="alert alert-error">...</div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
+{% endhighlight %}
+        </section>
+
+
+
+
+        <!-- Progress bars
+        ================================================== -->
+        <section id="progress">
+          <div class="page-header">
+            <h1>Progress bars</h1>
+          </div>
+          <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
+
+          <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
+
+          <h3>Basic</h3>
+          <p>Default progress bar with a vertical gradient.</p>
+          <div class="bs-docs-example">
+            <div class="progress">
+              <div class="progress-bar" style="width: 60%;"></div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="progress">
+  <div class="progress-bar" style="width: 60%;"></div>
+</div>
+{% endhighlight %}
+
+          <h3>Additional colors</h3>
+          <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
+          <div class="bs-docs-example">
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+            </div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+            </div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+            </div>
+            <div class="progress">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="progress">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+</div>
+{% endhighlight %}
+
+          <h3>Striped</h3>
+          <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
+          <div class="bs-docs-example">
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+            </div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+            </div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+            </div>
+            <div class="progress progress-striped">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+</div>
+{% endhighlight %}
+
+          <h3>Animated</h3>
+          <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
+          <div class="bs-docs-example">
+            <div class="progress progress-striped active">
+              <div class="progress-bar" style="width: 45%"></div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="progress progress-striped active">
+  <div class="progress-bar" style="width: 45%"></div>
+</div>
+{% endhighlight %}
+
+          <h3>Stacked</h3>
+          <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
+          <div class="bs-docs-example">
+            <div class="progress">
+              <div class="progress-bar progress-bar-success" style="width: 35%"></div>
+              <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
+              <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
+</div>
+{% endhighlight %}
+
+        </section>
+
+
+
+
+        <!-- Media object
+        ================================================== -->
+        <section id="media">
+          <div class="page-header">
+            <h1>Media object</h1>
+          </div>
+          <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
+
+          <h3>Default example</h3>
+          <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
+          <div class="bs-docs-example">
+            <div class="media">
+              <a class="pull-left" href="#">
+                <img class="media-object" data-src="holder.js/64x64">
+              </a>
+              <div class="media-body">
+                <h4 class="media-heading">Media heading</h4>
+                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+              </div>
+            </div>
+            <div class="media">
+              <a class="pull-left" href="#">
+                <img class="media-object" data-src="holder.js/64x64">
+              </a>
+              <div class="media-body">
+                <h4 class="media-heading">Media heading</h4>
+                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+                <div class="media">
+                  <a class="pull-left" href="#">
+                    <img class="media-object" data-src="holder.js/64x64">
+                  </a>
+                  <div class="media-body">
+                    <h4 class="media-heading">Media heading</h4>
+                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div><!-- /.bs-docs-example -->
+{% highlight html linenos %}
+<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" src="...">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Media heading</h4>
+    ...
+  </div>
+</div>
+{% endhighlight %}
+
+          <h3>Media list</h3>
+          <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
+          <div class="bs-docs-example">
+            <ul class="media-list">
+              <li class="media">
+                <a class="pull-left" href="#">
+                  <img class="media-object" data-src="holder.js/64x64">
+                </a>
+                <div class="media-body">
+                  <h4 class="media-heading">Media heading</h4>
+                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+                  <!-- Nested media object -->
+                  <div class="media">
+                    <a class="pull-left" href="#">
+                      <img class="media-object" data-src="holder.js/64x64">
+                    </a>
+                    <div class="media-body">
+                      <h4 class="media-heading">Nested media heading</h4>
+                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+                      <!-- Nested media object -->
+                      <div class="media">
+                        <a class="pull-left" href="#">
+                          <img class="media-object" data-src="holder.js/64x64">
+                        </a>
+                        <div class="media-body">
+                          <h4 class="media-heading">Nested media heading</h4>
+                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Nested media object -->
+                  <div class="media">
+                    <a class="pull-left" href="#">
+                      <img class="media-object" data-src="holder.js/64x64">
+                    </a>
+                    <div class="media-body">
+                      <h4 class="media-heading">Nested media heading</h4>
+                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li class="media">
+                <a class="pull-right" href="#">
+                  <img class="media-object" data-src="holder.js/64x64">
+                </a>
+                <div class="media-body">
+                  <h4 class="media-heading">Media heading</h4>
+                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+                </div>
+              </li>
+            </ul>
+          </div>
+{% highlight html linenos %}
+<ul class="media-list">
+  <li class="media">
+    <a class="pull-left" href="#">
+      <img class="media-object" src="...">
+    </a>
+    <div class="media-body">
+      <h4 class="media-heading">Media heading</h4>
+      ...
+    </div>
+  </li>
+</ul>
+{% endhighlight %}
+
+</section>
+
+
+
+
+
+        <!-- Miscellaneous
+        ================================================== -->
+        <section id="misc">
+          <div class="page-header">
+            <h1>Miscellaneous <small>Lightweight utility components</small></h1>
+          </div>
+
+          <h2>Wells</h2>
+          <p>Use the well as a simple effect on an element to give it an inset effect.</p>
+          <div class="bs-docs-example">
+            <div class="well">
+              Look, I'm in a well!
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="well">...</div>
+{% endhighlight %}
+          <h3>Optional classes</h3>
+          <p>Control padding and rounded corners with two optional modifier classes.</p>
+          <div class="bs-docs-example">
+            <div class="well well-large">
+              Look, I'm in a well!
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="well well-large">...</div>
+{% endhighlight %}
+
+          <div class="bs-docs-example">
+            <div class="well well-small">
+              Look, I'm in a well!
+            </div>
+          </div>
+{% highlight html linenos %}
+<div class="well well-small">...</div>
+{% endhighlight %}
+
+
+          <h2>Close icon</h2>
+          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
+          <div class="bs-docs-example">
+            <p><button class="close" style="float: none;">&times;</button></p>
+          </div>
+{% highlight html linenos %}
+<button class="close" style="float: none;">&times;</button>
+{% endhighlight %}
+
+          <h2>Helper classes</h2>
+          <p>Simple, focused classes for small display or behavior tweaks.</p>
+
+          <h4>.pull-left</h4>
+          <p>Float an element left</p>
+{% highlight html linenos %}
+<div class="pull-left">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-left {
+  float: left;
+}
+{% endhighlight %}
+
+          <h4>.pull-right</h4>
+          <p>Float an element right</p>
+{% highlight html linenos %}
+<div class="pull-right">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-right {
+  float: right;
+}
+{% endhighlight %}
+
+          <h4>.muted</h4>
+          <p>Change an element's color to <code>#999</code></p>
+{% highlight html linenos %}
+<p class="muted">...</p>
+{% endhighlight %}
+{% highlight css linenos %}
+.muted {
+  color: #999;
+}
+{% endhighlight %}
+
+
+          <h4>.clearfix</h4>
+          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+{% highlight html linenos %}
+<div class="clearfix">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+{% endhighlight %}
+
+
+        </section>
+
+
+
+
+        <!-- Overview
+        ================================================== -->
+        <section id="overview">
+          <div class="page-header">
+            <h1>JavaScript in Bootstrap</h1>
+          </div>
+
+          <h3>Individual or compiled</h3>
+          <p>Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+
+          <h3>Data attributes</h3>
+          <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
+
+          <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+{% highlight js linenos %}
+$('body').off('.data-api')
+{% endhighlight %}
+
+          <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
+{% highlight js linenos %}
+$('body').off('.alert.data-api')
+{% endhighlight %}
+
+          <h3>Programmatic API</h3>
+          <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
+{% highlight js linenos %}
+$(".btn.danger").button("toggle").addClass("fat")
+{% endhighlight %}
+
+          <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
+{% highlight js linenos %}
+$("#myModal").modal()                      // initialized with defaults
+$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+$("#myModal").modal('show')                // initializes and invokes show immediately</p>
+{% endhighlight %}
+
+          <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+
+          <h3>No conflict</h3>
+          <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
+{% highlight js linenos %}
+var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+{% endhighlight %}
+
+
+          <h3>Events</h3>
+          <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+          <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
+{% highlight js linenos %}
+$('#myModal').on('show', function (e) {
+    if (!data) return e.preventDefault() // stops modal from being shown
+})
+{% endhighlight %}
+
+        </section>
+
+
+
+        <!-- Transitions
+        ================================================== -->
+        <section id="transitions">
+          <div class="page-header">
+            <h1>Transitions <small>bootstrap-transition.js</small></h1>
+          </div>
+          <h3>About transitions</h3>
+          <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
+          <h3>Use cases</h3>
+          <p>A few examples of the transition plugin:</p>
+          <ul>
+            <li>Sliding or fading in modals</li>
+            <li>Fading out tabs</li>
+            <li>Fading out alerts</li>
+            <li>Sliding carousel panes</li>
+          </ul>
+
+          <!-- Ideas: include docs for .fade.in, .slide.in, etc -->
+        </section>
+
+
+
+        <!-- Modal
+        ================================================== -->
+        <section id="modals">
+          <div class="page-header">
+            <h1>Modals <small>bootstrap-modal.js</small></h1>
+          </div>
+
+
+          <h2>Examples</h2>
+          <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
+
+          <h3>Static example</h3>
+          <p>A rendered modal with header, body, and set of actions in the footer.</p>
+          <div class="bs-docs-example bs-docs-example-modal">
+            <div class="modal">
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">Modal title</h4>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <a href="#" class="btn">Close</a>
+                    <a href="#" class="btn btn-primary">Save changes</a>
+                  </div>
+                </div><!-- /.modal-content -->
+              </div><!-- /.modal-dalog -->
+            </div><!-- /.modal -->
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="modal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        <p>One fine body&hellip;</p>
+      </div>
+      <div class="modal-footer">
+        <a href="#" class="btn">Close</a>
+        <a href="#" class="btn btn-primary">Save changes</a>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dalog -->
+</div><!-- /.modal -->
+{% endhighlight %}
+
+          <h3>Live demo</h3>
+          <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
+          <!-- sample modal content -->
+          <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+              <div class="modal-content">
+
+                <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                  <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
+                </div>
+                <div class="modal-body">
+                  <h4>Text in a modal</h4>
+                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+                  <h4>Popover in a modal</h4>
+                  <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+
+                  <h4>Tooltips in a modal</h4>
+                  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+                  <hr>
+
+                  <h4>Overflowing text to show optional scrollbar</h4>
+                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+                </div>
+                <div class="modal-footer">
+                  <button class="btn" data-dismiss="modal">Close</button>
+                  <button class="btn btn-primary">Save changes</button>
+                </div>
+
+              </div><!-- /.modal-content -->
+            </div><!-- /.modal-dalog -->
+          </div><!-- /.modal -->
+
+          <div class="bs-docs-example" style="padding-bottom: 24px;">
+            <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+          </div><!-- /example -->
+{% highlight html linenos %}
+<div class="modal">
+  <!-- Button trigger modal -->
+  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+
+  <!-- Modal -->
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <a href="#" class="btn">Close</a>
+        <a href="#" class="btn btn-primary">Save changes</a>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dalog -->
+</div><!-- /.modal -->
+{% endhighlight %}
+
+
+
+          <h2>Usage</h2>
+
+          <h3>Via data attributes</h3>
+          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
+{% highlight html linenos %}
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+{% endhighlight %}
+
+          <h3>Via JavaScript</h3>
+          <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
+          {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
+
+          <h3>Options</h3>
+          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 50px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>backdrop</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+             </tr>
+             <tr>
+               <td>keyboard</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>Closes the modal when escape key is pressed</td>
+             </tr>
+             <tr>
+               <td>show</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>Shows the modal when initialized.</td>
+             </tr>
+             <tr>
+               <td>remote</td>
+               <td>path</td>
+               <td>false</td>
+               <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
+{% highlight html linenos %}
+<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
+{% endhighlight %}
+             </tr>
+            </tbody>
+          </table>
+
+          <h3>Methods</h3>
+
+          <h4>.modal(options)</h4>
+          <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
+{% highlight js linenos %}
+$('#myModal').modal({
+  keyboard: false
+})
+{% endhighlight %}
+
+          <h4>.modal('toggle')</h4>
+          <p>Manually toggles a modal.</p>
+          {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
+
+          <h4>.modal('show')</h4>
+          <p>Manually opens a modal.</p>
+          {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
+
+          <h4>.modal('hide')</h4>
+          <p>Manually hides a modal.</p>
+          {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
+
+          <h3>Events</h3>
+          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">Event</th>
+               <th>Description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>show</td>
+               <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+             </tr>
+             <tr>
+               <td>shown</td>
+               <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
+             </tr>
+             <tr>
+               <td>hide</td>
+               <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+             </tr>
+             <tr>
+               <td>hidden</td>
+               <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
+             </tr>
+            </tbody>
+          </table>
+{% highlight js linenos %}
+$('#myModal').on('hidden', function () {
+  // do something…
+})
+{% endhighlight %}
+        </section>
+
+
+
+        <!-- Dropdowns
+        ================================================== -->
+        <section id="dropdowns">
+          <div class="page-header">
+            <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
+          </div>
+
+
+          <h2>Examples</h2>
+          <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
+
+          <h3>Within a navbar</h3>
+          <div class="bs-docs-example">
+            <div id="navbar-example" class="navbar navbar-static">
+              <div class="navbar-inner">
+                <div class="container" style="width: auto;">
+                  <a class="navbar-brand" href="#">Project Name</a>
+                  <ul class="nav" role="navigation">
+                    <li class="dropdown">
+                      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                        <li role="presentation" class="divider"></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown">
+                      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                        <li role="presentation" class="divider"></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <ul class="nav pull-right">
+                    <li id="fat-menu" class="dropdown">
+                      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                        <li role="presentation" class="divider"></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div> <!-- /navbar-example -->
+          </div> <!-- /example -->
+
+          <h3>Within tabs</h3>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li class="active"><a href="#">Regular link</a></li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+                <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+                <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+                <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+                </ul>
+              </li>
+            </ul> <!-- /tabs -->
+          </div> <!-- /example -->
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Usage</h2>
+
+          <h3>Via data attributes</h3>
+          <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
+{% highlight html linenos %}
+<div class="dropdown">
+  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+{% endhighlight %}
+          <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
+{% highlight html linenos %}
+<div class="dropdown">
+  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+    Dropdown <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+{% endhighlight %}
+
+          <h3>Via JavaScript</h3>
+          <p>Call the dropdowns via JavaScript:</p>
+{% highlight js linenos %}
+$('.dropdown-toggle').dropdown()
+{% endhighlight %}
+
+          <h3>Options</h3>
+          <p><em>None</em></p>
+
+          <h3>Methods</h3>
+          <h4>$().dropdown('toggle')</h4>
+          <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
+        </section>
+
+
+
+        <!-- ScrollSpy
+        ================================================== -->
+        <section id="scrollspy">
+          <div class="page-header">
+            <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
+          </div>
+
+
+          <h2>Example in navbar</h2>
+          <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
+          <div class="bs-docs-example">
+            <div id="navbarExample" class="navbar navbar-static">
+              <div class="navbar-inner">
+                <div class="container" style="width: auto;">
+                  <a class="navbar-brand" href="#">Project Name</a>
+                  <ul class="nav">
+                    <li><a href="#fat">@fat</a></li>
+                    <li><a href="#mdo">@mdo</a></li>
+                    <li class="dropdown">
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu">
+                        <li><a href="#one">one</a></li>
+                        <li><a href="#two">two</a></li>
+                        <li class="divider"></li>
+                        <li><a href="#three">three</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
+              <h4 id="fat">@fat</h4>
+              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
+              <h4 id="mdo">@mdo</h4>
+              <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
+              <h4 id="one">one</h4>
+              <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
+              <h4 id="two">two</h4>
+              <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
+              <h4 id="three">three</h4>
+              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
+              <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
+              </p>
+            </div>
+          </div><!-- /example -->
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Usage</h2>
+
+          <h3>Via data attributes</h3>
+          <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
+{% highlight html linenos %}
+<body data-spy="scroll" data-target=".navbar">
+  ...
+</body>
+{% endhighlight %}
+
+          <h3>Via JavaScript</h3>
+          <p>Call the scrollspy via JavaScript:</p>
+{% highlight js linenos %}
+$('.navbar').scrollspy()
+{% endhighlight %}
+
+          <div class="alert alert-info">
+            <strong>Heads up!</strong>
+            Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+          </div>
+
+          <h3>Methods</h3>
+          <h4>.scrollspy('refresh')</h4>
+          <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
+{% highlight js linenos %}
+$('[data-spy="scroll"]').each(function () {
+  var $spy = $(this).scrollspy('refresh')
+});
+{% endhighlight %}
+
+
+          <h3>Options</h3>
+          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 100px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>offset</td>
+               <td>number</td>
+               <td>10</td>
+               <td>Pixels to offset from top when calculating position of scroll.</td>
+             </tr>
+            </tbody>
+          </table>
+
+          <h3>Events</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">Event</th>
+               <th>Description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>activate</td>
+               <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+            </tr>
+            </tbody>
+          </table>
+        </section>
+
+
+
+        <!-- Tabs
+        ================================================== -->
+        <section id="tabs">
+          <div class="page-header">
+            <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
+          </div>
+
+
+          <h2>Example tabs</h2>
+          <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
+          <div class="bs-docs-example bs-docs-example-tabs">
+            <ul id="myTab" class="nav nav-tabs">
+              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
+              <li><a href="#profile" data-toggle="tab">Profile</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
+                  <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
+                </ul>
+              </li>
+            </ul>
+            <div id="myTabContent" class="tab-content">
+              <div class="tab-pane fade in active" id="home">
+                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+              </div>
+              <div class="tab-pane fade" id="profile">
+                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+              </div>
+              <div class="tab-pane fade" id="dropdown1">
+                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
+              </div>
+              <div class="tab-pane fade" id="dropdown2">
+                <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
+              </div>
+            </div>
+          </div><!-- /example -->
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Usage</h2>
+          <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
+{% highlight js linenos %}
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})
+{% endhighlight %}
+
+          <p>You can activate individual tabs in several ways:</p>
+{% highlight js linenos %}
+$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+{% endhighlight %}
+
+          <h3>Markup</h3>
+          <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
+{% highlight html linenos %}
+<ul class="nav nav-tabs">
+  <li><a href="#home" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" data-toggle="tab">Messages</a></li>
+  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+</ul>
+{% endhighlight %}
+
+          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
+
+          <h3>Methods</h3>
+          <h4>$().tab</h4>
+          <p>
+            Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
+          </p>
+{% highlight html linenos %}
+<ul class="nav nav-tabs" id="myTab">
+  <li class="active"><a href="#home">Home</a></li>
+  <li><a href="#profile">Profile</a></li>
+  <li><a href="#messages">Messages</a></li>
+  <li><a href="#settings">Settings</a></li>
+</ul>
+
+<div class="tab-content">
+  <div class="tab-pane active" id="home">...</div>
+  <div class="tab-pane" id="profile">...</div>
+  <div class="tab-pane" id="messages">...</div>
+  <div class="tab-pane" id="settings">...</div>
+</div>
+
+<script>
+  $(function () {
+    $('#myTab a:last').tab('show');
+  })
+</script>
+{% endhighlight %}
+
+          <h3>Events</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">Event</th>
+               <th>Description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>show</td>
+               <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+            </tr>
+            <tr>
+               <td>shown</td>
+               <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+             </tr>
+            </tbody>
+          </table>
+{% highlight js linenos %}
+$('a[data-toggle="tab"]').on('shown', function (e) {
+  e.target // activated tab
+  e.relatedTarget // previous tab
+})
+{% endhighlight %}
+        </section>
+
+
+        <!-- Tooltips
+        ================================================== -->
+        <section id="tooltips">
+          <div class="page-header">
+            <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
+          </div>
+
+
+          <h2>Examples</h2>
+          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
+          <p>Hover over the links below to see tooltips:</p>
+          <div class="bs-docs-example tooltip-demo">
+            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+            </p>
+          </div><!-- /example -->
+
+          <h3>Four directions</h3>
+          <div class="bs-docs-example tooltip-demo">
+            <ul class="bs-docs-tooltip-examples">
+              <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
+              <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
+              <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
+              <li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
+            </ul>
+          </div><!-- /example -->
+
+
+          <h3>Tooltips in input groups</h3>
+          <p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Usage</h2>
+          <p>Trigger the tooltip via JavaScript:</p>
+{% highlight js linenos %}
+$('#example').tooltip(options)
+{% endhighlight %}
+
+          <h3>Options</h3>
+          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 100px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>animation</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>apply a css fade transition to the tooltip</td>
+             </tr>
+             <tr>
+               <td>html</td>
+               <td>boolean</td>
+               <td>false</td>
+               <td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
+             </tr>
+             <tr>
+               <td>placement</td>
+               <td>string | function</td>
+               <td>'top'</td>
+               <td>how to position the tooltip - top | bottom | left | right</td>
+             </tr>
+             <tr>
+               <td>selector</td>
+               <td>string</td>
+               <td>false</td>
+               <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
+             </tr>
+             <tr>
+               <td>title</td>
+               <td>string | function</td>
+               <td>''</td>
+               <td>default title value if `title` tag isn't present</td>
+             </tr>
+             <tr>
+               <td>trigger</td>
+               <td>string</td>
+               <td>'hover focus'</td>
+               <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
+             </tr>
+             <tr>
+               <td>delay</td>
+               <td>number | object</td>
+               <td>0</td>
+               <td>
+                <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+                <p>If a number is supplied, delay is applied to both hide/show</p>
+                <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+               </td>
+             </tr>
+             <tr>
+               <td>container</td>
+               <td>string | false</td>
+               <td>false</td>
+               <td>
+                <p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
+               </td>
+             </tr>
+            </tbody>
+          </table>
+          <div class="alert alert-info">
+            <strong>Heads up!</strong>
+            Options for individual tooltips can alternatively be specified through the use of data attributes.
+          </div>
+
+          <h3>Markup</h3>
+{% highlight html linenos %}
+<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
+{% endhighlight %}
+
+          <h3>Methods</h3>
+
+          <h4>$().tooltip(options)</h4>
+          <p>Attaches a tooltip handler to an element collection.</p>
+
+          <h4>.tooltip('show')</h4>
+          <p>Reveals an element's tooltip.</p>
+          {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}
+
+          <h4>.tooltip('hide')</h4>
+          <p>Hides an element's tooltip.</p>
+          {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}
+
+          <h4>.tooltip('toggle')</h4>
+          <p>Toggles an element's tooltip.</p>
+          {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}
+
+          <h4>.tooltip('destroy')</h4>
+          <p>Hides and destroys an element's tooltip.</p>
+          {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}
+        </section>
+
+
+
+      <!-- Popovers
+      ================================================== -->
+      <section id="popovers">
+        <div class="page-header">
+          <h1>Popovers <small>bootstrap-popover.js</small></h1>
+        </div>
+
+        <h2>Examples</h2>
+        <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
+
+        <h3>Static popover</h3>
+        <p>Four options are available: top, right, bottom, and left aligned.</p>
+        <div class="bs-docs-example bs-docs-example-popover">
+          <div class="popover top">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover top</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <div class="popover right">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover right</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <div class="popover bottom">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover bottom</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <div class="popover left">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover left</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <div class="clearfix"></div>
+        </div>
+        <p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
+
+        <h3>Live demo</h3>
+        <div class="bs-docs-example" style="padding-bottom: 24px;">
+          <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+        </div>
+
+        <h4>Four directions</h4>
+        <div class="bs-docs-example tooltip-demo">
+          <ul class="bs-docs-tooltip-examples">
+            <li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
+            <li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
+            <li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
+            <li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
+          </ul>
+        </div><!-- /example -->
+
+
+        <hr class="bs-docs-separator">
+
+
+        <h2>Usage</h2>
+        <p>Enable popovers via JavaScript:</p>
+        {% highlight js linenos %}$('#example').popover(options){% endhighlight %}
+
+        <h3>Options</h3>
+        <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
+        <table class="table table-bordered table-striped">
+          <thead>
+           <tr>
+             <th style="width: 100px;">Name</th>
+             <th style="width: 100px;">type</th>
+             <th style="width: 50px;">default</th>
+             <th>description</th>
+           </tr>
+          </thead>
+          <tbody>
+           <tr>
+             <td>animation</td>
+             <td>boolean</td>
+             <td>true</td>
+             <td>apply a css fade transition to the tooltip</td>
+           </tr>
+           <tr>
+             <td>html</td>
+             <td>boolean</td>
+             <td>false</td>
+             <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
+           </tr>
+           <tr>
+             <td>placement</td>
+             <td>string | function</td>
+             <td>'right'</td>
+             <td>how to position the popover - top | bottom | left | right</td>
+           </tr>
+           <tr>
+             <td>selector</td>
+             <td>string</td>
+             <td>false</td>
+             <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
+           </tr>
+           <tr>
+             <td>trigger</td>
+             <td>string</td>
+             <td>'click'</td>
+             <td>how popover is triggered - click | hover | focus | manual</td>
+           </tr>
+           <tr>
+             <td>title</td>
+             <td>string | function</td>
+             <td>''</td>
+             <td>default title value if `title` attribute isn't present</td>
+           </tr>
+           <tr>
+             <td>content</td>
+             <td>string | function</td>
+             <td>''</td>
+             <td>default content value if `data-content` attribute isn't present</td>
+           </tr>
+           <tr>
+             <td>delay</td>
+             <td>number | object</td>
+             <td>0</td>
+             <td>
+              <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+              <p>If a number is supplied, delay is applied to both hide/show</p>
+              <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+             </td>
+           </tr>
+           <tr>
+             <td>container</td>
+             <td>string | false</td>
+             <td>false</td>
+             <td>
+              <p>Appends the popover to a specific element <code>container: 'body'</code></p>
+             </td>
+           </tr>
+          </tbody>
+        </table>
+        <div class="alert alert-info">
+          <strong>Heads up!</strong>
+          Options for individual popovers can alternatively be specified through the use of data attributes.
+        </div>
+
+        <h3>Markup</h3>
+        <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
+
+        <h3>Methods</h3>
+        <h4>$().popover(options)</h4>
+        <p>Initializes popovers for an element collection.</p>
+
+        <h4>.popover('show')</h4>
+        <p>Reveals an elements popover.</p>
+        {% highlight js linenos %}$('#element').popover('show'){% endhighlight %}
+
+        <h4>.popover('hide')</h4>
+        <p>Hides an elements popover.</p>
+        {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}
+
+        <h4>.popover('toggle')</h4>
+        <p>Toggles an elements popover.</p>
+        {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}
+
+        <h4>.popover('destroy')</h4>
+        <p>Hides and destroys an element's popover.</p>
+        {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}
+      </section>
+
+
+
+      <!-- Alert
+      ================================================== -->
+      <section id="alerts">
+        <div class="page-header">
+          <h1>Alert messages <small>bootstrap-alert.js</small></h1>
+        </div>
+
+
+        <h2>Example alerts</h2>
+        <p>Add dismiss functionality to all alert messages with this plugin.</p>
+        <div class="bs-docs-example">
+          <div class="alert fade in">
+            <button type="button" class="close" data-dismiss="alert">&times;</button>
+            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
+          </div>
+        </div><!-- /example -->
+
+        <div class="bs-docs-example">
+          <div class="alert alert-block alert-error fade in">
+            <button type="button" class="close" data-dismiss="alert">&times;</button>
+            <h4 class="alert-heading">Oh snap! You got an error!</h4>
+            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+            <p>
+              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
+            </p>
+          </div>
+        </div><!-- /example -->
+
+
+        <hr class="bs-docs-separator">
+
+
+        <h2>Usage</h2>
+        <p>Enable dismissal of an alert via JavaScript:</p>
+        {% highlight js linenos %}$(".alert").alert(){% endhighlight %}
+
+        <h3>Markup</h3>
+        <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
+        {% highlight html linenos %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
+
+        <h3>Methods</h3>
+
+        <h4>$().alert()</h4>
+        <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+
+        <h4>.alert('close')</h4>
+        <p>Closes an alert.</p>
+        {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}
+
+
+        <h3>Events</h3>
+        <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
+        <table class="table table-bordered table-striped">
+          <thead>
+           <tr>
+             <th style="width: 150px;">Event</th>
+             <th>Description</th>
+           </tr>
+          </thead>
+          <tbody>
+           <tr>
+             <td>close</td>
+             <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+           </tr>
+           <tr>
+             <td>closed</td>
+             <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+           </tr>
+          </tbody>
+        </table>
+{% highlight js linenos %}
+$('#my-alert').bind('closed', function () {
+  // do something…
+})
+{% endhighlight %}
+      </section>
+
+
+
+          <!-- Buttons
+          ================================================== -->
+          <section id="buttons">
+            <div class="page-header">
+              <h1>Buttons <small>bootstrap-button.js</small></h1>
+            </div>
+
+            <h2>Example uses</h2>
+            <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+
+            <h4>Stateful</h4>
+            <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
+                Loading state
+              </button>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
+  Loading state
+</button>
+{% endhighlight %}
+
+            <h4>Single toggle</h4>
+            <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+{% endhighlight %}
+
+            <h4>Checkbox</h4>
+            <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <div class="btn-group" data-toggle="buttons-checkbox">
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 1
+                </label>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 2
+                </label>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 3
+                </label>
+              </div>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<div class="btn-group" data-toggle="buttons-checkbox">
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 1
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 2
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 3
+  </label>
+</div>
+{% endhighlight %}
+
+            <h4>Radio</h4>
+            <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <div class="btn-group" data-toggle="buttons-radio">
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option1"> Option 1
+                </label>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option2"> Option 2
+                </label>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option3"> Option 3
+                </label>
+              </div>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<div class="btn-group" data-toggle="buttons-radio">
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option1"> Option 1
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option2"> Option 2
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option3"> Option 3
+  </label>
+</div>
+{% endhighlight %}
+
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>Usage</h2>
+            <p>Enable buttons via JavaScript:</p>
+{% highlight js linenos %}
+$('.nav-tabs').button()
+{% endhighlight %}
+
+            <h3>Markup</h3>
+            <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
+
+            <h3>Options</h3>
+            <p><em>None</em></p>
+
+            <h3>Methods</h3>
+
+            <h4>$().button('toggle')</h4>
+            <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
+            <div class="alert alert-info">
+              <strong>Heads up!</strong>
+              You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
+            </div>
+{% highlight html linenos %}
+<button type="button" class="btn" data-toggle="button">...</button>
+{% endhighlight %}
+
+            <h4>$().button('loading')</h4>
+            <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
+            </p>
+{% highlight html linenos %}
+<button type="button" class="btn" data-loading-text="loading stuff...">...</button>
+{% endhighlight %}
+
+            <div class="alert alert-info">
+              <strong>Heads up!</strong>
+              <a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
+            </div>
+
+            <h4>$().button('reset')</h4>
+            <p>Resets button state - swaps text to original text.</p>
+
+            <h4>$().button(string)</h4>
+            <p>Resets button state - swaps text to any data defined text state.</p>
+{% highlight html linenos %}
+<button type="button" class="btn" data-complete-text="finished!" >...</button>
+<script>
+  $('.btn').button('complete')
+</script>
+{% endhighlight %}
+          </section>
+
+
+
+          <!-- Collapse
+          ================================================== -->
+          <section id="collapse">
+            <div class="page-header">
+              <h1>Collapse <small>bootstrap-collapse.js</small></h1>
+            </div>
+
+            <h3>About</h3>
+            <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
+            <p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
+
+            <h2>Example accordion</h2>
+            <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+
+            <div class="bs-docs-example">
+              <div class="accordion" id="accordion2">
+                <div class="accordion-group">
+                  <div class="accordion-heading">
+                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+                      Collapsible Group Item #1
+                    </a>
+                  </div>
+                  <div id="collapseOne" class="accordion-body collapse in">
+                    <div class="accordion-inner">
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-group">
+                  <div class="accordion-heading">
+                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+                      Collapsible Group Item #2
+                    </a>
+                  </div>
+                  <div id="collapseTwo" class="accordion-body collapse">
+                    <div class="accordion-inner">
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-group">
+                  <div class="accordion-heading">
+                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+                      Collapsible Group Item #3
+                    </a>
+                  </div>
+                  <div id="collapseThree" class="accordion-body collapse">
+                    <div class="accordion-inner">
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<div class="accordion" id="accordion2">
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+        Collapsible Group Item #1
+      </a>
+    </div>
+    <div id="collapseOne" class="accordion-body collapse in">
+      <div class="accordion-inner">
+        ...
+      </div>
+    </div>
+  </div>
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+        Collapsible Group Item #2
+      </a>
+    </div>
+    <div id="collapseTwo" class="accordion-body collapse">
+      <div class="accordion-inner">
+        ...
+      </div>
+    </div>
+  </div>
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+        Collapsible Group Item #3
+      </a>
+    </div>
+    <div id="collapseThree" class="accordion-body collapse">
+      <div class="accordion-inner">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+            <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
+{% highlight html linenos %}
+<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+  simple collapsible
+</button>
+
+<div id="demo" class="collapse in">...</div>
+{% endhighlight %}
+
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>Usage</h2>
+
+            <h3>Via data attributes</h3>
+            <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
+            <p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
+
+            <h3>Via JavaScript</h3>
+            <p>Enable manually with:</p>
+{% highlight js linenos %}
+$(".collapse").collapse()
+{% endhighlight %}
+
+            <h3>Options</h3>
+            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 100px;">Name</th>
+                 <th style="width: 50px;">type</th>
+                 <th style="width: 50px;">default</th>
+                 <th>description</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>parent</td>
+                 <td>selector</td>
+                 <td>false</td>
+                 <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
+               </tr>
+               <tr>
+                 <td>toggle</td>
+                 <td>boolean</td>
+                 <td>true</td>
+                 <td>Toggles the collapsible element on invocation</td>
+               </tr>
+              </tbody>
+            </table>
+
+
+            <h3>Methods</h3>
+
+            <h4>.collapse(options)</h4>
+            <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+{% highlight js linenos %}
+$('#myCollapsible').collapse({
+  toggle: false
+})
+{% endhighlight %}
+
+            <h4>.collapse('toggle')</h4>
+            <p>Toggles a collapsible element to shown or hidden.</p>
+
+            <h4>.collapse('show')</h4>
+            <p>Shows a collapsible element.</p>
+
+            <h4>.collapse('hide')</h4>
+            <p>Hides a collapsible element.</p>
+
+            <h3>Events</h3>
+            <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 150px;">Event</th>
+                 <th>Description</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>show</td>
+                 <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+               </tr>
+               <tr>
+                 <td>shown</td>
+                 <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
+               </tr>
+               <tr>
+                 <td>hide</td>
+                 <td>
+                  This event is fired immediately when the <code>hide</code> method has been called.
+                 </td>
+               </tr>
+               <tr>
+                 <td>hidden</td>
+                 <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
+               </tr>
+              </tbody>
+            </table>
+{% highlight js linenos %}
+$('#myCollapsible').on('hidden', function () {
+  // do something…
+})
+{% endhighlight %}
+          </section>
+
+
+
+           <!-- Carousel
+          ================================================== -->
+          <section id="carousel">
+            <div class="page-header">
+              <h1>Carousel <small>bootstrap-carousel.js</small></h1>
+            </div>
+
+            <h2>Examples</h2>
+            <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
+            <div class="bs-docs-example">
+              <div class="carousel slide bs-docs-carousel-example">
+                <ol class="carousel-indicators">
+                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                  <li data-target="#myCarousel" data-slide-to="1"></li>
+                  <li data-target="#myCarousel" data-slide-to="2"></li>
+                </ol>
+                <div class="carousel-inner">
+                  <div class="item active">
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
+                  </div>
+                  <div class="item">
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
+                  </div>
+                  <div class="item">
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
+                  </div>
+                </div>
+                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                  <span class="glyphicon glyphicon-chevron-left"></span>
+                </a>
+                <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                  <span class="glyphicon glyphicon-chevron-right"></span>
+                </a>
+              </div>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<div class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+    <li data-target="#myCarousel" data-slide-to="1"></li>
+    <li data-target="#myCarousel" data-slide-to="2"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner">
+    <div class="item active">
+      <img src="..." alt="">
+      <div class="carousel-caption">
+        ...
+      </div>
+    </div>
+    ...
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left"></span>
+  </a>
+  <a class="right carousel-control" href="#myCarousel" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+</div>
+{% endhighlight %}
+
+            <h3>Optional captions</h3>
+            <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
+            <p><strong>Captions are hidden in mobile views</strong> and shown with viewports greater than 768px wide.</p>
+            <div class="bs-docs-example">
+              <div class="carousel slide bs-docs-carousel-example">
+                <ol class="carousel-indicators">
+                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                  <li data-target="#myCarousel" data-slide-to="1"></li>
+                  <li data-target="#myCarousel" data-slide-to="2"></li>
+                </ol>
+                <div class="carousel-inner">
+                  <div class="item active">
+                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+                    <div class="carousel-caption">
+                      <h3>First slide label</h3>
+                      <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
+                    </div>
+                  </div>
+                  <div class="item">
+                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+                    <div class="carousel-caption">
+                      <h3>Second slide label</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
+                    </div>
+                  </div>
+                  <div class="item">
+                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+                    <div class="carousel-caption">
+                      <h3>Third slide label</h3>
+                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+                    </div>
+                  </div>
+                </div>
+                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                  <span class="glyphicon glyphicon-chevron-left"></span>
+                </a>
+                <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                  <span class="glyphicon glyphicon-chevron-right"></span>
+                </a>
+              </div>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<div class="item active">
+  <img src="..." alt="">
+  <div class="carousel-caption">
+    <h3>...</h3>
+    <p>...</p>
+  </div>
+</div>
+{% endhighlight %}
+
+
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>Usage</h2>
+
+            <h3>Via data attributes</h3>
+            <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
+
+            <h3>Via JavaScript</h3>
+            <p>Call carousel manually with:</p>
+{% highlight js linenos %}
+$('.carousel').carousel()
+{% endhighlight %}
+
+            <h3>Options</h3>
+            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 100px;">Name</th>
+                 <th style="width: 50px;">type</th>
+                 <th style="width: 50px;">default</th>
+                 <th>description</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>interval</td>
+                 <td>number</td>
+                 <td>5000</td>
+                 <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+               </tr>
+               <tr>
+                 <td>pause</td>
+                 <td>string</td>
+                 <td>"hover"</td>
+                 <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
+               </tr>
+              </tbody>
+            </table>
+
+            <h3>Methods</h3>
+
+            <h4>.carousel(options)</h4>
+            <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
+{% highlight html linenos %}
+$('.carousel').carousel({
+  interval: 2000
+})
+{% endhighlight %}
+
+            <h4>.carousel('cycle')</h4>
+            <p>Cycles through the carousel items from left to right.</p>
+
+            <h4>.carousel('pause')</h4>
+            <p>Stops the carousel from cycling through items.</p>
+
+            <h4>.carousel(number)</h4>
+            <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
+
+            <h4>.carousel('prev')</h4>
+            <p>Cycles to the previous item.</p>
+
+            <h4>.carousel('next')</h4>
+            <p>Cycles to the next item.</p>
+
+            <h3>Events</h3>
+            <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 150px;">Event</th>
+                 <th>Description</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>slide</td>
+                 <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+               </tr>
+               <tr>
+                 <td>slid</td>
+                 <td>This event is fired when the carousel has completed its slide transition.</td>
+               </tr>
+              </tbody>
+            </table>
+          </section>
+
+
+
+          <!-- Typeahead
+          ================================================== -->
+          <section id="typeahead">
+            <div class="page-header">
+              <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
+            </div>
+
+
+            <h2>Example</h2>
+            <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
+            <div class="bs-docs-example" style="background-color: #f5f5f5;">
+              <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+            </div><!-- /example -->
+{% highlight html linenos %}
+<input type="text" data-provide="typeahead">
+{% endhighlight %}
+
+            <p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>Usage</h2>
+
+            <h3>Via data attributes</h3>
+            <p>Add data attributes to register an element with typeahead functionality as shown in the example above.</p>
+
+            <h3>Via JavaScript</h3>
+            <p>Call the typeahead manually with:</p>
+{% highlight js linenos %}
+$('.typeahead').typeahead()
+{% endhighlight %}
+
+            <h3>Options</h3>
+            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-source=""</code>.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 100px;">Name</th>
+                 <th style="width: 50px;">type</th>
+                 <th style="width: 100px;">default</th>
+                 <th>description</th>
+               </tr>
+              </thead>
+              <tbody>
+                <tr>
+                 <td>source</td>
+                 <td>array, function</td>
+                 <td>[ ]</td>
+                 <td>The data source to query against. May be an array of strings or a function. The function is passed two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
+               </tr>
+               <tr>
+                 <td>items</td>
+                 <td>number</td>
+                 <td>8</td>
+                 <td>The max number of items to display in the dropdown.</td>
+               </tr>
+               <tr>
+                 <td>minLength</td>
+                 <td>number</td>
+                 <td>1</td>
+                 <td>The minimum character length needed before triggering autocomplete suggestions</td>
+               </tr>
+               <tr>
+                 <td>matcher</td>
+                 <td>function</td>
+                 <td>case insensitive</td>
+                 <td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.</td>
+               </tr>
+               <tr>
+                 <td>sorter</td>
+                 <td>function</td>
+                 <td>exact match,<br> case sensitive,<br> case insensitive</td>
+                 <td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>
+               </tr>
+               <tr>
+                 <td>updater</td>
+                 <td>function</td>
+                 <td>returns selected item</td>
+                 <td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.</td>
+               </tr>
+               <tr>
+                 <td>highlighter</td>
+                 <td>function</td>
+                 <td>highlights all default matches</td>
+                 <td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
+               </tr>
+              </tbody>
+            </table>
+
+            <h3>Methods</h3>
+            <h4>.typeahead(options)</h4>
+            <p>Initializes an input with a typeahead.</p>
+          </section>
+
+
+
+          <!-- Affix
+          ================================================== -->
+          <section id="affix">
+            <div class="page-header">
+              <h1>Affix <small>bootstrap-affix.js</small></h1>
+            </div>
+
+            <h2>Example</h2>
+            <p>The subnavigation on the left is a live demo of the affix plugin.</p>
+
+            <hr class="bs-docs-separator">
+
+            <h2>Usage</h2>
+
+            <h3>Via data attributes</h3>
+            <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
+
+{% highlight html linenos %}
+<div data-spy="affix" data-offset-top="200">...</div>
+{% endhighlight %}
+
+            <div class="alert alert-info">
+              <strong>Heads up!</strong>
+              You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
+            </div>
+
+            <h3>Via JavaScript</h3>
+            <p>Call the affix plugin via JavaScript:</p>
+{% highlight js linenos %}
+$('#navbar').affix()
+{% endhighlight %}
+
+            <h3>Methods</h3>
+            <h4>.affix('refresh')</h4>
+            <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
+{% highlight js linenos %}
+$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
+{% endhighlight %}
+
+          <h3>Options</h3>
+          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
+
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 100px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>offset</td>
+               <td>number | function | object</td>
+               <td>10</td>
+               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
+             </tr>
+            </tbody>
+          </table>
+        </section>
+
+</div><!-- /.container -->
diff --git a/docs/getting-started.html b/docs/getting-started.html
deleted file mode 100644
index a2b3ba514..000000000
--- a/docs/getting-started.html
+++ /dev/null
@@ -1,270 +0,0 @@
----
-layout: default
-title: Getting started
-description: Overview of the project, its contents, and how to get started with a simple template.
----
-
-<div class="bs-docs-sidebar">
-  <h5 class="bs-docs-sidenav-heading">Getting started</h5>
-  <ul class="nav bs-docs-sidenav">
-    <li><a href="#download-bootstrap">Download</a></li>
-    <li><a href="#file-structure">File structure</a></li>
-    <li><a href="#contents">What's included</a></li>
-    <li><a href="#html-template">HTML template</a></li>
-    <li><a href="#examples">Examples</a></li>
-    <li><a href="#what-next">What next?</a></li>
-  </ul>
-</div>
-
-<div class="container bs-docs-container">
-
-      <!-- Download
-      ================================================== -->
-      <section id="download-bootstrap">
-        <div class="page-header">
-          <h1>1. Download</h1>
-        </div>
-        <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
-
-        <div class="row">
-          <div class="col-span-6">
-            <h2>Compiled</h2>
-            <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
-            <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-          </div>
-          <div class="col-span-6">
-            <h2>Source</h2>
-            <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
-            <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
-          </div>
-          <div class="col-span-6">
-            <h2>Bower</h2>
-            <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
-            {% highlight bash %}bower install bootstrap{% endhighlight %}
-          </div>
-        </div>
-      </section>
-
-
-
-      <!-- File structure
-      ================================================== -->
-      <section id="file-structure">
-        <div class="page-header">
-          <h1>2. File structure</h1>
-        </div>
-        <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
-        <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
-
-{% highlight bash %}
-  bootstrap/
-  ├── css/
-  │   ├── bootstrap.css
-  │   ├── bootstrap.min.css
-  ├── js/
-  │   ├── bootstrap.js
-  │   ├── bootstrap.min.js
-  └── fonts/
-      ├── glyphiconshalflings-regular.eot
-      ├── glyphiconshalflings-regular.otf
-      ├── glyphiconshalflings-regular.svg
-      ├── glyphiconshalflings-regular.ttf
-      └── glyphiconshalflings-regular.woff
-{% endhighlight %}
-
-        <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
-        <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
-      </section>
-
-
-
-      <!-- Contents
-      ================================================== -->
-      <section id="contents">
-        <div class="page-header">
-          <h1>3. What's included</h1>
-        </div>
-        <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
-
-        <h2>Docs sections</h2>
-        <p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
-
-        <h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
-        <p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
-        <h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
-        <p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
-        <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
-        <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
-      </section>
-
-
-
-      <!-- HTML template
-      ================================================== -->
-      <section id="html-template">
-        <div class="page-header">
-          <h1>4. Basic HTML template</h1>
-        </div>
-        <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
-        <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
-
-{% highlight html linenos %}
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Bootstrap 101 Template</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-    <script src="http://code.jquery.com/jquery.js"></script>
-  </body>
-</html>
-{% endhighlight %}
-
-        <p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
-
-{% highlight html linenos %}
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Bootstrap 101 Template</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Bootstrap -->
-    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-    <script src="http://code.jquery.com/jquery.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-  </body>
-</html>
-{% endhighlight %}
-
-        <p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
-
-        <hr>
-
-        <h4>Responsive features in IE8</h4>
-        <p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
-<pre class="prettyprint linenums">
-&lt;!--[if lt IE 9]&gt;
-  &lt;script src="/assets/js/respond/respond.js"&gt;&lt;/script&gt;
-&lt;![endif]--&gt;
-</pre>
-      </section>
-
-
-
-      <!-- Examples
-      ================================================== -->
-      <section id="examples">
-        <div class="page-header">
-          <h1>5. Examples</h1>
-        </div>
-        <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
-        <div class="row bs-docs-examples">
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/starter-template/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
-            </a>
-            <h4>Starter template</h4>
-            <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
-            </a>
-            <h4>Basic marketing site</h4>
-            <p>Featuring a hero unit for a primary message and three supporting elements.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
-            </a>
-            <h4>Narrow marketing</h4>
-            <p>Slim, lightweight marketing template for small projects or teams.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
-            </a>
-            <h4>Justified nav</h4>
-            <p>Marketing page with equal-width navigation links in a modified navbar.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/signin/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
-            </a>
-            <h4>Sign in</h4>
-            <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
-            </a>
-            <h4>Sticky footer</h4>
-            <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
-            </a>
-            <h4>Sticky footer w/ navbar</h4>
-            <p>Add a fixed navbar to the default sticky footer template.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/carousel/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
-            </a>
-            <h4>Carousel jumbotron</h4>
-            <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
-          </div>
-
-
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
-            </a>
-            <h4>Navbar</h4>
-            <p>Basic template for showcasing how the navbar works.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
-            </a>
-            <h4>Static top navbar</h4>
-            <p>Basic template for showcasing the static navbar variation.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
-            </a>
-            <h4>Fixed top navbar</h4>
-            <p>Basic template for showcasing the fixed navbar variation.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/grid/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-.png" alt="">
-            </a>
-            <h4>Grid examples</h4>
-            <p></p>
-          </div>
-        </div>
-      </section>
-
-
-
-
-      <!-- Next
-      ================================================== -->
-      <section id="what-next">
-        <div class="page-header">
-          <h1>What next?</h1>
-        </div>
-        <p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
-        <a class="btn btn-large btn-primary" href="./css.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
-        <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
-      </section>
-
-</div><!-- /.container -->
diff --git a/docs/index.html b/docs/index.html
index d2aece152..f8d72f3f2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: home
 title: Bootstrap
 ---
 
@@ -9,6 +9,7 @@ title: Bootstrap
     <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
     <p>
       <a href="assets/bootstrap.zip" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a>
+      <a href="./docs/" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Docs', 'View docs']);">View docs</a>
     </p>
     <ul class="masthead-links">
       <li>
@@ -22,7 +23,7 @@ title: Bootstrap
   </div>
 </div>
 
-<div class="container bs-docs-container">
+<div class="container bs-home-container">
 
   <div class="bs-docs-marketing">
 
diff --git a/docs/javascript.html b/docs/javascript.html
deleted file mode 100644
index f5388461b..000000000
--- a/docs/javascript.html
+++ /dev/null
@@ -1,1847 +0,0 @@
----
-layout: default
-title: JavaScript plugins
----
-
-<div class="bs-docs-sidebar">
-  <h5 class="bs-docs-sidenav-heading">JavaScript plugins</h5>
-  <ul class="nav bs-docs-sidenav">
-    <li><a href="#overview">Overview</a></li>
-    <li><a href="#transitions">Transitions</a></li>
-    <li><a href="#modals">Modal</a></li>
-    <li><a href="#dropdowns">Dropdown</a></li>
-    <li><a href="#scrollspy">Scrollspy</a></li>
-    <li><a href="#tabs">Tab</a></li>
-    <li><a href="#tooltips">Tooltip</a></li>
-    <li><a href="#popovers">Popover</a></li>
-    <li><a href="#alerts">Alert</a></li>
-    <li><a href="#buttons">Button</a></li>
-    <li><a href="#collapse">Collapse</a></li>
-    <li><a href="#carousel">Carousel</a></li>
-    <li><a href="#typeahead">Typeahead</a></li>
-    <li><a href="#affix">Affix</a></li>
-  </ul>
-</div>
-
-  <div class="container bs-docs-container">
-
-        <!-- Overview
-        ================================================== -->
-        <section id="overview">
-          <div class="page-header">
-            <h1>JavaScript in Bootstrap</h1>
-          </div>
-
-          <h3>Individual or compiled</h3>
-          <p>Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
-
-          <h3>Data attributes</h3>
-          <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
-
-          <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
-{% highlight js linenos %}
-$('body').off('.data-api')
-{% endhighlight %}
-
-          <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
-{% highlight js linenos %}
-$('body').off('.alert.data-api')
-{% endhighlight %}
-
-          <h3>Programmatic API</h3>
-          <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
-{% highlight js linenos %}
-$(".btn.danger").button("toggle").addClass("fat")
-{% endhighlight %}
-
-          <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
-{% highlight js linenos %}
-$("#myModal").modal()                      // initialized with defaults
-$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
-$("#myModal").modal('show')                // initializes and invokes show immediately</p>
-{% endhighlight %}
-
-          <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
-
-          <h3>No conflict</h3>
-          <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
-{% highlight js linenos %}
-var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
-{% endhighlight %}
-
-
-          <h3>Events</h3>
-          <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-          <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
-{% highlight js linenos %}
-$('#myModal').on('show', function (e) {
-    if (!data) return e.preventDefault() // stops modal from being shown
-})
-{% endhighlight %}
-
-        </section>
-
-
-
-        <!-- Transitions
-        ================================================== -->
-        <section id="transitions">
-          <div class="page-header">
-            <h1>Transitions <small>bootstrap-transition.js</small></h1>
-          </div>
-          <h3>About transitions</h3>
-          <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
-          <h3>Use cases</h3>
-          <p>A few examples of the transition plugin:</p>
-          <ul>
-            <li>Sliding or fading in modals</li>
-            <li>Fading out tabs</li>
-            <li>Fading out alerts</li>
-            <li>Sliding carousel panes</li>
-          </ul>
-
-          <!-- Ideas: include docs for .fade.in, .slide.in, etc -->
-        </section>
-
-
-
-        <!-- Modal
-        ================================================== -->
-        <section id="modals">
-          <div class="page-header">
-            <h1>Modals <small>bootstrap-modal.js</small></h1>
-          </div>
-
-
-          <h2>Examples</h2>
-          <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
-
-          <h3>Static example</h3>
-          <p>A rendered modal with header, body, and set of actions in the footer.</p>
-          <div class="bs-docs-example bs-docs-example-modal">
-            <div class="modal">
-              <div class="modal-dialog">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title">Modal title</h4>
-                  </div>
-                  <div class="modal-body">
-                    <p>One fine body&hellip;</p>
-                  </div>
-                  <div class="modal-footer">
-                    <a href="#" class="btn">Close</a>
-                    <a href="#" class="btn btn-primary">Save changes</a>
-                  </div>
-                </div><!-- /.modal-content -->
-              </div><!-- /.modal-dalog -->
-            </div><!-- /.modal -->
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="modal">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <p>One fine body&hellip;</p>
-      </div>
-      <div class="modal-footer">
-        <a href="#" class="btn">Close</a>
-        <a href="#" class="btn btn-primary">Save changes</a>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dalog -->
-</div><!-- /.modal -->
-{% endhighlight %}
-
-          <h3>Live demo</h3>
-          <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
-          <!-- sample modal content -->
-          <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-              <div class="modal-content">
-
-                <div class="modal-header">
-                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                  <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
-                </div>
-                <div class="modal-body">
-                  <h4>Text in a modal</h4>
-                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
-                  <h4>Popover in a modal</h4>
-                  <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
-
-                  <h4>Tooltips in a modal</h4>
-                  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
-
-                  <hr>
-
-                  <h4>Overflowing text to show optional scrollbar</h4>
-                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                </div>
-                <div class="modal-footer">
-                  <button class="btn" data-dismiss="modal">Close</button>
-                  <button class="btn btn-primary">Save changes</button>
-                </div>
-
-              </div><!-- /.modal-content -->
-            </div><!-- /.modal-dalog -->
-          </div><!-- /.modal -->
-
-          <div class="bs-docs-example" style="padding-bottom: 24px;">
-            <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
-          </div><!-- /example -->
-{% highlight html linenos %}
-<div class="modal">
-  <!-- Button trigger modal -->
-  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
-
-  <!-- Modal -->
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        ...
-      </div>
-      <div class="modal-footer">
-        <a href="#" class="btn">Close</a>
-        <a href="#" class="btn btn-primary">Save changes</a>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dalog -->
-</div><!-- /.modal -->
-{% endhighlight %}
-
-
-
-          <h2>Usage</h2>
-
-          <h3>Via data attributes</h3>
-          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
-{% highlight html linenos %}
-<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
-{% endhighlight %}
-
-          <h3>Via JavaScript</h3>
-          <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
-          {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
-
-          <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 100px;">Name</th>
-               <th style="width: 50px;">type</th>
-               <th style="width: 50px;">default</th>
-               <th>description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>backdrop</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
-             </tr>
-             <tr>
-               <td>keyboard</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Closes the modal when escape key is pressed</td>
-             </tr>
-             <tr>
-               <td>show</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Shows the modal when initialized.</td>
-             </tr>
-             <tr>
-               <td>remote</td>
-               <td>path</td>
-               <td>false</td>
-               <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
-{% highlight html linenos %}
-<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
-{% endhighlight %}
-             </tr>
-            </tbody>
-          </table>
-
-          <h3>Methods</h3>
-
-          <h4>.modal(options)</h4>
-          <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
-{% highlight js linenos %}
-$('#myModal').modal({
-  keyboard: false
-})
-{% endhighlight %}
-
-          <h4>.modal('toggle')</h4>
-          <p>Manually toggles a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
-
-          <h4>.modal('show')</h4>
-          <p>Manually opens a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
-
-          <h4>.modal('hide')</h4>
-          <p>Manually hides a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
-
-          <h3>Events</h3>
-          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 150px;">Event</th>
-               <th>Description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>show</td>
-               <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-             </tr>
-             <tr>
-               <td>shown</td>
-               <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
-             </tr>
-             <tr>
-               <td>hide</td>
-               <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-             </tr>
-             <tr>
-               <td>hidden</td>
-               <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
-             </tr>
-            </tbody>
-          </table>
-{% highlight js linenos %}
-$('#myModal').on('hidden', function () {
-  // do something…
-})
-{% endhighlight %}
-        </section>
-
-
-
-        <!-- Dropdowns
-        ================================================== -->
-        <section id="dropdowns">
-          <div class="page-header">
-            <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
-          </div>
-
-
-          <h2>Examples</h2>
-          <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
-
-          <h3>Within a navbar</h3>
-          <div class="bs-docs-example">
-            <div id="navbar-example" class="navbar navbar-static">
-              <div class="navbar-inner">
-                <div class="container" style="width: auto;">
-                  <a class="navbar-brand" href="#">Project Name</a>
-                  <ul class="nav" role="navigation">
-                    <li class="dropdown">
-                      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                  <ul class="nav pull-right">
-                    <li id="fat-menu" class="dropdown">
-                      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div> <!-- /navbar-example -->
-          </div> <!-- /example -->
-
-          <h3>Within tabs</h3>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Regular link</a></li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-                <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                </ul>
-              </li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
-                <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                </ul>
-              </li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
-                <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-                </ul>
-              </li>
-            </ul> <!-- /tabs -->
-          </div> <!-- /example -->
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Usage</h2>
-
-          <h3>Via data attributes</h3>
-          <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
-{% highlight html linenos %}
-<div class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-    ...
-  </ul>
-</div>
-{% endhighlight %}
-          <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
-{% highlight html linenos %}
-<div class="dropdown">
-  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-    Dropdown <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-    ...
-  </ul>
-</div>
-{% endhighlight %}
-
-          <h3>Via JavaScript</h3>
-          <p>Call the dropdowns via JavaScript:</p>
-{% highlight js linenos %}
-$('.dropdown-toggle').dropdown()
-{% endhighlight %}
-
-          <h3>Options</h3>
-          <p><em>None</em></p>
-
-          <h3>Methods</h3>
-          <h4>$().dropdown('toggle')</h4>
-          <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
-        </section>
-
-
-
-        <!-- ScrollSpy
-        ================================================== -->
-        <section id="scrollspy">
-          <div class="page-header">
-            <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
-          </div>
-
-
-          <h2>Example in navbar</h2>
-          <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
-          <div class="bs-docs-example">
-            <div id="navbarExample" class="navbar navbar-static">
-              <div class="navbar-inner">
-                <div class="container" style="width: auto;">
-                  <a class="navbar-brand" href="#">Project Name</a>
-                  <ul class="nav">
-                    <li><a href="#fat">@fat</a></li>
-                    <li><a href="#mdo">@mdo</a></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                      <ul class="dropdown-menu">
-                        <li><a href="#one">one</a></li>
-                        <li><a href="#two">two</a></li>
-                        <li class="divider"></li>
-                        <li><a href="#three">three</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
-              <h4 id="fat">@fat</h4>
-              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
-              <h4 id="mdo">@mdo</h4>
-              <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
-              <h4 id="one">one</h4>
-              <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
-              <h4 id="two">two</h4>
-              <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
-              <h4 id="three">three</h4>
-              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
-              <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
-              </p>
-            </div>
-          </div><!-- /example -->
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Usage</h2>
-
-          <h3>Via data attributes</h3>
-          <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
-{% highlight html linenos %}
-<body data-spy="scroll" data-target=".navbar">
-  ...
-</body>
-{% endhighlight %}
-
-          <h3>Via JavaScript</h3>
-          <p>Call the scrollspy via JavaScript:</p>
-{% highlight js linenos %}
-$('.navbar').scrollspy()
-{% endhighlight %}
-
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
-          </div>
-
-          <h3>Methods</h3>
-          <h4>.scrollspy('refresh')</h4>
-          <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
-{% highlight js linenos %}
-$('[data-spy="scroll"]').each(function () {
-  var $spy = $(this).scrollspy('refresh')
-});
-{% endhighlight %}
-
-
-          <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 100px;">Name</th>
-               <th style="width: 100px;">type</th>
-               <th style="width: 50px;">default</th>
-               <th>description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>offset</td>
-               <td>number</td>
-               <td>10</td>
-               <td>Pixels to offset from top when calculating position of scroll.</td>
-             </tr>
-            </tbody>
-          </table>
-
-          <h3>Events</h3>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 150px;">Event</th>
-               <th>Description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>activate</td>
-               <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
-            </tr>
-            </tbody>
-          </table>
-        </section>
-
-
-
-        <!-- Tabs
-        ================================================== -->
-        <section id="tabs">
-          <div class="page-header">
-            <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
-          </div>
-
-
-          <h2>Example tabs</h2>
-          <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
-          <div class="bs-docs-example bs-docs-example-tabs">
-            <ul id="myTab" class="nav nav-tabs">
-              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-              <li><a href="#profile" data-toggle="tab">Profile</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
-                  <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
-                </ul>
-              </li>
-            </ul>
-            <div id="myTabContent" class="tab-content">
-              <div class="tab-pane fade in active" id="home">
-                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
-              </div>
-              <div class="tab-pane fade" id="profile">
-                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
-              </div>
-              <div class="tab-pane fade" id="dropdown1">
-                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
-              </div>
-              <div class="tab-pane fade" id="dropdown2">
-                <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
-              </div>
-            </div>
-          </div><!-- /example -->
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Usage</h2>
-          <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
-{% highlight js linenos %}
-$('#myTab a').click(function (e) {
-  e.preventDefault();
-  $(this).tab('show');
-})
-{% endhighlight %}
-
-          <p>You can activate individual tabs in several ways:</p>
-{% highlight js linenos %}
-$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
-$('#myTab a:first').tab('show'); // Select first tab
-$('#myTab a:last').tab('show'); // Select last tab
-$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
-{% endhighlight %}
-
-          <h3>Markup</h3>
-          <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
-{% highlight html linenos %}
-<ul class="nav nav-tabs">
-  <li><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
-</ul>
-{% endhighlight %}
-
-          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
-
-          <h3>Methods</h3>
-          <h4>$().tab</h4>
-          <p>
-            Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
-          </p>
-{% highlight html linenos %}
-<ul class="nav nav-tabs" id="myTab">
-  <li class="active"><a href="#home">Home</a></li>
-  <li><a href="#profile">Profile</a></li>
-  <li><a href="#messages">Messages</a></li>
-  <li><a href="#settings">Settings</a></li>
-</ul>
-
-<div class="tab-content">
-  <div class="tab-pane active" id="home">...</div>
-  <div class="tab-pane" id="profile">...</div>
-  <div class="tab-pane" id="messages">...</div>
-  <div class="tab-pane" id="settings">...</div>
-</div>
-
-<script>
-  $(function () {
-    $('#myTab a:last').tab('show');
-  })
-</script>
-{% endhighlight %}
-
-          <h3>Events</h3>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 150px;">Event</th>
-               <th>Description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>show</td>
-               <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-            </tr>
-            <tr>
-               <td>shown</td>
-               <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-             </tr>
-            </tbody>
-          </table>
-{% highlight js linenos %}
-$('a[data-toggle="tab"]').on('shown', function (e) {
-  e.target // activated tab
-  e.relatedTarget // previous tab
-})
-{% endhighlight %}
-        </section>
-
-
-        <!-- Tooltips
-        ================================================== -->
-        <section id="tooltips">
-          <div class="page-header">
-            <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
-          </div>
-
-
-          <h2>Examples</h2>
-          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
-          <p>Hover over the links below to see tooltips:</p>
-          <div class="bs-docs-example tooltip-demo">
-            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
-            </p>
-          </div><!-- /example -->
-
-          <h3>Four directions</h3>
-          <div class="bs-docs-example tooltip-demo">
-            <ul class="bs-docs-tooltip-examples">
-              <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
-              <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
-              <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
-              <li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
-            </ul>
-          </div><!-- /example -->
-
-
-          <h3>Tooltips in input groups</h3>
-          <p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Usage</h2>
-          <p>Trigger the tooltip via JavaScript:</p>
-{% highlight js linenos %}
-$('#example').tooltip(options)
-{% endhighlight %}
-
-          <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 100px;">Name</th>
-               <th style="width: 100px;">type</th>
-               <th style="width: 50px;">default</th>
-               <th>description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>animation</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>apply a css fade transition to the tooltip</td>
-             </tr>
-             <tr>
-               <td>html</td>
-               <td>boolean</td>
-               <td>false</td>
-               <td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
-             </tr>
-             <tr>
-               <td>placement</td>
-               <td>string | function</td>
-               <td>'top'</td>
-               <td>how to position the tooltip - top | bottom | left | right</td>
-             </tr>
-             <tr>
-               <td>selector</td>
-               <td>string</td>
-               <td>false</td>
-               <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
-             </tr>
-             <tr>
-               <td>title</td>
-               <td>string | function</td>
-               <td>''</td>
-               <td>default title value if `title` tag isn't present</td>
-             </tr>
-             <tr>
-               <td>trigger</td>
-               <td>string</td>
-               <td>'hover focus'</td>
-               <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
-             </tr>
-             <tr>
-               <td>delay</td>
-               <td>number | object</td>
-               <td>0</td>
-               <td>
-                <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
-                <p>If a number is supplied, delay is applied to both hide/show</p>
-                <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-               </td>
-             </tr>
-             <tr>
-               <td>container</td>
-               <td>string | false</td>
-               <td>false</td>
-               <td>
-                <p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
-               </td>
-             </tr>
-            </tbody>
-          </table>
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Options for individual tooltips can alternatively be specified through the use of data attributes.
-          </div>
-
-          <h3>Markup</h3>
-{% highlight html linenos %}
-<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
-{% endhighlight %}
-
-          <h3>Methods</h3>
-
-          <h4>$().tooltip(options)</h4>
-          <p>Attaches a tooltip handler to an element collection.</p>
-
-          <h4>.tooltip('show')</h4>
-          <p>Reveals an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}
-
-          <h4>.tooltip('hide')</h4>
-          <p>Hides an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}
-
-          <h4>.tooltip('toggle')</h4>
-          <p>Toggles an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}
-
-          <h4>.tooltip('destroy')</h4>
-          <p>Hides and destroys an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}
-        </section>
-
-
-
-      <!-- Popovers
-      ================================================== -->
-      <section id="popovers">
-        <div class="page-header">
-          <h1>Popovers <small>bootstrap-popover.js</small></h1>
-        </div>
-
-        <h2>Examples</h2>
-        <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
-
-        <h3>Static popover</h3>
-        <p>Four options are available: top, right, bottom, and left aligned.</p>
-        <div class="bs-docs-example bs-docs-example-popover">
-          <div class="popover top">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Popover top</h3>
-            <div class="popover-content">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-            </div>
-          </div>
-
-          <div class="popover right">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Popover right</h3>
-            <div class="popover-content">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-            </div>
-          </div>
-
-          <div class="popover bottom">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Popover bottom</h3>
-            <div class="popover-content">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-            </div>
-          </div>
-
-          <div class="popover left">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Popover left</h3>
-            <div class="popover-content">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-            </div>
-          </div>
-
-          <div class="clearfix"></div>
-        </div>
-        <p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
-
-        <h3>Live demo</h3>
-        <div class="bs-docs-example" style="padding-bottom: 24px;">
-          <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
-        </div>
-
-        <h4>Four directions</h4>
-        <div class="bs-docs-example tooltip-demo">
-          <ul class="bs-docs-tooltip-examples">
-            <li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
-            <li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
-            <li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
-            <li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
-          </ul>
-        </div><!-- /example -->
-
-
-        <hr class="bs-docs-separator">
-
-
-        <h2>Usage</h2>
-        <p>Enable popovers via JavaScript:</p>
-        {% highlight js linenos %}$('#example').popover(options){% endhighlight %}
-
-        <h3>Options</h3>
-        <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
-        <table class="table table-bordered table-striped">
-          <thead>
-           <tr>
-             <th style="width: 100px;">Name</th>
-             <th style="width: 100px;">type</th>
-             <th style="width: 50px;">default</th>
-             <th>description</th>
-           </tr>
-          </thead>
-          <tbody>
-           <tr>
-             <td>animation</td>
-             <td>boolean</td>
-             <td>true</td>
-             <td>apply a css fade transition to the tooltip</td>
-           </tr>
-           <tr>
-             <td>html</td>
-             <td>boolean</td>
-             <td>false</td>
-             <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
-           </tr>
-           <tr>
-             <td>placement</td>
-             <td>string | function</td>
-             <td>'right'</td>
-             <td>how to position the popover - top | bottom | left | right</td>
-           </tr>
-           <tr>
-             <td>selector</td>
-             <td>string</td>
-             <td>false</td>
-             <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
-           </tr>
-           <tr>
-             <td>trigger</td>
-             <td>string</td>
-             <td>'click'</td>
-             <td>how popover is triggered - click | hover | focus | manual</td>
-           </tr>
-           <tr>
-             <td>title</td>
-             <td>string | function</td>
-             <td>''</td>
-             <td>default title value if `title` attribute isn't present</td>
-           </tr>
-           <tr>
-             <td>content</td>
-             <td>string | function</td>
-             <td>''</td>
-             <td>default content value if `data-content` attribute isn't present</td>
-           </tr>
-           <tr>
-             <td>delay</td>
-             <td>number | object</td>
-             <td>0</td>
-             <td>
-              <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
-              <p>If a number is supplied, delay is applied to both hide/show</p>
-              <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-             </td>
-           </tr>
-           <tr>
-             <td>container</td>
-             <td>string | false</td>
-             <td>false</td>
-             <td>
-              <p>Appends the popover to a specific element <code>container: 'body'</code></p>
-             </td>
-           </tr>
-          </tbody>
-        </table>
-        <div class="alert alert-info">
-          <strong>Heads up!</strong>
-          Options for individual popovers can alternatively be specified through the use of data attributes.
-        </div>
-
-        <h3>Markup</h3>
-        <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
-
-        <h3>Methods</h3>
-        <h4>$().popover(options)</h4>
-        <p>Initializes popovers for an element collection.</p>
-
-        <h4>.popover('show')</h4>
-        <p>Reveals an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('show'){% endhighlight %}
-
-        <h4>.popover('hide')</h4>
-        <p>Hides an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}
-
-        <h4>.popover('toggle')</h4>
-        <p>Toggles an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}
-
-        <h4>.popover('destroy')</h4>
-        <p>Hides and destroys an element's popover.</p>
-        {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}
-      </section>
-
-
-
-      <!-- Alert
-      ================================================== -->
-      <section id="alerts">
-        <div class="page-header">
-          <h1>Alert messages <small>bootstrap-alert.js</small></h1>
-        </div>
-
-
-        <h2>Example alerts</h2>
-        <p>Add dismiss functionality to all alert messages with this plugin.</p>
-        <div class="bs-docs-example">
-          <div class="alert fade in">
-            <button type="button" class="close" data-dismiss="alert">&times;</button>
-            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-          </div>
-        </div><!-- /example -->
-
-        <div class="bs-docs-example">
-          <div class="alert alert-block alert-error fade in">
-            <button type="button" class="close" data-dismiss="alert">&times;</button>
-            <h4 class="alert-heading">Oh snap! You got an error!</h4>
-            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-            <p>
-              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
-            </p>
-          </div>
-        </div><!-- /example -->
-
-
-        <hr class="bs-docs-separator">
-
-
-        <h2>Usage</h2>
-        <p>Enable dismissal of an alert via JavaScript:</p>
-        {% highlight js linenos %}$(".alert").alert(){% endhighlight %}
-
-        <h3>Markup</h3>
-        <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
-        {% highlight html linenos %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
-
-        <h3>Methods</h3>
-
-        <h4>$().alert()</h4>
-        <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
-
-        <h4>.alert('close')</h4>
-        <p>Closes an alert.</p>
-        {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}
-
-
-        <h3>Events</h3>
-        <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
-        <table class="table table-bordered table-striped">
-          <thead>
-           <tr>
-             <th style="width: 150px;">Event</th>
-             <th>Description</th>
-           </tr>
-          </thead>
-          <tbody>
-           <tr>
-             <td>close</td>
-             <td>This event fires immediately when the <code>close</code> instance method is called.</td>
-           </tr>
-           <tr>
-             <td>closed</td>
-             <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
-           </tr>
-          </tbody>
-        </table>
-{% highlight js linenos %}
-$('#my-alert').bind('closed', function () {
-  // do something…
-})
-{% endhighlight %}
-      </section>
-
-
-
-          <!-- Buttons
-          ================================================== -->
-          <section id="buttons">
-            <div class="page-header">
-              <h1>Buttons <small>bootstrap-button.js</small></h1>
-            </div>
-
-            <h2>Example uses</h2>
-            <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
-
-            <h4>Stateful</h4>
-            <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
-            <div class="bs-docs-example" style="padding-bottom: 24px;">
-              <button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
-                Loading state
-              </button>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
-  Loading state
-</button>
-{% endhighlight %}
-
-            <h4>Single toggle</h4>
-            <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
-            <div class="bs-docs-example" style="padding-bottom: 24px;">
-              <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
-{% endhighlight %}
-
-            <h4>Checkbox</h4>
-            <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
-            <div class="bs-docs-example" style="padding-bottom: 24px;">
-              <div class="btn-group" data-toggle="buttons-checkbox">
-                <label class="btn btn-primary">
-                  <input type="checkbox"> Option 1
-                </label>
-                <label class="btn btn-primary">
-                  <input type="checkbox"> Option 2
-                </label>
-                <label class="btn btn-primary">
-                  <input type="checkbox"> Option 3
-                </label>
-              </div>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<div class="btn-group" data-toggle="buttons-checkbox">
-  <label class="btn btn-primary">
-    <input type="checkbox"> Option 1
-  </label>
-  <label class="btn btn-primary">
-    <input type="checkbox"> Option 2
-  </label>
-  <label class="btn btn-primary">
-    <input type="checkbox"> Option 3
-  </label>
-</div>
-{% endhighlight %}
-
-            <h4>Radio</h4>
-            <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
-            <div class="bs-docs-example" style="padding-bottom: 24px;">
-              <div class="btn-group" data-toggle="buttons-radio">
-                <label class="btn btn-primary">
-                  <input type="radio" name="options" id="option1"> Option 1
-                </label>
-                <label class="btn btn-primary">
-                  <input type="radio" name="options" id="option2"> Option 2
-                </label>
-                <label class="btn btn-primary">
-                  <input type="radio" name="options" id="option3"> Option 3
-                </label>
-              </div>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<div class="btn-group" data-toggle="buttons-radio">
-  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option1"> Option 1
-  </label>
-  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2"> Option 2
-  </label>
-  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3"> Option 3
-  </label>
-</div>
-{% endhighlight %}
-
-
-            <hr class="bs-docs-separator">
-
-
-            <h2>Usage</h2>
-            <p>Enable buttons via JavaScript:</p>
-{% highlight js linenos %}
-$('.nav-tabs').button()
-{% endhighlight %}
-
-            <h3>Markup</h3>
-            <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
-
-            <h3>Options</h3>
-            <p><em>None</em></p>
-
-            <h3>Methods</h3>
-
-            <h4>$().button('toggle')</h4>
-            <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
-            </div>
-{% highlight html linenos %}
-<button type="button" class="btn" data-toggle="button">...</button>
-{% endhighlight %}
-
-            <h4>$().button('loading')</h4>
-            <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
-            </p>
-{% highlight html linenos %}
-<button type="button" class="btn" data-loading-text="loading stuff...">...</button>
-{% endhighlight %}
-
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              <a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
-            </div>
-
-            <h4>$().button('reset')</h4>
-            <p>Resets button state - swaps text to original text.</p>
-
-            <h4>$().button(string)</h4>
-            <p>Resets button state - swaps text to any data defined text state.</p>
-{% highlight html linenos %}
-<button type="button" class="btn" data-complete-text="finished!" >...</button>
-<script>
-  $('.btn').button('complete')
-</script>
-{% endhighlight %}
-          </section>
-
-
-
-          <!-- Collapse
-          ================================================== -->
-          <section id="collapse">
-            <div class="page-header">
-              <h1>Collapse <small>bootstrap-collapse.js</small></h1>
-            </div>
-
-            <h3>About</h3>
-            <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
-            <p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
-
-            <h2>Example accordion</h2>
-            <p>Using the collapse plugin, we built a simple accordion style widget:</p>
-
-            <div class="bs-docs-example">
-              <div class="accordion" id="accordion2">
-                <div class="accordion-group">
-                  <div class="accordion-heading">
-                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-                      Collapsible Group Item #1
-                    </a>
-                  </div>
-                  <div id="collapseOne" class="accordion-body collapse in">
-                    <div class="accordion-inner">
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-                    </div>
-                  </div>
-                </div>
-                <div class="accordion-group">
-                  <div class="accordion-heading">
-                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-                      Collapsible Group Item #2
-                    </a>
-                  </div>
-                  <div id="collapseTwo" class="accordion-body collapse">
-                    <div class="accordion-inner">
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-                    </div>
-                  </div>
-                </div>
-                <div class="accordion-group">
-                  <div class="accordion-heading">
-                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-                      Collapsible Group Item #3
-                    </a>
-                  </div>
-                  <div id="collapseThree" class="accordion-body collapse">
-                    <div class="accordion-inner">
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<div class="accordion" id="accordion2">
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-        Collapsible Group Item #1
-      </a>
-    </div>
-    <div id="collapseOne" class="accordion-body collapse in">
-      <div class="accordion-inner">
-        ...
-      </div>
-    </div>
-  </div>
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-        Collapsible Group Item #2
-      </a>
-    </div>
-    <div id="collapseTwo" class="accordion-body collapse">
-      <div class="accordion-inner">
-        ...
-      </div>
-    </div>
-  </div>
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-        Collapsible Group Item #3
-      </a>
-    </div>
-    <div id="collapseThree" class="accordion-body collapse">
-      <div class="accordion-inner">
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-{% endhighlight %}
-
-            <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
-{% highlight html linenos %}
-<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
-  simple collapsible
-</button>
-
-<div id="demo" class="collapse in">...</div>
-{% endhighlight %}
-
-
-            <hr class="bs-docs-separator">
-
-
-            <h2>Usage</h2>
-
-            <h3>Via data attributes</h3>
-            <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
-            <p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
-
-            <h3>Via JavaScript</h3>
-            <p>Enable manually with:</p>
-{% highlight js linenos %}
-$(".collapse").collapse()
-{% endhighlight %}
-
-            <h3>Options</h3>
-            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
-            <table class="table table-bordered table-striped">
-              <thead>
-               <tr>
-                 <th style="width: 100px;">Name</th>
-                 <th style="width: 50px;">type</th>
-                 <th style="width: 50px;">default</th>
-                 <th>description</th>
-               </tr>
-              </thead>
-              <tbody>
-               <tr>
-                 <td>parent</td>
-                 <td>selector</td>
-                 <td>false</td>
-                 <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
-               </tr>
-               <tr>
-                 <td>toggle</td>
-                 <td>boolean</td>
-                 <td>true</td>
-                 <td>Toggles the collapsible element on invocation</td>
-               </tr>
-              </tbody>
-            </table>
-
-
-            <h3>Methods</h3>
-
-            <h4>.collapse(options)</h4>
-            <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
-{% highlight js linenos %}
-$('#myCollapsible').collapse({
-  toggle: false
-})
-{% endhighlight %}
-
-            <h4>.collapse('toggle')</h4>
-            <p>Toggles a collapsible element to shown or hidden.</p>
-
-            <h4>.collapse('show')</h4>
-            <p>Shows a collapsible element.</p>
-
-            <h4>.collapse('hide')</h4>
-            <p>Hides a collapsible element.</p>
-
-            <h3>Events</h3>
-            <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
-            <table class="table table-bordered table-striped">
-              <thead>
-               <tr>
-                 <th style="width: 150px;">Event</th>
-                 <th>Description</th>
-               </tr>
-              </thead>
-              <tbody>
-               <tr>
-                 <td>show</td>
-                 <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-               </tr>
-               <tr>
-                 <td>shown</td>
-                 <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
-               </tr>
-               <tr>
-                 <td>hide</td>
-                 <td>
-                  This event is fired immediately when the <code>hide</code> method has been called.
-                 </td>
-               </tr>
-               <tr>
-                 <td>hidden</td>
-                 <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
-               </tr>
-              </tbody>
-            </table>
-{% highlight js linenos %}
-$('#myCollapsible').on('hidden', function () {
-  // do something…
-})
-{% endhighlight %}
-          </section>
-
-
-
-           <!-- Carousel
-          ================================================== -->
-          <section id="carousel">
-            <div class="page-header">
-              <h1>Carousel <small>bootstrap-carousel.js</small></h1>
-            </div>
-
-            <h2>Examples</h2>
-            <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
-            <div class="bs-docs-example">
-              <div class="carousel slide bs-docs-carousel-example">
-                <ol class="carousel-indicators">
-                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                  <li data-target="#myCarousel" data-slide-to="1"></li>
-                  <li data-target="#myCarousel" data-slide-to="2"></li>
-                </ol>
-                <div class="carousel-inner">
-                  <div class="item active">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
-                  </div>
-                  <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
-                  </div>
-                  <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
-                  </div>
-                </div>
-                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-                  <span class="glyphicon glyphicon-chevron-left"></span>
-                </a>
-                <a class="right carousel-control" href="#myCarousel" data-slide="next">
-                  <span class="glyphicon glyphicon-chevron-right"></span>
-                </a>
-              </div>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<div class="carousel slide">
-  <!-- Indicators -->
-  <ol class="carousel-indicators">
-    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-    <li data-target="#myCarousel" data-slide-to="1"></li>
-    <li data-target="#myCarousel" data-slide-to="2"></li>
-  </ol>
-
-  <!-- Wrapper for slides -->
-  <div class="carousel-inner">
-    <div class="item active">
-      <img src="..." alt="">
-      <div class="carousel-caption">
-        ...
-      </div>
-    </div>
-    ...
-  </div>
-
-  <!-- Controls -->
-  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-    <span class="glyphicon glyphicon-chevron-left"></span>
-  </a>
-  <a class="right carousel-control" href="#myCarousel" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
-  </a>
-</div>
-{% endhighlight %}
-
-            <h3>Optional captions</h3>
-            <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
-            <p><strong>Captions are hidden in mobile views</strong> and shown with viewports greater than 768px wide.</p>
-            <div class="bs-docs-example">
-              <div class="carousel slide bs-docs-carousel-example">
-                <ol class="carousel-indicators">
-                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                  <li data-target="#myCarousel" data-slide-to="1"></li>
-                  <li data-target="#myCarousel" data-slide-to="2"></li>
-                </ol>
-                <div class="carousel-inner">
-                  <div class="item active">
-                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
-                    <div class="carousel-caption">
-                      <h3>First slide label</h3>
-                      <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
-                    </div>
-                  </div>
-                  <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
-                    <div class="carousel-caption">
-                      <h3>Second slide label</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
-                    </div>
-                  </div>
-                  <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
-                    <div class="carousel-caption">
-                      <h3>Third slide label</h3>
-                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-                    </div>
-                  </div>
-                </div>
-                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-                  <span class="glyphicon glyphicon-chevron-left"></span>
-                </a>
-                <a class="right carousel-control" href="#myCarousel" data-slide="next">
-                  <span class="glyphicon glyphicon-chevron-right"></span>
-                </a>
-              </div>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<div class="item active">
-  <img src="..." alt="">
-  <div class="carousel-caption">
-    <h3>...</h3>
-    <p>...</p>
-  </div>
-</div>
-{% endhighlight %}
-
-
-
-            <hr class="bs-docs-separator">
-
-
-            <h2>Usage</h2>
-
-            <h3>Via data attributes</h3>
-            <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
-
-            <h3>Via JavaScript</h3>
-            <p>Call carousel manually with:</p>
-{% highlight js linenos %}
-$('.carousel').carousel()
-{% endhighlight %}
-
-            <h3>Options</h3>
-            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
-            <table class="table table-bordered table-striped">
-              <thead>
-               <tr>
-                 <th style="width: 100px;">Name</th>
-                 <th style="width: 50px;">type</th>
-                 <th style="width: 50px;">default</th>
-                 <th>description</th>
-               </tr>
-              </thead>
-              <tbody>
-               <tr>
-                 <td>interval</td>
-                 <td>number</td>
-                 <td>5000</td>
-                 <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
-               </tr>
-               <tr>
-                 <td>pause</td>
-                 <td>string</td>
-                 <td>"hover"</td>
-                 <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
-               </tr>
-              </tbody>
-            </table>
-
-            <h3>Methods</h3>
-
-            <h4>.carousel(options)</h4>
-            <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
-{% highlight html linenos %}
-$('.carousel').carousel({
-  interval: 2000
-})
-{% endhighlight %}
-
-            <h4>.carousel('cycle')</h4>
-            <p>Cycles through the carousel items from left to right.</p>
-
-            <h4>.carousel('pause')</h4>
-            <p>Stops the carousel from cycling through items.</p>
-
-            <h4>.carousel(number)</h4>
-            <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
-
-            <h4>.carousel('prev')</h4>
-            <p>Cycles to the previous item.</p>
-
-            <h4>.carousel('next')</h4>
-            <p>Cycles to the next item.</p>
-
-            <h3>Events</h3>
-            <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
-            <table class="table table-bordered table-striped">
-              <thead>
-               <tr>
-                 <th style="width: 150px;">Event</th>
-                 <th>Description</th>
-               </tr>
-              </thead>
-              <tbody>
-               <tr>
-                 <td>slide</td>
-                 <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
-               </tr>
-               <tr>
-                 <td>slid</td>
-                 <td>This event is fired when the carousel has completed its slide transition.</td>
-               </tr>
-              </tbody>
-            </table>
-          </section>
-
-
-
-          <!-- Typeahead
-          ================================================== -->
-          <section id="typeahead">
-            <div class="page-header">
-              <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
-            </div>
-
-
-            <h2>Example</h2>
-            <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
-            <div class="bs-docs-example" style="background-color: #f5f5f5;">
-              <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
-            </div><!-- /example -->
-{% highlight html linenos %}
-<input type="text" data-provide="typeahead">
-{% endhighlight %}
-
-            <p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
-
-            <hr class="bs-docs-separator">
-
-
-            <h2>Usage</h2>
-
-            <h3>Via data attributes</h3>
-            <p>Add data attributes to register an element with typeahead functionality as shown in the example above.</p>
-
-            <h3>Via JavaScript</h3>
-            <p>Call the typeahead manually with:</p>
-{% highlight js linenos %}
-$('.typeahead').typeahead()
-{% endhighlight %}
-
-            <h3>Options</h3>
-            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-source=""</code>.</p>
-            <table class="table table-bordered table-striped">
-              <thead>
-               <tr>
-                 <th style="width: 100px;">Name</th>
-                 <th style="width: 50px;">type</th>
-                 <th style="width: 100px;">default</th>
-                 <th>description</th>
-               </tr>
-              </thead>
-              <tbody>
-                <tr>
-                 <td>source</td>
-                 <td>array, function</td>
-                 <td>[ ]</td>
-                 <td>The data source to query against. May be an array of strings or a function. The function is passed two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
-               </tr>
-               <tr>
-                 <td>items</td>
-                 <td>number</td>
-                 <td>8</td>
-                 <td>The max number of items to display in the dropdown.</td>
-               </tr>
-               <tr>
-                 <td>minLength</td>
-                 <td>number</td>
-                 <td>1</td>
-                 <td>The minimum character length needed before triggering autocomplete suggestions</td>
-               </tr>
-               <tr>
-                 <td>matcher</td>
-                 <td>function</td>
-                 <td>case insensitive</td>
-                 <td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.</td>
-               </tr>
-               <tr>
-                 <td>sorter</td>
-                 <td>function</td>
-                 <td>exact match,<br> case sensitive,<br> case insensitive</td>
-                 <td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>
-               </tr>
-               <tr>
-                 <td>updater</td>
-                 <td>function</td>
-                 <td>returns selected item</td>
-                 <td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.</td>
-               </tr>
-               <tr>
-                 <td>highlighter</td>
-                 <td>function</td>
-                 <td>highlights all default matches</td>
-                 <td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
-               </tr>
-              </tbody>
-            </table>
-
-            <h3>Methods</h3>
-            <h4>.typeahead(options)</h4>
-            <p>Initializes an input with a typeahead.</p>
-          </section>
-
-
-
-          <!-- Affix
-          ================================================== -->
-          <section id="affix">
-            <div class="page-header">
-              <h1>Affix <small>bootstrap-affix.js</small></h1>
-            </div>
-
-            <h2>Example</h2>
-            <p>The subnavigation on the left is a live demo of the affix plugin.</p>
-
-            <hr class="bs-docs-separator">
-
-            <h2>Usage</h2>
-
-            <h3>Via data attributes</h3>
-            <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
-
-{% highlight html linenos %}
-<div data-spy="affix" data-offset-top="200">...</div>
-{% endhighlight %}
-
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
-            </div>
-
-            <h3>Via JavaScript</h3>
-            <p>Call the affix plugin via JavaScript:</p>
-{% highlight js linenos %}
-$('#navbar').affix()
-{% endhighlight %}
-
-            <h3>Methods</h3>
-            <h4>.affix('refresh')</h4>
-            <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
-{% highlight js linenos %}
-$('[data-spy="affix"]').each(function () {
-  $(this).affix('refresh')
-});
-{% endhighlight %}
-
-          <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
-
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 100px;">Name</th>
-               <th style="width: 100px;">type</th>
-               <th style="width: 50px;">default</th>
-               <th>description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>offset</td>
-               <td>number | function | object</td>
-               <td>10</td>
-               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
-             </tr>
-            </tbody>
-          </table>
-        </section>
-
-
-  </div><!-- /.container -->
-- 
cgit v1.2.3


From df35e261421f84494b18a617322610bb9ae2a61c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 01:34:42 -0700
Subject: rejigger some content and start exploring section headings

---
 docs/assets/css/docs.css |  21 ++-
 docs/docs.html           | 358 +++++++++++++++++++++++------------------------
 2 files changed, 196 insertions(+), 183 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 9bab1a0ea..9db62f2b6 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -35,7 +35,6 @@ body {
 
 /* Padding for in-page bookmarks */
 section {
-  padding-top: 30px;
 }
 
 /* Few stylistic typography tweaks */
@@ -52,6 +51,19 @@ section > ul li {
 /* Jumbotrons
 -------------------------------------------------- */
 
+.bs-docs-section-header {
+  margin: 60px 0;
+}
+.bs-docs-section-header h1,
+.bs-docs-section-header .lead {
+  color: #8a8a8a;
+}
+.bs-docs-section-header h1 {
+  font-size: 80px;
+  font-size: 8rem;
+  line-height: 1;
+}
+
 /* Base class */
 .bs-docs-jumbotron {
   position: relative;
@@ -198,11 +210,18 @@ section > ul li {
 
 .bs-docs-sidenav-heading {
   margin: 0;
+}
+.bs-docs-sidenav-heading a {
+  display: block;
   padding: 15px 20px;
   color: #999;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 1px 0 #fff;
 }
+.bs-docs-sidenav-heading a:hover {
+  color: #777;
+  text-decoration: none;
+}
 
 .bs-docs-sidenav .nav-header {
   padding: 25px 20px 5px;
diff --git a/docs/docs.html b/docs/docs.html
index 4708907f6..eb5e1dac7 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -6,13 +6,13 @@ description: Overview of the project, its contents, and how to get started with
 
 <div class="bs-docs-sidebar">
   <ul class="nav bs-docs-sidenav">
+    <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
     <li class="nav-header">Getting started</li>
     <li><a href="#download-bootstrap">Download</a></li>
     <li><a href="#file-structure">File structure</a></li>
     <li><a href="#contents">What's included</a></li>
     <li><a href="#html-template">HTML template</a></li>
     <li><a href="#examples">Examples</a></li>
-    <li><a href="#what-next">What next?</a></li>
 
     <li class="nav-header">CSS</li>
     <li><a href="#global">Global settings</a></li>
@@ -63,43 +63,51 @@ description: Overview of the project, its contents, and how to get started with
 
 <div class="container bs-docs-container">
 
-      <!-- Download
-      ================================================== -->
-      <section id="download-bootstrap">
-        <div class="page-header">
-          <h1>1. Download</h1>
-        </div>
-        <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
 
-        <div class="row">
-          <div class="col-span-6">
-            <h2>Compiled</h2>
-            <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
-            <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-          </div>
-          <div class="col-span-6">
-            <h2>Source</h2>
-            <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
-            <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
-          </div>
-          <div class="col-span-6">
-            <h2>Bower</h2>
-            <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
-            {% highlight bash %}bower install bootstrap{% endhighlight %}
-          </div>
-        </div>
-      </section>
 
 
 
-      <!-- File structure
-      ================================================== -->
-      <section id="file-structure">
-        <div class="page-header">
-          <h1>2. File structure</h1>
-        </div>
-        <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
-        <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
+  <div class="bs-docs-section-header">
+    <h1>Getting started</h1>
+    <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
+  </div>
+
+  <!-- Download
+  ================================================== -->
+  <section id="download-bootstrap">
+    <div class="page-header">
+      <h1>Download</h1>
+    </div>
+    <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
+
+    <div class="row">
+      <div class="col-span-6">
+        <h2>Compiled</h2>
+        <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
+        <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+      </div>
+      <div class="col-span-6">
+        <h2>Source</h2>
+        <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
+        <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
+      </div>
+      <div class="col-span-6">
+        <h2>Bower</h2>
+        <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
+        {% highlight bash %}bower install bootstrap{% endhighlight %}
+      </div>
+    </div>
+  </section>
+
+
+  <!-- File structure
+  ================================================== -->
+  <section id="file-structure">
+    <div class="page-header">
+      <h1>File structure</h1>
+    </div>
+    <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
+    <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
 
 {% highlight bash %}
   bootstrap/
@@ -117,41 +125,37 @@ description: Overview of the project, its contents, and how to get started with
       └── glyphiconshalflings-regular.woff
 {% endhighlight %}
 
-        <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
-        <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
-      </section>
+    <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+    <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
+  </section>
 
-
-
-      <!-- Contents
-      ================================================== -->
-      <section id="contents">
-        <div class="page-header">
-          <h1>3. What's included</h1>
-        </div>
-        <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
-
-        <h2>Docs sections</h2>
-        <p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
-
-        <h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
-        <p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
-        <h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
-        <p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
-        <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
-        <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
-      </section>
-
-
-
-      <!-- HTML template
-      ================================================== -->
-      <section id="html-template">
-        <div class="page-header">
-          <h1>4. Basic HTML template</h1>
-        </div>
-        <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
-        <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
+  <!-- Contents
+  ================================================== -->
+  <section id="contents">
+    <div class="page-header">
+      <h1>What's included</h1>
+    </div>
+    <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
+
+    <h2>Docs sections</h2>
+    <p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
+
+    <h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
+    <p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
+    <h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
+    <p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
+    <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
+    <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
+  </section>
+
+  <!-- HTML template
+  ================================================== -->
+  <section id="html-template">
+    <div class="page-header">
+      <h1>4. Basic HTML template</h1>
+    </div>
+    <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
+    <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
 
 {% highlight html linenos %}
 <!DOCTYPE html>
@@ -167,7 +171,7 @@ description: Overview of the project, its contents, and how to get started with
 </html>
 {% endhighlight %}
 
-        <p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
+    <p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
 
 {% highlight html linenos %}
 <!DOCTYPE html>
@@ -186,134 +190,124 @@ description: Overview of the project, its contents, and how to get started with
 </html>
 {% endhighlight %}
 
-        <p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
+    <p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
 
-        <hr>
+    <hr>
 
-        <h4>Responsive features in IE8</h4>
-        <p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
+    <h4>Responsive features in IE8</h4>
+    <p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
 <pre class="prettyprint linenums">
 &lt;!--[if lt IE 9]&gt;
   &lt;script src="/assets/js/respond/respond.js"&gt;&lt;/script&gt;
 &lt;![endif]--&gt;
 </pre>
-      </section>
-
+  </section>
 
-
-      <!-- Examples
-      ================================================== -->
-      <section id="examples">
-        <div class="page-header">
-          <h1>5. Examples</h1>
-        </div>
-        <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
-        <div class="row bs-docs-examples">
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/starter-template/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
-            </a>
-            <h4>Starter template</h4>
-            <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
-            </a>
-            <h4>Basic marketing site</h4>
-            <p>Featuring a hero unit for a primary message and three supporting elements.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
-            </a>
-            <h4>Narrow marketing</h4>
-            <p>Slim, lightweight marketing template for small projects or teams.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
-            </a>
-            <h4>Justified nav</h4>
-            <p>Marketing page with equal-width navigation links in a modified navbar.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/signin/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
-            </a>
-            <h4>Sign in</h4>
-            <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
-            </a>
-            <h4>Sticky footer</h4>
-            <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
-            </a>
-            <h4>Sticky footer w/ navbar</h4>
-            <p>Add a fixed navbar to the default sticky footer template.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/carousel/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
-            </a>
-            <h4>Carousel jumbotron</h4>
-            <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
-          </div>
-
-
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
-            </a>
-            <h4>Navbar</h4>
-            <p>Basic template for showcasing how the navbar works.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
-            </a>
-            <h4>Static top navbar</h4>
-            <p>Basic template for showcasing the static navbar variation.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
-            </a>
-            <h4>Fixed top navbar</h4>
-            <p>Basic template for showcasing the fixed navbar variation.</p>
-          </div>
-          <div class="col-span-4">
-            <a class="thumbnail" href="/examples/grid/" target="_blank">
-              <img src="/assets/img/examples/bootstrap-example-.png" alt="">
-            </a>
-            <h4>Grid examples</h4>
-            <p></p>
-          </div>
-        </div>
-      </section>
+  <!-- Examples
+  ================================================== -->
+  <section id="examples">
+    <div class="page-header">
+      <h1>5. Examples</h1>
+    </div>
+    <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+    <div class="row bs-docs-examples">
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/starter-template/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
+        </a>
+        <h4>Starter template</h4>
+        <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
+        </a>
+        <h4>Basic marketing site</h4>
+        <p>Featuring a hero unit for a primary message and three supporting elements.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
+        </a>
+        <h4>Narrow marketing</h4>
+        <p>Slim, lightweight marketing template for small projects or teams.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
+        </a>
+        <h4>Justified nav</h4>
+        <p>Marketing page with equal-width navigation links in a modified navbar.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/signin/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
+        </a>
+        <h4>Sign in</h4>
+        <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
+        </a>
+        <h4>Sticky footer</h4>
+        <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
+        </a>
+        <h4>Sticky footer w/ navbar</h4>
+        <p>Add a fixed navbar to the default sticky footer template.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/carousel/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
+        </a>
+        <h4>Carousel jumbotron</h4>
+        <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
+      </div>
 
 
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/navbar/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
+        </a>
+        <h4>Navbar</h4>
+        <p>Basic template for showcasing how the navbar works.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
+        </a>
+        <h4>Static top navbar</h4>
+        <p>Basic template for showcasing the static navbar variation.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
+        </a>
+        <h4>Fixed top navbar</h4>
+        <p>Basic template for showcasing the fixed navbar variation.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/grid/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-.png" alt="">
+        </a>
+        <h4>Grid examples</h4>
+        <p></p>
+      </div>
+    </div>
+  </section>
 
 
-      <!-- Next
-      ================================================== -->
-      <section id="what-next">
-        <div class="page-header">
-          <h1>What next?</h1>
-        </div>
-        <p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
-        <a class="btn btn-large btn-primary" href="./css.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
-        <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
-      </section>
 
 
 
+  <div class="bs-docs-section-header">
+    <h1>CSS</h1>
+    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
+  </div>
 
         <!-- Global Bootstrap settings
         ================================================== -->
-- 
cgit v1.2.3


From 3278c40631c6914f063b2eef551c668abb98c9ff Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 03:06:00 -0700
Subject: move nav into partial; rejigger content some more

---
 docs/_includes/docs-nav.html |  55 +++++++++
 docs/_layouts/default.html   |   3 +
 docs/assets/css/docs.css     |  33 ++++--
 docs/docs.html               | 277 +++++++++++++------------------------------
 4 files changed, 162 insertions(+), 206 deletions(-)
 create mode 100644 docs/_includes/docs-nav.html

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
new file mode 100644
index 000000000..92674c445
--- /dev/null
+++ b/docs/_includes/docs-nav.html
@@ -0,0 +1,55 @@
+<div class="bs-docs-sidebar">
+  <ul class="nav bs-docs-sidenav">
+    <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
+
+    <li><a href="#welcome">Welcome!</a></li>
+    <li><a href="#getting-started">Getting started</a></li>
+    <li><a href="#whats-included">What's included</a></li>
+    <li><a href="#examples">Templates and examples</a></li>
+
+    <li><a class="nav-header" href="#css">CSS</a></li>
+    <li><a href="#css-overview">Overview</a></li>
+    <li><a href="#grid">Grid system</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#code">Code</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#images">Images</a></li>
+
+    <li><a class="nav-header" href="#components">Components</a></li>
+    <li><a href="#icons">Glyphicons</a></li>
+    <li><a href="#responsive-utilities">Responsive utilities</a></li>
+    <li><a href="#dropdowns">Dropdowns</a></li>
+    <li><a href="#buttonGroups">Button groups</a></li>
+    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+    <li><a href="#navs">Navs</a></li>
+    <li><a href="#navbar">Navbar</a></li>
+    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#pagination">Pagination</a></li>
+    <li><a href="#labels">Labels</a></li>
+    <li><a href="#badges">Badges</a></li>
+    <li><a href="#typography-components">Typography</a></li>
+    <li><a href="#thumbnails">Thumbnails</a></li>
+    <li><a href="#alerts">Alerts</a></li>
+    <li><a href="#progress">Progress bars</a></li>
+    <li><a href="#media">Media object</a></li>
+    <li><a href="#misc">Misc</a></li>
+
+    <li><a class="nav-header" href="#js">JavaScript</a></li>
+    <li><a href="#js-overview">Overview</a></li>
+    <li><a href="#transitions">Transitions</a></li>
+    <li><a href="#modals">Modal</a></li>
+    <li><a href="#dropdowns">Dropdown</a></li>
+    <li><a href="#scrollspy">Scrollspy</a></li>
+    <li><a href="#tabs">Tab</a></li>
+    <li><a href="#tooltips">Tooltip</a></li>
+    <li><a href="#popovers">Popover</a></li>
+    <li><a href="#alerts">Alert</a></li>
+    <li><a href="#buttons">Button</a></li>
+    <li><a href="#collapse">Collapse</a></li>
+    <li><a href="#carousel">Carousel</a></li>
+    <li><a href="#typeahead">Typeahead</a></li>
+    <li><a href="#affix">Affix</a></li>
+  </ul>
+</div>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 11b78f3f9..8015c1587 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -7,6 +7,9 @@
   </head>
   <body class="bs-docs-docs" data-spy="scroll" data-target=".bs-docs-sidebar">
 
+    <!-- Docs nav -->
+    {% include docs-nav.html %}
+
     <!-- Page content of course! -->
     {{ content }}
 
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 9db62f2b6..d5de25735 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -34,7 +34,9 @@ body {
 -------------------------------------------------- */
 
 /* Padding for in-page bookmarks */
-section {
+section,
+.bs-docs-section {
+  padding-top: 30px;
 }
 
 /* Few stylistic typography tweaks */
@@ -52,10 +54,7 @@ section > ul li {
 -------------------------------------------------- */
 
 .bs-docs-section-header {
-  margin: 60px 0;
-}
-.bs-docs-section-header h1,
-.bs-docs-section-header .lead {
+  padding-top: 60px;
   color: #8a8a8a;
 }
 .bs-docs-section-header h1 {
@@ -205,11 +204,12 @@ section > ul li {
 .bs-docs-sidenav > .active:focus > a {
   font-weight: 500;
   color: #428bca;
+  background-color: transparent;
   border-right: 1px solid #428bca;
 }
 
 .bs-docs-sidenav-heading {
-  margin: 0;
+  margin: 0 0 25px;
 }
 .bs-docs-sidenav-heading a {
   display: block;
@@ -223,17 +223,22 @@ section > ul li {
   text-decoration: none;
 }
 
-.bs-docs-sidenav .nav-header {
-  padding: 25px 20px 5px;
+/* Section headings for groups of links */
+.bs-docs-sidenav > li > .nav-header {
+  margin-top: 20px;
+  margin-bottom: 5px;
   font-size: 14px;
   font-weight: 500;
   color: #333;
 }
-.bs-docs-sidenav > li + .nav-header {
-  margin-top: 0;
+.bs-docs-sidenav > .active > .nav-header,
+.bs-docs-sidenav > .active > .nav-header:hover {
+  color: #333;
+  border-color: #333;
 }
 
 
+
 /* Bootstrap code examples
 -------------------------------------------------- */
 
@@ -638,7 +643,6 @@ input.focused {
   /* Account for fixed navbar (which is static to start) */
   .bs-docs-docs {
     padding-left: 260px;
-    padding-right: 20px;
   }
 
   /* Undo custom padding */
@@ -677,6 +681,10 @@ input.focused {
 /* Tablets/desktops and up */
 @media screen and (min-width: 992px) {
 
+  .bs-docs-docs {
+    padding-left: 280px;
+  }
+
   /* Icons */
   .the-icons li {
     width: 12.5%;
@@ -686,5 +694,8 @@ input.focused {
 
 /* Large desktops and up */
 @media screen and (min-width: 1200px) {
+  .bs-docs-docs {
+    padding-left: 300px;
+  }
 
 }
diff --git a/docs/docs.html b/docs/docs.html
index eb5e1dac7..10ce91289 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4,109 +4,49 @@ title: Getting started
 description: Overview of the project, its contents, and how to get started with a simple template.
 ---
 
-<div class="bs-docs-sidebar">
-  <ul class="nav bs-docs-sidenav">
-    <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
-    <li class="nav-header">Getting started</li>
-    <li><a href="#download-bootstrap">Download</a></li>
-    <li><a href="#file-structure">File structure</a></li>
-    <li><a href="#contents">What's included</a></li>
-    <li><a href="#html-template">HTML template</a></li>
-    <li><a href="#examples">Examples</a></li>
-
-    <li class="nav-header">CSS</li>
-    <li><a href="#global">Global settings</a></li>
-    <li><a href="#grid">Grid system</a></li>
-    <li><a href="#typography">Typography</a></li>
-    <li><a href="#code">Code</a></li>
-    <li><a href="#tables">Tables</a></li>
-    <li><a href="#forms">Forms</a></li>
-    <li><a href="#buttons">Buttons</a></li>
-    <li><a href="#images">Images</a></li>
-    <li><a href="#icons">Glyphicons</a></li>
-    <li><a href="#responsive-utilities">Responsive utilities</a></li>
-
-    <li class="nav-header">Components</li>
-    <li><a href="#dropdowns">Dropdowns</a></li>
-    <li><a href="#buttonGroups">Button groups</a></li>
-    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
-    <li><a href="#navs">Navs</a></li>
-    <li><a href="#navbar">Navbar</a></li>
-    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
-    <li><a href="#pagination">Pagination</a></li>
-    <li><a href="#labels">Labels</a></li>
-    <li><a href="#badges">Badges</a></li>
-    <li><a href="#typography">Typography</a></li>
-    <li><a href="#thumbnails">Thumbnails</a></li>
-    <li><a href="#alerts">Alerts</a></li>
-    <li><a href="#progress">Progress bars</a></li>
-    <li><a href="#media">Media object</a></li>
-    <li><a href="#misc">Misc</a></li>
-
-    <li class="nav-header">JavaScript</li>
-    <li><a href="#overview">Overview</a></li>
-    <li><a href="#transitions">Transitions</a></li>
-    <li><a href="#modals">Modal</a></li>
-    <li><a href="#dropdowns">Dropdown</a></li>
-    <li><a href="#scrollspy">Scrollspy</a></li>
-    <li><a href="#tabs">Tab</a></li>
-    <li><a href="#tooltips">Tooltip</a></li>
-    <li><a href="#popovers">Popover</a></li>
-    <li><a href="#alerts">Alert</a></li>
-    <li><a href="#buttons">Button</a></li>
-    <li><a href="#collapse">Collapse</a></li>
-    <li><a href="#carousel">Carousel</a></li>
-    <li><a href="#typeahead">Typeahead</a></li>
-    <li><a href="#affix">Affix</a></li>
-  </ul>
-</div>
-
-<div class="container bs-docs-container">
-
-
-
 
+<div class="bs-docs-container">
 
-  <div class="bs-docs-section-header">
-    <h1>Getting started</h1>
-    <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
+  <!-- Welcome
+  ================================================== -->
+  <div id="welcome" class="bs-docs-section-header">
+    <h1>Welcome</h1>
+    <p class="lead">Welcome to the Bootstrap documentation, the living, interactive style and code guide for all things Bootstrap. If you're new here, continue reading to learn how to get started. Otherwise, carry on you beautiful person you.</p>
   </div>
 
-  <!-- Download
+  <!-- Getting started
   ================================================== -->
-  <section id="download-bootstrap">
+  <div class="bs-docs-section" id="getting-started">
     <div class="page-header">
-      <h1>Download</h1>
+      <h1>Getting started</h1>
     </div>
-    <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
-
+    <p class="lead">There are three easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
     <div class="row">
       <div class="col-span-6">
-        <h2>Compiled</h2>
-        <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
+        <h2>Compiled CSS and JS</h2>
+        <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
         <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
       </div>
       <div class="col-span-6">
-        <h2>Source</h2>
+        <h2>Project source code</h2>
         <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
       </div>
       <div class="col-span-6">
         <h2>Bower</h2>
         <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
-        {% highlight bash %}bower install bootstrap{% endhighlight %}
+        {% highlight bash %}$ bower install bootstrap{% endhighlight %}
       </div>
     </div>
-  </section>
-
+  </div>
 
   <!-- File structure
   ================================================== -->
-  <section id="file-structure">
+  <div class="bs-docs-section" id="whats-included">
     <div class="page-header">
-      <h1>File structure</h1>
+      <h1>What's included</h1>
     </div>
-    <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
+    <p class="lead">Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p>
     <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
 
 {% highlight bash %}
@@ -127,52 +67,17 @@ description: Overview of the project, its contents, and how to get started with
 
     <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
     <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
-  </section>
-
-  <!-- Contents
-  ================================================== -->
-  <section id="contents">
-    <div class="page-header">
-      <h1>What's included</h1>
-    </div>
-    <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
-
-    <h2>Docs sections</h2>
-    <p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
-
-    <h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
-    <p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
-    <h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
-    <p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
-    <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
-    <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
-  </section>
+  </div>
 
-  <!-- HTML template
+  <!-- Examples
   ================================================== -->
-  <section id="html-template">
+  <div class="bs-docs-section" id="examples">
     <div class="page-header">
-      <h1>4. Basic HTML template</h1>
+      <h1>Templates and examples</h1>
     </div>
-    <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
-    <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
-
-{% highlight html linenos %}
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Bootstrap 101 Template</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-    <script src="http://code.jquery.com/jquery.js"></script>
-  </body>
-</html>
-{% endhighlight %}
-
-    <p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
+    <p class="lead">Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
 
+    <h3>HTML template</h3>
 {% highlight html linenos %}
 <!DOCTYPE html>
 <html>
@@ -186,30 +91,14 @@ description: Overview of the project, its contents, and how to get started with
     <h1>Hello, world!</h1>
     <script src="http://code.jquery.com/jquery.js"></script>
     <script src="js/bootstrap.min.js"></script>
+
+    <!-- Optionally enable responsive features in IE8 -->
+    <script src="js/respond.js"></script>
   </body>
 </html>
 {% endhighlight %}
 
-    <p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
-
-    <hr>
-
-    <h4>Responsive features in IE8</h4>
-    <p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
-<pre class="prettyprint linenums">
-&lt;!--[if lt IE 9]&gt;
-  &lt;script src="/assets/js/respond/respond.js"&gt;&lt;/script&gt;
-&lt;![endif]--&gt;
-</pre>
-  </section>
-
-  <!-- Examples
-  ================================================== -->
-  <section id="examples">
-    <div class="page-header">
-      <h1>5. Examples</h1>
-    </div>
-    <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+    <h3>Examples</h3>
     <div class="row bs-docs-examples">
       <div class="col-span-4">
         <a class="thumbnail" href="/examples/starter-template/" target="_blank">
@@ -268,7 +157,6 @@ description: Overview of the project, its contents, and how to get started with
         <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
       </div>
 
-
       <div class="col-span-4">
         <a class="thumbnail" href="/examples/navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
@@ -298,27 +186,27 @@ description: Overview of the project, its contents, and how to get started with
         <p></p>
       </div>
     </div>
-  </section>
+  </div>
 
 
 
 
 
-  <div class="bs-docs-section-header">
+  <div class="bs-docs-section-header" id="css">
     <h1>CSS</h1>
     <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
   </div>
 
-        <!-- Global Bootstrap settings
-        ================================================== -->
-        <section id="global">
-          <div class="page-header">
-            <h1>Global settings</h1>
-          </div>
-          <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
+  <!-- Global Bootstrap settings
+  ================================================== -->
+  <div class="bs-docs-section" id="css-overview">
+    <div class="page-header">
+      <h1>Overview</h1>
+    </div>
+    <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
 
-          <h3>Requires HTML5 doctype</h3>
-          <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
+    <h3>HTML5 doctype required</h3>
+    <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
 
 {% highlight html linenos %}
 <!DOCTYPE html>
@@ -327,34 +215,31 @@ description: Overview of the project, its contents, and how to get started with
 </html>
 {% endhighlight %}
 
-          <h3>Mobile first</h3>
-          <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
-          <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
+    <h3>Mobile first</h3>
+    <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
+    <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
 
 {% highlight html linenos %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {% endhighlight %}
 
-          <h3>Typography and links</h3>
-          <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
-          <ul>
-            <li>Remove <code>margin</code> on the body</li>
-            <li>Set <code>background-color: white;</code> on the <code>body</code></li>
-            <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
-            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
-          </ul>
-          <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
-
-          <h3>Normalize reset</h3>
-          <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
-
-        </section>
-
+    <h3>Typography and links</h3>
+    <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
+    <ul>
+      <li>Remove <code>margin</code> on the body</li>
+      <li>Set <code>background-color: white;</code> on the <code>body</code></li>
+      <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
+      <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
+    </ul>
+    <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
 
+    <h3>Normalize reset</h3>
+    <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
+  </div>
 
         <!-- Grid system
         ================================================== -->
-        <section id="grid">
+        <div class="bs-docs-section" id="grid">
           <div class="page-header">
             <h1>Grid system</h1>
           </div>
@@ -549,14 +434,14 @@ description: Overview of the project, its contents, and how to get started with
 
 
 
-        </section>
+        </div>
 
 
 
 
         <!-- Typography
         ================================================== -->
-        <section id="typography">
+        <div class="bs-docs-section" id="typography">
           <div class="page-header">
             <h1>Typography</h1>
           </div>
@@ -596,15 +481,6 @@ description: Overview of the project, its contents, and how to get started with
             </table>
           </div>
 
-<!--           <div class="bs-docs-example">
-            <h1>h1. Heading 1</h1>
-            <h2>h2. Heading 2</h2>
-            <h3>h3. Heading 3</h3>
-            <h4>h4. Heading 4</h4>
-            <h5>h5. Heading 5</h5>
-            <h6>h6. Heading 6</h6>
-          </div>
- -->
           <!-- Body copy -->
           <h2 id="body-copy">Body copy</h2>
           <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
@@ -936,7 +812,7 @@ description: Overview of the project, its contents, and how to get started with
         <p>
           Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
         </p>
-      </section>
+      </div>
 
 
 
@@ -944,7 +820,7 @@ description: Overview of the project, its contents, and how to get started with
 
         <!-- Code
         ================================================== -->
-        <section id="code">
+        <div class="bs-docs-section" id="code">
           <div class="page-header">
             <h1>Code</h1>
           </div>
@@ -968,13 +844,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
           <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
-        </section>
+        </div>
 
 
 
         <!-- Tables
         ================================================== -->
-        <section id="tables">
+        <div class="bs-docs-section" id="tables">
           <div class="page-header">
             <h1>Tables</h1>
           </div>
@@ -1365,13 +1241,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-        </section>
+        </div>
 
 
 
         <!-- Forms
         ================================================== -->
-        <section id="forms">
+        <div class="bs-docs-section" id="forms">
           <div class="page-header">
             <h1>Forms</h1>
           </div>
@@ -2107,13 +1983,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
 
-        </section>
+        </div>
 
 
 
         <!-- Buttons
         ================================================== -->
-        <section id="buttons">
+        <div class="bs-docs-section" id="buttons">
           <div class="page-header">
             <h1>Buttons</h1>
           </div>
@@ -2253,13 +2129,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
           <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
 
-        </section>
+        </div>
 
 
 
         <!-- Images
         ================================================== -->
-        <section id="images">
+        <div class="bs-docs-section" id="images">
           <div class="page-header">
             <h1>Images</h1>
           </div>
@@ -2276,10 +2152,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." class="img-thumbnail">
 {% endhighlight %}
 
-        </section>
+        </div>
+
+
 
 
 
+      <div class="bs-docs-section-header" id="components">
+        <h1>Components</h1>
+      </div>
+
+
         <!-- Icons
         ================================================== -->
         <section id="icons">
@@ -4067,7 +3950,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
         <!-- Typographic components
         ================================================== -->
-        <section id="typography">
+        <section id="typography-components">
           <div class="page-header">
             <h1>Typographic components</h1>
           </div>
@@ -4626,12 +4509,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+    <div class="bs-docs-section-header" id="js">
+      <h1>JavaScript plugins</h1>
+    </div>
+
 
         <!-- Overview
         ================================================== -->
-        <section id="overview">
+        <section id="js-overview">
           <div class="page-header">
-            <h1>JavaScript in Bootstrap</h1>
+            <h1>Overview</h1>
           </div>
 
           <h3>Individual or compiled</h3>
-- 
cgit v1.2.3


From 090545ffdf8b8f750afb0601a16a7bbac07ff6eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Cederstro=CC=88m?= <andreas@klydd.se>
Date: Thu, 28 Mar 2013 11:33:18 +0100
Subject: Make sure form actions are properly aligned with form-horizontal

---
 docs/assets/css/bootstrap.css | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 50d207001..d096c6c50 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1705,6 +1705,9 @@ select:focus:invalid:focus {
   .form-horizontal .control-group > .controls {
     margin-left: 180px;
   }
+  .form-horizontal .form-actions {
+    padding-left: 180px;
+  }
 }
 
 .btn {
-- 
cgit v1.2.3


From 384926a1d6be158ce6879bdd299f90e3c43a77ed Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 17:19:41 -0700
Subject: remove nonexistant example

---
 docs/docs.html | 7 -------
 1 file changed, 7 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 10ce91289..a2e5a3aab 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -178,13 +178,6 @@ description: Overview of the project, its contents, and how to get started with
         <h4>Fixed top navbar</h4>
         <p>Basic template for showcasing the fixed navbar variation.</p>
       </div>
-      <div class="col-span-4">
-        <a class="thumbnail" href="/examples/grid/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-.png" alt="">
-        </a>
-        <h4>Grid examples</h4>
-        <p></p>
-      </div>
     </div>
   </div>
 
-- 
cgit v1.2.3


From e25ad912e2fa341244125288ef674d4b93161a7f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 28 Mar 2013 17:20:17 -0700
Subject: correct page title and nuke liquid description

---
 docs/docs.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index a2e5a3aab..5896f2730 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1,7 +1,6 @@
 ---
 layout: default
-title: Getting started
-description: Overview of the project, its contents, and how to get started with a simple template.
+title: Bootstrap Documentation
 ---
 
 
-- 
cgit v1.2.3


From 3055f09a902cb26b01701fe41db0e8ec35d90a61 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 10:45:00 -0700
Subject: dat red

---
 docs/assets/css/docs.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index d5de25735..b382cd994 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -61,6 +61,7 @@ section > ul li {
   font-size: 80px;
   font-size: 8rem;
   line-height: 1;
+  color: #b94a48;
 }
 
 /* Base class */
@@ -203,9 +204,9 @@ section > ul li {
 .bs-docs-sidenav > .active:hover > a,
 .bs-docs-sidenav > .active:focus > a {
   font-weight: 500;
-  color: #428bca;
+  color: #b94a48;
   background-color: transparent;
-  border-right: 1px solid #428bca;
+  border-right: 1px solid #b94a48;
 }
 
 .bs-docs-sidenav-heading {
@@ -214,12 +215,12 @@ section > ul li {
 .bs-docs-sidenav-heading a {
   display: block;
   padding: 15px 20px;
-  color: #999;
+  color: #b94a48;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 1px 0 #fff;
 }
 .bs-docs-sidenav-heading a:hover {
-  color: #777;
+  color: #a3403e;
   text-decoration: none;
 }
 
-- 
cgit v1.2.3


From d3fe506f046d54945e46abcf7668cf7105b0a684 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 13:43:30 -0700
Subject: clearer js instructions on how to include plugins

---
 docs/docs.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 5896f2730..bf46cb34c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -77,6 +77,7 @@ title: Bootstrap Documentation
     <p class="lead">Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
 
     <h3>HTML template</h3>
+    <p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
 {% highlight html linenos %}
 <!DOCTYPE html>
 <html>
@@ -88,7 +89,10 @@ title: Bootstrap Documentation
   </head>
   <body>
     <h1>Hello, world!</h1>
+
+    <!-- JavaScript plugins (requires jQuery) -->
     <script src="http://code.jquery.com/jquery.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
 
     <!-- Optionally enable responsive features in IE8 -->
@@ -4501,6 +4505,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+
+
     <div class="bs-docs-section-header" id="js">
       <h1>JavaScript plugins</h1>
     </div>
@@ -4514,7 +4520,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </div>
 
           <h3>Individual or compiled</h3>
-          <p>Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+          <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
 
           <h3>Data attributes</h3>
           <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
-- 
cgit v1.2.3


From 2ebc060795aad6b64923d65426858b6e90cb2131 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 13:43:37 -0700
Subject: mo padding on side nav links

---
 docs/assets/css/docs.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b382cd994..ac05769fa 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -195,7 +195,7 @@ section > ul li {
 }
 .bs-docs-sidenav > li > a {
   color: #666;
-  padding: 4px 20px;
+  padding: 4px 25px;
 }
 .bs-docs-sidenav > li > a:hover {
   border-right: 1px solid #d5d5d5;
@@ -214,7 +214,7 @@ section > ul li {
 }
 .bs-docs-sidenav-heading a {
   display: block;
-  padding: 15px 20px;
+  padding: 15px 25px;
   color: #b94a48;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 1px 0 #fff;
-- 
cgit v1.2.3


From 9f59648702787dd6622e63d3103c815adfb44526 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 14:04:11 -0700
Subject: add link to github project on getting started section

---
 docs/docs.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index bf46cb34c..1350d667e 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -22,17 +22,22 @@ title: Bootstrap Documentation
     <p class="lead">There are three easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
     <div class="row">
       <div class="col-span-6">
-        <h2>Compiled CSS and JS</h2>
+        <h3>Compiled CSS and JS</h3>
         <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
         <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
       </div>
       <div class="col-span-6">
-        <h2>Project source code</h2>
+        <h3>Latest source code</h3>
         <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
       </div>
       <div class="col-span-6">
-        <h2>Bower</h2>
+        <h3>Clone or fork via GitHub</h3>
+        <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
+        <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p>
+      </div>
+      <div class="col-span-6">
+        <h3>Bower</h3>
         <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
         {% highlight bash %}$ bower install bootstrap{% endhighlight %}
       </div>
-- 
cgit v1.2.3


From f36709067172f8f0f663f58917429667fd04035b Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 22:38:25 -0700
Subject: countypo

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 1350d667e..28f040a78 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -19,7 +19,7 @@ title: Bootstrap Documentation
     <div class="page-header">
       <h1>Getting started</h1>
     </div>
-    <p class="lead">There are three easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
+    <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
     <div class="row">
       <div class="col-span-6">
         <h3>Compiled CSS and JS</h3>
-- 
cgit v1.2.3


From 4dfc4e102262f79a7048b2713ff5adea85ffec8b Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 22:40:42 -0700
Subject: clarify small docs

---
 docs/docs.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 28f040a78..d958c9ddd 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -481,6 +481,14 @@ title: Bootstrap Documentation
               </tbody>
             </table>
           </div>
+{% highlight html linenos %}
+<h1>...</h1>
+<h2>...</h2>
+<h3>...</h3>
+<h4>...</h4>
+<h5>...</h5>
+<h6>...</h6>
+{% endhighlight %}
 
           <!-- Body copy -->
           <h2 id="body-copy">Body copy</h2>
@@ -514,7 +522,7 @@ title: Bootstrap Documentation
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
           <h3>Small text</h3>
-          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
+          <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&lt;</code> elements.</p>
           <div class="bs-docs-example">
             <p><small>This line of text is meant to be treated as fine print.</small></p>
           </div>
-- 
cgit v1.2.3


From 23d7215dbe6f075436fd13ef5376419143a079f5 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 23:32:47 -0700
Subject: Modify scrollspy to add .active to all parent li items /cc @fat

---
 docs/assets/js/bootstrap-scrollspy.js | 4 ++--
 docs/assets/js/bootstrap.js           | 4 ++--
 docs/assets/js/bootstrap.min.js       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js
index 7e845a513..8ccd43fa1 100644
--- a/docs/assets/js/bootstrap-scrollspy.js
+++ b/docs/assets/js/bootstrap-scrollspy.js
@@ -97,7 +97,7 @@
         this.activeTarget = target
 
         $(this.selector)
-          .parent('.active')
+          .parents('.active')
           .removeClass('active')
 
         selector = this.selector
@@ -105,7 +105,7 @@
           + this.selector + '[href="' + target + '"]'
 
         active = $(selector)
-          .parent('li')
+          .parents('li')
           .addClass('active')
 
         if (active.parent('.dropdown-menu').length)  {
diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
index 57ec04196..95469f900 100644
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -1621,7 +1621,7 @@
         this.activeTarget = target
 
         $(this.selector)
-          .parent('.active')
+          .parents('.active')
           .removeClass('active')
 
         selector = this.selector
@@ -1629,7 +1629,7 @@
           + this.selector + '[href="' + target + '"]'
 
         active = $(selector)
-          .parent('li')
+          .parents('li')
           .addClass('active')
 
         if (active.parent('.dropdown-menu').length)  {
diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js
index 4066061de..646b3bc73 100644
--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
@@ -3,4 +3,4 @@
 * Copyright 2012 Twitter, Inc.
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
-!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
+!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
-- 
cgit v1.2.3


From 88141252595b3875ac001741aa77c7905aac942c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 23:33:08 -0700
Subject: Add subnav support to CSS section

---
 docs/_includes/docs-nav.html  |  62 ++++++++++++++++--
 docs/assets/css/bootstrap.css |  11 ----
 docs/assets/css/docs.css      |  32 +++++++--
 docs/docs.html                | 146 ++++++++----------------------------------
 4 files changed, 109 insertions(+), 142 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 92674c445..f7c4b6c98 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -9,12 +9,64 @@
 
     <li><a class="nav-header" href="#css">CSS</a></li>
     <li><a href="#css-overview">Overview</a></li>
-    <li><a href="#grid">Grid system</a></li>
-    <li><a href="#typography">Typography</a></li>
+    <li>
+      <a href="#grid">Grid system</a>
+      <ul class="nav">
+        <li><a href="#grid-example">Example usage</a></li>
+        <li><a href="#grid-offsetting">Offset columns</a></li>
+        <li><a href="#grid-nesting">Nested columns</a></li>
+        <li><a href="#grid-column-ordering">Column ordering</a></li>
+        <li><a href="#grid-less">LESS mixins and variables</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#type">Typography</a>
+      <ul class="nav">
+        <li><a href="#type-headings">Headings</a></li>
+        <li><a href="#type-body-copy">Body copy</a></li>
+        <li><a href="#type-emphasis">Emphasis</a></li>
+        <li><a href="#type-abbreviations">Abbreviations</a></li>
+        <li><a href="#type-addresses">Addresses</a></li>
+        <li><a href="#type-blockquotes">Blockquotes</a></li>
+        <li><a href="#type-lists">Lists</a></li>
+        <li><a href="#type-"></a></li>
+      </ul>
+    </li>
     <li><a href="#code">Code</a></li>
-    <li><a href="#tables">Tables</a></li>
-    <li><a href="#forms">Forms</a></li>
-    <li><a href="#buttons">Buttons</a></li>
+    <li>
+      <a href="#tables">Tables</a>
+      <ul class="nav">
+        <li><a href="#tables-example">Basic example</a></li>
+        <li><a href="#tables-striped">Zebra striping</a></li>
+        <li><a href="#tables-bordered">Bordered tables</a></li>
+        <li><a href="#tables-hover">Hover rows</a></li>
+        <li><a href="#tables-condensed">Condensed tables</a></li>
+        <li><a href="#tables-row-classes">Contextual row classes</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#forms">Forms</a>
+      <ul class="nav">
+        <li><a href="#forms-example">Basic example</a></li>
+        <li><a href="#forms-inline">Inline variation</a></li>
+        <li><a href="#forms-horizontal">Horizontal variation</a></li>
+        <li><a href="#forms-controls">Supported controls</a></li>
+        <li><a href="#forms-control-states">Control states</a></li>
+        <li><a href="#forms-input-groups">Input groups</a></li>
+        <li><a href="#forms-control-sizes">Control sizing</a></li>
+        <li><a href="#forms-actions">Form actions</a></li>
+        <li><a href="#forms-help-text">Help text</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#buttons">Buttons</a>
+      <ul class="nav">
+        <li><a href="#buttons-defaults">Default buttons</a></li>
+        <li><a href="#buttons-sizes">Sizes</a></li>
+        <li><a href="#buttons-disabled">Disabled</a></li>
+        <li><a href="#buttons-tags">Button tags</a></li>
+      </ul>
+    </li>
     <li><a href="#images">Images</a></li>
 
     <li><a class="nav-header" href="#components">Components</a></li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b68972dd2..0afdb0ab8 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3258,7 +3258,6 @@ button.close {
 }
 
 .navbar-fixed-top,
-.navbar-fixed-left,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
@@ -3275,16 +3274,6 @@ button.close {
   bottom: 0;
 }
 
-.navbar-fixed-left {
-  top: 0;
-  right: auto;
-  bottom: 0;
-}
-
-.navbar-fixed-left .container {
-  max-width: none;
-}
-
 .navbar-brand {
   display: block;
   max-width: 200px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ac05769fa..0700ddd59 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -190,25 +190,45 @@ section > ul li {
   text-shadow: 0 1px 0 #fff;
   box-shadow: inset -1px 0 0 #e5e5e5;
 }
-.bs-docs-sidenav {
+
+/* Nav: first level */
+.bs-docs-sidebar > .nav {
   margin: 0 0 25px;
 }
-.bs-docs-sidenav > li > a {
+.bs-docs-sidebar .nav > li > a {
+  display: block;
   color: #666;
   padding: 4px 25px;
 }
-.bs-docs-sidenav > li > a:hover {
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+  text-decoration: none;
   border-right: 1px solid #d5d5d5;
 }
-.bs-docs-sidenav > .active > a,
-.bs-docs-sidenav > .active:hover > a,
-.bs-docs-sidenav > .active:focus > a {
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
   font-weight: 500;
   color: #b94a48;
   background-color: transparent;
   border-right: 1px solid #b94a48;
 }
 
+/* Nav: second level (shown on .active) */
+.bs-docs-sidebar .nav .nav {
+  display: none;
+  margin-left: 15px;
+  margin-bottom: 5px;
+}
+.bs-docs-sidebar .nav > .active > ul {
+  display: block;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 90%;
+}
+
 .bs-docs-sidenav-heading {
   margin: 0 0 25px;
 }
diff --git a/docs/docs.html b/docs/docs.html
index d958c9ddd..30a9c7623 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -442,13 +442,13 @@ title: Bootstrap Documentation
 
         <!-- Typography
         ================================================== -->
-        <div class="bs-docs-section" id="typography">
+        <div class="bs-docs-section" id="type">
           <div class="page-header">
             <h1>Typography</h1>
           </div>
 
           <!-- Headings -->
-          <h2 id="headings">Headings</h2>
+          <h2 id="type-headings">Headings</h2>
           <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
 
           <div class="bs-docs-example bs-docs-example-type">
@@ -491,7 +491,7 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
           <!-- Body copy -->
-          <h2 id="body-copy">Body copy</h2>
+          <h2 id="type-body-copy">Body copy</h2>
           <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
           <div class="bs-docs-example">
             <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
@@ -518,7 +518,7 @@ title: Bootstrap Documentation
 
 
           <!-- Emphasis -->
-          <h2 id="emphasis">Emphasis</h2>
+          <h2 id="type-emphasis">Emphasis</h2>
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
           <h3>Small text</h3>
@@ -581,7 +581,7 @@ title: Bootstrap Documentation
 
 
           <!-- Abbreviations -->
-          <h2 id="abbreviations">Abbreviations</h2>
+          <h2 id="type-abbreviations">Abbreviations</h2>
           <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
 
           <h3>Basic abbreviation</h3>
@@ -604,7 +604,7 @@ title: Bootstrap Documentation
 
 
           <!-- Addresses -->
-          <h2 id="addresses">Addresses</h2>
+          <h2 id="type-addresses">Addresses</h2>
           <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
           <div class="bs-docs-example">
             <address>
@@ -634,7 +634,7 @@ title: Bootstrap Documentation
 
 
           <!-- Blockquotes -->
-          <h2 id="blockquotes">Blockquotes</h2>
+          <h2 id="type-blockquotes">Blockquotes</h2>
           <p>For quoting blocks of content from another source within your document.</p>
 
           <h3>Default blockquote</h3>
@@ -684,7 +684,7 @@ title: Bootstrap Documentation
 
 
           <!-- Lists -->
-          <h2 id="lists">Lists</h2>
+          <h2 id="type-lists">Lists</h2>
 
           <h3>Unordered</h3>
           <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
@@ -864,7 +864,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <h1>Tables</h1>
           </div>
 
-          <h2>Default styles</h2>
+          <h2 id="tables-example">Basic example</h2>
           <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
           <div class="bs-docs-example">
             <table class="table">
@@ -908,7 +908,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <h2>Optional classes</h2>
           <p>Add any of the following classes to the <code>.table</code> base class.</p>
 
-          <h3>Striped</h3>
+          <h3 id="tables-striped">Striped</h3>
           <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
           <div class="bs-docs-example">
             <table class="table table-striped">
@@ -948,7 +948,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3>Bordered</h3>
+          <h3 id="tables-bordered">Bordered</h3>
           <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
           <div class="bs-docs-example">
             <table class="table table-bordered">
@@ -992,7 +992,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3>Hover rows</h3>
+          <h3 id="tables-hover-rows">Hover rows</h3>
           <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
           <div class="bs-docs-example">
             <table class="table table-hover">
@@ -1032,7 +1032,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3>Condensed</h3>
+          <h3 id="tables-condensed">Condensed</h3>
           <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
           <div class="bs-docs-example">
             <table class="table table-condensed">
@@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2>Optional row classes</h2>
+          <h2 id="tables-row-classes">Optional row classes</h2>
           <p>Use contextual classes to color table rows.</p>
           <table class="table table-bordered table-striped">
             <colgroup>
@@ -1156,100 +1156,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 ...
 {% endhighlight %}
 
-
-
-          <h2>Supported table markup</h2>
-          <p>List of supported table HTML elements and how they should be used.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Tag</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>&lt;table&gt;</code>
-                </td>
-                <td>
-                  Wrapping element for displaying data in a tabular format
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;thead&gt;</code>
-                </td>
-                <td>
-                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tbody&gt;</code>
-                </td>
-                <td>
-                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tr&gt;</code>
-                </td>
-                <td>
-                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;td&gt;</code>
-                </td>
-                <td>
-                  Default table cell
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;th&gt;</code>
-                </td>
-                <td>
-                  Special table cell for column (or row, depending on scope and placement) labels
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;caption&gt;</code>
-                </td>
-                <td>
-                  Description or summary of what the table holds, especially useful for screen readers
-                </td>
-              </tr>
-            </tbody>
-          </table>
-{% highlight html linenos %}
-<table>
-  <caption>...</caption>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-{% endhighlight %}
-
         </div>
 
 
@@ -1261,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <h1>Forms</h1>
           </div>
 
-          <h2 id="forms-default">Default styles</h2>
+          <h2 id="forms-example">Basic example</h2>
           <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
           <form class="bs-docs-example">
             <fieldset>
@@ -1295,10 +1201,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2 id="forms-layouts">Optional layouts</h2>
+          <h2>Optional layouts</h2>
           <p>Included with Bootstrap are optional form layouts for common use cases.</p>
 
-          <h3>Inline form</h3>
+          <h3 id="forms-inline">Inline form</h3>
           <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
           <form class="bs-docs-example form-inline">
             <input type="text" class="span3" placeholder="Email">
@@ -1323,7 +1229,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-          <h3>Horizontal form</h3>
+          <h3 id="forms-horizontal">Horizontal form</h3>
           <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
           <ul>
             <li>Add <code>.form-horizontal</code> to the form</li>
@@ -1509,7 +1415,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2>Form control states</h2>
+          <h2 id="forms-control-states">Form control states</h2>
           <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
 
           <h3 id="forms-input-focus">Input focus</h3>
@@ -1635,7 +1541,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Input groups</h3>
+          <h3 id="forms-input-groups">Input groups</h3>
           <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
           <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
@@ -1856,7 +1762,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3 id="forms-extending-sizes">Control sizing</h3>
+          <h3 id="forms-control-sizes">Control sizing</h3>
           <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
           <h4>Relative sizing</h4>
@@ -1956,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <span class="uneditable-input">Some value here</span>
 {% endhighlight %}
 
-          <h3>Form actions</h3>
+          <h3 id="forms-actions">Form actions</h3>
           <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
           <form class="bs-docs-example">
             <div class="form-actions">
@@ -1971,7 +1877,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Help text</h3>
+          <h3 id="forms-help-text">Help text</h3>
           <p>Inline and block level support for help text that appears around form controls.</p>
           <h4>Inline help</h4>
           <form class="bs-docs-example form-inline">
@@ -2041,7 +1947,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
 
 
-          <h2>Button sizes</h2>
+          <h2 id="buttons-sizes">Button sizes</h2>
           <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
           <div class="bs-docs-example">
             <p>
@@ -2093,7 +1999,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2>Disabled state</h2>
+          <h2 id="buttons-disabled">Disabled state</h2>
           <p>Make buttons look unclickable by fading them back 50%.</p>
 
           <h3>Button element</h3>
@@ -2122,7 +2028,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </p>
 
 
-          <h2>One class, multiple tags</h2>
+          <h2 id="buttons-tags">One class, multiple tags</h2>
           <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
           <form class="bs-docs-example">
             <a class="btn" href="">Link</a>
-- 
cgit v1.2.3


From 21d6a5933a75e39e2412a91a891722ba36ce3254 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 23:37:43 -0700
Subject: fix buttons links

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 30a9c7623..a53dfd2c0 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1909,7 +1909,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <h1>Buttons</h1>
           </div>
 
-          <h2>Default buttons</h2>
+          <h2 id="buttons-options">Button options</h2>
           <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
           <div class="bs-docs-example">
             <button type="button" class="btn btn-default">Default</button>
-- 
cgit v1.2.3


From 3359b8d5f650c2d2f44511cf4483e64e140db2ad Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 29 Mar 2013 23:37:55 -0700
Subject: nav change to go with that

---
 docs/_includes/docs-nav.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index f7c4b6c98..3ad2bbd48 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -61,7 +61,7 @@
     <li>
       <a href="#buttons">Buttons</a>
       <ul class="nav">
-        <li><a href="#buttons-defaults">Default buttons</a></li>
+        <li><a href="#buttons-options">Button options</a></li>
         <li><a href="#buttons-sizes">Sizes</a></li>
         <li><a href="#buttons-disabled">Disabled</a></li>
         <li><a href="#buttons-tags">Button tags</a></li>
-- 
cgit v1.2.3


From 601013ca04d6374362c12af5dc48b8c1d44b93cc Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 00:11:38 -0700
Subject: drop .muted for .text-muted

---
 docs/assets/css/docs.css                |  2 +-
 docs/docs.html                          | 22 +++++-----------------
 docs/examples/carousel.html             |  6 +++---
 docs/examples/jumbotron-narrow.html     |  2 +-
 docs/examples/justified-nav.html        |  2 +-
 docs/examples/sticky-footer-navbar.html |  2 +-
 docs/examples/sticky-footer.html        |  2 +-
 7 files changed, 13 insertions(+), 25 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0700ddd59..c61a4a4f8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -217,7 +217,6 @@ section > ul li {
 /* Nav: second level (shown on .active) */
 .bs-docs-sidebar .nav .nav {
   display: none;
-  margin-left: 15px;
   margin-bottom: 5px;
 }
 .bs-docs-sidebar .nav > .active > ul {
@@ -226,6 +225,7 @@ section > ul li {
 .bs-docs-sidebar .nav .nav > li > a {
   padding-top: 2px;
   padding-bottom: 2px;
+  padding-left: 40px;
   font-size: 90%;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index a53dfd2c0..f243c39de 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -567,13 +567,13 @@ title: Bootstrap Documentation
           <h3>Emphasis classes</h3>
           <p>Convey meaning through color with a handful of emphasis utility classes.</p>
           <div class="bs-docs-example">
-            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+            <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
             <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
             <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
             <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
           </div>
 {% highlight html linenos %}
-<p class="muted">...</p>
+<p class="text-muted">...</p>
 <p class="text-warning">...</p>
 <p class="text-error">...</p>
 <p class="text-success">...</p>
@@ -2561,7 +2561,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <div class="bs-docs-example bs-docs-example-submenu">
 
             <div class="pull-left">
-              <p class="muted">Default</p>
+              <p class="text-muted">Default</p>
               <div class="dropdown clearfix">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -2583,7 +2583,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
 
             <div class="pull-left">
-              <p class="muted">Dropup</p>
+              <p class="text-muted">Dropup</p>
               <div class="dropup">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -2605,7 +2605,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
 
             <div class="pull-left">
-              <p class="muted">Left submenu</p>
+              <p class="text-muted">Left submenu</p>
               <div class="dropdown">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -4389,18 +4389,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
-          <h4>.muted</h4>
-          <p>Change an element's color to <code>#999</code></p>
-{% highlight html linenos %}
-<p class="muted">...</p>
-{% endhighlight %}
-{% highlight css linenos %}
-.muted {
-  color: #999;
-}
-{% endhighlight %}
-
-
           <h4>.clearfix</h4>
           <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
 {% highlight html linenos %}
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 598a6334b..dd0c3ca1f 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -369,7 +369,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
-    <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
+    <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
@@ -377,7 +377,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
-    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
+    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
@@ -385,7 +385,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
-    <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
+    <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
diff --git a/docs/examples/jumbotron-narrow.html b/docs/examples/jumbotron-narrow.html
index abf07dc72..84a918064 100644
--- a/docs/examples/jumbotron-narrow.html
+++ b/docs/examples/jumbotron-narrow.html
@@ -94,7 +94,7 @@ title: Narrow page template
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
-    <h3 class="muted">Project name</h3>
+    <h3 class="text-muted">Project name</h3>
   </div>
 
   <div class="jumbotron">
diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index 7013b150e..f136ee92a 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -96,7 +96,7 @@ title: Justified nav template
 <div class="container">
 
   <div class="masthead">
-    <h3 class="muted">Project name</h3>
+    <h3 class="text-muted">Project name</h3>
     <ul class="nav nav-justified">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Projects</a></li>
diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index b00bfd5ab..9187b7882 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -112,6 +112,6 @@ title: Sticky footer with navbar template
 
 <div id="footer">
   <div class="container">
-    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
   </div>
 </div>
diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html
index 722d3aa19..6ddd5a1dc 100644
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -76,6 +76,6 @@ title: Sticky footer template
 
 <div id="footer">
   <div class="container">
-    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
   </div>
 </div>
-- 
cgit v1.2.3


From 49ebf542a29216c55d48306b58bd232506d67154 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 00:19:05 -0700
Subject: reorder docs

---
 docs/_includes/docs-nav.html |   5 +-
 docs/docs.html               | 338 ++++++++++++++++++++++---------------------
 2 files changed, 176 insertions(+), 167 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 3ad2bbd48..78a26ffb2 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -68,10 +68,11 @@
       </ul>
     </li>
     <li><a href="#images">Images</a></li>
+    <li><a href="#helper-classes">Helper classes</a></li>
+    <li><a href="#responsive-utilities">Responsive utilities</a></li>
 
     <li><a class="nav-header" href="#components">Components</a></li>
     <li><a href="#icons">Glyphicons</a></li>
-    <li><a href="#responsive-utilities">Responsive utilities</a></li>
     <li><a href="#dropdowns">Dropdowns</a></li>
     <li><a href="#buttonGroups">Button groups</a></li>
     <li><a href="#buttonDropdowns">Button dropdowns</a></li>
@@ -86,7 +87,7 @@
     <li><a href="#alerts">Alerts</a></li>
     <li><a href="#progress">Progress bars</a></li>
     <li><a href="#media">Media object</a></li>
-    <li><a href="#misc">Misc</a></li>
+    <li><a href="#wells">Wells</a></li>
 
     <li><a class="nav-header" href="#js">JavaScript</a></li>
     <li><a href="#js-overview">Overview</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index f243c39de..1c3b2d434 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2070,6 +2070,174 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
 
 
+        <!-- Helpers
+        ================================================== -->
+        <div class="bs-docs-section" id="helper-classes">
+          <div class="page-header">
+            <h1>Helper classes</h1>
+          </div>
+
+          <h3>Close icon</h3>
+          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
+          <div class="bs-docs-example">
+            <p><button class="close" style="float: none;">&times;</button></p>
+          </div>
+{% highlight html linenos %}
+<button class="close" style="float: none;">&times;</button>
+{% endhighlight %}
+
+          <h3>.pull-left</h3>
+          <p>Float an element left</p>
+{% highlight html linenos %}
+<div class="pull-left">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-left {
+  float: left;
+}
+{% endhighlight %}
+
+          <h3>.pull-right</h3>
+          <p>Float an element right</p>
+{% highlight html linenos %}
+<div class="pull-right">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-right {
+  float: right;
+}
+{% endhighlight %}
+
+          <h3>.clearfix</h3>
+          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+{% highlight html linenos %}
+<div class="clearfix">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+// Mixin
+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Usage
+.element {
+  .clearfix();
+}
+{% endhighlight %}
+        </div>
+
+
+        <!-- Responsive utilities
+        ================================================== -->
+        <div class="bs-docs-section" id="responsive-utilities">
+          <div class="page-header">
+            <h1>Responsive utilities</h1>
+          </div>
+          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+
+          <h3>Responsive classes</h3>
+          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Phones <small>767px and below</small></th>
+                <th>Tablets <small>979px to 768px</small></th>
+                <th>Desktops <small>Default</small></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-phone</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+              <tr>
+                <th><code>.visible-tablet</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+              <tr>
+                <th><code>.visible-desktop</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-phone</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-tablet</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-desktop</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Print classes</h3>
+          <table class="table table-bordered table-striped responsive-utilities">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Browser</th>
+                <th>Print</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-print</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-print</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>When to use</h3>
+          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
+
+          <h3>Test case</h3>
+          <p>Resize your browser or load on different devices to test the above classes.</p>
+          <h4>Visible on...</h4>
+          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
+          <ul class="responsive-utilities-test">
+            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
+            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
+            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+          </ul>
+          <h4>Hidden on...</h4>
+          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
+          <ul class="responsive-utilities-test hidden-on">
+            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
+            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
+            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+          </ul>
+
+        </div>
+
+
 
 
 
@@ -2388,112 +2556,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-        <!-- Responsive design
-        ================================================== -->
-        <section id="responsive-utilities">
-          <div class="page-header">
-            <h1>Responsive utilities</h1>
-          </div>
-          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
-
-          <h3>Responsive classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Phones <small>767px and below</small></th>
-                <th>Tablets <small>979px to 768px</small></th>
-                <th>Desktops <small>Default</small></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-phone</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-tablet</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-desktop</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-phone</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-tablet</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-desktop</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>Print classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Browser</th>
-                <th>Print</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-print</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-print</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>When to use</h3>
-          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
-
-          <h3>Test case</h3>
-          <p>Resize your browser or load on different devices to test the above classes.</p>
-          <h4>Visible on...</h4>
-          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
-          <ul class="responsive-utilities-test">
-            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
-          </ul>
-          <h4>Hidden on...</h4>
-          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
-          <ul class="responsive-utilities-test hidden-on">
-            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
-          </ul>
-
-        </section>
-
-
-
-
 
         <!-- Dropdowns
         ================================================== -->
@@ -4317,14 +4379,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-        <!-- Miscellaneous
+        <!-- Wells
         ================================================== -->
-        <section id="misc">
+        <div id="wells">
           <div class="page-header">
-            <h1>Miscellaneous <small>Lightweight utility components</small></h1>
+            <h1>Wells</h1>
           </div>
 
-          <h2>Wells</h2>
+          <h3>Default well</h3>
           <p>Use the well as a simple effect on an element to give it an inset effect.</p>
           <div class="bs-docs-example">
             <div class="well">
@@ -4354,61 +4416,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="well well-small">...</div>
 {% endhighlight %}
 
-
-          <h2>Close icon</h2>
-          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-          <div class="bs-docs-example">
-            <p><button class="close" style="float: none;">&times;</button></p>
-          </div>
-{% highlight html linenos %}
-<button class="close" style="float: none;">&times;</button>
-{% endhighlight %}
-
-          <h2>Helper classes</h2>
-          <p>Simple, focused classes for small display or behavior tweaks.</p>
-
-          <h4>.pull-left</h4>
-          <p>Float an element left</p>
-{% highlight html linenos %}
-<div class="pull-left">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-left {
-  float: left;
-}
-{% endhighlight %}
-
-          <h4>.pull-right</h4>
-          <p>Float an element right</p>
-{% highlight html linenos %}
-<div class="pull-right">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-right {
-  float: right;
-}
-{% endhighlight %}
-
-          <h4>.clearfix</h4>
-          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
-{% highlight html linenos %}
-<div class="clearfix">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.clearfix {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}
-{% endhighlight %}
-
-
-        </section>
+        </div>
 
 
 
-- 
cgit v1.2.3


From 361c776e2b4a143ce1332ac2ceab78325189a197 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 00:27:50 -0700
Subject: whitespace and taglines for main sections

---
 docs/docs.html | 2413 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 1205 insertions(+), 1208 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 1c3b2d434..7f0106c93 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -238,41 +238,41 @@ title: Bootstrap Documentation
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
   </div>
 
-        <!-- Grid system
-        ================================================== -->
-        <div class="bs-docs-section" id="grid">
-          <div class="page-header">
-            <h1>Grid system</h1>
-          </div>
-          <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
-
-          <h3 id="grid-example">Grid example</h3>
-          <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-              <div class="col-span-1">1</div>
-            </div>
-            <div class="row show-grid">
-              <div class="col-span-4">4</div>
-              <div class="col-span-4">4</div>
-              <div class="col-span-4">4</div>
-            </div>
-            <div class="row show-grid">
-              <div class="col-span-6">6</div>
-              <div class="col-span-6">6</div>
-            </div>
-          </div>
+  <!-- Grid system
+  ================================================== -->
+  <div class="bs-docs-section" id="grid">
+    <div class="page-header">
+      <h1>Grid system</h1>
+    </div>
+    <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
+
+    <h3 id="grid-example">Grid example</h3>
+    <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
+    <div class="bs-docs-grid">
+      <div class="row show-grid">
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+        <div class="col-span-1">1</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-span-4">4</div>
+        <div class="col-span-4">4</div>
+        <div class="col-span-4">4</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-span-6">6</div>
+        <div class="col-span-6">6</div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="row">
   <div class="col-span-1">1</div>
@@ -299,21 +299,21 @@ title: Bootstrap Documentation
 </div>
 {% endhighlight %}
 
-          <h3 id="grid-offsetting">Offsetting columns</h3>
-          <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="col-span-4">4</div>
-              <div class="col-span-4 col-offset-4">4 offset 4</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="col-span-3 col-offset-3">3 offset 3</div>
-              <div class="col-span-3 col-offset-3">3 offset 3</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="col-span-6 col-offset-6">6 offset 6</div>
-            </div><!-- /row -->
-          </div>
+    <h3 id="grid-offsetting">Offsetting columns</h3>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+    <div class="bs-docs-grid">
+      <div class="row show-grid">
+        <div class="col-span-4">4</div>
+        <div class="col-span-4 col-offset-4">4 offset 4</div>
+      </div><!-- /row -->
+      <div class="row show-grid">
+        <div class="col-span-3 col-offset-3">3 offset 3</div>
+        <div class="col-span-3 col-offset-3">3 offset 3</div>
+      </div><!-- /row -->
+      <div class="row show-grid">
+        <div class="col-span-6 col-offset-6">6 offset 6</div>
+      </div><!-- /row -->
+    </div>
 {% highlight html linenos %}
 <div class="row">
   <div class="col-span-4">...</div>
@@ -322,21 +322,21 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
 
-          <h3 id="grid-nesting">Nesting columns</h3>
-          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
-          <div class="row show-grid">
-            <div class="col-span-9">
-              Level 1: 9 columns
-              <div class="row show-grid">
-                <div class="col-span-6">
-                  Level 2: 6 columns
-                </div>
-                <div class="col-span-6">
-                  Level 2: 6 columns
-                </div>
-              </div>
-            </div>
+    <h3 id="grid-nesting">Nesting columns</h3>
+    <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
+    <div class="row show-grid">
+      <div class="col-span-9">
+        Level 1: 9 columns
+        <div class="row show-grid">
+          <div class="col-span-6">
+            Level 2: 6 columns
           </div>
+          <div class="col-span-6">
+            Level 2: 6 columns
+          </div>
+        </div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="row">
   <div class="col-span-9">
@@ -353,8 +353,8 @@ title: Bootstrap Documentation
 </div>
 {% endhighlight %}
 
-          <h3 id="grid-column-ordering">Column ordering</h3>
-          <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
+    <h3 id="grid-column-ordering">Column ordering</h3>
+    <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
 <div class="row show-grid">
   <div class="col-span-9 col-push-3">9</div>
   <div class="col-span-3 col-pull-9">3</div>
@@ -367,19 +367,19 @@ title: Bootstrap Documentation
 </div>
 {% endhighlight %}
 
-          <h3 id="grid-less">LESS mixins and variables</h3>
-          <p>In addition to <a href="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
+    <h3 id="grid-less">LESS mixins and variables</h3>
+    <p>In addition to <a href="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
 
-          <h4>Variables</h4>
-          <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
+    <h4>Variables</h4>
+    <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
 {% highlight css linenos %}
 @grid-columns:              12;
 @grid-gutter-width:         30px;
 @grid-float-breakpoint:     768px;
 {% endhighlight %}
 
-          <h4>Mixins</h4>
-          <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
+    <h4>Mixins</h4>
+    <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
 {% highlight css linenos %}
 // Creates a wrapper for a series of columns
 .make-row() {
@@ -412,8 +412,8 @@ title: Bootstrap Documentation
 }
 {% endhighlight %}
 
-          <h4>Example usage</h4>
-          <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
+    <h4>Example usage</h4>
+    <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
 {% highlight css linenos %}
 .wrapper {
   .make-row();
@@ -433,54 +433,52 @@ title: Bootstrap Documentation
 </div>
 {% endhighlight %}
 
-
-
-        </div>
-
+  </div>
 
 
 
-        <!-- Typography
-        ================================================== -->
-        <div class="bs-docs-section" id="type">
-          <div class="page-header">
-            <h1>Typography</h1>
-          </div>
 
-          <!-- Headings -->
-          <h2 id="type-headings">Headings</h2>
-          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
+  <!-- Typography
+  ================================================== -->
+  <div class="bs-docs-section" id="type">
+    <div class="page-header">
+      <h1>Typography</h1>
+    </div>
 
-          <div class="bs-docs-example bs-docs-example-type">
-            <table class="table">
-              <tbody>
-                <tr>
-                  <th><h1>Bootstrap heading</h1></th>
-                  <td>Semibold 38px</td>
-                </tr>
-                <tr>
-                  <th><h2>Bootstrap heading</h2></th>
-                  <td>Semibold 32px</td>
-                </tr>
-                <tr>
-                  <th><h3>Bootstrap heading</h3></th>
-                  <td>Semibold 24px</td>
-                </tr>
-                <tr>
-                  <th><h4>Bootstrap heading</h4></th>
-                  <td>Semibold 18px</td>
-                </tr>
-                <tr>
-                  <th><h5>Bootstrap heading</h5></th>
-                  <td>Semibold 16px</td>
-                </tr>
-                <tr>
-                  <th><h6>Bootstrap heading</h6></th>
-                  <td>Semibold 12px</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+    <!-- Headings -->
+    <h2 id="type-headings">Headings</h2>
+    <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
+
+    <div class="bs-docs-example bs-docs-example-type">
+      <table class="table">
+        <tbody>
+          <tr>
+            <th><h1>Bootstrap heading</h1></th>
+            <td>Semibold 38px</td>
+          </tr>
+          <tr>
+            <th><h2>Bootstrap heading</h2></th>
+            <td>Semibold 32px</td>
+          </tr>
+          <tr>
+            <th><h3>Bootstrap heading</h3></th>
+            <td>Semibold 24px</td>
+          </tr>
+          <tr>
+            <th><h4>Bootstrap heading</h4></th>
+            <td>Semibold 18px</td>
+          </tr>
+          <tr>
+            <th><h5>Bootstrap heading</h5></th>
+            <td>Semibold 16px</td>
+          </tr>
+          <tr>
+            <th><h6>Bootstrap heading</h6></th>
+            <td>Semibold 12px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 {% highlight html linenos %}
 <h1>...</h1>
 <h2>...</h2>
@@ -490,88 +488,88 @@ title: Bootstrap Documentation
 <h6>...</h6>
 {% endhighlight %}
 
-          <!-- Body copy -->
-          <h2 id="type-body-copy">Body copy</h2>
-          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
-          <div class="bs-docs-example">
-            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
-            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
-            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
-          </div>
+    <!-- Body copy -->
+    <h2 id="type-body-copy">Body copy</h2>
+    <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
+    <div class="bs-docs-example">
+      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+    </div>
 {% highlight html linenos %}
 <p>...</p>
 {% endhighlight %}
 
-          <!-- Body copy .lead -->
-          <h3>Lead body copy</h3>
-          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
-          <div class="bs-docs-example">
-            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
-          </div>
+    <!-- Body copy .lead -->
+    <h3>Lead body copy</h3>
+    <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
+    <div class="bs-docs-example">
+      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
+    </div>
 {% highlight html linenos %}
 <p class="lead">...</p>
 {% endhighlight %}
 
-          <!-- Using LESS -->
-          <h3>Built with Less</h3>
-          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
+    <!-- Using LESS -->
+    <h3>Built with Less</h3>
+    <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
 
 
-          <!-- Emphasis -->
-          <h2 id="type-emphasis">Emphasis</h2>
-          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
+    <!-- Emphasis -->
+    <h2 id="type-emphasis">Emphasis</h2>
+    <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
-          <h3>Small text</h3>
-          <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&lt;</code> elements.</p>
-          <div class="bs-docs-example">
-            <p><small>This line of text is meant to be treated as fine print.</small></p>
-          </div>
+    <h3>Small text</h3>
+    <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&lt;</code> elements.</p>
+    <div class="bs-docs-example">
+      <p><small>This line of text is meant to be treated as fine print.</small></p>
+    </div>
 {% highlight html linenos %}
 <small>This line of text is meant to be treated as fine print.</small>
 {% endhighlight %}
 
 
-          <h3>Bold</h3>
-          <p>For emphasizing a snippet of text with a heavier font-weight.</p>
-          <div class="bs-docs-example">
-            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
-          </div>
+    <h3>Bold</h3>
+    <p>For emphasizing a snippet of text with a heavier font-weight.</p>
+    <div class="bs-docs-example">
+      <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
+    </div>
 {% highlight html linenos %}
 <strong>rendered as bold text</strong>
 {% endhighlight %}
 
-          <h3>Italics</h3>
-          <p>For emphasizing a snippet of text with italics.</p>
-          <div class="bs-docs-example">
-            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
-          </div>
+    <h3>Italics</h3>
+    <p>For emphasizing a snippet of text with italics.</p>
+    <div class="bs-docs-example">
+      <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
+    </div>
 {% highlight html linenos %}
 <em>rendered as italicized text</em>
 {% endhighlight %}
 
-          <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+    <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
-          <h3>Alignment classes</h3>
-          <p>Easily realign text to components with text alignment classes.</p>
-          <div class="bs-docs-example">
-            <p class="text-left">Left aligned text.</p>
-            <p class="text-center">Center aligned text.</p>
-            <p class="text-right">Right aligned text.</p>
-          </div>
+    <h3>Alignment classes</h3>
+    <p>Easily realign text to components with text alignment classes.</p>
+    <div class="bs-docs-example">
+      <p class="text-left">Left aligned text.</p>
+      <p class="text-center">Center aligned text.</p>
+      <p class="text-right">Right aligned text.</p>
+    </div>
 {% highlight html linenos %}
 <p class="text-left">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-right">Right aligned text.</p>
 {% endhighlight %}
 
-          <h3>Emphasis classes</h3>
-          <p>Convey meaning through color with a handful of emphasis utility classes.</p>
-          <div class="bs-docs-example">
-            <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-          </div>
+    <h3>Emphasis classes</h3>
+    <p>Convey meaning through color with a handful of emphasis utility classes.</p>
+    <div class="bs-docs-example">
+      <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    </div>
 {% highlight html linenos %}
 <p class="text-muted">...</p>
 <p class="text-warning">...</p>
@@ -580,44 +578,44 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
 
-          <!-- Abbreviations -->
-          <h2 id="type-abbreviations">Abbreviations</h2>
-          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+    <!-- Abbreviations -->
+    <h2 id="type-abbreviations">Abbreviations</h2>
+    <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
 
-          <h3>Basic abbreviation</h3>
-          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
-          <div class="bs-docs-example">
-            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
-          </div>
+    <h3>Basic abbreviation</h3>
+    <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
+    <div class="bs-docs-example">
+      <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+    </div>
 {% highlight html linenos %}
 <abbr title="attribute">attr</abbr>
 {% endhighlight %}
 
-          <h3>Initialism</h3>
-          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
-          <div class="bs-docs-example">
-            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
-          </div>
+    <h3>Initialism</h3>
+    <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
+    <div class="bs-docs-example">
+      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
+    </div>
 {% highlight html linenos %}
 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
 {% endhighlight %}
 
 
-          <!-- Addresses -->
-          <h2 id="type-addresses">Addresses</h2>
-          <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <address>
-              <strong>Twitter, Inc.</strong><br>
-              795 Folsom Ave, Suite 600<br>
-              San Francisco, CA 94107<br>
-              <abbr title="Phone">P:</abbr> (123) 456-7890
-            </address>
-            <address>
-              <strong>Full Name</strong><br>
-              <a href="mailto:#">first.last@example.com</a>
-            </address>
-          </div>
+    <!-- Addresses -->
+    <h2 id="type-addresses">Addresses</h2>
+    <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
+    <div class="bs-docs-example">
+      <address>
+        <strong>Twitter, Inc.</strong><br>
+        795 Folsom Ave, Suite 600<br>
+        San Francisco, CA 94107<br>
+        <abbr title="Phone">P:</abbr> (123) 456-7890
+      </address>
+      <address>
+        <strong>Full Name</strong><br>
+        <a href="mailto:#">first.last@example.com</a>
+      </address>
+    </div>
 {% highlight html linenos %}
 <address>
   <strong>Twitter, Inc.</strong><br>
@@ -633,34 +631,34 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
 
-          <!-- Blockquotes -->
-          <h2 id="type-blockquotes">Blockquotes</h2>
-          <p>For quoting blocks of content from another source within your document.</p>
+    <!-- Blockquotes -->
+    <h2 id="type-blockquotes">Blockquotes</h2>
+    <p>For quoting blocks of content from another source within your document.</p>
 
-          <h3>Default blockquote</h3>
-          <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <blockquote>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-            </blockquote>
-          </div>
+    <h3>Default blockquote</h3>
+    <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
+    <div class="bs-docs-example">
+      <blockquote>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      </blockquote>
+    </div>
 {% highlight html linenos %}
 <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {% endhighlight %}
 
-          <h3>Blockquote options</h3>
-          <p>Style and content changes for simple variations on a standard blockquote.</p>
+    <h3>Blockquote options</h3>
+    <p>Style and content changes for simple variations on a standard blockquote.</p>
 
-          <h4>Naming a source</h4>
-          <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <blockquote>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
-          </div>
+    <h4>Naming a source</h4>
+    <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
+    <div class="bs-docs-example">
+      <blockquote>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+      </blockquote>
+    </div>
 {% highlight html linenos %}
 <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -668,14 +666,14 @@ title: Bootstrap Documentation
 </blockquote>
 {% endhighlight %}
 
-          <h4>Alternate displays</h4>
-          <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
-          <div class="bs-docs-example" style="overflow: hidden;">
-            <blockquote class="pull-right">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
-          </div>
+    <h4>Alternate displays</h4>
+    <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
+    <div class="bs-docs-example" style="overflow: hidden;">
+      <blockquote class="pull-right">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+      </blockquote>
+    </div>
 {% highlight html linenos %}
 <blockquote class="pull-right">
   ...
@@ -683,111 +681,111 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
 
-          <!-- Lists -->
-          <h2 id="type-lists">Lists</h2>
+    <!-- Lists -->
+    <h2 id="type-lists">Lists</h2>
 
-          <h3>Unordered</h3>
-          <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
-          <div class="bs-docs-example">
-            <ul>
-              <li>Lorem ipsum dolor sit amet</li>
-              <li>Consectetur adipiscing elit</li>
-              <li>Integer molestie lorem at massa</li>
-              <li>Facilisis in pretium nisl aliquet</li>
-              <li>Nulla volutpat aliquam velit
-                <ul>
-                  <li>Phasellus iaculis neque</li>
-                  <li>Purus sodales ultricies</li>
-                  <li>Vestibulum laoreet porttitor sem</li>
-                  <li>Ac tristique libero volutpat at</li>
-                </ul>
-              </li>
-              <li>Faucibus porta lacus fringilla vel</li>
-              <li>Aenean sit amet erat nunc</li>
-              <li>Eget porttitor lorem</li>
-            </ul>
-          </div>
+    <h3>Unordered</h3>
+    <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
+    <div class="bs-docs-example">
+      <ul>
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>Integer molestie lorem at massa</li>
+        <li>Facilisis in pretium nisl aliquet</li>
+        <li>Nulla volutpat aliquam velit
+          <ul>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
+          </ul>
+        </li>
+        <li>Faucibus porta lacus fringilla vel</li>
+        <li>Aenean sit amet erat nunc</li>
+        <li>Eget porttitor lorem</li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul>
   <li>...</li>
 </ul>
 {% endhighlight %}
 
-          <h3>Ordered</h3>
-          <p>A list of items in which the order <em>does</em> explicitly matter.</p>
-          <div class="bs-docs-example">
-            <ol>
-              <li>Lorem ipsum dolor sit amet</li>
-              <li>Consectetur adipiscing elit</li>
-              <li>Integer molestie lorem at massa</li>
-              <li>Facilisis in pretium nisl aliquet</li>
-              <li>Nulla volutpat aliquam velit</li>
-              <li>Faucibus porta lacus fringilla vel</li>
-              <li>Aenean sit amet erat nunc</li>
-              <li>Eget porttitor lorem</li>
-            </ol>
-          </div>
+    <h3>Ordered</h3>
+    <p>A list of items in which the order <em>does</em> explicitly matter.</p>
+    <div class="bs-docs-example">
+      <ol>
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>Integer molestie lorem at massa</li>
+        <li>Facilisis in pretium nisl aliquet</li>
+        <li>Nulla volutpat aliquam velit</li>
+        <li>Faucibus porta lacus fringilla vel</li>
+        <li>Aenean sit amet erat nunc</li>
+        <li>Eget porttitor lorem</li>
+      </ol>
+    </div>
 {% highlight html linenos %}
 <ol>
   <li>...</li>
 </ol>
 {% endhighlight %}
 
-        <h3>Unstyled</h3>
-        <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
-        <div class="bs-docs-example">
-          <ul class="list-unstyled">
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Consectetur adipiscing elit</li>
-            <li>Integer molestie lorem at massa</li>
-            <li>Facilisis in pretium nisl aliquet</li>
-            <li>Nulla volutpat aliquam velit
-              <ul>
-                <li>Phasellus iaculis neque</li>
-                <li>Purus sodales ultricies</li>
-                <li>Vestibulum laoreet porttitor sem</li>
-                <li>Ac tristique libero volutpat at</li>
-              </ul>
-            </li>
-            <li>Faucibus porta lacus fringilla vel</li>
-            <li>Aenean sit amet erat nunc</li>
-            <li>Eget porttitor lorem</li>
+    <h3>Unstyled</h3>
+    <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
+    <div class="bs-docs-example">
+      <ul class="list-unstyled">
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>Integer molestie lorem at massa</li>
+        <li>Facilisis in pretium nisl aliquet</li>
+        <li>Nulla volutpat aliquam velit
+          <ul>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
           </ul>
-        </div>
+        </li>
+        <li>Faucibus porta lacus fringilla vel</li>
+        <li>Aenean sit amet erat nunc</li>
+        <li>Eget porttitor lorem</li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="list-unstyled">
   <li>...</li>
 </ul>
 {% endhighlight %}
 
-        <h3>Inline</h3>
-        <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
-        <div class="bs-docs-example">
-          <ul class="list-inline">
-            <li>Lorem ipsum</li>
-            <li>Phasellus iaculis</li>
-            <li>Nulla volutpat</li>
-          </ul>
-        </div>
+    <h3>Inline</h3>
+    <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
+    <div class="bs-docs-example">
+      <ul class="list-inline">
+        <li>Lorem ipsum</li>
+        <li>Phasellus iaculis</li>
+        <li>Nulla volutpat</li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="list-inline">
   <li>...</li>
 </ul>
 {% endhighlight %}
 
-        <h3>Description</h3>
-        <p>A list of terms with their associated descriptions.</p>
-        <div class="bs-docs-example">
-          <dl>
-            <dt>Description lists</dt>
-            <dd>A description list is perfect for defining terms.</dd>
-            <dt>Euismod</dt>
-            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-            <dt>Malesuada porta</dt>
-            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-          </dl>
-        </div>
+    <h3>Description</h3>
+    <p>A list of terms with their associated descriptions.</p>
+    <div class="bs-docs-example">
+      <dl>
+        <dt>Description lists</dt>
+        <dd>A description list is perfect for defining terms.</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</dt>
+        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+      </dl>
+    </div>
 {% highlight html linenos %}
 <dl>
   <dt>...</dt>
@@ -795,21 +793,21 @@ title: Bootstrap Documentation
 </dl>
 {% endhighlight %}
 
-        <h4>Horizontal description</h4>
-        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
-        <div class="bs-docs-example">
-          <dl class="dl-horizontal">
-            <dt>Description lists</dt>
-            <dd>A description list is perfect for defining terms.</dd>
-            <dt>Euismod</dt>
-            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-            <dt>Malesuada porta</dt>
-            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-            <dt>Felis euismod semper eget lacinia</dt>
-            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-          </dl>
-        </div>
+    <h4>Horizontal description</h4>
+    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+    <div class="bs-docs-example">
+      <dl class="dl-horizontal">
+        <dt>Description lists</dt>
+        <dd>A description list is perfect for defining terms.</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</dt>
+        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+      </dl>
+    </div>
 {% highlight html linenos %}
 <dl class="dl-horizontal">
   <dt>...</dt>
@@ -817,25 +815,22 @@ title: Bootstrap Documentation
 </dl>
 {% endhighlight %}
 
-        <h5>Auto-truncating</h5>
-        <p>
-          Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
-        </p>
-      </div>
-
-
-
+    <h5>Auto-truncating</h5>
+    <p>
+      Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+    </p>
+  </div>
 
 
-        <!-- Code
-        ================================================== -->
-        <div class="bs-docs-section" id="code">
-          <div class="page-header">
-            <h1>Code</h1>
-          </div>
+  <!-- Code
+  ================================================== -->
+  <div class="bs-docs-section" id="code">
+    <div class="page-header">
+      <h1>Code</h1>
+    </div>
 
-          <h2>Inline</h2>
-          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
+    <h2>Inline</h2>
+    <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
 <div class="bs-docs-example">
   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
@@ -843,8 +838,8 @@ title: Bootstrap Documentation
 For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
-          <h2>Basic block</h2>
-          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
+    <h2>Basic block</h2>
+    <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
 <div class="bs-docs-example">
   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 </div>
@@ -852,52 +847,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 {% endhighlight %}
 
-          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
-        </div>
+    <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
+  </div>
 
 
 
-        <!-- Tables
-        ================================================== -->
-        <div class="bs-docs-section" id="tables">
-          <div class="page-header">
-            <h1>Tables</h1>
-          </div>
+  <!-- Tables
+  ================================================== -->
+  <div class="bs-docs-section" id="tables">
+    <div class="page-header">
+      <h1>Tables</h1>
+    </div>
 
-          <h2 id="tables-example">Basic example</h2>
-          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h2 id="tables-example">Basic example</h2>
+    <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
+    <div class="bs-docs-example">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <table class="table">
   ...
@@ -905,126 +900,126 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2>Optional classes</h2>
-          <p>Add any of the following classes to the <code>.table</code> base class.</p>
-
-          <h3 id="tables-striped">Striped</h3>
-          <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
-          <div class="bs-docs-example">
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h2>Optional classes</h2>
+    <p>Add any of the following classes to the <code>.table</code> base class.</p>
+
+    <h3 id="tables-striped">Striped</h3>
+    <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
+    <div class="bs-docs-example">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <table class="table table-striped">
   ...
 </table>
 {% endhighlight %}
 
-          <h3 id="tables-bordered">Bordered</h3>
-          <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
-          <div class="bs-docs-example">
-            <table class="table table-bordered">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td rowspan="2">1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@TwBootstrap</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h3 id="tables-bordered">Bordered</h3>
+    <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
+    <div class="bs-docs-example">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td rowspan="2">1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@TwBootstrap</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <table class="table table-bordered">
   ...
 </table>
 {% endhighlight %}
 
-          <h3 id="tables-hover-rows">Hover rows</h3>
-          <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <table class="table table-hover">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h3 id="tables-hover-rows">Hover rows</h3>
+    <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+    <div class="bs-docs-example">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <table class="table table-hover">
   ...
@@ -1032,39 +1027,39 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3 id="tables-condensed">Condensed</h3>
-          <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
-          <div class="bs-docs-example">
-            <table class="table table-condensed">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h3 id="tables-condensed">Condensed</h3>
+    <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
+    <div class="bs-docs-example">
+      <table class="table table-condensed">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <table class="table table-condensed">
   ...
@@ -1073,78 +1068,78 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2 id="tables-row-classes">Optional row classes</h2>
-          <p>Use contextual classes to color table rows.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>.success</code>
-                </td>
-                <td>Indicates a successful or positive action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.error</code>
-                </td>
-                <td>Indicates a dangerous or potentially negative action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.warning</code>
-                </td>
-                <td>Indicates a warning that might need attention.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.info</code>
-                </td>
-                <td>Used as an alternative to the default styles.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Product</th>
-                  <th>Payment Taken</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr class="success">
-                  <td>1</td>
-                  <td>TB - Monthly</td>
-                  <td>01/04/2012</td>
-                  <td>Approved</td>
-                </tr>
-                <tr class="error">
-                  <td>2</td>
-                  <td>TB - Monthly</td>
-                  <td>02/04/2012</td>
-                  <td>Declined</td>
-                </tr>
-                <tr class="warning">
-                  <td>3</td>
-                  <td>TB - Monthly</td>
-                  <td>03/04/2012</td>
-                  <td>Pending</td>
-                </tr>
-              </tbody>
-            </table>
-          </div><!-- /example -->
+    <h2 id="tables-row-classes">Optional row classes</h2>
+    <p>Use contextual classes to color table rows.</p>
+    <table class="table table-bordered table-striped">
+      <colgroup>
+        <col class="span1">
+        <col class="span7">
+      </colgroup>
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <code>.success</code>
+          </td>
+          <td>Indicates a successful or positive action.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>.error</code>
+          </td>
+          <td>Indicates a dangerous or potentially negative action.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>.warning</code>
+          </td>
+          <td>Indicates a warning that might need attention.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>.info</code>
+          </td>
+          <td>Used as an alternative to the default styles.</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="bs-docs-example">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Product</th>
+            <th>Payment Taken</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="success">
+            <td>1</td>
+            <td>TB - Monthly</td>
+            <td>01/04/2012</td>
+            <td>Approved</td>
+          </tr>
+          <tr class="error">
+            <td>2</td>
+            <td>TB - Monthly</td>
+            <td>02/04/2012</td>
+            <td>Declined</td>
+          </tr>
+          <tr class="warning">
+            <td>3</td>
+            <td>TB - Monthly</td>
+            <td>03/04/2012</td>
+            <td>Pending</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /example -->
 {% highlight html linenos %}
 ...
 <tr class="success">
@@ -1156,33 +1151,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 ...
 {% endhighlight %}
 
-        </div>
+  </div>
 
 
 
-        <!-- Forms
-        ================================================== -->
-        <div class="bs-docs-section" id="forms">
-          <div class="page-header">
-            <h1>Forms</h1>
-          </div>
+  <!-- Forms
+  ================================================== -->
+  <div class="bs-docs-section" id="forms">
+    <div class="page-header">
+      <h1>Forms</h1>
+    </div>
 
-          <h2 id="forms-example">Basic example</h2>
-          <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
-          <form class="bs-docs-example">
-            <fieldset>
-              <legend>Legend</legend>
-              <label>Label name</label>
-              <input type="text" placeholder="Type something…">
-              <p class="help-block">Example block-level help text here.</p>
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox"> Check me out
-                </label>
-              </div>
-              <button type="submit" class="btn">Submit</button>
-            </fieldset>
-          </form><!-- /example -->
+    <h2 id="forms-example">Basic example</h2>
+    <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
+    <form class="bs-docs-example">
+      <fieldset>
+        <legend>Legend</legend>
+        <label>Label name</label>
+        <input type="text" placeholder="Type something…">
+        <p class="help-block">Example block-level help text here.</p>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> Check me out
+          </label>
+        </div>
+        <button type="submit" class="btn">Submit</button>
+      </fieldset>
+    </form><!-- /example -->
 {% highlight html linenos %}
 <form>
   <fieldset>
@@ -1201,21 +1196,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2>Optional layouts</h2>
-          <p>Included with Bootstrap are optional form layouts for common use cases.</p>
+    <h2>Optional layouts</h2>
+    <p>Included with Bootstrap are optional form layouts for common use cases.</p>
 
-          <h3 id="forms-inline">Inline form</h3>
-          <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
-          <form class="bs-docs-example form-inline">
-            <input type="text" class="span3" placeholder="Email">
-            <input type="password" class="span3" placeholder="Password">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox"> Remember me
-              </label>
-            </div>
-            <button type="submit" class="btn">Sign in</button>
-          </form><!-- /example -->
+    <h3 id="forms-inline">Inline form</h3>
+    <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
+    <form class="bs-docs-example form-inline">
+      <input type="text" class="span3" placeholder="Email">
+      <input type="password" class="span3" placeholder="Password">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+      <button type="submit" class="btn">Sign in</button>
+    </form><!-- /example -->
 {% highlight html linenos %}
 <form class="form-inline">
   <input type="text" class="span3" placeholder="Email">
@@ -1229,38 +1224,38 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-          <h3 id="forms-horizontal">Horizontal form</h3>
-          <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
-          <ul>
-            <li>Add <code>.form-horizontal</code> to the form</li>
-            <li>Wrap labels and controls in <code>.control-group</code></li>
-            <li>Add <code>.control-label</code> to the label</li>
-            <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
-          </ul>
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="inputEmail">Email</label>
-              <div class="controls">
-                <input type="text" id="inputEmail" placeholder="Email">
-              </div>
-            </div>
-            <div class="control-group">
-              <label class="control-label" for="inputPassword">Password</label>
-              <div class="controls">
-                <input type="password" id="inputPassword" placeholder="Password">
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox"> Remember me
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div class="control-group">
-              <div class="controls">
-                <button type="submit" class="btn">Sign in</button>
-              </div>
-            </div>
-          </form>
+    <h3 id="forms-horizontal">Horizontal form</h3>
+    <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
+    <ul>
+      <li>Add <code>.form-horizontal</code> to the form</li>
+      <li>Wrap labels and controls in <code>.control-group</code></li>
+      <li>Add <code>.control-label</code> to the label</li>
+      <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
+    </ul>
+    <form class="bs-docs-example form-horizontal">
+      <div class="control-group">
+        <label class="control-label" for="inputEmail">Email</label>
+        <div class="controls">
+          <input type="text" id="inputEmail" placeholder="Email">
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="inputPassword">Password</label>
+        <div class="controls">
+          <input type="password" id="inputPassword" placeholder="Password">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox"> Remember me
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="control-group">
+        <div class="controls">
+          <button type="submit" class="btn">Sign in</button>
+        </div>
+      </div>
+    </form>
 {% highlight html linenos %}
 <form class="form-horizontal">
   <div class="control-group">
@@ -1289,52 +1284,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2 id="forms-controls">Supported form controls</h2>
-          <p>Examples of standard form controls supported in an example form layout.</p>
+    <h2 id="forms-controls">Supported form controls</h2>
+    <p>Examples of standard form controls supported in an example form layout.</p>
 
-          <h3>Inputs</h3>
-          <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
-          <p>Requires the use of a specified <code>type</code> at all times.</p>
-          <form class="bs-docs-example form-inline">
-            <input type="text" placeholder="Text input">
-          </form>
+    <h3>Inputs</h3>
+    <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
+    <p>Requires the use of a specified <code>type</code> at all times.</p>
+    <form class="bs-docs-example form-inline">
+      <input type="text" placeholder="Text input">
+    </form>
 {% highlight html linenos %}
 <input type="text" placeholder="Text input">
 {% endhighlight %}
 
-          <h3>Textarea</h3>
-          <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
-          <form class="bs-docs-example form-inline">
-            <textarea rows="3"></textarea>
-          </form>
+    <h3>Textarea</h3>
+    <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
+    <form class="bs-docs-example form-inline">
+      <textarea rows="3"></textarea>
+    </form>
 {% highlight html linenos %}
 <textarea rows="3"></textarea>
 {% endhighlight %}
-
-          <h3>Checkboxes and radios</h3>
-          <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
-          <h4>Default (stacked)</h4>
-          <form class="bs-docs-example">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox" value="">
-                Option one is this and that&mdash;be sure to include why it's great
-              </label>
-            </div>
-            <br>
-            <div class="radio">
-              <label>
-                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-                Option one is this and that&mdash;be sure to include why it's great
-              </label>
-            </div>
-            <div class="radio">
-              <label>
-                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-                Option two can be something else and selecting it will deselect option one
-              </label>
-            </div>
-          </form>
+
+    <h3>Checkboxes and radios</h3>
+    <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
+    <h4>Default (stacked)</h4>
+    <form class="bs-docs-example">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox" value="">
+          Option one is this and that&mdash;be sure to include why it's great
+        </label>
+      </div>
+      <br>
+      <div class="radio">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+          Option one is this and that&mdash;be sure to include why it's great
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+          Option two can be something else and selecting it will deselect option one
+        </label>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="checkbox">
   <label>
@@ -1351,19 +1346,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h4>Inline checkboxes</h4>
-          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
-          <form class="bs-docs-example">
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-            </label>
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-            </label>
-            <label class="checkbox-inline">
-              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-            </label>
-          </form>
+    <h4>Inline checkboxes</h4>
+    <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
+    <form class="bs-docs-example">
+      <label class="checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+      </label>
+      <label class="checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+      </label>
+      <label class="checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+      </label>
+    </form>
 {% highlight html linenos %}
 <label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -1376,25 +1371,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </label>
 {% endhighlight %}
 
-          <h3>Selects</h3>
-          <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
-          <form class="bs-docs-example">
-            <select>
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-            <br>
-            <select multiple="multiple">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-          </form>
+    <h3>Selects</h3>
+    <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
+    <form class="bs-docs-example">
+      <select>
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+      <br>
+      <select multiple="multiple">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </form>
 {% highlight html linenos %}
 <select>
   <option>1</option>
@@ -1415,57 +1410,57 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2 id="forms-control-states">Form control states</h2>
-          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
+    <h2 id="forms-control-states">Form control states</h2>
+    <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
 
-          <h3 id="forms-input-focus">Input focus</h3>
-          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="focused" id="focusedInput" type="text" value="This is focused...">
-          </form>
+    <h3 id="forms-input-focus">Input focus</h3>
+    <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+    <form class="bs-docs-example form-inline">
+      <input class="focused" id="focusedInput" type="text" value="This is focused...">
+    </form>
 {% highlight html linenos %}
 <input id="focusedInput" type="text" value="This is focused...">
 {% endhighlight %}
 
-          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-          <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="span3" type="email" placeholder="test@example.com" required>
-          </form>
+    <h3 id="forms-invalid-inputs">Invalid inputs</h3>
+    <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
+    <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
+    <form class="bs-docs-example form-inline">
+      <input class="span3" type="email" placeholder="test@example.com" required>
+    </form>
 {% highlight html linenos %}
 <input class="span3" type="email" placeholder="test@example.com" required>
 {% endhighlight %}
 
-          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
-          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-          </form>
+    <h3 id="forms-disabled-inputs">Disabled inputs</h3>
+    <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+    <form class="bs-docs-example form-inline">
+      <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+    </form>
 {% highlight html linenos %}
 <input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 {% endhighlight %}
 
-          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
-          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
-          <form class="bs-docs-example form-inline">
-            <fieldset disabled>
-              <div>
-                <input type="text" class="span4" placeholder="Disabled input">
-              </div>
-              <div>
-                <select class="span4">
-                  <option>Disabled select</option>
-                </select>
-              </div>
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox"> Can't check this
-                </label>
-              </div>
-              <button type="submit" class="btn btn-primary">Submit</button>
-            </fieldset>
-          </form>
+    <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
+    <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
+    <form class="bs-docs-example form-inline">
+      <fieldset disabled>
+        <div>
+          <input type="text" class="span4" placeholder="Disabled input">
+        </div>
+        <div>
+          <select class="span4">
+            <option>Disabled select</option>
+          </select>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> Can't check this
+          </label>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </fieldset>
+    </form>
 {% highlight html linenos %}
 <form class="form-inline">
   <fieldset disabled>
@@ -1487,34 +1482,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-          <h3 id="forms-validation">Validation states</h3>
-          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
-          <ul>
-            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
-            <li>Add .input-with-feedback to the field(s) in question</li>
-          </ul>
-          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
+    <h3 id="forms-validation">Validation states</h3>
+    <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
+    <ul>
+      <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
+      <li>Add .input-with-feedback to the field(s) in question</li>
+    </ul>
+    <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
 
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group has-warning">
-              <label class="control-label" for="inputWarning">Input with warning</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputWarning">
-              </div>
-            </div>
-            <div class="control-group has-error">
-              <label class="control-label" for="inputError">Input with error</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputError">
-              </div>
-            </div>
-            <div class="control-group has-success">
-              <label class="control-label" for="inputSuccess">Input with success</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputSuccess">
-              </div>
-            </div>
-          </form>
+    <form class="bs-docs-example form-horizontal">
+      <div class="control-group has-warning">
+        <label class="control-label" for="inputWarning">Input with warning</label>
+        <div class="controls">
+          <input type="text" class="input-with-feedback" id="inputWarning">
+        </div>
+      </div>
+      <div class="control-group has-error">
+        <label class="control-label" for="inputError">Input with error</label>
+        <div class="controls">
+          <input type="text" class="input-with-feedback" id="inputError">
+        </div>
+      </div>
+      <div class="control-group has-success">
+        <label class="control-label" for="inputSuccess">Input with success</label>
+        <div class="controls">
+          <input type="text" class="input-with-feedback" id="inputSuccess">
+        </div>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="control-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
@@ -1538,29 +1533,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2 id="forms-extending">Extending form controls</h2>
-          <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
+    <h2 id="forms-extending">Extending form controls</h2>
+    <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3 id="forms-input-groups">Input groups</h3>
-          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
-          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span9">
-              <span class="input-group-addon">@</span>
-              <input type="text" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span6">
-              <input type="text">
-              <span class="input-group-addon">.00</span>
-            </div>
-            <br>
-            <div class="input-group span3">
-              <span class="input-group-addon">$</span>
-              <input type="text">
-              <span class="input-group-addon">.00</span>
-            </div>
-          </form>
+    <h3 id="forms-input-groups">Input groups</h3>
+    <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+    <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+    <form class="bs-docs-example">
+      <div class="input-group span9">
+        <span class="input-group-addon">@</span>
+        <input type="text" placeholder="Username">
+      </div>
+      <br>
+      <div class="input-group span6">
+        <input type="text">
+        <span class="input-group-addon">.00</span>
+      </div>
+      <br>
+      <div class="input-group span3">
+        <span class="input-group-addon">$</span>
+        <input type="text">
+        <span class="input-group-addon">.00</span>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="input-group span9">
   <span class="input-group-addon">@</span>
@@ -1579,24 +1574,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h4>Optional sizes</h4>
-          <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span9">
-              <span class="input-group-addon input-large">@</span>
-              <input type="text" class="input-large" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span9">
-              <span class="input-group-addon">@</span>
-              <input type="text" placeholder="Username">
-            </div>
-            <br>
-            <div class="input-group span9">
-              <span class="input-group-addon input-small">@</span>
-              <input type="text" class="input-small" placeholder="Username">
-            </div>
-          </form>
+    <h4>Optional sizes</h4>
+    <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
+    <form class="bs-docs-example">
+      <div class="input-group span9">
+        <span class="input-group-addon input-large">@</span>
+        <input type="text" class="input-large" placeholder="Username">
+      </div>
+      <br>
+      <div class="input-group span9">
+        <span class="input-group-addon">@</span>
+        <input type="text" placeholder="Username">
+      </div>
+      <br>
+      <div class="input-group span9">
+        <span class="input-group-addon input-small">@</span>
+        <input type="text" class="input-small" placeholder="Username">
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="input-group span9">
   <span class="input-group-addon input-large">@</span>
@@ -1614,23 +1609,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h4>Buttons instead of text</h4>
-          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <span class="input-group-btn">
-                <button class="btn" type="button">Go!</button>
-              </span>
-              <input type="text">
-            </div>
-            <br>
-            <div class="input-group span7">
-              <input type="text">
-              <span class="input-group-btn">
-                <button class="btn" type="button">Go!</button>
-              </span>
-            </div>
-          </form>
+    <h4>Buttons instead of text</h4>
+    <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
+    <form class="bs-docs-example">
+      <div class="input-group span7">
+        <span class="input-group-btn">
+          <button class="btn" type="button">Go!</button>
+        </span>
+        <input type="text">
+      </div>
+      <br>
+      <div class="input-group span7">
+        <input type="text">
+        <span class="input-group-btn">
+          <button class="btn" type="button">Go!</button>
+        </span>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="input-group span7">
   <span class="input-group-btn">
@@ -1647,37 +1642,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h4>Button dropdowns</h4>
-          <p></p>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <div class="input-group-btn">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <input type="text">
-            </div><!-- /input-group -->
-            <br>
-            <div class="input-group span7">
-              <input type="text">
-              <div class="input-group-btn">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /input-group -->
-          </form>
+    <h4>Button dropdowns</h4>
+    <p></p>
+    <form class="bs-docs-example">
+      <div class="input-group span7">
+        <div class="input-group-btn">
+          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <input type="text">
+      </div><!-- /input-group -->
+      <br>
+      <div class="input-group span7">
+        <input type="text">
+        <div class="input-group-btn">
+          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+      </div><!-- /input-group -->
+    </form>
 {% highlight html linenos %}
 <div class="input-group span7">
   <div class="input-group-btn">
@@ -1708,44 +1703,44 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div><!-- /input-group -->
 {% endhighlight %}
 
-          <h4>Segmented dropdown groups</h4>
-          <form class="bs-docs-example">
-            <div class="input-group span7">
-              <div class="input-group-btn">
-                <button class="btn" tabindex="-1">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <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>
-              </div>
-              <input type="text">
-            </div>
-
-            <br>
+    <h4>Segmented dropdown groups</h4>
+    <form class="bs-docs-example">
+      <div class="input-group span7">
+        <div class="input-group-btn">
+          <button class="btn" tabindex="-1">Action</button>
+          <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <span class="caret"></span>
+          </button>
+          <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>
+        </div>
+        <input type="text">
+      </div>
 
-            <div class="input-group span7">
-              <input type="text">
-              <div class="input-group-btn">
-                <button class="btn" tabindex="-1">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <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>
-              </div>
-            </div>
-          </form>
+      <br>
+
+      <div class="input-group span7">
+        <input type="text">
+        <div class="input-group-btn">
+          <button class="btn" tabindex="-1">Action</button>
+          <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <span class="caret"></span>
+          </button>
+          <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>
+        </div>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="input-group span7">
   <div class="input-group-btn">
@@ -1762,54 +1757,54 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3 id="forms-control-sizes">Control sizing</h3>
-          <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
+    <h3 id="forms-control-sizes">Control sizing</h3>
+    <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
-          <h4>Relative sizing</h4>
-          <p>Create larger or smaller form controls that match button sizes.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls docs-input-sizes">
-              <input class="input-large" type="text" placeholder=".input-large">
-              <input type="text" placeholder="Default input">
-              <input class="input-small" type="text" placeholder=".input-small">
-            </div>
-          </form>
+    <h4>Relative sizing</h4>
+    <p>Create larger or smaller form controls that match button sizes.</p>
+    <form class="bs-docs-example" style="padding-bottom: 15px;">
+      <div class="controls docs-input-sizes">
+        <input class="input-large" type="text" placeholder=".input-large">
+        <input type="text" placeholder="Default input">
+        <input class="input-small" type="text" placeholder=".input-small">
+      </div>
+    </form>
 {% highlight html linenos %}
 <input class="input-large" type="text" placeholder=".input-large">
 <input type="text" placeholder="Default input">
 <input class="input-small" type="text" placeholder=".input-small">
 {% endhighlight %}
 
-          <h4>Column sizing</h4>
-          <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls docs-input-sizes">
-              <input class="span1" type="text" placeholder=".span1">
-              <input class="span2" type="text" placeholder=".span2">
-              <input class="span3" type="text" placeholder=".span3">
-              <select class="span1">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-              <select class="span2">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-              <select class="span3">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-          </form>
+    <h4>Column sizing</h4>
+    <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+    <form class="bs-docs-example" style="padding-bottom: 15px;">
+      <div class="controls docs-input-sizes">
+        <input class="span1" type="text" placeholder=".span1">
+        <input class="span2" type="text" placeholder=".span2">
+        <input class="span3" type="text" placeholder=".span3">
+        <select class="span1">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+        <select class="span2">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+        <select class="span3">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+    </form>
 {% highlight html linenos %}
 <input class="span1" type="text" placeholder=".span1">
 <input class="span2" type="text" placeholder=".span2">
@@ -1825,20 +1820,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </select>
 {% endhighlight %}
 
-          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="row">
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-              <div class="span4">
-                <input type="text" placeholder=".span4">
-              </div>
-            </div>
-          </form>
+    <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+    <form class="bs-docs-example" style="padding-bottom: 15px;">
+      <div class="row">
+        <div class="span4">
+          <input type="text" placeholder=".span4">
+        </div>
+        <div class="span4">
+          <input type="text" placeholder=".span4">
+        </div>
+        <div class="span4">
+          <input type="text" placeholder=".span4">
+        </div>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="row">
   <div class="span4">
@@ -1853,23 +1848,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Uneditable inputs</h3>
-          <p>Present data in a form that's not editable without using actual form markup.</p>
-          <form class="bs-docs-example">
-            <span class="input-xlarge uneditable-input">Some value here</span>
-          </form>
+    <h3>Uneditable inputs</h3>
+    <p>Present data in a form that's not editable without using actual form markup.</p>
+    <form class="bs-docs-example">
+      <span class="input-xlarge uneditable-input">Some value here</span>
+    </form>
 {% highlight html linenos %}
 <span class="uneditable-input">Some value here</span>
 {% endhighlight %}
 
-          <h3 id="forms-actions">Form actions</h3>
-          <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
-          <form class="bs-docs-example">
-            <div class="form-actions">
-              <button type="submit" class="btn btn-primary">Save changes</button>
-              <button type="button" class="btn">Cancel</button>
-            </div>
-          </form>
+    <h3 id="forms-actions">Form actions</h3>
+    <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
+    <form class="bs-docs-example">
+      <div class="form-actions">
+        <button type="submit" class="btn btn-primary">Save changes</button>
+        <button type="button" class="btn">Cancel</button>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save changes</button>
@@ -1877,49 +1872,49 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3 id="forms-help-text">Help text</h3>
-          <p>Inline and block level support for help text that appears around form controls.</p>
-          <h4>Inline help</h4>
-          <form class="bs-docs-example form-inline">
-            <input type="text"> <span class="help-inline">Inline help text</span>
-          </form>
+    <h3 id="forms-help-text">Help text</h3>
+    <p>Inline and block level support for help text that appears around form controls.</p>
+    <h4>Inline help</h4>
+    <form class="bs-docs-example form-inline">
+      <input type="text"> <span class="help-inline">Inline help text</span>
+    </form>
 {% highlight html linenos %}
 <input type="text">
 <span class="help-inline">Inline help text</span>
 {% endhighlight %}
 
-          <h4>Block help</h4>
-          <form class="bs-docs-example form-inline">
-            <input type="text">
-            <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-          </form>
+    <h4>Block help</h4>
+    <form class="bs-docs-example form-inline">
+      <input type="text">
+      <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+    </form>
 {% highlight html linenos %}
 <input type="text">
 <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
 
-        </div>
+  </div>
 
 
 
-        <!-- Buttons
-        ================================================== -->
-        <div class="bs-docs-section" id="buttons">
-          <div class="page-header">
-            <h1>Buttons</h1>
-          </div>
+  <!-- Buttons
+  ================================================== -->
+  <div class="bs-docs-section" id="buttons">
+    <div class="page-header">
+      <h1>Buttons</h1>
+    </div>
 
-          <h2 id="buttons-options">Button options</h2>
-          <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
-          <div class="bs-docs-example">
-            <button type="button" class="btn btn-default">Default</button>
-            <button type="button" class="btn btn-primary">Primary</button>
-            <button type="button" class="btn btn-success">Success</button>
-            <button type="button" class="btn btn-info">Info</button>
-            <button type="button" class="btn btn-warning">Warning</button>
-            <button type="button" class="btn btn-danger">Danger</button>
-            <button type="button" class="btn btn-link">Link</button>
-          </div>
+    <h2 id="buttons-options">Button options</h2>
+    <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
+    <div class="bs-docs-example">
+      <button type="button" class="btn btn-default">Default</button>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-info">Info</button>
+      <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-danger">Danger</button>
+      <button type="button" class="btn btn-link">Link</button>
+    </div>
 {% highlight html linenos %}
 <!-- Standard gray button with gradient -->
 <button type="button" class="btn btn-default">Default</button>
@@ -1943,30 +1938,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
 
-          <h4>Cross browser compatibility</h4>
-          <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
-
-
-          <h2 id="buttons-sizes">Button sizes</h2>
-          <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
-          <div class="bs-docs-example">
-            <p>
-              <button type="button" class="btn btn-large btn-primary">Large button</button>
-              <button type="button" class="btn btn-large">Large button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-primary">Default button</button>
-              <button type="button" class="btn">Default button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-small btn-primary">Small button</button>
-              <button type="button" class="btn btn-small">Small button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-              <button type="button" class="btn btn-mini">Mini button</button>
-            </p>
-          </div>
+    <h4>Cross browser compatibility</h4>
+    <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
+
+
+    <h2 id="buttons-sizes">Button sizes</h2>
+    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
+    <div class="bs-docs-example">
+      <p>
+        <button type="button" class="btn btn-large btn-primary">Large button</button>
+        <button type="button" class="btn btn-large">Large button</button>
+      </p>
+      <p>
+        <button type="button" class="btn btn-primary">Default button</button>
+        <button type="button" class="btn">Default button</button>
+      </p>
+      <p>
+        <button type="button" class="btn btn-small btn-primary">Small button</button>
+        <button type="button" class="btn btn-small">Small button</button>
+      </p>
+      <p>
+        <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+        <button type="button" class="btn btn-mini">Mini button</button>
+      </p>
+    </div>
 {% highlight html linenos %}
 <p>
   <button type="button" class="btn btn-large btn-primary">Large button</button>
@@ -1986,108 +1981,108 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </p>
 {% endhighlight %}
 
-          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
-          <div class="bs-docs-example">
-            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
-              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-              <button type="button" class="btn btn-large btn-block">Block level button</button>
-            </div>
-          </div>
+    <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
+    <div class="bs-docs-example">
+      <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
+        <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
+        <button type="button" class="btn btn-large btn-block">Block level button</button>
+      </div>
+    </div>
 {% highlight html linenos %}
 <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
 <button type="button" class="btn btn-large btn-block">Block level button</button>
 {% endhighlight %}
 
 
-          <h2 id="buttons-disabled">Disabled state</h2>
-          <p>Make buttons look unclickable by fading them back 50%.</p>
+    <h2 id="buttons-disabled">Disabled state</h2>
+    <p>Make buttons look unclickable by fading them back 50%.</p>
 
-          <h3>Button element</h3>
-          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-            <button type="button" class="btn btn-large" disabled="disabled">Button</button>
-          </p>
+    <h3>Button element</h3>
+    <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
+    <p class="bs-docs-example">
+      <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+      <button type="button" class="btn btn-large" disabled="disabled">Button</button>
+    </p>
 {% highlight html linenos %}
 <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled="disabled">Button</button>
 {% endhighlight %}
 
-          <h3>Anchor element</h3>
-          <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-            <a href="#" class="btn btn-large disabled">Link</a>
-          </p>
+    <h3>Anchor element</h3>
+    <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
+    <p class="bs-docs-example">
+      <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+      <a href="#" class="btn btn-large disabled">Link</a>
+    </p>
 {% highlight html linenos %}
 <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 <a href="#" class="btn btn-large disabled">Link</a>
 {% endhighlight %}
-          <p>
-            We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
-          </p>
+    <p>
+      We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
+    </p>
 
 
-          <h2 id="buttons-tags">One class, multiple tags</h2>
-          <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-          <form class="bs-docs-example">
-            <a class="btn" href="">Link</a>
-            <button class="btn" type="submit">Button</button>
-            <input class="btn" type="button" value="Input">
-            <input class="btn" type="submit" value="Submit">
-          </form>
+    <h2 id="buttons-tags">One class, multiple tags</h2>
+    <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+    <form class="bs-docs-example">
+      <a class="btn" href="">Link</a>
+      <button class="btn" type="submit">Button</button>
+      <input class="btn" type="button" value="Input">
+      <input class="btn" type="submit" value="Submit">
+    </form>
 {% highlight html linenos %}
 <a class="btn" href="">Link</a>
 <button class="btn" type="submit">Button</button>
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">
 {% endhighlight %}
-          <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+    <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
 
-        </div>
+  </div>
 
 
 
-        <!-- Images
-        ================================================== -->
-        <div class="bs-docs-section" id="images">
-          <div class="page-header">
-            <h1>Images</h1>
-          </div>
+  <!-- Images
+  ================================================== -->
+  <div class="bs-docs-section" id="images">
+    <div class="page-header">
+      <h1>Images</h1>
+    </div>
 
-          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
-          <div class="bs-docs-example bs-docs-example-images">
-            <img data-src="holder.js/140x140" class="img-rounded">
-            <img data-src="holder.js/140x140" class="img-circle">
-            <img data-src="holder.js/140x140" class="img-thumbnail">
-          </div>
+    <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
+    <div class="bs-docs-example bs-docs-example-images">
+      <img data-src="holder.js/140x140" class="img-rounded">
+      <img data-src="holder.js/140x140" class="img-circle">
+      <img data-src="holder.js/140x140" class="img-thumbnail">
+    </div>
 {% highlight html linenos %}
 <img src="..." class="img-rounded">
 <img src="..." class="img-circle">
 <img src="..." class="img-thumbnail">
 {% endhighlight %}
 
-        </div>
+  </div>
 
 
-        <!-- Helpers
-        ================================================== -->
-        <div class="bs-docs-section" id="helper-classes">
-          <div class="page-header">
-            <h1>Helper classes</h1>
-          </div>
+  <!-- Helpers
+  ================================================== -->
+  <div class="bs-docs-section" id="helper-classes">
+    <div class="page-header">
+      <h1>Helper classes</h1>
+    </div>
 
-          <h3>Close icon</h3>
-          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-          <div class="bs-docs-example">
-            <p><button class="close" style="float: none;">&times;</button></p>
-          </div>
+    <h3>Close icon</h3>
+    <p>Use the generic close icon for dismissing content like modals and alerts.</p>
+    <div class="bs-docs-example">
+      <p><button class="close" style="float: none;">&times;</button></p>
+    </div>
 {% highlight html linenos %}
 <button class="close" style="float: none;">&times;</button>
 {% endhighlight %}
 
-          <h3>.pull-left</h3>
-          <p>Float an element left</p>
+    <h3>.pull-left</h3>
+    <p>Float an element left</p>
 {% highlight html linenos %}
 <div class="pull-left">...</div>
 {% endhighlight %}
@@ -2097,8 +2092,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
-          <h3>.pull-right</h3>
-          <p>Float an element right</p>
+    <h3>.pull-right</h3>
+    <p>Float an element right</p>
 {% highlight html linenos %}
 <div class="pull-right">...</div>
 {% endhighlight %}
@@ -2108,8 +2103,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
-          <h3>.clearfix</h3>
-          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+    <h3>.clearfix</h3>
+    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
 {% highlight html linenos %}
 <div class="clearfix">...</div>
 {% endhighlight %}
@@ -2131,111 +2126,111 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   .clearfix();
 }
 {% endhighlight %}
-        </div>
-
-
-        <!-- Responsive utilities
-        ================================================== -->
-        <div class="bs-docs-section" id="responsive-utilities">
-          <div class="page-header">
-            <h1>Responsive utilities</h1>
-          </div>
-          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
-
-          <h3>Responsive classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Phones <small>767px and below</small></th>
-                <th>Tablets <small>979px to 768px</small></th>
-                <th>Desktops <small>Default</small></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-phone</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-tablet</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-              <tr>
-                <th><code>.visible-desktop</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-phone</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-tablet</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-desktop</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
+  </div>
 
-          <h3>Print classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Browser</th>
-                <th>Print</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-print</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-print</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
 
-          <h3>When to use</h3>
-          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
-
-          <h3>Test case</h3>
-          <p>Resize your browser or load on different devices to test the above classes.</p>
-          <h4>Visible on...</h4>
-          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
-          <ul class="responsive-utilities-test">
-            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
-          </ul>
-          <h4>Hidden on...</h4>
-          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
-          <ul class="responsive-utilities-test hidden-on">
-            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
-          </ul>
+  <!-- Responsive utilities
+  ================================================== -->
+  <div class="bs-docs-section" id="responsive-utilities">
+    <div class="page-header">
+      <h1>Responsive utilities</h1>
+    </div>
+    <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+
+    <h3>Responsive classes</h3>
+    <table class="table table-bordered table-striped responsive-utilities hidden-phone">
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Phones <small>767px and below</small></th>
+          <th>Tablets <small>979px to 768px</small></th>
+          <th>Desktops <small>Default</small></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th><code>.visible-phone</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+        <tr>
+          <th><code>.visible-tablet</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+        <tr>
+          <th><code>.visible-desktop</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th><code>.hidden-phone</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th><code>.hidden-tablet</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th><code>.hidden-desktop</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>Print classes</h3>
+    <table class="table table-bordered table-striped responsive-utilities">
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Browser</th>
+          <th>Print</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th><code>.visible-print</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th><code>.hidden-print</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>When to use</h3>
+    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
+
+    <h3>Test case</h3>
+    <p>Resize your browser or load on different devices to test the above classes.</p>
+    <h4>Visible on...</h4>
+    <p>Green checkmarks indicate that class is visible in your current viewport.</p>
+    <ul class="responsive-utilities-test">
+      <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
+      <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
+      <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+    </ul>
+    <h4>Hidden on...</h4>
+    <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
+    <ul class="responsive-utilities-test hidden-on">
+      <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
+      <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
+      <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+    </ul>
 
-        </div>
+  </div>
 
 
 
@@ -2243,6 +2238,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <div class="bs-docs-section-header" id="components">
         <h1>Components</h1>
+        <p class="lead">Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.</p>
       </div>
 
 
@@ -4424,12 +4420,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <div class="bs-docs-section-header" id="js">
       <h1>JavaScript plugins</h1>
+      <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
     </div>
 
 
         <!-- Overview
         ================================================== -->
-        <section id="js-overview">
+        <section class="bs-docs-section" id="js-overview">
           <div class="page-header">
             <h1>Overview</h1>
           </div>
-- 
cgit v1.2.3


From af470f4c7be5b6e5f2fba5966f890ddfa89c966d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 01:06:50 -0700
Subject: more content and nav twerks

---
 docs/_includes/docs-nav.html |   55 +-
 docs/docs.html               | 3348 +++++++++++++++++++++---------------------
 2 files changed, 1715 insertions(+), 1688 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 78a26ffb2..f43b56812 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -79,20 +79,63 @@
     <li><a href="#navs">Navs</a></li>
     <li><a href="#navbar">Navbar</a></li>
     <li><a href="#breadcrumbs">Breadcrumbs</a></li>
-    <li><a href="#pagination">Pagination</a></li>
+    <li>
+      <a href="#pagination">Pagination</a>
+      <ul class="nav">
+        <li><a href="#pagination-default">Default pagination</a></li>
+        <li><a href="#pagination-pager">Pager</a></li>
+      </ul>
+    </li>
     <li><a href="#labels">Labels</a></li>
     <li><a href="#badges">Badges</a></li>
-    <li><a href="#typography-components">Typography</a></li>
+    <li>
+      <a href="#type-components">Typography</a>
+      <ul class="nav">
+        <li><a href="#type-components-jumbotron">Jumbotron</a></li>
+        <li><a href="#type-components-page-header">Page header</a></li>
+      </ul>
+    </li>
     <li><a href="#thumbnails">Thumbnails</a></li>
-    <li><a href="#alerts">Alerts</a></li>
-    <li><a href="#progress">Progress bars</a></li>
+    <li>
+      <a href="#alerts">Alerts</a>
+      <ul class="nav">
+        <li><a href="#alerts-default">Default alert</a></li>
+        <li><a href="#alerts-block">Block alerts</a></li>
+        <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#progress">Progress bars</a>
+      <ul class="nav">
+        <li><a href="#progress-basic">Basic progress bar</a></li>
+        <li><a href="#progress-alternatives">Contextual alternatives</a></li>
+        <li><a href="#progress-striped">Striped</a></li>
+        <li><a href="#progress-animated">Animated</a></li>
+        <li><a href="#progress-stacked">Stacked</a></li>
+      </ul>
+    </li>
     <li><a href="#media">Media object</a></li>
     <li><a href="#wells">Wells</a></li>
 
     <li><a class="nav-header" href="#js">JavaScript</a></li>
-    <li><a href="#js-overview">Overview</a></li>
+    <li>
+      <a href="#js-overview">Overview</a>
+      <ul class="nav">
+        <li><a href="#js-individual-compiled">Individual or compiled</a></li>
+        <li><a href="#js-data-attributes">Data attributes</a></li>
+        <li><a href="#js-programmatic-api">Programmatic API</a></li>
+        <li><a href="#js-noconflict">No Conflict</a></li>
+        <li><a href="#js-events">Evens</a></li>
+      </ul>
+    </li>
     <li><a href="#transitions">Transitions</a></li>
-    <li><a href="#modals">Modal</a></li>
+    <li>
+      <a href="#modals">Modal</a>
+      <ul class="nav">
+        <li><a href="#modals-examples">Examples</a></li>
+        <li><a href="#modals-usage">Usage</a></li>
+      </ul>
+    </li>
     <li><a href="#dropdowns">Dropdown</a></li>
     <li><a href="#scrollspy">Scrollspy</a></li>
     <li><a href="#tabs">Tab</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index 7f0106c93..ec7bd2916 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2236,220 +2236,220 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-      <div class="bs-docs-section-header" id="components">
-        <h1>Components</h1>
-        <p class="lead">Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.</p>
-      </div>
+  <div class="bs-docs-section-header" id="components">
+    <h1>Components</h1>
+    <p class="lead">Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.</p>
+  </div>
 
 
-        <!-- Icons
-        ================================================== -->
-        <section id="icons">
-          <div class="page-header">
-            <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
-          </div>
+  <!-- Icons
+  ================================================== -->
+  <div class="bs-docs-section" id="icons">
+    <div class="page-header">
+      <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
+    </div>
 
-          <h2>Included glyphs</h2>
-          <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>
-
-          <ul class="the-icons clearfix">
-            <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
-            <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
-            <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
-            <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
-            <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
-            <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
-            <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
-            <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
-            <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
-            <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
-            <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
-            <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
-            <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
-            <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
-            <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
-            <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
-            <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
-            <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
-            <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
-            <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
-            <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
-            <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
-            <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
-            <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
-            <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
-            <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
-            <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
-            <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
-
-            <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
-            <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
-            <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
-            <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
-            <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
-            <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
-            <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
-            <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
-            <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
-            <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
-            <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
-            <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
-            <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
-            <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
-            <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
-            <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
-            <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
-            <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
-            <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
-            <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
-            <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
-            <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
-            <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
-            <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
-            <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
-            <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
-            <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
-            <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>
-
-            <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
-            <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
-            <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
-            <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
-            <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
-            <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
-            <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
-            <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
-            <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
-            <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
-            <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
-            <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
-            <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
-            <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
-            <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
-            <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
-            <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
-            <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
-            <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
-            <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
-            <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
-            <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
-            <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
-            <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
-            <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
-            <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
-            <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
-            <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
-
-            <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
-            <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
-            <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
-            <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
-            <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
-            <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
-            <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
-            <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
-            <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
-            <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
-            <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
-            <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
-            <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
-            <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
-            <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
-            <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
-            <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
-            <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
-            <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
-            <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
-            <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
-            <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
-            <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
-            <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
-            <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
-            <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
-            <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
-            <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>
-
-            <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
-            <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
-            <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
-            <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
-            <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
-            <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
-            <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
-            <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
-            <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
-            <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
-            <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
-            <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
-            <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
-            <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
-            <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
-            <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
-            <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
-            <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
-            <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
-            <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
-            <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
-            <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
-            <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
-            <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
-            <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
-
-            <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
-            <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
-            <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
-            <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
-            <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
-            <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
-            <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
-            <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
-            <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
-            <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
-            <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
-            <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
-            <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
-            <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
-            <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
-            <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
-            <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
-            <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
-            <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
-            <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
+    <h2>Included glyphs</h2>
+    <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>
+
+    <ul class="the-icons clearfix">
+      <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
+      <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
+      <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
+      <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
+      <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
+      <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
+      <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
+      <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
+      <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
+      <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
+      <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
+      <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
+      <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
+      <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
+      <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
+      <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
+      <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
+      <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
+      <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
+      <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
+      <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
+      <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
+      <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
+      <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
+      <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
+      <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
+      <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
+      <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
+
+      <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
+      <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
+      <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
+      <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
+      <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
+      <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
+      <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
+      <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
+      <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
+      <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
+      <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
+      <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
+      <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
+      <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
+      <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
+      <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
+      <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
+      <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
+      <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
+      <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
+      <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
+      <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
+      <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
+      <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
+      <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
+      <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
+      <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
+      <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>
+
+      <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
+      <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
+      <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
+      <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
+      <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
+      <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
+      <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
+      <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
+      <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
+      <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
+      <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
+      <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
+      <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
+      <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
+      <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
+      <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
+      <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
+      <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
+      <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
+      <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
+      <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
+      <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
+      <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
+      <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
+      <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
+      <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
+      <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
+      <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
+
+      <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
+      <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
+      <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
+      <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
+      <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
+      <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
+      <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
+      <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
+      <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
+      <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
+      <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
+      <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
+      <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
+      <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
+      <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
+      <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
+      <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
+      <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
+      <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
+      <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
+      <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
+      <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
+      <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
+      <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
+      <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
+      <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
+      <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
+      <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>
+
+      <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
+      <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
+      <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
+      <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
+      <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
+      <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
+      <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
+      <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
+      <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
+      <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
+      <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
+      <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
+      <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
+      <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
+      <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
+      <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
+      <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
+      <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
+      <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
+      <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
+      <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
+      <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
+      <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
+      <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
+      <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
+      <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
+      <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
+      <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
+
+      <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
+      <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
+      <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
+      <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
+      <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
+      <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
+      <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
+      <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
+      <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
+      <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
+      <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
+      <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
+      <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
+      <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
+      <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
+      <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
+      <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
+      <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
+      <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
+      <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
 
-          </ul>
+    </ul>
 
-          <h3>Glyphicons attribution</h3>
-          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
+    <h3>Glyphicons attribution</h3>
+    <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
 
 
-          <h2>How to use</h2>
-          <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
+    <h2>How to use</h2>
+    <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
 {% highlight html linenos %}
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}
-          <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
-          <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
+    <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
+    <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
 
 
-          <h2>Icon examples</h2>
-          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
+    <h2>Icon examples</h2>
+    <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
 
-          <h4>Buttons</h4>
+    <h4>Buttons</h4>
 
-          <h5>Button group in a button toolbar</h5>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar">
-              <div class="btn-group">
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
-                <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
-              </div>
-            </div>
-          </div><!-- /bs-docs-example -->
+    <h5>Button group in a button toolbar</h5>
+    <div class="bs-docs-example">
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+          <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+          <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+          <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+        </div>
+      </div>
+    </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
 <div class="btn-toolbar">
   <div class="btn-group">
@@ -2461,20 +2461,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h5>Dropdown in a button group</h5>
-          <div class="bs-docs-example">
-            <div class="btn-group">
-              <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
-              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
-                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
-                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
-                <li class="divider"></li>
-                <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
-              </ul>
-            </div>
-          </div><!-- /bs-docs-example -->
+    <h5>Dropdown in a button group</h5>
+    <div class="bs-docs-example">
+      <div class="btn-group">
+        <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
+        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+        <ul class="dropdown-menu">
+          <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
+          <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
+          <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
+          <li class="divider"></li>
+          <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
+        </ul>
+      </div>
+    </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
 <div class="btn-group">
   <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
@@ -2489,32 +2489,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h5>Large button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
-          </div><!-- /bs-docs-example -->
+    <h5>Large button</h5>
+    <div class="bs-docs-example">
+      <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+    </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
 <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
 {% endhighlight %}
 
-          <h5>Small button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
-          </div><!-- /bs-docs-example -->
+    <h5>Small button</h5>
+    <div class="bs-docs-example">
+      <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+    </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
 <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
 {% endhighlight %}
 
 
-          <h4>Navigation</h4>
-          <div class="bs-docs-example">
-            <ul class="nav nav-list">
-              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
-              <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
-            </ul>
-          </div><!-- /bs-docs-example -->
+    <h4>Navigation</h4>
+    <div class="bs-docs-example">
+      <ul class="nav nav-list">
+        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
+        <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
+        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
+        <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
+      </ul>
+    </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
 <ul class="nav nav-list">
   <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
@@ -2524,18 +2524,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h4>Form fields</h4>
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="inputIcon">Email address</label>
-              <div class="controls">
-                <div class="input-group">
-                  <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-                  <input class="span2" id="inputIcon" type="text">
-                </div>
-              </div>
-            </div>
-          </form>
+    <h4>Form fields</h4>
+    <form class="bs-docs-example form-horizontal">
+      <div class="control-group">
+        <label class="control-label" for="inputIcon">Email address</label>
+        <div class="controls">
+          <div class="input-group">
+            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
+            <input class="span2" id="inputIcon" type="text">
+          </div>
+        </div>
+      </div>
+    </form>
 {% highlight html linenos %}
 <div class="control-group">
   <label class="control-label" for="inputIcon">Email address</label>
@@ -2548,32 +2548,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-        </section>
-
+  </div>
 
 
 
-        <!-- Dropdowns
-        ================================================== -->
-        <section id="dropdowns">
-          <div class="page-header">
-            <h1>Dropdown menus</h1>
-          </div>
-          <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
+  <!-- Dropdowns
+  ================================================== -->
+  <div class="bs-docs-section" id="dropdowns">
+    <div class="page-header">
+      <h1>Dropdown menus</h1>
+    </div>
+    <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
 
-          <h3>Example</h3>
-          <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
-          <div class="bs-docs-example">
-            <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                <li><a tabindex="-1" href="#">Action</a></li>
-                <li><a tabindex="-1" href="#">Another action</a></li>
-                <li><a tabindex="-1" href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li><a tabindex="-1" href="#">Separated link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
+    <h3>Example</h3>
+    <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
+    <div class="bs-docs-example">
+      <div class="dropdown clearfix">
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+          <li><a tabindex="-1" href="#">Action</a></li>
+          <li><a tabindex="-1" href="#">Another action</a></li>
+          <li><a tabindex="-1" href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a tabindex="-1" href="#">Separated link</a></li>
+        </ul>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
@@ -2587,25 +2586,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Aligning the menus</h3>
-          <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+    <h3>Aligning the menus</h3>
+    <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
 {% highlight html linenos %}
 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
   ...
 </ul>
 {% endhighlight %}
 
-          <h3>Disabled menu options</h3>
-          <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
-          <div class="bs-docs-example">
-            <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                <li><a tabindex="-1" href="#">Regular link</a></li>
-                <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
-                <li><a tabindex="-1" href="#">Another link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
+    <h3>Disabled menu options</h3>
+    <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
+    <div class="bs-docs-example">
+      <div class="dropdown clearfix">
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+          <li><a tabindex="-1" href="#">Regular link</a></li>
+          <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+          <li><a tabindex="-1" href="#">Another link</a></li>
+        </ul>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Regular link</a></li>
@@ -2614,77 +2613,77 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Sub menus on dropdowns</h3>
-          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
-          <div class="bs-docs-example bs-docs-example-submenu">
+    <h3>Sub menus on dropdowns</h3>
+    <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
+    <div class="bs-docs-example bs-docs-example-submenu">
 
-            <div class="pull-left">
-              <p class="text-muted">Default</p>
-              <div class="dropdown clearfix">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
+      <div class="pull-left">
+        <p class="text-muted">Default</p>
+        <div class="dropdown clearfix">
+          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+            <li><a tabindex="-1" href="#">Action</a></li>
+            <li><a tabindex="-1" href="#">Another action</a></li>
+            <li><a tabindex="-1" href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li class="dropdown-submenu">
+              <a tabindex="-1" href="#">More options</a>
+              <ul class="dropdown-menu">
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-            <div class="pull-left">
-              <p class="text-muted">Dropup</p>
-              <div class="dropup">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
+      <div class="pull-left">
+        <p class="text-muted">Dropup</p>
+        <div class="dropup">
+          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+            <li><a tabindex="-1" href="#">Action</a></li>
+            <li><a tabindex="-1" href="#">Another action</a></li>
+            <li><a tabindex="-1" href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li class="dropdown-submenu">
+              <a tabindex="-1" href="#">More options</a>
+              <ul class="dropdown-menu">
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-            <div class="pull-left">
-              <p class="text-muted">Left submenu</p>
-              <div class="dropdown">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu pull-left">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
+      <div class="pull-left">
+        <p class="text-muted">Left submenu</p>
+        <div class="dropdown">
+          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+            <li><a tabindex="-1" href="#">Action</a></li>
+            <li><a tabindex="-1" href="#">Another action</a></li>
+            <li><a tabindex="-1" href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li class="dropdown-submenu pull-left">
+              <a tabindex="-1" href="#">More options</a>
+              <ul class="dropdown-menu">
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+                <li><a tabindex="-1" href="#">Second level link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-          </div>
+    </div>
 {% highlight html linenos %}
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   ...
@@ -2702,28 +2701,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-        </section>
-
+  </div>
 
 
 
-        <!-- Button Groups
-        ================================================== -->
-        <section id="buttonGroups">
-          <div class="page-header">
-            <h1>Button groups</h1>
-          </div>
-          <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
+  <!-- Button Groups
+  ================================================== -->
+  <div class="bs-docs-section" id="buttonGroups">
+    <div class="page-header">
+      <h1>Button groups</h1>
+    </div>
+    <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
 
-          <h3>Single button group</h3>
-          <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group" style="margin: 9px 0 5px;">
-              <button type="button" class="btn">Left</button>
-              <button type="button" class="btn">Middle</button>
-              <button type="button" class="btn">Right</button>
-            </div>
-          </div>
+    <h3>Single button group</h3>
+    <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
+    <div class="bs-docs-example">
+      <div class="btn-group" style="margin: 9px 0 5px;">
+        <button type="button" class="btn">Left</button>
+        <button type="button" class="btn">Middle</button>
+        <button type="button" class="btn">Right</button>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="btn-group">
   <button type="button" class="btn">Left</button>
@@ -2732,26 +2730,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Multiple button groups</h3>
-          <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button type="button" class="btn">1</button>
-                <button type="button" class="btn">2</button>
-                <button type="button" class="btn">3</button>
-                <button type="button" class="btn">4</button>
-              </div>
-              <div class="btn-group">
-                <button type="button" class="btn">5</button>
-                <button type="button" class="btn">6</button>
-                <button type="button" class="btn">7</button>
-              </div>
-              <div class="btn-group">
-                <button type="button" class="btn">8</button>
-              </div>
-            </div>
-          </div>
+    <h3>Multiple button groups</h3>
+    <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
+    <div class="bs-docs-example">
+      <div class="btn-toolbar" style="margin: 0;">
+        <div class="btn-group">
+          <button type="button" class="btn">1</button>
+          <button type="button" class="btn">2</button>
+          <button type="button" class="btn">3</button>
+          <button type="button" class="btn">4</button>
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn">5</button>
+          <button type="button" class="btn">6</button>
+          <button type="button" class="btn">7</button>
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn">8</button>
+        </div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="btn-toolbar">
   <div class="btn-group">...</div>
@@ -2760,163 +2758,163 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Vertical button groups</h3>
-          <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group btn-group-vertical">
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
-              <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
-            </div>
-          </div>
+    <h3>Vertical button groups</h3>
+    <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
+    <div class="bs-docs-example">
+      <div class="btn-group btn-group-vertical">
+        <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
+        <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
+        <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
+        <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="btn-group btn-group-vertical">
   ...
 </div>
 {% endhighlight %}
 
-          <h3>Justified button groups</h3>
-          <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
-          <div class="bs-docs-example">
-            <div class="btn-group btn-group-justified">
-              <a href="#" class="btn">Left</a>
-              <a href="#" class="btn">Right</a>
-              <a href="#" class="btn">Middle</a>
-            </div>
-          </div>
+    <h3>Justified button groups</h3>
+    <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
+    <div class="bs-docs-example">
+      <div class="btn-group btn-group-justified">
+        <a href="#" class="btn">Left</a>
+        <a href="#" class="btn">Right</a>
+        <a href="#" class="btn">Middle</a>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="btn-group btn-group-justified">
   ...
 </div>
 {% endhighlight %}
 
-        </section>
+  </div>
 
 
 
-        <!-- Split button dropdowns
-        ================================================== -->
-        <section id="buttonDropdowns">
-          <div class="page-header">
-            <h1>Button dropdown menus</h1>
-          </div>
-          <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
+  <!-- Split button dropdowns
+  ================================================== -->
+  <div class="bs-docs-section" id="buttonDropdowns">
+    <div class="page-header">
+      <h1>Button dropdown menus</h1>
+    </div>
+    <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
 
-          <h3>Single or split button</h3>
-          <p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin-bottom: 10px;">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div>
+    <h3>Single or split button</h3>
+    <p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
+    <div class="bs-docs-example">
+      <div class="btn-toolbar" style="margin-bottom: 10px;">
+        <div class="btn-group">
+          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+      </div>
 
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button class="btn">Action</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-primary">Action</button>
-                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-danger">Danger</button>
-                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-warning">Warning</button>
-                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-success">Success</button>
-                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /btn-toolbar -->
-          </div>
+      <div class="btn-toolbar" style="margin: 0;">
+        <div class="btn-group">
+          <button class="btn">Action</button>
+          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-primary">Action</button>
+          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-danger">Danger</button>
+          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-warning">Warning</button>
+          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-success">Success</button>
+          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+    </div>
 {% highlight html linenos %}
 <!-- Single button -->
 <div class="btn-group">
@@ -2948,48 +2946,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Works with all button sizes</h3>
-          <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar" style="margin: 0;">
-              <div class="btn-group">
-                <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
-                  Large button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
-                  Small button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group">
-                <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
-                  Mini button <span class="caret"></span>
-                </button>
-                <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>
-              </div><!-- /btn-group -->
-            </div><!-- /btn-toolbar -->
-          </div><!-- /example -->
+    <h3>Works with all button sizes</h3>
+    <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+    <div class="bs-docs-example">
+      <div class="btn-toolbar" style="margin: 0;">
+        <div class="btn-group">
+          <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+            Large button <span class="caret"></span>
+          </button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+            Small button <span class="caret"></span>
+          </button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+            Mini button <span class="caret"></span>
+          </button>
+          <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>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+    </div><!-- /example -->
 {% highlight html linenos %}
 <!-- Large button group -->
 <div class="btn-group">
@@ -3022,34 +3020,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Dropup buttons</h3>
-          <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar">
-              <div class="btn-group dropup">
-                <button class="btn">Dropup</button>
-                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <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>
-              </div><!-- /btn-group -->
-              <div class="btn-group dropup">
-                <button class="btn primary">Right dropup</button>
-                <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                <ul class="dropdown-menu pull-right">
-                  <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>
-              </div><!-- /btn-group -->
-            </div>
-          </div><!-- /example -->
+    <h3>Dropup buttons</h3>
+    <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
+    <div class="bs-docs-example">
+      <div class="btn-toolbar">
+        <div class="btn-group dropup">
+          <button class="btn">Dropup</button>
+          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <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>
+        </div><!-- /btn-group -->
+        <div class="btn-group dropup">
+          <button class="btn primary">Right dropup</button>
+          <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <ul class="dropdown-menu pull-right">
+            <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>
+        </div><!-- /btn-group -->
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -3062,28 +3060,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-        </section>
+  </div>
 
 
 
-        <!-- Navs
-        ================================================== -->
-        <section id="navs">
-          <div class="page-header">
-            <h1>Navs</small></h1>
-          </div>
+  <!-- Navs
+  ================================================== -->
+  <div class="bs-docs-section" id="navs">
+    <div class="page-header">
+      <h1>Navs</small></h1>
+    </div>
 
-          <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
+    <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
 
-          <h2>Tabs</h2>
-          <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
+    <h2>Tabs</h2>
+    <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
@@ -3092,15 +3090,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h2>List</h2>
-          <p>Swap the tabs class for <code>.nav-list</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-list" style="max-width: 300px;">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
+    <h2>List</h2>
+    <p>Swap the tabs class for <code>.nav-list</code>.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-list" style="max-width: 300px;">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-list">
   <li class="active"><a href="#">Home</a></li>
@@ -3109,53 +3107,53 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h2>Pills</h2>
-          <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
+    <h2>Pills</h2>
+    <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-pills">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-</ul>
-{% endhighlight %}
-          <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
+  <li><a href="#">Messages</a></li>
+</ul>
+{% endhighlight %}
+    <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-pills nav-stacked">
   ...
 </ul>
 {% endhighlight %}
 
-          <h2>Options</h2>
+    <h2>Options</h2>
 
-          <h3>Justified links</h3>
-          <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs nav-justified">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-            <br>
-            <ul class="nav nav-pills nav-justified">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages</a></li>
-            </ul>
-          </div>
+    <h3>Justified links</h3>
+    <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-tabs nav-justified">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+      <br>
+      <ul class="nav nav-pills nav-justified">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-tabs nav-justified">
   ...
@@ -3165,15 +3163,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Disabled state</h3>
-          <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li><a href="#">Clickable link</a></li>
-              <li><a href="#">Clickable link</a></li>
-              <li class="disabled"><a href="#">Disabled link</a></li>
-            </ul>
-          </div>
+    <h3>Disabled state</h3>
+    <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-pills">
+        <li><a href="#">Clickable link</a></li>
+        <li><a href="#">Clickable link</a></li>
+        <li class="disabled"><a href="#">Disabled link</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-tabs">
   ...
@@ -3183,35 +3181,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3>Component alignment</h3>
-          <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+    <h3>Component alignment</h3>
+    <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
 
-          <hr class="bs-docs-separator">
+    <hr class="bs-docs-separator">
 
 
-          <h2>Dropdowns</h2>
-          <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
+    <h2>Dropdowns</h2>
+    <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
 
-          <h3>Tabs with dropdowns</h3>
-          <div class="bs-docs-example">
-            <ul class="nav nav-tabs">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Help</a></li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                  Dropdown <span class="caret"></span>
-                </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>
-          </div>
+    <h3>Tabs with dropdowns</h3>
+    <div class="bs-docs-example">
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Help</a></li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+            Dropdown <span class="caret"></span>
+          </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>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-tabs">
   ...
@@ -3227,25 +3225,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Pills with dropdowns</h3>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#">Help</a></li>
-              <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                  Dropdown <span class="caret"></span>
-                </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>
-          </div><!-- /example -->
+    <h3>Pills with dropdowns</h3>
+    <div class="bs-docs-example">
+      <ul class="nav nav-pills">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Help</a></li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+            Dropdown <span class="caret"></span>
+          </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>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <ul class="nav nav-pills">
   ...
@@ -3261,30 +3259,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-        </section>
+  </div>
 
 
 
-        <!-- Navbar
-        ================================================== -->
-        <section id="navbar">
-          <div class="page-header">
-            <h1>Navbar</h1>
-          </div>
+  <!-- Navbar
+  ================================================== -->
+  <div class="bs-docs-section" id="navbar">
+    <div class="page-header">
+      <h1>Navbar</h1>
+    </div>
 
 
-          <h2>Basic navbar</h2>
-          <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <a class="navbar-brand" href="#">Title</a>
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Link</a></li>
-                <li><a href="#">Link</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
+    <h2>Basic navbar</h2>
+    <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a class="navbar-brand" href="#">Title</a>
+        <ul class="nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Link</a></li>
+          <li><a href="#">Link</a></li>
+        </ul>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar">
   <a class="navbar-brand" href="#">Title</a>
@@ -3296,30 +3294,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h2>Navbar components</h2>
+    <h2>Navbar components</h2>
 
-          <h3>Brand</h3>
-          <p>A simple link to show your brand or project name only requires an anchor tag.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <a class="navbar-brand" href="#">Title</a>
-            </div>
-          </div><!-- /example -->
+    <h3>Brand</h3>
+    <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a class="navbar-brand" href="#">Title</a>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <a class="navbar-brand" href="#">Title</a>
 {% endhighlight %}
 
-          <h3>Nav links</h3>
-          <p>Nav items are simple to add via unordered lists.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Link</a></li>
-                <li class="disabled"><a href="#">Disabled</a></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
+    <h3>Nav links</h3>
+    <p>Nav items are simple to add via unordered lists.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <ul class="nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Link</a></li>
+          <li class="disabled"><a href="#">Disabled</a></li>
+        </ul>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <ul class="nav">
   <li class="active"><a href="#">Home</a></li>
@@ -3327,19 +3325,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <li class="disabled"><a href="#">Disabled</a></li>
 </ul>
 {% endhighlight %}
-          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <ul class="nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Link</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Link</a></li>
-                <li class="divider"></li>
-              </ul>
-            </div>
-          </div><!-- /example -->
+    <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <ul class="nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Link</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Link</a></li>
+          <li class="divider"></li>
+        </ul>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <ul class="nav">
   ...
@@ -3348,16 +3346,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Forms</h3>
-          <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <form class="navbar-form pull-left">
-                <input type="text" style="width: 200px;">
-                <button type="submit" class="btn">Submit</button>
-              </form>
-            </div>
-          </div><!-- /example -->
+    <h3>Forms</h3>
+    <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <form class="navbar-form pull-left">
+          <input type="text" style="width: 200px;">
+          <button type="submit" class="btn">Submit</button>
+        </form>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <form class="navbar-form pull-left">
   <input type="text" style="width: 200px;">
@@ -3365,73 +3363,73 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-          <h3>Component alignment</h3>
-          <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+    <h3>Component alignment</h3>
+    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
-          <h3>Using dropdowns</h3>
-          <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
+    <h3>Using dropdowns</h3>
+    <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
 
-          <h3>Text</h3>
-          <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+    <h3>Text</h3>
+    <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
 
 
-          <h2>Optional display variations</h2>
-          <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+    <h2>Optional display variations</h2>
+    <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
 
-          <h3>Fixed to top</h3>
-          <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
-          <div class="bs-docs-example bs-navbar-top-example">
-            <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
+    <h3>Fixed to top</h3>
+    <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+    <div class="bs-docs-example bs-navbar-top-example">
+      <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
+        <div class="container" style="width: auto;">
+          <a class="navbar-brand" href="#">Title</a>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+          </ul>
+        </div>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar navbar-fixed-top">
   ...
 </div>
 {% endhighlight %}
 
-          <h3>Fixed to bottom</h3>
-          <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
-          <div class="bs-docs-example bs-navbar-bottom-example">
-            <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
+    <h3>Fixed to bottom</h3>
+    <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
+    <div class="bs-docs-example bs-navbar-bottom-example">
+      <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
+        <div class="container" style="width: auto;">
+          <a class="navbar-brand" href="#">Title</a>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+          </ul>
+        </div>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar navbar-fixed-bottom">
   ...
 </div>
 {% endhighlight %}
 
-          <h3>Static top navbar</h3>
-          <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
-          <div class="bs-docs-example bs-navbar-top-example">
-            <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
-              <div class="container" style="width: auto;">
-                <a class="navbar-brand" href="#">Title</a>
-                <ul class="nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Link</a></li>
-                  <li><a href="#">Link</a></li>
-                </ul>
-              </div>
-            </div>
-          </div><!-- /example -->
+    <h3>Static top navbar</h3>
+    <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
+    <div class="bs-docs-example bs-navbar-top-example">
+      <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+        <div class="container" style="width: auto;">
+          <a class="navbar-brand" href="#">Title</a>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+          </ul>
+        </div>
+      </div>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar navbar-static-top">
   ...
@@ -3439,56 +3437,56 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2>Responsive navbar</h2>
-          <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <div class="container">
-                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </a>
-                <a class="navbar-brand" href="#">Title</a>
-                <div class="nav-collapse collapse navbar-responsive-collapse">
-                  <ul class="nav">
-                    <li class="active"><a href="#">Home</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
-                        <li><a href="#">Separated link</a></li>
-                        <li><a href="#">One more separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                  <form class="navbar-form pull-left" action="">
-                    <input type="text" class="span8" placeholder="Search">
-                  </form>
-                  <ul class="nav pull-right">
-                    <li><a href="#">Link</a></li>
-                    <li class="divider"></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
-                </div><!-- /.nav-collapse -->
-              </div><!-- /.container -->
-            </div><!-- /.navbar -->
-          </div><!-- /example -->
+    <h2>Responsive navbar</h2>
+    <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <div class="container">
+          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="navbar-brand" href="#">Title</a>
+          <div class="nav-collapse collapse navbar-responsive-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <form class="navbar-form pull-left" action="">
+              <input type="text" class="span8" placeholder="Search">
+            </form>
+            <ul class="nav pull-right">
+              <li><a href="#">Link</a></li>
+              <li class="divider"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+          </div><!-- /.nav-collapse -->
+        </div><!-- /.container -->
+      </div><!-- /.navbar -->
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar">
   <div class="container">
@@ -3511,127 +3509,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div><!-- /.navbar -->
 {% endhighlight %}
 
-          <div class="alert alert-info">
-            <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
-          </div>
+    <div class="alert alert-info">
+      <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
+    </div>
 
 
-          <h2>Inverted variation</h2>
-          <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
-          <div class="bs-docs-example">
-            <div class="navbar navbar-inverse" style="position: static;">
-              <div class="container">
-                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </a>
-                <a class="navbar-brand" href="#">Title</a>
-                <div class="nav-collapse collapse navbar-inverse-collapse">
-                  <ul class="nav">
-                    <li class="active"><a href="#">Home</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li><a href="#">Link</a></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
-                        <li><a href="#">Separated link</a></li>
-                        <li><a href="#">One more separated link</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                  <form class="navbar-form pull-left" action="">
-                    <input type="text" class="span8" placeholder="Search">
-                  </form>
-                  <ul class="nav pull-right">
-                    <li><a href="#">Link</a></li>
-                    <li class="divider"></li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
-                </div><!-- /.nav-collapse -->
-              </div>
-            </div><!-- /navbar -->
-          </div><!-- /example -->
+    <h2>Inverted variation</h2>
+    <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
+    <div class="bs-docs-example">
+      <div class="navbar navbar-inverse" style="position: static;">
+        <div class="container">
+          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="navbar-brand" href="#">Title</a>
+          <div class="nav-collapse collapse navbar-inverse-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">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 class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <form class="navbar-form pull-left" action="">
+              <input type="text" class="span8" placeholder="Search">
+            </form>
+            <ul class="nav pull-right">
+              <li><a href="#">Link</a></li>
+              <li class="divider"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+          </div><!-- /.nav-collapse -->
+        </div>
+      </div><!-- /navbar -->
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar navbar-inverse">
   ...
 </div>
 {% endhighlight %}
 
-        </section>
+  </div>
 
 
 
-        <!-- Breadcrumbs
-        ================================================== -->
-        <section id="breadcrumbs">
-          <div class="page-header">
-            <h1>Breadcrumbs <small></small></h1>
-          </div>
-          <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
+  <!-- Breadcrumbs
+  ================================================== -->
+  <div class="bs-docs-section" id="breadcrumbs">
+    <div class="page-header">
+      <h1>Breadcrumbs <small></small></h1>
+    </div>
+    <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
 
-          <div class="bs-docs-example">
-            <ul class="breadcrumb">
-              <li class="active">Home</li>
-            </ul>
-            <ul class="breadcrumb">
-              <li><a href="#">Home</a></li>
-              <li class="active">Library</li>
-            </ul>
-            <ul class="breadcrumb" style="margin-bottom: 5px;">
-              <li><a href="#">Home</a></li>
-              <li><a href="#">Library</a></li>
-              <li class="active">Data</li>
-            </ul>
-          </div>
+    <div class="bs-docs-example">
+      <ul class="breadcrumb">
+        <li class="active">Home</li>
+      </ul>
+      <ul class="breadcrumb">
+        <li><a href="#">Home</a></li>
+        <li class="active">Library</li>
+      </ul>
+      <ul class="breadcrumb" style="margin-bottom: 5px;">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Library</a></li>
+        <li class="active">Data</li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">Library</a></li>
   <li class="active">Data</li>
 </ul>
-{% endhighlight %}
-
-
-        </section>
+{% endhighlight %}
+  </div>
 
 
 
-        <!-- Pagination
-        ================================================== -->
-        <section id="pagination">
-          <div class="page-header">
-            <h1>Pagination</h1>
-          </div>
-          <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
+  <!-- Pagination
+  ================================================== -->
+  <div class="bs-docs-section" id="pagination">
+    <div class="page-header">
+      <h1>Pagination</h1>
+    </div>
+    <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
 
-          <h2>Standard pagination</h2>
-          <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
-          <div class="bs-docs-example">
-            <ul class="pagination">
-              <li><a href="#">&laquo;</a></li>
-              <li><a href="#">1</a></li>
-              <li><a href="#">2</a></li>
-              <li><a href="#">3</a></li>
-              <li><a href="#">4</a></li>
-              <li><a href="#">5</a></li>
-              <li><a href="#">&raquo;</a></li>
-            </ul>
-          </div>
+    <h2 id="pagination-default">Standard pagination</h2>
+    <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
+    <div class="bs-docs-example">
+      <ul class="pagination">
+        <li><a href="#">&laquo;</a></li>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+        <li><a href="#">4</a></li>
+        <li><a href="#">5</a></li>
+        <li><a href="#">&raquo;</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="pagination">
   <li><a href="#">&laquo;</a></li>
@@ -3644,19 +3640,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Disabled and active states</h3>
-          <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
-          <div class="bs-docs-example">
-            <ul class="pagination">
-              <li class="disabled"><a href="#">&laquo;</a></li>
-              <li class="active"><a href="#">1</a></li>
-              <li><a href="#">2</a></li>
-              <li><a href="#">3</a></li>
-              <li><a href="#">4</a></li>
-              <li><a href="#">5</a></li>
-              <li><a href="#">&raquo;</a></li>
-           </ul>
-          </div>
+    <h3>Disabled and active states</h3>
+    <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
+    <div class="bs-docs-example">
+      <ul class="pagination">
+        <li class="disabled"><a href="#">&laquo;</a></li>
+        <li class="active"><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+        <li><a href="#">4</a></li>
+        <li><a href="#">5</a></li>
+        <li><a href="#">&raquo;</a></li>
+     </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="pagination">
   <li class="disabled"><a href="#">&laquo;</a></li>
@@ -3664,7 +3660,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   ...
 </ul>
 {% endhighlight %}
-          <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
+    <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
 {% highlight html linenos %}
 <ul class="pagination">
   <li class="disabled"><span>&laquo;</span></li>
@@ -3674,54 +3670,54 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3>Sizes</h3>
-          <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
-          <div class="bs-docs-example">
-            <div>
-              <ul class="pagination pagination-large">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination pagination-small">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-            <div>
-              <ul class="pagination pagination-mini">
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
-          </div>
+    <h3>Sizes</h3>
+    <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
+    <div class="bs-docs-example">
+      <div>
+        <ul class="pagination pagination-large">
+          <li><a href="#">&laquo;</a></li>
+          <li><a href="#">1</a></li>
+          <li><a href="#">2</a></li>
+          <li><a href="#">3</a></li>
+          <li><a href="#">4</a></li>
+          <li><a href="#">5</a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
+      </div>
+      <div>
+        <ul class="pagination">
+          <li><a href="#">&laquo;</a></li>
+          <li><a href="#">1</a></li>
+          <li><a href="#">2</a></li>
+          <li><a href="#">3</a></li>
+          <li><a href="#">4</a></li>
+          <li><a href="#">5</a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
+      </div>
+      <div>
+        <ul class="pagination pagination-small">
+          <li><a href="#">&laquo;</a></li>
+          <li><a href="#">1</a></li>
+          <li><a href="#">2</a></li>
+          <li><a href="#">3</a></li>
+          <li><a href="#">4</a></li>
+          <li><a href="#">5</a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
+      </div>
+      <div>
+        <ul class="pagination pagination-mini">
+          <li><a href="#">&laquo;</a></li>
+          <li><a href="#">1</a></li>
+          <li><a href="#">2</a></li>
+          <li><a href="#">3</a></li>
+          <li><a href="#">4</a></li>
+          <li><a href="#">5</a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
+      </div>
+    </div>
 {% highlight html linenos %}
 <ul class="pagination pagination-large">...</ul>
 <ul class="pagination pagination">...</ul>
@@ -3730,17 +3726,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2 id="pagination-pager">Pager</h2>
-          <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
+    <h2 id="pagination-pager">Pager</h2>
+    <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
 
-          <h3>Default example</h3>
-          <p>By default, the pager centers links.</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li><a href="#">Previous</a></li>
-              <li><a href="#">Next</a></li>
-            </ul>
-          </div>
+    <h3>Default example</h3>
+    <p>By default, the pager centers links.</p>
+    <div class="bs-docs-example">
+      <ul class="pager">
+        <li><a href="#">Previous</a></li>
+        <li><a href="#">Next</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="pager">
   <li><a href="#">Previous</a></li>
@@ -3748,14 +3744,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-          <h3>Aligned links</h3>
-          <p>Alternatively, you can align each link to the sides:</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li class="previous"><a href="#">&larr; Older</a></li>
-              <li class="next"><a href="#">Newer &rarr;</a></li>
-            </ul>
-          </div>
+    <h3>Aligned links</h3>
+    <p>Alternatively, you can align each link to the sides:</p>
+    <div class="bs-docs-example">
+      <ul class="pager">
+        <li class="previous"><a href="#">&larr; Older</a></li>
+        <li class="next"><a href="#">Newer &rarr;</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="pager">
   <li class="previous"><a href="#">&larr; Older</a></li>
@@ -3764,147 +3760,145 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3>Optional disabled state</h3>
-          <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
-          <div class="bs-docs-example">
-            <ul class="pager">
-              <li class="previous disabled"><a href="#">&larr; Older</a></li>
-              <li class="next"><a href="#">Newer &rarr;</a></li>
-            </ul>
-          </div>
+    <h3>Optional disabled state</h3>
+    <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
+    <div class="bs-docs-example">
+      <ul class="pager">
+        <li class="previous disabled"><a href="#">&larr; Older</a></li>
+        <li class="next"><a href="#">Newer &rarr;</a></li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="pager">
   <li class="previous disabled"><a href="#">&larr; Older</a></li>
   <li class="next"><a href="#">Newer &rarr;</a></li>
 </ul>
 {% endhighlight %}
-
-
-        </section>
+  </div>
 
 
 
-        <!-- Labels
-        ================================================== -->
-        <section id="labels">
-          <div class="page-header">
-            <h1>Labels</h1>
-          </div>
-          <p class="lead"></p>
+  <!-- Labels
+  ================================================== -->
+  <div class="bs-docs-section" id="labels">
+    <div class="page-header">
+      <h1>Labels</h1>
+    </div>
+    <p class="lead"></p>
 
-          <h3>Example</h3>
-          <div class="bs-docs-example">
-            <h1>Example heading <span class="label">New</span></h1>
-            <h2>Example heading <span class="label">New</span></h2>
-            <h3>Example heading <span class="label">New</span></h3>
-            <h4>Example heading <span class="label">New</span></h4>
-            <h5>Example heading <span class="label">New</span></h5>
-            <h6>Example heading <span class="label">New</span></h6>
-          </div>
+    <h3>Example</h3>
+    <div class="bs-docs-example">
+      <h1>Example heading <span class="label">New</span></h1>
+      <h2>Example heading <span class="label">New</span></h2>
+      <h3>Example heading <span class="label">New</span></h3>
+      <h4>Example heading <span class="label">New</span></h4>
+      <h5>Example heading <span class="label">New</span></h5>
+      <h6>Example heading <span class="label">New</span></h6>
+    </div>
 {% highlight html linenos %}
 <h3>Example heading <span class="label">New</span></h3>
 {% endhighlight %}
 
-          <h3>Available variations</h3>
-          <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Labels</th>
-                <th>Markup</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <span class="label">Default</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-success">Success</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-warning">Warning</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-danger">Danger</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-info">Info</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+    <h3>Available variations</h3>
+    <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Labels</th>
+          <th>Markup</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <span class="label">Default</span>
+          </td>
+          <td>
+            <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="label label-success">Success</span>
+          </td>
+          <td>
+            <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="label label-warning">Warning</span>
+          </td>
+          <td>
+            <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="label label-danger">Danger</span>
+          </td>
+          <td>
+            <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="label label-info">Info</span>
+          </td>
+          <td>
+            <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-        </section>
+  </div>
 
 
 
-        <!-- Badges
-        ================================================== -->
-        <section id="badges">
-          <div class="page-header">
-            <h1>Badges</h1>
-          </div>
-          <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
+  <!-- Badges
+  ================================================== -->
+  <div class="bs-docs-section" id="badges">
+    <div class="page-header">
+      <h1>Badges</h1>
+    </div>
+    <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
 
-          <div class="bs-docs-example">
-            <a href="#">Inbox <span class="badge">42</span></a>
-          </div>
+    <div class="bs-docs-example">
+      <a href="#">Inbox <span class="badge">42</span></a>
+    </div>
 {% highlight html linenos %}
 <a href="#">Inbox <span class="badge">42</span></a>
 {% endhighlight %}
 
-          <h4>Self collapsing</h4>
-          <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
+    <h4>Self collapsing</h4>
+    <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
 
-          <h4>Adapts to active nav states</h4>
-          <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
-          <div class="bs-docs-example">
-            <ul class="nav nav-pills">
-              <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
-              <li><a href="#">Profile</a></li>
-              <li><a href="#">Messages <span class="badge">3</span></a></li>
-            </ul>
-            <br>
-            <ul class="nav nav-list" style="max-width: 260px;">
-              <li class="active">
-                <a href="#">
-                  <span class="badge pull-right">42</span>
-                  Home
-                </a>
-              </li>
-              <li><a href="#">Profile</a></li>
-              <li>
-                <a href="#">
-                  <span class="badge pull-right">3</span>
-                  Messages
-                </a>
-              </li>
-            </ul>
-          </div>
+    <h4>Adapts to active nav states</h4>
+    <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
+    <div class="bs-docs-example">
+      <ul class="nav nav-pills">
+        <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages <span class="badge">3</span></a></li>
+      </ul>
+      <br>
+      <ul class="nav nav-list" style="max-width: 260px;">
+        <li class="active">
+          <a href="#">
+            <span class="badge pull-right">42</span>
+            Home
+          </a>
+        </li>
+        <li><a href="#">Profile</a></li>
+        <li>
+          <a href="#">
+            <span class="badge pull-right">3</span>
+            Messages
+          </a>
+        </li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="nav nav-list">
   <li class="active">
@@ -3916,27 +3910,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   ...
 </ul>
 {% endhighlight %}
-
-        </section>
+  </div>
 
 
 
-        <!-- Typographic components
-        ================================================== -->
-        <section id="typography-components">
-          <div class="page-header">
-            <h1>Typographic components</h1>
-          </div>
+  <!-- Typographic components
+  ================================================== -->
+  <div class="bs-docs-section" id="type-components">
+    <div class="page-header">
+      <h1>Typographic components</h1>
+    </div>
 
-          <h2>Jumbotron</h2>
-          <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
-          <div class="bs-docs-example">
-            <div class="jumbotron">
-              <h1>Hello, world!</h1>
-              <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-              <p><a class="btn btn-primary btn-large">Learn more</a></p>
-            </div>
-          </div>
+    <h2 id="type-components-jumbotron">Jumbotron</h2>
+    <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
+    <div class="bs-docs-example">
+      <div class="jumbotron">
+        <h1>Hello, world!</h1>
+        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+        <p><a class="btn btn-primary btn-large">Learn more</a></p>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="jumbotron">
   <h1>Hello, world!</h1>
@@ -3945,57 +3938,56 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h2>Page header</h2>
-          <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
-          <div class="bs-docs-example">
-            <div class="page-header">
-              <h1>Example page header <small>Subtext for header</small></h1>
-            </div>
-          </div>
+    <h2 id="type-components-page-header">Page header</h2>
+    <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
+    <div class="bs-docs-example">
+      <div class="page-header">
+        <h1>Example page header <small>Subtext for header</small></h1>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="page-header">
   <h1>Example page header <small>Subtext for header</small></h1>
 </div>
 {% endhighlight %}
-
-        </section>
+  </div>
 
 
 
-        <!-- Thumbnails
-        ================================================== -->
-        <section id="thumbnails">
-          <div class="page-header">
-            <h1>Thumbnails</h1>
-          </div>
-          <p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
+  <!-- Thumbnails
+  ================================================== -->
+  <div class="bs-docs-section" id="thumbnails">
+    <div class="page-header">
+      <h1>Thumbnails</h1>
+    </div>
+    <p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
 
-          <h3>Default thumbnails</h3>
-          <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
-          <div class="bs-docs-example">
-            <div class="row">
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-              <div class="span3">
-                <a href="#" class="thumbnail">
-                  <img data-src="holder.js/260x180" alt="">
-                </a>
-              </div>
-            </div>
-          </div><!-- /.bs-docs-example -->
+    <h3>Default thumbnails</h3>
+    <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
+    <div class="bs-docs-example">
+      <div class="row">
+        <div class="span3">
+          <a href="#" class="thumbnail">
+            <img data-src="holder.js/260x180" alt="">
+          </a>
+        </div>
+        <div class="span3">
+          <a href="#" class="thumbnail">
+            <img data-src="holder.js/260x180" alt="">
+          </a>
+        </div>
+        <div class="span3">
+          <a href="#" class="thumbnail">
+            <img data-src="holder.js/260x180" alt="">
+          </a>
+        </div>
+        <div class="span3">
+          <a href="#" class="thumbnail">
+            <img data-src="holder.js/260x180" alt="">
+          </a>
+        </div>
+      </div>
+    </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
   <div class="span3">
@@ -4007,42 +3999,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Custom content thumbnails</h3>
-          <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>
-          <div class="bs-docs-example">
-            <div class="row">
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
-              <div class="span4">
-                <div class="thumbnail">
-                  <img data-src="holder.js/300x200" alt="">
-                  <div class="caption">
-                    <h3>Thumbnail label</h3>
-                    <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
-                  </div>
-                </div>
-              </div>
+    <h3>Custom content thumbnails</h3>
+    <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>
+    <div class="bs-docs-example">
+      <div class="row">
+        <div class="span4">
+          <div class="thumbnail">
+            <img data-src="holder.js/300x200" alt="">
+            <div class="caption">
+              <h3>Thumbnail label</h3>
+              <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="span4">
+          <div class="thumbnail">
+            <img data-src="holder.js/300x200" alt="">
+            <div class="caption">
+              <h3>Thumbnail label</h3>
+              <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="span4">
+          <div class="thumbnail">
+            <img data-src="holder.js/300x200" alt="">
+            <div class="caption">
+              <h3>Thumbnail label</h3>
+              <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 btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
             </div>
-          </div><!-- /.bs-docs-example -->
+          </div>
+        </div>
+      </div>
+    </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
   <div class="span3">
@@ -4057,29 +4049,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   </div>
 </div>
 {% endhighlight %}
-
-
-        </section>
+  </div>
 
 
 
 
-        <!-- Alerts
-        ================================================== -->
-        <section id="alerts">
-          <div class="page-header">
-            <h1>Alerts</h1>
-          </div>
-          <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
+  <!-- Alerts
+  ================================================== -->
+  <div class="bs-docs-section" id="alerts">
+    <div class="page-header">
+      <h1>Alerts</h1>
+    </div>
+    <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
 
-          <h3>Default alert</h3>
-          <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
-          <div class="bs-docs-example">
-            <div class="alert">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Warning!</strong> Best check yo self, you're not looking too good.
-            </div>
-          </div>
+    <h3 id="alerts-default">Default alert</h3>
+    <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
+    <div class="bs-docs-example">
+      <div class="alert">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Warning!</strong> Best check yo self, you're not looking too good.
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="alert">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -4087,15 +4077,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Block alerts</h3>
-          <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
-          <div class="bs-docs-example">
-            <div class="alert alert-block">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <h4>Warning!</h4>
-              <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-            </div>
-          </div>
+    <h3 id="alerts-block">Block alerts</h3>
+    <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
+    <div class="bs-docs-example">
+      <div class="alert alert-block">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <h4>Warning!</h4>
+        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="alert alert-block">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -4104,71 +4094,71 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Contextual alternatives</h3>
-          <p>Add optional classes to change an alert's connotation.</p>
-          <div class="bs-docs-example">
-            <div class="alert alert-error">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Oh snap!</strong> Change a few things up and try submitting again.
-            </div>
-            <div class="alert alert-success">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Well done!</strong> You successfully read this important alert message.
-            </div>
-            <div class="alert alert-info">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-            </div>
-          </div>
+    <h3 id="alerts-alternatives">Contextual alternatives</h3>
+    <p>Add optional classes to change an alert's connotation.</p>
+    <div class="bs-docs-example">
+      <div class="alert alert-error">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Oh snap!</strong> Change a few things up and try submitting again.
+      </div>
+      <div class="alert alert-success">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Well done!</strong> You successfully read this important alert message.
+      </div>
+      <div class="alert alert-info">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="alert alert-error">...</div>
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
 {% endhighlight %}
-        </section>
+  </div>
 
 
 
 
-        <!-- Progress bars
-        ================================================== -->
-        <section id="progress">
-          <div class="page-header">
-            <h1>Progress bars</h1>
-          </div>
-          <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
+  <!-- Progress bars
+  ================================================== -->
+  <div class="bs-docs-section" id="progress">
+    <div class="page-header">
+      <h1>Progress bars</h1>
+    </div>
+    <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
-          <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
+    <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
 
-          <h3>Basic</h3>
-          <p>Default progress bar with a vertical gradient.</p>
-          <div class="bs-docs-example">
-            <div class="progress">
-              <div class="progress-bar" style="width: 60%;"></div>
-            </div>
-          </div>
+    <h3 id="progress-basic">Basic</h3>
+    <p>Default progress bar with a vertical gradient.</p>
+    <div class="bs-docs-example">
+      <div class="progress">
+        <div class="progress-bar" style="width: 60%;"></div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="progress">
   <div class="progress-bar" style="width: 60%;"></div>
 </div>
 {% endhighlight %}
 
-          <h3>Additional colors</h3>
-          <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
-          <div class="bs-docs-example">
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-            </div>
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-            </div>
-            <div class="progress" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-            </div>
-            <div class="progress">
-              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-            </div>
-          </div>
+    <h3 id="progress-alternatives">Contextual alternatives</h3>
+    <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
+    <div class="bs-docs-example">
+      <div class="progress" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+      </div>
+      <div class="progress" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+      </div>
+      <div class="progress" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+      </div>
+      <div class="progress">
+        <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="progress">
   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
@@ -4184,22 +4174,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Striped</h3>
-          <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
-          <div class="bs-docs-example">
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-            </div>
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-            </div>
-            <div class="progress progress-striped" style="margin-bottom: 9px;">
-              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-            </div>
-            <div class="progress progress-striped">
-              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-            </div>
-          </div>
+    <h3 id="progress-striped">Striped</h3>
+    <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
+    <div class="bs-docs-example">
+      <div class="progress progress-striped" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+      </div>
+      <div class="progress progress-striped" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+      </div>
+      <div class="progress progress-striped" style="margin-bottom: 9px;">
+        <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+      </div>
+      <div class="progress progress-striped">
+        <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
@@ -4215,28 +4205,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Animated</h3>
-          <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
-          <div class="bs-docs-example">
-            <div class="progress progress-striped active">
-              <div class="progress-bar" style="width: 45%"></div>
-            </div>
-          </div>
+    <h3 id="progress-animated">Animated</h3>
+    <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
+    <div class="bs-docs-example">
+      <div class="progress progress-striped active">
+        <div class="progress-bar" style="width: 45%"></div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="progress progress-striped active">
   <div class="progress-bar" style="width: 45%"></div>
 </div>
 {% endhighlight %}
 
-          <h3>Stacked</h3>
-          <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
-          <div class="bs-docs-example">
-            <div class="progress">
-              <div class="progress-bar progress-bar-success" style="width: 35%"></div>
-              <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
-              <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
-            </div>
-          </div>
+    <h3 id="progress-stacked">Stacked</h3>
+    <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
+    <div class="bs-docs-example">
+      <div class="progress">
+        <div class="progress-bar progress-bar-success" style="width: 35%"></div>
+        <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
+        <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 35%"></div>
@@ -4244,117 +4234,116 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
 </div>
 {% endhighlight %}
+  </div>
 
-        </section>
 
 
 
+  <!-- Media object
+  ================================================== -->
+  <div class="bs-docs-section" id="media">
+    <div class="page-header">
+      <h1>Media object</h1>
+    </div>
+    <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
 
-        <!-- Media object
-        ================================================== -->
-        <section id="media">
-          <div class="page-header">
-            <h1>Media object</h1>
+    <h3>Default example</h3>
+    <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
+    <div class="bs-docs-example">
+      <div class="media">
+        <a class="pull-left" href="#">
+          <img class="media-object" data-src="holder.js/64x64">
+        </a>
+        <div class="media-body">
+          <h4 class="media-heading">Media heading</h4>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+        </div>
+      </div>
+      <div class="media">
+        <a class="pull-left" href="#">
+          <img class="media-object" data-src="holder.js/64x64">
+        </a>
+        <div class="media-body">
+          <h4 class="media-heading">Media heading</h4>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+          <div class="media">
+            <a class="pull-left" href="#">
+              <img class="media-object" data-src="holder.js/64x64">
+            </a>
+            <div class="media-body">
+              <h4 class="media-heading">Media heading</h4>
+              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+            </div>
           </div>
-          <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
+        </div>
+      </div>
+    </div><!-- /.bs-docs-example -->
+{% highlight html linenos %}
+<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" src="...">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Media heading</h4>
+    ...
+  </div>
+</div>
+{% endhighlight %}
 
-          <h3>Default example</h3>
-          <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
-          <div class="bs-docs-example">
-            <div class="media">
-              <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64">
-              </a>
-              <div class="media-body">
-                <h4 class="media-heading">Media heading</h4>
-                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-              </div>
-            </div>
+    <h3>Media list</h3>
+    <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
+    <div class="bs-docs-example">
+      <ul class="media-list">
+        <li class="media">
+          <a class="pull-left" href="#">
+            <img class="media-object" data-src="holder.js/64x64">
+          </a>
+          <div class="media-body">
+            <h4 class="media-heading">Media heading</h4>
+            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+            <!-- Nested media object -->
             <div class="media">
               <a class="pull-left" href="#">
                 <img class="media-object" data-src="holder.js/64x64">
               </a>
               <div class="media-body">
-                <h4 class="media-heading">Media heading</h4>
-                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+                <h4 class="media-heading">Nested media heading</h4>
+                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+                <!-- Nested media object -->
                 <div class="media">
                   <a class="pull-left" href="#">
                     <img class="media-object" data-src="holder.js/64x64">
                   </a>
                   <div class="media-body">
-                    <h4 class="media-heading">Media heading</h4>
-                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+                    <h4 class="media-heading">Nested media heading</h4>
+                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                   </div>
                 </div>
               </div>
             </div>
-          </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
-<div class="media">
-  <a class="pull-left" href="#">
-    <img class="media-object" src="...">
-  </a>
-  <div class="media-body">
-    <h4 class="media-heading">Media heading</h4>
-    ...
-  </div>
-</div>
-{% endhighlight %}
-
-          <h3>Media list</h3>
-          <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
-          <div class="bs-docs-example">
-            <ul class="media-list">
-              <li class="media">
-                <a class="pull-left" href="#">
-                  <img class="media-object" data-src="holder.js/64x64">
-                </a>
-                <div class="media-body">
-                  <h4 class="media-heading">Media heading</h4>
-                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
-                  <!-- Nested media object -->
-                  <div class="media">
-                    <a class="pull-left" href="#">
-                      <img class="media-object" data-src="holder.js/64x64">
-                    </a>
-                    <div class="media-body">
-                      <h4 class="media-heading">Nested media heading</h4>
-                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                      <!-- Nested media object -->
-                      <div class="media">
-                        <a class="pull-left" href="#">
-                          <img class="media-object" data-src="holder.js/64x64">
-                        </a>
-                        <div class="media-body">
-                          <h4 class="media-heading">Nested media heading</h4>
-                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Nested media object -->
-                  <div class="media">
-                    <a class="pull-left" href="#">
-                      <img class="media-object" data-src="holder.js/64x64">
-                    </a>
-                    <div class="media-body">
-                      <h4 class="media-heading">Nested media heading</h4>
-                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li class="media">
-                <a class="pull-right" href="#">
-                  <img class="media-object" data-src="holder.js/64x64">
-                </a>
-                <div class="media-body">
-                  <h4 class="media-heading">Media heading</h4>
-                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-                </div>
-              </li>
-            </ul>
+            <!-- Nested media object -->
+            <div class="media">
+              <a class="pull-left" href="#">
+                <img class="media-object" data-src="holder.js/64x64">
+              </a>
+              <div class="media-body">
+                <h4 class="media-heading">Nested media heading</h4>
+                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+              </div>
+            </div>
+          </div>
+        </li>
+        <li class="media">
+          <a class="pull-right" href="#">
+            <img class="media-object" data-src="holder.js/64x64">
+          </a>
+          <div class="media-body">
+            <h4 class="media-heading">Media heading</h4>
+            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
           </div>
+        </li>
+      </ul>
+    </div>
 {% highlight html linenos %}
 <ul class="media-list">
   <li class="media">
@@ -4368,175 +4357,170 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   </li>
 </ul>
 {% endhighlight %}
-
-</section>
+  </div>
 
 
 
 
 
-        <!-- Wells
-        ================================================== -->
-        <div id="wells">
-          <div class="page-header">
-            <h1>Wells</h1>
-          </div>
+  <!-- Wells
+  ================================================== -->
+  <div class="bs-docs-section" id="wells">
+    <div class="page-header">
+      <h1>Wells</h1>
+    </div>
 
-          <h3>Default well</h3>
-          <p>Use the well as a simple effect on an element to give it an inset effect.</p>
-          <div class="bs-docs-example">
-            <div class="well">
-              Look, I'm in a well!
-            </div>
-          </div>
+    <h3>Default well</h3>
+    <p>Use the well as a simple effect on an element to give it an inset effect.</p>
+    <div class="bs-docs-example">
+      <div class="well">
+        Look, I'm in a well!
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="well">...</div>
 {% endhighlight %}
-          <h3>Optional classes</h3>
-          <p>Control padding and rounded corners with two optional modifier classes.</p>
-          <div class="bs-docs-example">
-            <div class="well well-large">
-              Look, I'm in a well!
-            </div>
-          </div>
+    <h3>Optional classes</h3>
+    <p>Control padding and rounded corners with two optional modifier classes.</p>
+    <div class="bs-docs-example">
+      <div class="well well-large">
+        Look, I'm in a well!
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="well well-large">...</div>
 {% endhighlight %}
 
-          <div class="bs-docs-example">
-            <div class="well well-small">
-              Look, I'm in a well!
-            </div>
-          </div>
+    <div class="bs-docs-example">
+      <div class="well well-small">
+        Look, I'm in a well!
+      </div>
+    </div>
 {% highlight html linenos %}
 <div class="well well-small">...</div>
 {% endhighlight %}
-
-        </div>
+  </div>
 
 
 
 
 
-    <div class="bs-docs-section-header" id="js">
-      <h1>JavaScript plugins</h1>
-      <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
-    </div>
+  <div class="bs-docs-section-header" id="js">
+    <h1>JavaScript plugins</h1>
+    <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
+  </div>
 
 
-        <!-- Overview
-        ================================================== -->
-        <section class="bs-docs-section" id="js-overview">
-          <div class="page-header">
-            <h1>Overview</h1>
-          </div>
+  <!-- Overview
+  ================================================== -->
+  <div class="bs-docs-section" id="js-overview">
+    <div class="page-header">
+      <h1>Overview</h1>
+    </div>
 
-          <h3>Individual or compiled</h3>
-          <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+    <h3 id="js-individual-compiled">Individual or compiled</h3>
+    <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
 
-          <h3>Data attributes</h3>
-          <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
+    <h3 id="js-data-attrs">Data attributes</h3>
+    <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
 
-          <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+    <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
 {% highlight js linenos %}
 $('body').off('.data-api')
 {% endhighlight %}
 
-          <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
+    <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
 {% highlight js linenos %}
 $('body').off('.alert.data-api')
 {% endhighlight %}
 
-          <h3>Programmatic API</h3>
-          <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
+    <h3 id="js-programmatic-api">Programmatic API</h3>
+    <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
 {% highlight js linenos %}
 $(".btn.danger").button("toggle").addClass("fat")
 {% endhighlight %}
 
-          <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
+    <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
 {% highlight js linenos %}
 $("#myModal").modal()                      // initialized with defaults
 $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
 $("#myModal").modal('show')                // initializes and invokes show immediately</p>
 {% endhighlight %}
 
-          <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+    <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
 
-          <h3>No conflict</h3>
-          <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
+    <h3 id="js-noconflict">No conflict</h3>
+    <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
 {% highlight js linenos %}
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
 {% endhighlight %}
 
-
-          <h3>Events</h3>
-          <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-          <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
+    <h3 id="js-events">Events</h3>
+    <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+    <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
 {% highlight js linenos %}
 $('#myModal').on('show', function (e) {
-    if (!data) return e.preventDefault() // stops modal from being shown
+  if (!data) return e.preventDefault() // stops modal from being shown
 })
 {% endhighlight %}
-
-        </section>
-
+  </div>
 
 
-        <!-- Transitions
-        ================================================== -->
-        <section id="transitions">
-          <div class="page-header">
-            <h1>Transitions <small>bootstrap-transition.js</small></h1>
-          </div>
-          <h3>About transitions</h3>
-          <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
-          <h3>Use cases</h3>
-          <p>A few examples of the transition plugin:</p>
-          <ul>
-            <li>Sliding or fading in modals</li>
-            <li>Fading out tabs</li>
-            <li>Fading out alerts</li>
-            <li>Sliding carousel panes</li>
-          </ul>
 
-          <!-- Ideas: include docs for .fade.in, .slide.in, etc -->
-        </section>
+  <!-- Transitions
+  ================================================== -->
+  <div class="bs-docs-section" id="transitions">
+    <div class="page-header">
+      <h1>Transitions <small>bootstrap-transition.js</small></h1>
+    </div>
+    <h3>About transitions</h3>
+    <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
+    <h3>Use cases</h3>
+    <p>A few examples of the transition plugin:</p>
+    <ul>
+      <li>Sliding or fading in modals</li>
+      <li>Fading out tabs</li>
+      <li>Fading out alerts</li>
+      <li>Sliding carousel panes</li>
+    </ul>
 
+    <!-- Ideas: include docs for .fade.in, .slide.in, etc -->
+  </div>
 
 
-        <!-- Modal
-        ================================================== -->
-        <section id="modals">
-          <div class="page-header">
-            <h1>Modals <small>bootstrap-modal.js</small></h1>
-          </div>
 
+  <!-- Modal
+  ================================================== -->
+  <div class="bs-docs-section" id="modals">
+    <div class="page-header">
+      <h1>Modals <small>bootstrap-modal.js</small></h1>
+    </div>
 
-          <h2>Examples</h2>
-          <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
-
-          <h3>Static example</h3>
-          <p>A rendered modal with header, body, and set of actions in the footer.</p>
-          <div class="bs-docs-example bs-docs-example-modal">
-            <div class="modal">
-              <div class="modal-dialog">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title">Modal title</h4>
-                  </div>
-                  <div class="modal-body">
-                    <p>One fine body&hellip;</p>
-                  </div>
-                  <div class="modal-footer">
-                    <a href="#" class="btn">Close</a>
-                    <a href="#" class="btn btn-primary">Save changes</a>
-                  </div>
-                </div><!-- /.modal-content -->
-              </div><!-- /.modal-dalog -->
-            </div><!-- /.modal -->
-          </div><!-- /example -->
+    <h2 id="modals-examples">Examples</h2>
+    <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
+
+    <h3>Static example</h3>
+    <p>A rendered modal with header, body, and set of actions in the footer.</p>
+    <div class="bs-docs-example bs-docs-example-modal">
+      <div class="modal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+              <h4 class="modal-title">Modal title</h4>
+            </div>
+            <div class="modal-body">
+              <p>One fine body&hellip;</p>
+            </div>
+            <div class="modal-footer">
+              <a href="#" class="btn">Close</a>
+              <a href="#" class="btn btn-primary">Save changes</a>
+            </div>
+          </div><!-- /.modal-content -->
+        </div><!-- /.modal-dalog -->
+      </div><!-- /.modal -->
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="modal">
   <div class="modal-dialog">
@@ -4557,49 +4541,49 @@ $('#myModal').on('show', function (e) {
 </div><!-- /.modal -->
 {% endhighlight %}
 
-          <h3>Live demo</h3>
-          <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
-          <!-- sample modal content -->
-          <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-              <div class="modal-content">
+    <h3>Live demo</h3>
+    <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
+    <!-- sample modal content -->
+    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
 
-                <div class="modal-header">
-                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                  <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
-                </div>
-                <div class="modal-body">
-                  <h4>Text in a modal</h4>
-                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
+          </div>
+          <div class="modal-body">
+            <h4>Text in a modal</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
-                  <h4>Popover in a modal</h4>
-                  <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+            <h4>Popover in a modal</h4>
+            <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
 
-                  <h4>Tooltips in a modal</h4>
-                  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+            <h4>Tooltips in a modal</h4>
+            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
 
-                  <hr>
+            <hr>
 
-                  <h4>Overflowing text to show optional scrollbar</h4>
-                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                </div>
-                <div class="modal-footer">
-                  <button class="btn" data-dismiss="modal">Close</button>
-                  <button class="btn btn-primary">Save changes</button>
-                </div>
+            <h4>Overflowing text to show optional scrollbar</h4>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">Close</button>
+            <button class="btn btn-primary">Save changes</button>
+          </div>
 
-              </div><!-- /.modal-content -->
-            </div><!-- /.modal-dalog -->
-          </div><!-- /.modal -->
+        </div><!-- /.modal-content -->
+      </div><!-- /.modal-dalog -->
+    </div><!-- /.modal -->
 
-          <div class="bs-docs-example" style="padding-bottom: 24px;">
-            <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
-          </div><!-- /example -->
+    <div class="bs-docs-example" style="padding-bottom: 24px;">
+      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+    </div><!-- /example -->
 {% highlight html linenos %}
 <div class="modal">
   <!-- Button trigger modal -->
@@ -4626,116 +4610,116 @@ $('#myModal').on('show', function (e) {
 
 
 
-          <h2>Usage</h2>
+    <h2 id="modals-usage">Usage</h2>
 
-          <h3>Via data attributes</h3>
-          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
+    <h3>Via data attributes</h3>
+    <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
 {% highlight html linenos %}
 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
 {% endhighlight %}
 
-          <h3>Via JavaScript</h3>
-          <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
-          {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
+    <h3>Via JavaScript</h3>
+    <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
+    {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
 
-          <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 100px;">Name</th>
-               <th style="width: 50px;">type</th>
-               <th style="width: 50px;">default</th>
-               <th>description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>backdrop</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
-             </tr>
-             <tr>
-               <td>keyboard</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Closes the modal when escape key is pressed</td>
-             </tr>
-             <tr>
-               <td>show</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Shows the modal when initialized.</td>
-             </tr>
-             <tr>
-               <td>remote</td>
-               <td>path</td>
-               <td>false</td>
-               <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
+    <h3>Options</h3>
+    <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
+    <table class="table table-bordered table-striped">
+      <thead>
+       <tr>
+         <th style="width: 100px;">Name</th>
+         <th style="width: 50px;">type</th>
+         <th style="width: 50px;">default</th>
+         <th>description</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+         <td>backdrop</td>
+         <td>boolean</td>
+         <td>true</td>
+         <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+       </tr>
+       <tr>
+         <td>keyboard</td>
+         <td>boolean</td>
+         <td>true</td>
+         <td>Closes the modal when escape key is pressed</td>
+       </tr>
+       <tr>
+         <td>show</td>
+         <td>boolean</td>
+         <td>true</td>
+         <td>Shows the modal when initialized.</td>
+       </tr>
+       <tr>
+         <td>remote</td>
+         <td>path</td>
+         <td>false</td>
+         <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
 {% highlight html linenos %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
 {% endhighlight %}
-             </tr>
-            </tbody>
-          </table>
+       </tr>
+      </tbody>
+    </table>
 
-          <h3>Methods</h3>
+    <h3>Methods</h3>
 
-          <h4>.modal(options)</h4>
-          <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
+    <h4>.modal(options)</h4>
+    <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
 {% highlight js linenos %}
 $('#myModal').modal({
   keyboard: false
 })
 {% endhighlight %}
 
-          <h4>.modal('toggle')</h4>
-          <p>Manually toggles a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
+    <h4>.modal('toggle')</h4>
+    <p>Manually toggles a modal.</p>
+    {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
 
-          <h4>.modal('show')</h4>
-          <p>Manually opens a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
+    <h4>.modal('show')</h4>
+    <p>Manually opens a modal.</p>
+    {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
 
-          <h4>.modal('hide')</h4>
-          <p>Manually hides a modal.</p>
-          {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
+    <h4>.modal('hide')</h4>
+    <p>Manually hides a modal.</p>
+    {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
 
-          <h3>Events</h3>
-          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-             <tr>
-               <th style="width: 150px;">Event</th>
-               <th>Description</th>
-             </tr>
-            </thead>
-            <tbody>
-             <tr>
-               <td>show</td>
-               <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-             </tr>
-             <tr>
-               <td>shown</td>
-               <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
-             </tr>
-             <tr>
-               <td>hide</td>
-               <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-             </tr>
-             <tr>
-               <td>hidden</td>
-               <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
-             </tr>
-            </tbody>
-          </table>
+    <h3>Events</h3>
+    <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
+    <table class="table table-bordered table-striped">
+      <thead>
+       <tr>
+         <th style="width: 150px;">Event</th>
+         <th>Description</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+         <td>show</td>
+         <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+       </tr>
+       <tr>
+         <td>shown</td>
+         <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
+       </tr>
+       <tr>
+         <td>hide</td>
+         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+       </tr>
+       <tr>
+         <td>hidden</td>
+         <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
+       </tr>
+      </tbody>
+    </table>
 {% highlight js linenos %}
 $('#myModal').on('hidden', function () {
   // do something…
 })
 {% endhighlight %}
-        </section>
+  </div>
 
 
 
-- 
cgit v1.2.3


From 1dcadede361e7f0dba8ad83b4a07171d0e39f3f4 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 01:09:30 -0700
Subject: fix broke grid classes

---
 docs/docs.html | 76 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ec7bd2916..5219b724f 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1202,8 +1202,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-inline">Inline form</h3>
     <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
     <form class="bs-docs-example form-inline">
-      <input type="text" class="span3" placeholder="Email">
-      <input type="password" class="span3" placeholder="Password">
+      <input type="text" class="col-span-3" placeholder="Email">
+      <input type="password" class="col-span-3" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1213,8 +1213,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html linenos %}
 <form class="form-inline">
-  <input type="text" class="span3" placeholder="Email">
-  <input type="password" class="span3" placeholder="Password">
+  <input type="text" class="col-span-3" placeholder="Email">
+  <input type="password" class="col-span-3" placeholder="Password">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1426,10 +1426,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
     <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
     <form class="bs-docs-example form-inline">
-      <input class="span3" type="email" placeholder="test@example.com" required>
+      <input class="col-span-3" type="email" placeholder="test@example.com" required>
     </form>
 {% highlight html linenos %}
-<input class="span3" type="email" placeholder="test@example.com" required>
+<input class="col-span-3" type="email" placeholder="test@example.com" required>
 {% endhighlight %}
 
     <h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1446,10 +1446,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
-          <input type="text" class="span4" placeholder="Disabled input">
+          <input type="text" class="col-span-4" placeholder="Disabled input">
         </div>
         <div>
-          <select class="span4">
+          <select class="col-span-4">
             <option>Disabled select</option>
           </select>
         </div>
@@ -1465,10 +1465,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form class="form-inline">
   <fieldset disabled>
     <div>
-      <input type="text" class="span4" placeholder="Disabled input">
+      <input type="text" class="col-span-4" placeholder="Disabled input">
     </div>
     <div>
-      <select class="span4">
+      <select class="col-span-4">
         <option>Disabled select</option>
       </select>
     </div>
@@ -1550,7 +1550,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="input-group-addon">.00</span>
       </div>
       <br>
-      <div class="input-group span3">
+      <div class="input-group col-span-3">
         <span class="input-group-addon">$</span>
         <input type="text">
         <span class="input-group-addon">.00</span>
@@ -1567,7 +1567,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <span class="input-group-addon">.00</span>
 </div>
 
-<div class="input-group span3">
+<div class="input-group col-span-3">
   <span class="input-group-addon">$</span>
   <input type="text">
   <span class="input-group-addon">.00</span>
@@ -1781,7 +1781,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="controls docs-input-sizes">
         <input class="span1" type="text" placeholder=".span1">
         <input class="span2" type="text" placeholder=".span2">
-        <input class="span3" type="text" placeholder=".span3">
+        <input class="col-span-3" type="text" placeholder=".col-span-3">
         <select class="span1">
           <option>1</option>
           <option>2</option>
@@ -1796,7 +1796,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="span3">
+        <select class="col-span-3">
           <option>1</option>
           <option>2</option>
           <option>3</option>
@@ -1808,14 +1808,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html linenos %}
 <input class="span1" type="text" placeholder=".span1">
 <input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
+<input class="col-span-3" type="text" placeholder=".col-span-3">
 <select class="span1">
   ...
 </select>
 <select class="span2">
   ...
 </select>
-<select class="span3">
+<select class="col-span-3">
   ...
 </select>
 {% endhighlight %}
@@ -1823,27 +1823,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="span4">
-          <input type="text" placeholder=".span4">
+        <div class="col-span-4">
+          <input type="text" placeholder=".col-span-4">
         </div>
-        <div class="span4">
-          <input type="text" placeholder=".span4">
+        <div class="col-span-4">
+          <input type="text" placeholder=".col-span-4">
         </div>
-        <div class="span4">
-          <input type="text" placeholder=".span4">
+        <div class="col-span-4">
+          <input type="text" placeholder=".col-span-4">
         </div>
       </div>
     </form>
 {% highlight html linenos %}
 <div class="row">
-  <div class="span4">
-    <input type="text" placeholder=".span4">
+  <div class="col-span-4">
+    <input type="text" placeholder=".col-span-4">
   </div>
-  <div class="span4">
-    <input type="text" placeholder=".span4">
+  <div class="col-span-4">
+    <input type="text" placeholder=".col-span-4">
   </div>
-  <div class="span4">
-    <input type="text" placeholder=".span4">
+  <div class="col-span-4">
+    <input type="text" placeholder=".col-span-4">
   </div>
 </div>
 {% endhighlight %}
@@ -3966,22 +3966,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="span3">
+        <div class="col-span-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="span3">
+        <div class="col-span-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="span3">
+        <div class="col-span-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="span3">
+        <div class="col-span-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
@@ -3990,7 +3990,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="span3">
+  <div class="col-span-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/260x180" alt="">
     </a>
@@ -4003,7 +4003,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <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>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="span4">
+        <div class="col-span-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4013,7 +4013,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
           </div>
         </div>
-        <div class="span4">
+        <div class="col-span-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4023,7 +4023,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
           </div>
         </div>
-        <div class="span4">
+        <div class="col-span-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4037,7 +4037,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="span3">
+  <div class="col-span-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="">
       <div class="caption">
@@ -6076,7 +6076,7 @@ $('.carousel').carousel({
             <h2>Example</h2>
             <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
-              <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+              <input type="text" class="col-span-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div><!-- /example -->
 {% highlight html linenos %}
 <input type="text" data-provide="typeahead">
-- 
cgit v1.2.3


From a4901e2da8011aa60fbf3d02187f7392297043fb Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 01:55:39 -0700
Subject: mention responsive image and google maps

---
 docs/docs.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 5219b724f..74f7c6e70 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -208,7 +208,6 @@ title: Bootstrap Documentation
 
     <h3>HTML5 doctype required</h3>
     <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
-
 {% highlight html linenos %}
 <!DOCTYPE html>
 <html lang="en">
@@ -219,11 +218,13 @@ title: Bootstrap Documentation
     <h3>Mobile first</h3>
     <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
     <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
-
 {% highlight html linenos %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {% endhighlight %}
 
+    <h3>Responsive images</h3>
+    <p>We automatically attempt to scale images to appropriate sizes with a global <code>max-width: 100%;</code> on all <code>&lt;img&gt;</code> elements. If you run into problems (e.g., with Google Maps), be sure to disable this property on a per-case basis.</p>
+
     <h3>Typography and links</h3>
     <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
     <ul>
-- 
cgit v1.2.3


From 501dfbe8aead9fbc50680de39400f1f1d1ff388f Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sat, 30 Mar 2013 10:10:51 -0400
Subject: Fix path to examples to account for new layout

---
 docs/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/index.html b/docs/index.html
index f8d72f3f2..bef668fd4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,7 +16,7 @@ title: Bootstrap
         <a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
       </li>
       <li>
-        <a href="./getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
+        <a href="./docs/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
       </li>
       <li>Version 3.0.0</li>
     </ul>
@@ -49,7 +49,7 @@ title: Bootstrap
     </div>
 
     <h1>Built with Bootstrap.</h1>
-    <p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./getting-started/#examples">browse the examples</a>.</p>
+    <p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./docs/#examples">browse the examples</a>.</p>
     <div class="row bs-docs-gallery">
       <div class="col-span-3">
         <a class="thumbnail" href="http://delicious.com" target="_blank">
-- 
cgit v1.2.3


From bd69269426e16524757f1295d5c60263f36e2430 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:09:56 -0700
Subject: more component nav updates

---
 docs/_includes/docs-nav.html | 54 +++++++++++++++++++++++++++++++++++----
 docs/docs.html               | 61 ++++++++++++++++++++++++--------------------
 2 files changed, 82 insertions(+), 33 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index f43b56812..99ef5116c 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -7,6 +7,7 @@
     <li><a href="#whats-included">What's included</a></li>
     <li><a href="#examples">Templates and examples</a></li>
 
+    <!-- CSS -->
     <li><a class="nav-header" href="#css">CSS</a></li>
     <li><a href="#css-overview">Overview</a></li>
     <li>
@@ -71,13 +72,55 @@
     <li><a href="#helper-classes">Helper classes</a></li>
     <li><a href="#responsive-utilities">Responsive utilities</a></li>
 
+    <!-- Components -->
     <li><a class="nav-header" href="#components">Components</a></li>
     <li><a href="#icons">Glyphicons</a></li>
-    <li><a href="#dropdowns">Dropdowns</a></li>
-    <li><a href="#buttonGroups">Button groups</a></li>
-    <li><a href="#buttonDropdowns">Button dropdowns</a></li>
-    <li><a href="#navs">Navs</a></li>
-    <li><a href="#navbar">Navbar</a></li>
+    <li>
+      <a href="#dropdowns">Dropdowns</a>
+      <ul class="nav">
+        <li><a href="#dropdowns-example">Example</a></li>
+        <li><a href="#dropdowns-alignment">Alignment options</a></li>
+        <li><a href="#dropdowns-disabled">Disabled menu items</a></li>
+        <li><a href="#dropdowns-submenus">Submenus</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#btn-groups">Button groups</a>
+      <ul class="nav">
+        <li><a href="#btn-groups-single">Basic button group</a></li>
+        <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
+        <li><a href="#btn-groups-vertical">Vertical variation</a></li>
+        <li><a href="#btn-groups-justified">Justified link buttons</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#btn-dropdowns">Button dropdowns</a>
+      <ul class="nav">
+        <li><a href="#btn-dropdowns-single">Single button dropdown</a></li>
+        <li><a href="#btn-dropdowns-split">Split button dropdown</a></li>
+        <li><a href="#btn-dropdowns-sizes">Button sizes</a></li>
+        <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#navs">Navs</a>
+      <ul class="nav">
+        <li><a href="#navs-"></a></li>
+        <li><a href="#navs-"></a></li>
+        <li><a href="#navs-"></a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#navbar">Navbar</a>
+      <ul class="nav">
+        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-"></a></li>
+      </ul>
+    </li>
     <li><a href="#breadcrumbs">Breadcrumbs</a></li>
     <li>
       <a href="#pagination">Pagination</a>
@@ -117,6 +160,7 @@
     <li><a href="#media">Media object</a></li>
     <li><a href="#wells">Wells</a></li>
 
+    <!-- JavaScript -->
     <li><a class="nav-header" href="#js">JavaScript</a></li>
     <li>
       <a href="#js-overview">Overview</a>
diff --git a/docs/docs.html b/docs/docs.html
index 74f7c6e70..9fd120562 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2561,7 +2561,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
     <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
 
-    <h3>Example</h3>
+    <h3 id="dropdowns-example">Example</h3>
     <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
     <div class="bs-docs-example">
       <div class="dropdown clearfix">
@@ -2587,7 +2587,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Aligning the menus</h3>
+    <h3 id="dropdowns-alignment">Aligning the menus</h3>
     <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
 {% highlight html linenos %}
 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
@@ -2595,7 +2595,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h3>Disabled menu options</h3>
+    <h3 id="dropdowns-disabled">Disabled menu options</h3>
     <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
     <div class="bs-docs-example">
       <div class="dropdown clearfix">
@@ -2614,7 +2614,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h3>Sub menus on dropdowns</h3>
+    <h3 id="dropdowns-submenus">Sub menus on dropdowns</h3>
     <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
     <div class="bs-docs-example bs-docs-example-submenu">
 
@@ -2708,13 +2708,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <!-- Button Groups
   ================================================== -->
-  <div class="bs-docs-section" id="buttonGroups">
+  <div class="bs-docs-section" id="btn-groups">
     <div class="page-header">
       <h1>Button groups</h1>
     </div>
     <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
 
-    <h3>Single button group</h3>
+    <h3 id="btn-groups-single">Basic button group</h3>
     <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
     <div class="bs-docs-example">
       <div class="btn-group" style="margin: 9px 0 5px;">
@@ -2731,7 +2731,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Multiple button groups</h3>
+    <h3 id="btn-groups-toolbar">Multiple button groups</h3>
     <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
@@ -2759,7 +2759,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Vertical button groups</h3>
+    <h3 id="btn-groups-vertical">Vertical button groups</h3>
     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     <div class="bs-docs-example">
       <div class="btn-group btn-group-vertical">
@@ -2775,7 +2775,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Justified button groups</h3>
+    <h3 id="btn-groups-justified">Justified button groups</h3>
     <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
     <div class="bs-docs-example">
       <div class="btn-group btn-group-justified">
@@ -2796,14 +2796,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <!-- Split button dropdowns
   ================================================== -->
-  <div class="bs-docs-section" id="buttonDropdowns">
+  <div class="bs-docs-section" id="btn-dropdowns">
     <div class="page-header">
       <h1>Button dropdown menus</h1>
     </div>
     <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
 
-    <h3>Single or split button</h3>
-    <p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
+    <h3 id="btn-dropdown-single">Single button dropdowns</h3>
+    <p>Turn a button into dropdown toggle with some basic markup changes.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin-bottom: 10px;">
         <div class="btn-group">
@@ -2857,7 +2857,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </ul>
         </div><!-- /btn-group -->
       </div>
+    </div>
+{% highlight html linenos %}
+<!-- Single button -->
+<div class="btn-group">
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    Action <span class="caret"></span>
+  </button>
+  <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>
+</div>
+{% endhighlight %}
 
+    <h3 id="btn-dropdown-split">Split button dropdowns</h3>
+    <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
+    <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
           <button class="btn">Action</button>
@@ -2917,20 +2936,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /btn-toolbar -->
     </div>
 {% highlight html linenos %}
-<!-- Single button -->
-<div class="btn-group">
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    Action <span class="caret"></span>
-  </button>
-  <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>
-</div>
-
 <!-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
@@ -2947,7 +2952,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Works with all button sizes</h3>
+    <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
     <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
@@ -3021,7 +3026,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Dropup buttons</h3>
+    <h3 id="btn-dropdowns-dropup">Dropup buttons</h3>
     <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar">
-- 
cgit v1.2.3


From 9336a827c6396c2142be8de38615cd4d14c6685e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:11:15 -0700
Subject: fix submenu docs height given border-box

---
 docs/assets/css/docs.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c61a4a4f8..6b576de2a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -400,7 +400,7 @@ section > ul li {
   margin-bottom: 5px;
 }
 .bs-docs-example-submenu {
-  min-height: 180px;
+  min-height: 230px;
 }
 .bs-docs-example-submenu > .pull-left + .pull-left {
   margin-left: 20px;
-- 
cgit v1.2.3


From e9dd1826be4e41c2464c95d9fbf62c8fd311b689 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:12:03 -0700
Subject: fix brok btn-dropdowns links

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 9fd120562..7e3395481 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2802,7 +2802,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
     <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
 
-    <h3 id="btn-dropdown-single">Single button dropdowns</h3>
+    <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
     <p>Turn a button into dropdown toggle with some basic markup changes.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin-bottom: 10px;">
@@ -2874,7 +2874,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3 id="btn-dropdown-split">Split button dropdowns</h3>
+    <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
     <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
-- 
cgit v1.2.3


From 171c7feae23227ac6c51b365614b63b266574232 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:14:04 -0700
Subject: navs nav links

---
 docs/_includes/docs-nav.html | 14 +++++++++-----
 docs/docs.html               | 16 ++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 99ef5116c..ae5e58e1d 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -103,11 +103,15 @@
       </ul>
     </li>
     <li>
-      <a href="#navs">Navs</a>
-      <ul class="nav">
-        <li><a href="#navs-"></a></li>
-        <li><a href="#navs-"></a></li>
-        <li><a href="#navs-"></a></li>
+      <a href="#nav">Navs</a>
+      <ul class="nav">
+        <li><a href="#nav-tabs">Tabs nav</a></li>
+        <li><a href="#nav-pills">Pills nav</a></li>
+        <li><a href="#nav-list">List nav</a></li>
+        <li><a href="#nav-justified">Justified nav</a></li>
+        <li><a href="#nav-disabled-links">Disabled links</a></li>
+        <li><a href="#nav-alignment">Alignment options</a></li>
+        <li><a href="#nav-dropdowns">Using dropdowns</a></li>
       </ul>
     </li>
     <li>
diff --git a/docs/docs.html b/docs/docs.html
index 7e3395481..6648092e2 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3072,14 +3072,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <!-- Navs
   ================================================== -->
-  <div class="bs-docs-section" id="navs">
+  <div class="bs-docs-section" id="nav">
     <div class="page-header">
       <h1>Navs</small></h1>
     </div>
 
     <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
 
-    <h2>Tabs</h2>
+    <h2 id="nav-tabs">Tabs</h2>
     <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
     <div class="bs-docs-example">
       <ul class="nav nav-tabs">
@@ -3096,7 +3096,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h2>List</h2>
+    <h2 id="nav-list">List</h2>
     <p>Swap the tabs class for <code>.nav-list</code>.</p>
     <div class="bs-docs-example">
       <ul class="nav nav-list" style="max-width: 300px;">
@@ -3113,7 +3113,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h2>Pills</h2>
+    <h2 id="nav-pills">Pills</h2>
     <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
     <div class="bs-docs-example">
       <ul class="nav nav-pills">
@@ -3145,7 +3145,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2>Options</h2>
 
-    <h3>Justified links</h3>
+    <h3 id="nav-justified">Justified links</h3>
     <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
     <div class="bs-docs-example">
       <ul class="nav nav-tabs nav-justified">
@@ -3169,7 +3169,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h3>Disabled state</h3>
+    <h3 id="nav-disabled-links">Disabled state</h3>
     <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
     <div class="bs-docs-example">
       <ul class="nav nav-pills">
@@ -3187,14 +3187,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h3>Component alignment</h3>
+    <h3 id="nav-alignment">Component alignment</h3>
     <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
 
     <hr class="bs-docs-separator">
 
 
-    <h2>Dropdowns</h2>
+    <h2 id="nav-dropdowns">Dropdowns</h2>
     <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
 
     <h3>Tabs with dropdowns</h3>
-- 
cgit v1.2.3


From 62df38586a046064fcb93e26f7644801e8b4ca17 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:16:34 -0700
Subject: navbar links in sidenav

---
 docs/_includes/docs-nav.html | 13 +++++++------
 docs/docs.html               | 16 ++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index ae5e58e1d..682bf75aa 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -117,12 +117,13 @@
     <li>
       <a href="#navbar">Navbar</a>
       <ul class="nav">
-        <li><a href="#navbar-"></a></li>
-        <li><a href="#navbar-"></a></li>
-        <li><a href="#navbar-"></a></li>
-        <li><a href="#navbar-"></a></li>
-        <li><a href="#navbar-"></a></li>
-        <li><a href="#navbar-"></a></li>
+        <li><a href="#navbar-basic">Basic navbar</a></li>
+        <li><a href="#navbar-nav">Nav links</a></li>
+        <li><a href="#navbar-forms">Forms in navbars</a></li>
+        <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
+        <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
+        <li><a href="#navbar-static-top">Static top navbar</a></li>
+        <li><a href="#navbar-responsive">Responsive navbar</a></li>
       </ul>
     </li>
     <li><a href="#breadcrumbs">Breadcrumbs</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index 6648092e2..f6f4f4830 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3277,7 +3277,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
 
-    <h2>Basic navbar</h2>
+    <h2 id="navbar-basic">Basic navbar</h2>
     <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
     <div class="bs-docs-example">
       <div class="navbar">
@@ -3302,7 +3302,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2>Navbar components</h2>
 
-    <h3>Brand</h3>
+    <h3 id="navbar-brand">Brand</h3>
     <p>A simple link to show your brand or project name only requires an anchor tag.</p>
     <div class="bs-docs-example">
       <div class="navbar">
@@ -3313,7 +3313,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <a class="navbar-brand" href="#">Title</a>
 {% endhighlight %}
 
-    <h3>Nav links</h3>
+    <h3 id="navbar-nav">Nav links</h3>
     <p>Nav items are simple to add via unordered lists.</p>
     <div class="bs-docs-example">
       <div class="navbar">
@@ -3352,7 +3352,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </ul>
 {% endhighlight %}
 
-    <h3>Forms</h3>
+    <h3 id="navbar-forms">Forms</h3>
     <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
     <div class="bs-docs-example">
       <div class="navbar">
@@ -3382,7 +3382,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h2>Optional display variations</h2>
     <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
 
-    <h3>Fixed to top</h3>
+    <h3 id="navbar-fixed-top">Fixed to top</h3>
     <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
     <div class="bs-docs-example bs-navbar-top-example">
       <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
@@ -3402,7 +3402,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Fixed to bottom</h3>
+    <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
     <div class="bs-docs-example bs-navbar-bottom-example">
       <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
@@ -3422,7 +3422,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Static top navbar</h3>
+    <h3 id="navbar-static-top">Static top navbar</h3>
     <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
     <div class="bs-docs-example bs-navbar-top-example">
       <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
@@ -3443,7 +3443,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2>Responsive navbar</h2>
+    <h2 id="navbar-responsive">Responsive navbar</h2>
     <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
     <div class="bs-docs-example">
       <div class="navbar">
-- 
cgit v1.2.3


From aee25786a73820b6c502ba099c55fb4008b4bd1e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 13:23:18 -0700
Subject: fuck everything about .clear_float() -- restore .clearfix() as mixin

---
 docs/assets/css/bootstrap.css | 123 ++++++++++++++++++++++++++++++++++++++++--
 docs/docs.html                |   2 +-
 2 files changed, 120 insertions(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 0afdb0ab8..4f034974a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -365,12 +365,12 @@ cite {
   font-style: normal;
 }
 
-.muted {
+.text-muted {
   color: #999999;
 }
 
-a.muted:hover,
-a.muted:focus {
+a.text-muted:hover,
+a.text-muted:focus {
   color: #808080;
 }
 
@@ -589,6 +589,16 @@ dd {
   clear: both;
 }
 
+.dl-horizontal:before,
+.dl-horizontal:after {
+  display: table;
+  content: " ";
+}
+
+.dl-horizontal:after {
+  clear: both;
+}
+
 .dl-horizontal dt {
   float: left;
   width: 160px;
@@ -746,6 +756,16 @@ pre code {
   clear: both;
 }
 
+.container:before,
+.container:after {
+  display: table;
+  content: " ";
+}
+
+.container:after {
+  clear: both;
+}
+
 .row {
   margin-right: -15px;
   margin-left: -15px;
@@ -761,6 +781,16 @@ pre code {
   clear: both;
 }
 
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
 [class*="col-span-"] {
   position: relative;
   min-height: 1px;
@@ -1498,6 +1528,16 @@ select:focus:invalid:focus {
   clear: both;
 }
 
+.form-actions:before,
+.form-actions:after {
+  display: table;
+  content: " ";
+}
+
+.form-actions:after {
+  clear: both;
+}
+
 .help-block,
 .help-inline {
   color: #737373;
@@ -1691,6 +1731,14 @@ select:focus:invalid:focus {
   .form-horizontal .control-group:after {
     clear: both;
   }
+  .form-horizontal .control-group:before,
+  .form-horizontal .control-group:after {
+    display: table;
+    content: " ";
+  }
+  .form-horizontal .control-group:after {
+    clear: both;
+  }
   .form-horizontal .control-group input,
   .form-horizontal .control-group select,
   .form-horizontal .control-group textarea {
@@ -2763,7 +2811,6 @@ fieldset[disabled] .btn-link:focus {
   font-weight: normal;
   line-height: 20px;
   color: #333333;
-  white-space: nowrap;
 }
 
 .dropdown-menu > li > a:hover,
@@ -2968,6 +3015,16 @@ button.close {
   clear: both;
 }
 
+.nav:before,
+.nav:after {
+  display: table;
+  content: " ";
+}
+
+.nav:after {
+  clear: both;
+}
+
 .nav > li {
   display: block;
 }
@@ -3126,6 +3183,16 @@ button.close {
   clear: both;
 }
 
+.tabbable:before,
+.tabbable:after {
+  display: table;
+  content: " ";
+}
+
+.tabbable:after {
+  clear: both;
+}
+
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
@@ -3222,6 +3289,16 @@ button.close {
   clear: both;
 }
 
+.navbar:before,
+.navbar:after {
+  display: table;
+  content: " ";
+}
+
+.navbar:after {
+  clear: both;
+}
+
 .navbar .nav {
   margin-top: 15px;
 }
@@ -3483,6 +3560,14 @@ button.close {
   .navbar .nav:after {
     clear: both;
   }
+  .navbar .nav:before,
+  .navbar .nav:after {
+    display: table;
+    content: " ";
+  }
+  .navbar .nav:after {
+    clear: both;
+  }
   .navbar .nav.pull-right {
     float: right;
   }
@@ -3615,6 +3700,16 @@ button.close {
   clear: both;
 }
 
+.btn-toolbar:before,
+.btn-toolbar:after {
+  display: table;
+  content: " ";
+}
+
+.btn-toolbar:after {
+  clear: both;
+}
+
 .btn-toolbar .btn-group {
   float: left;
 }
@@ -3880,6 +3975,16 @@ button.close {
   clear: both;
 }
 
+.pager:before,
+.pager:after {
+  display: table;
+  content: " ";
+}
+
+.pager:after {
+  clear: both;
+}
+
 .pager li {
   display: inline;
 }
@@ -4027,6 +4132,16 @@ button.close {
   clear: both;
 }
 
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  content: " ";
+}
+
+.modal-footer:after {
+  clear: both;
+}
+
 .modal-footer .btn + .btn {
   margin-bottom: 0;
   margin-left: 5px;
diff --git a/docs/docs.html b/docs/docs.html
index f6f4f4830..4b2629658 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -388,7 +388,7 @@ title: Bootstrap Documentation
   margin-left:  (@grid-gutter-width / -2);
   margin-right: (@grid-gutter-width / -2);
   // Then clear the floated columns
-  .clear_float();
+  .clearfix();
 }
 
 // Generate the columns
-- 
cgit v1.2.3


From 9fff2d3fb6a636c7ee61ad097c5b247e8def3ab5 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 14:15:18 -0700
Subject: Change error to danger for all classes; add panels component

---
 docs/_includes/docs-nav.html  |  1 +
 docs/assets/css/bootstrap.css | 80 ++++++++++++++++++++++++++++++++++++++-----
 docs/assets/css/docs.css      |  4 ++-
 docs/docs.html                | 69 +++++++++++++++++++++++++++++++++++++
 4 files changed, 144 insertions(+), 10 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 682bf75aa..649cad06a 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,6 +163,7 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
+    <li><a href="#panels">Panels</a></li>
     <li><a href="#wells">Wells</a></li>
 
     <!-- JavaScript -->
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4f034974a..b86a16a78 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -383,12 +383,12 @@ a.text-warning:focus {
   color: #a47e3c;
 }
 
-.text-error {
+.text-danger {
   color: #b94a48;
 }
 
-a.text-error:hover,
-a.text-error:focus {
+a.text-danger:hover,
+a.text-danger:focus {
   color: #953b39;
 }
 
@@ -1119,9 +1119,9 @@ table th[class*="col-span-"] {
   border-color: #d6e9c6;
 }
 
-.table > tbody > tr > td.error,
-.table > tbody > tr > th.error,
-.table > tbody > tr.error > td {
+.table > tbody > tr > td.danger,
+.table > tbody > tr > th.danger,
+.table > tbody > tr.danger > td {
   background-color: #f2dede;
   border-color: #eed3d7;
 }
@@ -1140,9 +1140,9 @@ table th[class*="col-span-"] {
   border-color: #c9e2b3;
 }
 
-.table-hover > tbody > tr > td.error:hover,
-.table-hover > tbody > tr > th.error:hover,
-.table-hover > tbody > tr.error:hover > td {
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td {
   background-color: #ebcccc;
   border-color: #e6c1c7;
 }
@@ -2944,6 +2944,68 @@ fieldset[disabled] .btn-link:focus {
   z-index: 1051;
 }
 
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.panel-heading {
+  padding: 10px 15px;
+  margin: -15px -15px 15px;
+  font-size: 16px;
+  font-size: 1.6rem;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #dddddd;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.panel-success {
+  border-color: #d6e9c6;
+}
+
+.panel-success .panel-heading {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.panel-warning {
+  border-color: #fbeed5;
+}
+
+.panel-warning .panel-heading {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #fbeed5;
+}
+
+.panel-danger {
+  border-color: #eed3d7;
+}
+
+.panel-danger .panel-heading {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.panel-info {
+  border-color: #bce8f1;
+}
+
+.panel-info .panel-heading {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6b576de2a..181a3a734 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -309,7 +309,9 @@ section > ul li {
 .bs-docs-example > textarea:last-child,
 .bs-docs-example > .table:last-child,
 .bs-docs-example > .jumbotron:last-child,
-.bs-docs-example > .alert:last-child {
+.bs-docs-example > .alert:last-child,
+.bs-docs-example > .panel:last-child,
+.bs-docs-example > .well:last-child {
   margin-bottom: 0;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 4b2629658..00af4ed0c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4369,6 +4369,75 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+  <!-- Panels
+  ================================================== -->
+  <div class="bs-docs-section" id="panels">
+    <div class="page-header">
+      <h1>Panels</h1>
+    </div>
+    <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
+
+    <h3>Basic panel</h3>
+    <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        Basic panel example
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  Basic panel example
+</div>
+{% endhighlight %}
+
+    <h3>Panel with heading</h3>
+    <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  <div class="panel-heading">Panel heading</div>
+  Panel content
+</div>
+{% endhighlight %}
+
+    <h3>Contextual alternatives</h3>
+    <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
+    <div class="bs-docs-example">
+      <div class="panel panel-success">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-warning">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-danger">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-info">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel panel-success">...</div>
+<div class="panel panel-warning">...</div>
+<div class="panel panel-danger">...</div>
+<div class="panel panel-info">...</div>
+{% endhighlight %}
+
+  </div>
+
+
+
+
+
   <!-- Wells
   ================================================== -->
   <div class="bs-docs-section" id="wells">
-- 
cgit v1.2.3


From 731903a17597f9095f9c26d969da8e04f50568ed Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 14:16:30 -0700
Subject: panels subnav and links

---
 docs/_includes/docs-nav.html | 9 ++++++++-
 docs/docs.html               | 6 +++---
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 649cad06a..4a91214a3 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,7 +163,14 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
-    <li><a href="#panels">Panels</a></li>
+    <li>
+      <a href="#panels">Panels</a>
+      <ul class="nav">
+        <li><a href="#panels-basic">Basic panel</a></li>
+        <li><a href="#panels-heading">Panel with heading</a></li>
+        <li><a href="#panels-alternatives">Contextual alternatives</a></li>
+      </ul>
+    </li>
     <li><a href="#wells">Wells</a></li>
 
     <!-- JavaScript -->
diff --git a/docs/docs.html b/docs/docs.html
index 00af4ed0c..7603d2ccc 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4377,7 +4377,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
     <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
 
-    <h3>Basic panel</h3>
+    <h3 id="panels-basic">Basic panel</h3>
     <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
     <div class="bs-docs-example">
       <div class="panel">
@@ -4390,7 +4390,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Panel with heading</h3>
+    <h3 id="panels-heading">Panel with heading</h3>
     <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
     <div class="bs-docs-example">
       <div class="panel">
@@ -4405,7 +4405,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <h3>Contextual alternatives</h3>
+    <h3 id="panels-alternatives">Contextual alternatives</h3>
     <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
     <div class="bs-docs-example">
       <div class="panel panel-success">
-- 
cgit v1.2.3


From 2a9604fdd297fee6661561d1ccf7922b4d599641 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 16:07:50 -0700
Subject: add list group component

---
 docs/_includes/docs-nav.html  |  13 +++
 docs/assets/css/bootstrap.css |  91 ++++++++++++++++++++
 docs/assets/css/docs.css      |   5 ++
 docs/docs.html                | 191 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 300 insertions(+)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 4a91214a3..652b845cd 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,12 +163,25 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
+    <li>
+      <a href="#list-group">List group</a>
+      <ul class="nav">
+        <li><a href="#list-group-basic">Basic list group</a></li>
+        <li><a href="#list-group-chevrons">With chevrons</a></li>
+        <li><a href="#list-group-badges">With badges</a></li>
+        <li><a href="#list-group-badges-chevrons">With badges and chevrons</a></li>
+        <li><a href="#list-group-linked">Linked items</a></li>
+        <li><a href="#list-group-custom-content">Custom content</a></li>
+        <!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
+      </ul>
+    </li>
     <li>
       <a href="#panels">Panels</a>
       <ul class="nav">
         <li><a href="#panels-basic">Basic panel</a></li>
         <li><a href="#panels-heading">Panel with heading</a></li>
         <li><a href="#panels-alternatives">Contextual alternatives</a></li>
+        <li><a href="#panels-list-group">With list groups</a></li>
       </ul>
     </li>
     <li><a href="#wells">Wells</a></li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b86a16a78..fcbc5d580 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2944,6 +2944,80 @@ fieldset[disabled] .btn-link:focus {
   z-index: 1051;
 }
 
+.list-group {
+  margin: 0 0 20px;
+  background-color: #ffffff;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 30px 10px 15px;
+  margin-bottom: -1px;
+  border: 1px solid #dddddd;
+}
+
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+a.list-group-item .list-group-item-heading {
+  color: #333;
+}
+
+a.list-group-item .list-group-item-text {
+  color: #555;
+}
+
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+a.list-group-item.active {
+  z-index: 2;
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+a.list-group-item.active .list-group-item-heading,
+a.list-group-item.active .list-group-item-text {
+  color: inherit;
+}
+
+.list-group-item > .badge,
+.list-group-item > .glyphicon-chevron-right {
+  float: right;
+  margin-right: -15px;
+}
+
+.list-group-item > .glyphicon-chevron-right {
+  margin-right: -15px;
+}
+
+.list-group-item > .glyphicon + .badge {
+  margin-right: 5px;
+}
+
 .panel {
   padding: 15px;
   margin-bottom: 20px;
@@ -3006,6 +3080,23 @@ fieldset[disabled] .btn-link:focus {
   border-color: #bce8f1;
 }
 
+.list-group-flush {
+  margin: 15px -15px -15px;
+}
+
+.list-group-flush .list-group-item {
+  border-width: 1px 0;
+}
+
+.list-group-flush .list-group-item:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.list-group-flush .list-group-item:last-child {
+  border-bottom: 0;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 181a3a734..e1fd6a2b4 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -311,6 +311,7 @@ section > ul li {
 .bs-docs-example > .jumbotron:last-child,
 .bs-docs-example > .alert:last-child,
 .bs-docs-example > .panel:last-child,
+.bs-docs-example > .list-group:last-child,
 .bs-docs-example > .well:last-child {
   margin-bottom: 0;
 }
@@ -339,6 +340,10 @@ section > ul li {
   margin: 0;
 }
 
+/* List groups */
+.bs-docs-example > .list-group {
+  max-width: 400px;
+}
 
 /* Navbar examples */
 .bs-navbar-top-example,
diff --git a/docs/docs.html b/docs/docs.html
index 7603d2ccc..844a467d2 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4369,6 +4369,172 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+  <!-- List group
+  ================================================== -->
+  <div class="bs-docs-section" id="list-group">
+    <div class="page-header">
+      <h1>List group</h1>
+    </div>
+    <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
+
+    <h3 id="list-group-basic">Basic list group</h3>
+    <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+        <li class="list-group-item">Morbi leo risus</li>
+        <li class="list-group-item">Porta ac consectetur ac</li>
+        <li class="list-group-item">Vestibulum at eros</li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+  <li class="list-group-item">Porta ac consectetur ac</li>
+  <li class="list-group-item">Vestibulum at eros</li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-chevrons">With chevrons</h3>
+    <p>Adding Glyphicon chevrons are automatically moved to the right.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-badges">With badges</h3>
+    <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="badge">14</span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="badge">2</span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="badge">1</span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="badge">14</span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
+    <p>Why not both?</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">14</span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">2</span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">1</span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="badge">14</span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-linked">Linked list group</h3>
+    <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p>
+    <div class="bs-docs-example">
+      <div class="list-group">
+        <a href="#" class="list-group-item active">Cras justo odio</a>
+        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+        <a href="#" class="list-group-item">Morbi leo risus</a>
+        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+        <a href="#" class="list-group-item">Vestibulum at eros</a>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="list-group">
+  <a href="#" class="list-group-item active">Cras justo odio</a>
+  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item">Morbi leo risus</a>
+  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item">Vestibulum at eros</a>
+</div>
+{% endhighlight %}
+
+    <h3 id="list-group-custom-content">Custom content</h3>
+    <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
+    <div class="bs-docs-example">
+      <div class="list-group">
+        <a href="#" class="list-group-item active">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="list-group">
+  <a href="#" class="list-group-item active">
+    <h4 class="list-group-item-heading">List group item heading</h4>
+    <p class="list-group-item-text">...</p>
+  </a>
+</div>
+{% endhighlight %}
+  </div>
+
+
+
+
   <!-- Panels
   ================================================== -->
   <div class="bs-docs-section" id="panels">
@@ -4430,6 +4596,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="panel panel-warning">...</div>
 <div class="panel panel-danger">...</div>
 <div class="panel panel-info">...</div>
+{% endhighlight %}
+
+    <h3 id="panels-list-group">With list groups</h3>
+    <p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        <!-- Default panel contents -->
+        <div class="panel-heading">Panel heading</div>
+        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
+        <!-- List group -->
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Morbi leo risus</li>
+          <li class="list-group-item">Porta ac consectetur ac</li>
+          <li class="list-group-item">Vestibulum at eros</li>
+        </ul>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  <div class="panel-heading">Panel heading</div>
+  Panel content
+</div>
 {% endhighlight %}
 
   </div>
-- 
cgit v1.2.3


From 1683669eaa75555e1454105460ed6b7bcaca9f11 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 16:56:49 -0700
Subject: Remove .nav-list given new .list-group

---
 docs/_includes/docs-nav.html  |  1 -
 docs/assets/css/bootstrap.css | 26 +-------------------------
 docs/docs.html                | 29 ++++++-----------------------
 3 files changed, 7 insertions(+), 49 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 652b845cd..1eccba357 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -107,7 +107,6 @@
       <ul class="nav">
         <li><a href="#nav-tabs">Tabs nav</a></li>
         <li><a href="#nav-pills">Pills nav</a></li>
-        <li><a href="#nav-list">List nav</a></li>
         <li><a href="#nav-justified">Justified nav</a></li>
         <li><a href="#nav-disabled-links">Disabled links</a></li>
         <li><a href="#nav-alignment">Alignment options</a></li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fcbc5d580..8e5a3dbc5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3267,30 +3267,6 @@ button.close {
   text-align: center;
 }
 
-.nav-list > li > a {
-  margin-bottom: -1px;
-  border: 1px solid #e5e5e5;
-}
-
-.nav-list > li:first-child > a {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-
-.nav-list > li:last-child > a {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
-  z-index: 2;
-  color: #fff;
-  background-color: #428bca;
-  border-color: #428bca;
-}
-
 .nav > .disabled > a {
   color: #999999;
 }
@@ -4803,7 +4779,7 @@ a.badge:focus {
   top: 0;
 }
 
-.nav-list > .active > a > .badge,
+a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
   color: #428bca;
   background-color: #fff;
diff --git a/docs/docs.html b/docs/docs.html
index 844a467d2..4c491d686 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2509,7 +2509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Navigation</h4>
     <div class="bs-docs-example">
-      <ul class="nav nav-list">
+      <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
@@ -2517,7 +2517,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </ul>
     </div><!-- /bs-docs-example -->
 {% highlight html linenos %}
-<ul class="nav nav-list">
+<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
   <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
   <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
@@ -3094,23 +3094,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <li><a href="#">Profile</a></li>
   <li><a href="#">Messages</a></li>
 </ul>
-{% endhighlight %}
-
-    <h2 id="nav-list">List</h2>
-    <p>Swap the tabs class for <code>.nav-list</code>.</p>
-    <div class="bs-docs-example">
-      <ul class="nav nav-list" style="max-width: 300px;">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-      </ul>
-    </div>
-{% highlight html linenos %}
-<ul class="nav nav-list">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-</ul>
 {% endhighlight %}
 
     <h2 id="nav-pills">Pills</h2>
@@ -3889,7 +3872,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#">Messages <span class="badge">3</span></a></li>
       </ul>
       <br>
-      <ul class="nav nav-list" style="max-width: 260px;">
+      <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
         <li class="active">
           <a href="#">
             <span class="badge pull-right">42</span>
@@ -4510,15 +4493,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="list-group">
         <a href="#" class="list-group-item active">
           <h4 class="list-group-item-heading">List group item heading</h4>
-          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
         </a>
         <a href="#" class="list-group-item">
           <h4 class="list-group-item-heading">List group item heading</h4>
-          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
         </a>
         <a href="#" class="list-group-item">
           <h4 class="list-group-item-heading">List group item heading</h4>
-          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
         </a>
       </div>
     </div>
-- 
cgit v1.2.3


From 6edd5f291aba8f66816fe2ca1dfb61daeaab0efe Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 17:00:11 -0700
Subject: not quite #fff on .list-group-item-text

---
 docs/assets/css/bootstrap.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8e5a3dbc5..dadd15845 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2999,11 +2999,14 @@ a.list-group-item.active {
   border-color: #428bca;
 }
 
-a.list-group-item.active .list-group-item-heading,
-a.list-group-item.active .list-group-item-text {
+a.list-group-item.active .list-group-item-heading {
   color: inherit;
 }
 
+a.list-group-item.active .list-group-item-text {
+  color: #e1edf7;
+}
+
 .list-group-item > .badge,
 .list-group-item > .glyphicon-chevron-right {
   float: right;
-- 
cgit v1.2.3


From e560c41ed107cbaf00baf5082ffb18ac015afa4d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 17:00:43 -0700
Subject: simpler nav links

---
 docs/_includes/docs-nav.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 1eccba357..e87bea2b7 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -166,9 +166,9 @@
       <a href="#list-group">List group</a>
       <ul class="nav">
         <li><a href="#list-group-basic">Basic list group</a></li>
-        <li><a href="#list-group-chevrons">With chevrons</a></li>
-        <li><a href="#list-group-badges">With badges</a></li>
-        <li><a href="#list-group-badges-chevrons">With badges and chevrons</a></li>
+        <li><a href="#list-group-chevrons">Chevrons</a></li>
+        <li><a href="#list-group-badges">Badges</a></li>
+        <li><a href="#list-group-badges-chevrons">Badges and chevrons</a></li>
         <li><a href="#list-group-linked">Linked items</a></li>
         <li><a href="#list-group-custom-content">Custom content</a></li>
         <!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
-- 
cgit v1.2.3


From 40f671a531a06facd0265b1d2c99453eb7e9dda8 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 18:41:26 -0700
Subject: add basic back to top link via affix

---
 docs/assets/css/docs.css      | 20 ++++++++++++++++++
 docs/assets/js/application.js |  6 +++++-
 docs/docs.html                | 47 +++++++++++++++++++++++++++++++++----------
 3 files changed, 61 insertions(+), 12 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e1fd6a2b4..89a848c2b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -28,6 +28,26 @@ body {
   padding-right: 15px;
 }
 
+/* Back to top link */
+.bs-docs-top {
+  float: left;
+  padding: 7px 15px;
+  font-weight: 500;
+  color: #999;
+  background-color: #eee;
+  border-radius: 4px;
+}
+.bs-docs-top:hover {
+  color: #fff;
+  text-decoration: none;
+  background-color: #999;
+}
+.bs-docs-top.affix {
+  position: fixed;
+  right:  15px;
+  bottom: 15px;
+}
+
 
 
 /* Sections
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 2a0d3a6c6..170a1953d 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -13,7 +13,7 @@
       e.preventDefault()
     })
 
-    // side bar
+    // back to top
     // setTimeout(function () {
     //   $('.bs-docs-sidenav').affix({
     //     offset: {
@@ -23,6 +23,10 @@
     //   })
     // }, 100)
 
+    setTimeout(function () {
+      $('.bs-docs-top').affix()
+    }, 100)
+
     // make code pretty
     window.prettyPrint && prettyPrint()
 
diff --git a/docs/docs.html b/docs/docs.html
index 4c491d686..77a43097d 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3,7 +3,6 @@ layout: default
 title: Bootstrap Documentation
 ---
 
-
 <div class="bs-docs-container">
 
   <!-- Welcome
@@ -4470,20 +4469,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p>
     <div class="bs-docs-example">
       <div class="list-group">
-        <a href="#" class="list-group-item active">Cras justo odio</a>
-        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
-        <a href="#" class="list-group-item">Morbi leo risus</a>
-        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
-        <a href="#" class="list-group-item">Vestibulum at eros</a>
+        <a href="#" class="list-group-item active">
+          Cras justo odio
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </a>
+        <a href="#" class="list-group-item">Dapibus ac facilisis in
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </a>
+        <a href="#" class="list-group-item">Morbi leo risus
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </a>
+        <a href="#" class="list-group-item">Porta ac consectetur ac
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </a>
+        <a href="#" class="list-group-item">Vestibulum at eros
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </a>
       </div>
     </div>
 {% highlight html linenos %}
 <div class="list-group">
-  <a href="#" class="list-group-item active">Cras justo odio</a>
-  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
-  <a href="#" class="list-group-item">Morbi leo risus</a>
-  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
-  <a href="#" class="list-group-item">Vestibulum at eros</a>
+  <a href="#" class="list-group-item active">
+    Cras justo odio
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+  <a href="#" class="list-group-item">Dapibus ac facilisis in
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+  <a href="#" class="list-group-item">Morbi leo risus
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+  <a href="#" class="list-group-item">Porta ac consectetur ac
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+  <a href="#" class="list-group-item">Vestibulum at eros
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
 </div>
 {% endhighlight %}
 
@@ -6476,3 +6497,7 @@ $('[data-spy="affix"]').each(function () {
         </section>
 
 </div><!-- /.container -->
+
+<a href="#welcome" class="bs-docs-top">
+  Back to top
+</a>
-- 
cgit v1.2.3


From 70ba9a880e55a4607c413671c99926f7bba9362e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 22:53:35 -0700
Subject: remove padding form sign in form example

---
 docs/examples/signin.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'docs')

diff --git a/docs/examples/signin.html b/docs/examples/signin.html
index ce3d312dc..673fc46c2 100644
--- a/docs/examples/signin.html
+++ b/docs/examples/signin.html
@@ -14,7 +14,6 @@ title: Sign in form template
 
   .form-signin {
     max-width: 300px;
-    padding: 30px;
     margin: 0 auto;
   }
   .form-signin .form-signin-heading,
-- 
cgit v1.2.3


From 6c1ed5638b92b79c07a324268be204138812a048 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 22:54:31 -0700
Subject: actually readd the padding and set it to smaller amount for narrow
 viewports

---
 docs/examples/signin.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/examples/signin.html b/docs/examples/signin.html
index 673fc46c2..92db3e036 100644
--- a/docs/examples/signin.html
+++ b/docs/examples/signin.html
@@ -13,7 +13,8 @@ title: Sign in form template
   }
 
   .form-signin {
-    max-width: 300px;
+    max-width: 330px;
+    padding: 15px;
     margin: 0 auto;
   }
   .form-signin .form-signin-heading,
-- 
cgit v1.2.3


From 74e06cb279db1ae297cf38c3c8d0e773fd04885d Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 31 Mar 2013 09:59:02 -0400
Subject: Add styles for tooltip and popover examples

---
 docs/assets/css/docs.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 89a848c2b..b5f565cd3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -438,6 +438,30 @@ section > ul li {
   margin-bottom: 15px;
 }
 
+/* Tooltips */
+.bs-docs-tooltip-examples {
+  text-align: center;
+  margin: 0 0 10px;
+  list-style: none;
+}
+.bs-docs-tooltip-examples li {
+  display: inline;
+  padding: 0 10px;
+}
+
+/* Popovers */
+.bs-docs-example-popover {
+  padding-bottom: 24px;
+  background-color: #f9f9f9;
+}
+.bs-docs-example-popover .popover {
+  position: relative;
+  display: block;
+  float: left;
+  width: 260px;
+  margin: 20px;
+}
+
 
 /* Example templates
 -------------------------------------------------- */
-- 
cgit v1.2.3


From b96ab36d384752c42947297ce3a2d1f0ba941c0a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 11:24:31 -0700
Subject: add some container padding for examples

---
 docs/examples/sticky-footer-navbar.html | 2 +-
 docs/examples/sticky-footer.html        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index 9187b7882..96b228212 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -50,7 +50,7 @@ title: Sticky footer with navbar template
   /* Not required for template or sticky footer method. */
 
   #wrap > .container {
-    padding-top: 60px;
+    padding: 60px 15px 0;
   }
   .container .credit {
     margin: 20px 0;
diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html
index 6ddd5a1dc..1f27ffabc 100644
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -50,6 +50,7 @@ title: Sticky footer template
   .container {
     width: auto;
     max-width: 680px;
+    padding: 0 15px;
   }
   .container .credit {
     margin: 20px 0;
-- 
cgit v1.2.3


From fc16e37aaa2764bfc9ae131d6f69bd59d8ac5858 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 11:26:13 -0700
Subject: Remove the handful of rem font-sizes

---
 docs/assets/css/bootstrap.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index dadd15845..fb44326f7 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -290,7 +290,6 @@ html {
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  font-size: 1.4rem;
   line-height: 20px;
   color: #333333;
   background-color: #ffffff;
@@ -343,10 +342,9 @@ p {
 
 .lead {
   margin-bottom: 20px;
-  font-size: 21px;
-  font-size: 2.1rem;
+  font-size: 21;
   font-weight: 200;
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
 small {
@@ -3034,8 +3032,7 @@ a.list-group-item.active .list-group-item-text {
 .panel-heading {
   padding: 10px 15px;
   margin: -15px -15px 15px;
-  font-size: 16px;
-  font-size: 1.6rem;
+  font-size: 17.5;
   font-weight: 500;
   background-color: #f5f5f5;
   border-bottom: 1px solid #dddddd;
-- 
cgit v1.2.3


From b018513aa51c021cee706c71921a80012ff79f64 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 11:58:00 -0700
Subject: lingering nav-list use

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 77a43097d..ecdeb64b7 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3888,7 +3888,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </ul>
     </div>
 {% highlight html linenos %}
-<ul class="nav nav-list">
+<ul class="nav nav-pills nav-stacked">
   <li class="active">
     <a href="#">
       <span class="badge pull-right">42</span>
-- 
cgit v1.2.3


From a2145df7c42bfc503437c51c7975727a829a7fae Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 11:58:25 -0700
Subject: run make after that breadcrumbs tweak

---
 docs/assets/css/bootstrap.css | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fb44326f7..52bd999ae 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3982,6 +3982,10 @@ button.close {
   content: "\00a0 /";
 }
 
+.breadcrumb > li:last-child:after {
+  content: "";
+}
+
 .breadcrumb > .active {
   color: #999999;
 }
-- 
cgit v1.2.3


From 674768b1775a135a4ed66f299795d8221dc89982 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 12:00:04 -0700
Subject: restore px unit on @font-size-base

---
 docs/assets/css/bootstrap.css | 58 +++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 52bd999ae..e93ff3853 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -342,7 +342,7 @@ p {
 
 .lead {
   margin-bottom: 20px;
-  font-size: 21;
+  font-size: 21px;
   font-weight: 200;
   line-height: 1.4;
 }
@@ -467,58 +467,58 @@ h6 {
 
 h1,
 .h1 {
-  font-size: 38.5;
+  font-size: 38.5px;
   font-size: 4rem;
 }
 
 h2,
 .h2 {
-  font-size: 31.5;
+  font-size: 31.5px;
   font-size: 3rem;
 }
 
 h3,
 .h3 {
-  font-size: 24.5;
+  font-size: 24.5px;
   font-size: 2.5rem;
 }
 
 h4,
 .h4 {
-  font-size: 17.5;
+  font-size: 17.5px;
   font-size: 2rem;
 }
 
 h5,
 .h5 {
-  font-size: 14;
+  font-size: 14px;
   font-size: 1.6rem;
 }
 
 h6,
 .h6 {
-  font-size: 11.9;
+  font-size: 11.9px;
   font-size: 1.2rem;
 }
 
 h1 small,
 .h1 small {
-  font-size: 24.5;
+  font-size: 24.5px;
 }
 
 h2 small,
 .h2 small {
-  font-size: 17.5;
+  font-size: 17.5px;
 }
 
 h3 small,
 .h3 small {
-  font-size: 14;
+  font-size: 14px;
 }
 
 h4 small,
 .h4 small {
-  font-size: 14;
+  font-size: 14px;
 }
 
 .page-header {
@@ -638,7 +638,7 @@ blockquote {
 
 blockquote p {
   margin-bottom: 0;
-  font-size: 17.5;
+  font-size: 17.5px;
   font-weight: 300;
   line-height: 1.25;
 }
@@ -692,7 +692,7 @@ code,
 pre {
   padding: 0 3px 2px;
   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
-  font-size: 12;
+  font-size: 12px;
   color: #333333;
   border-radius: 4px;
 }
@@ -709,7 +709,7 @@ pre {
   display: block;
   padding: 9.5px;
   margin: 0 0 10px;
-  font-size: 13;
+  font-size: 13px;
   line-height: 20px;
   word-break: break-all;
   word-wrap: break-word;
@@ -1167,7 +1167,7 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: 20px;
-  font-size: 21;
+  font-size: 21px;
   line-height: 40px;
   color: #333333;
   border: 0;
@@ -1199,7 +1199,7 @@ input[type="color"] {
   display: inline-block;
   min-height: 34px;
   padding: 6px 9px;
-  font-size: 14;
+  font-size: 14px;
   line-height: 20px;
   color: #555555;
   vertical-align: middle;
@@ -1375,7 +1375,7 @@ input[type="search"].input-large,
 input[type="tel"].input-large,
 input[type="color"].input-large {
   padding: 11px 14px;
-  font-size: 17.5;
+  font-size: 17.5px;
   border-radius: 6px;
 }
 
@@ -1397,7 +1397,7 @@ input[type="tel"].input-small,
 input[type="color"].input-small {
   min-height: 26px;
   padding: 2px 10px;
-  font-size: 11.9;
+  font-size: 11.9px;
   border-radius: 3px;
 }
 
@@ -1594,7 +1594,7 @@ select:focus:invalid:focus {
 
 .input-group-addon {
   padding: 6px 8px;
-  font-size: 14;
+  font-size: 14px;
   font-weight: normal;
   line-height: 20px;
   text-align: center;
@@ -1608,12 +1608,12 @@ select:focus:invalid:focus {
 
 .input-group-addon.input-small {
   padding: 2px 10px;
-  font-size: 11.9;
+  font-size: 11.9px;
 }
 
 .input-group-addon.input-large {
   padding: 11px 14px;
-  font-size: 17.5;
+  font-size: 17.5px;
 }
 
 .input-group input:first-child,
@@ -1760,7 +1760,7 @@ select:focus:invalid:focus {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
-  font-size: 14;
+  font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   text-align: center;
@@ -1804,19 +1804,19 @@ fieldset[disabled] .btn {
 
 .btn-large {
   padding: 11px 14px;
-  font-size: 17.5;
+  font-size: 17.5px;
   border-radius: 6px;
 }
 
 .btn-small {
   padding: 2px 10px;
-  font-size: 11.9;
+  font-size: 11.9px;
   border-radius: 3px;
 }
 
 .btn-mini {
   padding: 0 6px;
-  font-size: 10.5;
+  font-size: 10.5px;
   border-radius: 3px;
 }
 
@@ -3032,7 +3032,7 @@ a.list-group-item.active .list-group-item-text {
 .panel-heading {
   padding: 10px 15px;
   margin: -15px -15px 15px;
-  font-size: 17.5;
+  font-size: 17.5px;
   font-weight: 500;
   background-color: #f5f5f5;
   border-bottom: 1px solid #dddddd;
@@ -4049,7 +4049,7 @@ button.close {
 .pagination-large > li > a,
 .pagination-large > li > span {
   padding: 11px 14px;
-  font-size: 17.5;
+  font-size: 17.5px;
 }
 
 .pagination-large > li:first-child > a,
@@ -4083,13 +4083,13 @@ button.close {
 .pagination-small > li > a,
 .pagination-small > li > span {
   padding: 2px 10px;
-  font-size: 11.9;
+  font-size: 11.9px;
 }
 
 .pagination-mini > li > a,
 .pagination-mini > li > span {
   padding: 0 6px;
-  font-size: 10.5;
+  font-size: 10.5px;
 }
 
 .pager {
-- 
cgit v1.2.3


From 388a4c878db2a41d15f438632463dafb65e6e748 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 13:20:54 -0700
Subject: remove lingering rem

---
 docs/assets/css/bootstrap.css | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e93ff3853..750a68a99 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -468,37 +468,31 @@ h6 {
 h1,
 .h1 {
   font-size: 38.5px;
-  font-size: 4rem;
 }
 
 h2,
 .h2 {
   font-size: 31.5px;
-  font-size: 3rem;
 }
 
 h3,
 .h3 {
   font-size: 24.5px;
-  font-size: 2.5rem;
 }
 
 h4,
 .h4 {
   font-size: 17.5px;
-  font-size: 2rem;
 }
 
 h5,
 .h5 {
   font-size: 14px;
-  font-size: 1.6rem;
 }
 
 h6,
 .h6 {
   font-size: 11.9px;
-  font-size: 1.2rem;
 }
 
 h1 small,
-- 
cgit v1.2.3


From c5042e050e4f55f90ffa7ee28c84892e798f964f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 17:17:10 -0700
Subject: fix nav divider

---
 docs/assets/css/bootstrap.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 750a68a99..b47250e82 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2789,7 +2789,7 @@ fieldset[disabled] .btn-link:focus {
 }
 
 .dropdown-menu .divider {
-  height: 1px;
+  height: 2px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -3289,7 +3289,7 @@ button.close {
 }
 
 .nav .divider {
-  height: 1px;
+  height: 2px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -3522,7 +3522,7 @@ button.close {
 }
 
 .navbar .nav > .divider {
-  height: 1px;
+  height: 2px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #e1e1e1;
-- 
cgit v1.2.3


From 6b23a66c29c3613c6792a257aafa949c81746597 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 17:19:12 -0700
Subject: -background to -bg on tooltip and popover vars

---
 docs/assets/css/bootstrap.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b47250e82..2c8dc619a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4399,9 +4399,9 @@ button.close {
   border-radius: 6px;
   -webkit-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;
+  background-clip: padding-box;
+  -webkit-bg-clip: padding-box;
+     -moz-bg-clip: padding;
 }
 
 .popover.top {
-- 
cgit v1.2.3


From d5fa1d80bb040aac32caed8fa1c97eb1b3e1abfe Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 17:22:12 -0700
Subject: use @pagination- vars on pager component; change
 @pagination-bg-active to @pagination-active-bg

---
 docs/assets/css/bootstrap.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2c8dc619a..27e532f58 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4120,8 +4120,8 @@ button.close {
 .pager li > span {
   display: inline-block;
   padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
   border-radius: 15px;
 }
 
-- 
cgit v1.2.3


From d6f37f3c568ed70a7e20fdaa5429501d5af406a7 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 17:27:22 -0700
Subject: @link-color-hover to @link-hover-color

---
 docs/assets/css/bootstrap.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 27e532f58..4c3cc20ac 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3350,8 +3350,8 @@ button.close {
   margin-top: 8px;
 }
 .nav .dropdown-toggle:hover .caret {
-  border-top-color: @link-color-hover;
-  border-bottom-color: @link-color-hover;
+  border-top-color: @link-hover-color;
+  border-bottom-color: @link-hover-color;
 }
 
 // Active dropdown links
-- 
cgit v1.2.3


From db284a97d6b0d6eb20c3b6724440cbd26b80ccbd Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 17:56:31 -0700
Subject: more consistent navbar vars

---
 docs/assets/css/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4c3cc20ac..06314aafa 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3735,7 +3735,7 @@ button.close {
 .navbar-link {
   color: @navbar-link-color;
   &:hover {
-    color: @navbar-link-color-hover;
+    color: @navbar-link-hover-color;
   }
 }
 
-- 
cgit v1.2.3


From 4c49458336f8bcc7ec7ebca5384e3430645e5fe8 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 18:40:07 -0700
Subject: remove text-rendering optimizeLegibility from headings

---
 docs/assets/css/bootstrap.css | 1 -
 1 file changed, 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 06314aafa..f35962995 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -426,7 +426,6 @@ h6,
   font-family: inherit;
   font-weight: 500;
   line-height: 20px;
-  text-rendering: optimizelegibility;
 }
 
 h1 small,
-- 
cgit v1.2.3


From d299ff4fce995543c29c0630d58d0a101c477b76 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 31 Mar 2013 21:25:45 -0400
Subject: Fix image paths and carousel controls for carousel example

---
 docs/examples/carousel.html | 59 +++++++++++++++------------------------------
 1 file changed, 19 insertions(+), 40 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index dd0c3ca1f..0c50c7a14 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -55,12 +55,6 @@ body {
   padding: 15px 20px;
 }
 
-/* Offset the responsive button for proper vertical alignment */
-.navbar .navbar-toggle {
-  margin-top: 10px;
-}
-
-
 
 /* CUSTOMIZE THE CAROUSEL
 -------------------------------------------------- */
@@ -75,16 +69,6 @@ body {
   z-index: 9;
 }
 
-.carousel-control {
-  height: 80px;
-  margin-top: 0;
-  font-size: 120px;
-  text-shadow: 0 1px 1px rgba(0,0,0,.4);
-  background-color: transparent;
-  border: 0;
-  z-index: 10;
-}
-
 .carousel .item {
   height: 500px;
 }
@@ -252,25 +236,21 @@ body {
 <!-- NAVBAR
 ================================================== -->
 <div class="navbar-wrapper">
-  <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
   <div class="container">
 
     <div class="navbar navbar-inverse">
-      <div class="navbar-inner">
-        <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
+      <div class="container">
+	    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+	      <span class="icon-bar"></span>
+	      <span class="icon-bar"></span>
+	      <span class="icon-bar"></span>
+	    </a>
         <a class="navbar-brand" href="#">Project name</a>
-        <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
         <div class="nav-collapse collapse">
           <ul class="nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
-            <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
@@ -284,13 +264,12 @@ body {
               </ul>
             </li>
           </ul>
-        </div><!--/.nav-collapse -->
-      </div><!-- /.navbar-inner -->
-    </div><!-- /.navbar -->
-
-  </div> <!-- /.container -->
-</div><!-- /.navbar-wrapper -->
+        </div>
+      </div>
+    </div>
 
+  </div>
+</div>
 
 
 <!-- Carousel
@@ -298,7 +277,7 @@ body {
 <div id="myCarousel" class="carousel slide">
   <div class="carousel-inner">
     <div class="item active">
-      <img src="../assets/img/examples/slide-01.jpg" alt="">
+      <img src="../../assets/img/examples/slide-01.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Example headline.</h1>
@@ -308,7 +287,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../assets/img/examples/slide-02.jpg" alt="">
+      <img src="../../assets/img/examples/slide-02.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Another example headline.</h1>
@@ -318,7 +297,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../assets/img/examples/slide-03.jpg" alt="">
+      <img src="../../assets/img/examples/slide-03.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>One more for good measure.</h1>
@@ -328,8 +307,8 @@ body {
       </div>
     </div>
   </div>
-  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
+  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div><!-- /.carousel -->
 
 
@@ -368,7 +347,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
+    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-chrome.png">
     <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -376,7 +355,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
+    <img class="featurette-image pull-left" src="../../assets/img/examples/browser-icon-firefox.png">
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -384,7 +363,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
+    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-safari.png">
     <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
-- 
cgit v1.2.3


From c69310153e5eec18f67df1df60c38ed807a75637 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 19:26:40 -0700
Subject: Fixes #7438: remove max-height from justified nav tabs with some CSS
 wankery

---
 docs/assets/css/bootstrap.css | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f35962995..c59d1aae7 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3250,7 +3250,7 @@ button.close {
 }
 
 .nav-justified {
-  max-height: 40px;
+  width: 100%;
 }
 
 .nav-justified > li {
@@ -3260,6 +3260,22 @@ button.close {
   text-align: center;
 }
 
+.nav-justified.nav-tabs {
+  border-bottom: 0;
+}
+
+.nav-justified.nav-tabs > li > a {
+  border-bottom: 1px solid #ddd;
+}
+
+.nav-justified.nav-tabs > .active > a {
+  border-bottom-color: #ffffff;
+}
+
+.nav-justified > li > a {
+  margin-right: 0;
+}
+
 .nav > .disabled > a {
   color: #999999;
 }
-- 
cgit v1.2.3


From 0fbfa167e1e6ab8321f32fd050b655e8ccc8e467 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 19:55:05 -0700
Subject: fix text class in docs

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ecdeb64b7..88f272c15 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -567,13 +567,13 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
       <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-      <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
       <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     </div>
 {% highlight html linenos %}
 <p class="text-muted">...</p>
 <p class="text-warning">...</p>
-<p class="text-error">...</p>
+<p class="text-danger">...</p>
 <p class="text-success">...</p>
 {% endhighlight %}
 
-- 
cgit v1.2.3


From 2f8deea95ac246455a11511963ded2b63e963922 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 22:22:52 -0700
Subject: add .panel-primary

---
 docs/assets/css/bootstrap.css | 10 ++++++++++
 docs/docs.html                |  5 +++++
 2 files changed, 15 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c59d1aae7..76b5ec31d 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3033,6 +3033,16 @@ a.list-group-item.active .list-group-item-text {
   border-top-left-radius: 3px;
 }
 
+.panel-primary {
+  border-color: #428bca;
+}
+
+.panel-primary .panel-heading {
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
 .panel-success {
   border-color: #d6e9c6;
 }
diff --git a/docs/docs.html b/docs/docs.html
index 88f272c15..94826ffde 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4578,6 +4578,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="panels-alternatives">Contextual alternatives</h3>
     <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
     <div class="bs-docs-example">
+      <div class="panel panel-primary">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
       <div class="panel panel-success">
         <div class="panel-heading">Panel heading</div>
         Panel content
@@ -4596,6 +4600,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </div>
 {% highlight html linenos %}
+<div class="panel panel-primary">...</div>
 <div class="panel panel-success">...</div>
 <div class="panel panel-warning">...</div>
 <div class="panel panel-danger">...</div>
-- 
cgit v1.2.3


From d8b3e48e1450bc0c49548c6cbd1139f7910b1c00 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 31 Mar 2013 22:58:01 -0700
Subject: add proper markup to list group in panels section

---
 docs/docs.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 94826ffde..ad944f630 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4627,8 +4627,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 {% highlight html linenos %}
 <div class="panel">
+  <!-- Default panel contents -->
   <div class="panel-heading">Panel heading</div>
-  Panel content
+  <p>...</p>
+
+  <!-- List group -->
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Morbi leo risus</li>
+    <li class="list-group-item">Porta ac consectetur ac</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
 </div>
 {% endhighlight %}
 
-- 
cgit v1.2.3


From 9df6dc81b57cb710c1e623c4e06c39954fc82280 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 00:02:51 -0700
Subject: bring in customizing bootstrap section from old gist

---
 docs/_includes/docs-nav.html |  1 +
 docs/docs.html               | 75 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index e87bea2b7..f4caabc5c 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -6,6 +6,7 @@
     <li><a href="#getting-started">Getting started</a></li>
     <li><a href="#whats-included">What's included</a></li>
     <li><a href="#examples">Templates and examples</a></li>
+    <li><a href="#customizing">Customizing Bootstrap</a></li>
 
     <!-- CSS -->
     <li><a class="nav-header" href="#css">CSS</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index ad944f630..4460506d3 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -191,6 +191,81 @@ title: Bootstrap Documentation
 
 
 
+  <div class="bs-docs-section" id="customizing">
+    <div class="page-header">
+      <h1>Customizing Bootstrap</h1>
+    </div>
+    <p class="lead">Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also exposing you to the intricacies of the framework.</p>
+    <p><strong>Side note:</strong> While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
+
+    <h3>Bootstrap as a dependency</h3>
+    <p>The best way to become familiar with Bootstrap's CSS, ensure straightforward updates, and provide flexible options to minimize code bloat, we recommend you get started by including a vanilla version of Bootstrap.</p>
+
+    <h3>Get your templates ready</h3>
+    <p><a href="#">Download the latest master release</a> and snag the compiled (bootstrap.css) or minified (bootstrap.min.css) versions. As documented above, include one of them in your <code>&lt;head&gt;</code> along with a separate blank CSS file for your own modifications. Alternatively you may use one of the example templates for a quicker start.</p>
+
+    <p class="muted"><strong>Compiled or minified?</strong></p>
+    <p class="muted">Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.</p>
+
+    <p>From there, include whatever Bootstrap components and content you need to get you going. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
+
+    <h3>Customizing components</h3>
+    <p>Here comes the good part: customizing Bootstrap's components to suite your own needs. There are varying degrees to this, but the two most common are light customizations and complete visual overhauls. Luckily, there are plenty of examples of both of those.</p>
+    <p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
+    <p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
+{% highlight html linenos %}
+<button type="button" class="btn btn-ttc">Save changes</button>
+{% endhighlight %}
+
+  <p>In the custom stylesheet, add the following CSS:</p>
+
+{% highlight css linenos %}
+/* Custom button
+-------------------------------------------------- */
+
+/* Override base .btn styles */
+/* Apply text and background changes to three key states: default, hover, and active (click). */
+.btn-ttc,
+.btn-ttc:hover,
+.btn-ttc:active {
+  color: white;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #007da7;
+}
+
+/* Apply the custom-colored gradients */
+/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
+.btn-ttc {
+  background-repeat: repeat-x;
+  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
+  ...
+}
+
+/* Set the hover state */
+/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
+.btn-ttc:hover {
+  background-position: 0 -15px;
+}
+{% endhighlight %}
+
+    <p>Customizing Bootstrap components takes time, but should be straightforward. <strong>Look to the source code often and duplicate the selectors you need for your modifications.</strong> Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:</p>
+    <ul>
+      <li>For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is. For instance, to customize the navbar background, just snag <code>.navbar</code>.</li>
+      <li>Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using <code>!important</code> here.</li>
+      <li>Rinse and repeat until you're happy with your customizations.</li>
+    </ul>
+    <p>Going beyond light customizations and into visual overhauls is just as easy as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which use Bootstrap as a reset of sorts with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
+
+    <h3>Removing potential bloat</h3>
+    <p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth becomes more of a financial issue. We encourage folks to remove whatever is unused with our <a href="#">Customizer</a>.</p>
+    <p>**img**</p>
+    <p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
+
+  </div>
+
+
+
+
 
   <div class="bs-docs-section-header" id="css">
     <h1>CSS</h1>
-- 
cgit v1.2.3


From 7bee10a5ef240cd6dc738998b8ff64dd75df3804 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 00:11:47 -0700
Subject: oops, restore customizer

---
 docs/customize.html | 358 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 358 insertions(+)
 create mode 100644 docs/customize.html

(limited to 'docs')

diff --git a/docs/customize.html b/docs/customize.html
new file mode 100644
index 000000000..61a789b1a
--- /dev/null
+++ b/docs/customize.html
@@ -0,0 +1,358 @@
+---
+layout: default
+title: Customize and download
+---
+
+<div class="bs-docs-sidebar">
+  <h5 class="bs-docs-sidenav-heading">Customize and download</h5>
+  <ul class="nav bs-docs-sidenav">
+    <li><a href="#components">1. Choose components</a></li>
+    <li><a href="#plugins">2. Select jQuery plugins</a></li>
+    <li><a href="#variables">3. Customize variables</a></li>
+    <li><a href="#download">4. Download</a></li>
+  </ul>
+</div>
+
+  <div class="container bs-docs-container">
+
+        <!-- Customize form
+        ================================================== -->
+        <form>
+          <section class="download" id="components">
+            <div class="page-header">
+              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
+              <h1>
+                1. Choose components
+              </h1>
+            </div>
+            <div class="row download-builder">
+              <div class="col-span-3">
+                <h3>Scaffolding</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
+                <h3>Base CSS</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
+              </div><!-- /span -->
+              <div class="col-span-3">
+                <h3>Components</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media component</label>
+                <h3>JS Components</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
+              </div><!-- /span -->
+              <div class="col-span-3">
+                <h3>Miscellaneous</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
+                <h3>Responsive</h3>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
+                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
+              </div><!-- /span -->
+            </div><!-- /row -->
+          </section>
+
+          <section class="download" id="plugins">
+            <div class="page-header">
+              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
+              <h1>
+                2. Select jQuery plugins
+              </h1>
+            </div>
+            <div class="row download-builder">
+              <div class="col-span-3">
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-transition.js">
+                  Transitions <small>(required for any animation)</small>
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-modal.js">
+                  Modals
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-dropdown.js">
+                  Dropdowns
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
+                  Scrollspy
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-tab.js">
+                  Togglable tabs
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
+                  Tooltips
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-popover.js">
+                  Popovers <small>(requires Tooltips)</small>
+                </label>
+              </div><!-- /span -->
+              <div class="col-span-3">
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-affix.js">
+                  Affix
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-alert.js">
+                  Alert messages
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-button.js">
+                  Buttons
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-collapse.js">
+                  Collapse
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-carousel.js">
+                  Carousel
+                </label>
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
+                  Typeahead
+                </label>
+              </div><!-- /span -->
+              <div class="col-span-3">
+                <h4 class="muted">Heads up!</h4>
+                <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
+              </div><!-- /span -->
+            </div><!-- /row -->
+          </section>
+
+
+          <section class="download" id="variables">
+            <div class="page-header">
+              <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
+              <h1>
+                3. Customize variables
+              </h1>
+            </div>
+            <div class="row download-builder">
+              <div class="col-span-3">
+                <h3>Scaffolding</h3>
+                <label>@body-background</label>
+                <input type="text" placeholder="#fff">
+                <label>@text-color</label>
+                <input type="text" placeholder="@grayDark">
+
+                <h3>Links</h3>
+                <label>@link-color</label>
+                <input type="text" placeholder="#08c">
+                <label>@link-color-hover</label>
+                <input type="text" placeholder="darken(@link-color, 15%)">
+
+                <h3>Grid system</h3>
+                <label>@grid-columns</label>
+                <input type="text" placeholder="12">
+                <label>@grid-column-width</label>
+                <input type="text" placeholder="60px">
+                <label>@grid-gutter-width</label>
+                <input type="text" placeholder="20px">
+                <label>@grid-column-width-1200</label>
+                <input type="text" placeholder="70px">
+                <label>@grid-gutter-width-1200</label>
+                <input type="text" placeholder="30px">
+                <label>@grid-column-width-768</label>
+                <input type="text" placeholder="42px">
+                <label>@grid-gutter-width-768</label>
+                <input type="text" placeholder="20px">
+
+              </div><!-- /span -->
+              <div class="col-span-3">
+
+                <h3>Typography</h3>
+                <label>@font-family-sans-serif</label>
+                <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+                <label>@font-family-serif</label>
+                <input type="text" placeholder="Georgia, 'Times New Roman', Times, serif">
+                <label>@font-family-monospace</label>
+                <input type="text" placeholder="Menlo, Monaco, 'Courier New', monospace">
+
+                <label>@font-size-base</label>
+                <input type="text" placeholder="14px">
+                <label>@font-family-base</label>
+                <input type="text" placeholder="@font-family-sans-serif">
+                <label>@line-height-base</label>
+                <input type="text" placeholder="20px">
+
+                <label>@headings-font-family</label>
+                <input type="text" placeholder="inherit">
+                <label>@headings-font-weight</label>
+                <input type="text" placeholder="bold">
+                <label>@headingsColor</label>
+                <input type="text" placeholder="inherit">
+
+                <label>@font-size-large</label>
+                <input type="text" placeholder="@font-size-base * 1.25">
+                <label>@font-size-small</label>
+                <input type="text" placeholder="@font-size-base * 0.85">
+                <label>@font-size-mini</label>
+                <input type="text" placeholder="@font-size-base * 0.75">
+
+                <label>@padding-large</label>
+                <input type="text" placeholder="11px 19px">
+                <label>@padding-small</label>
+                <input type="text" placeholder="2px 10px">
+                <label>@padding-mini</label>
+                <input type="text" placeholder="1px 6px">
+
+                <label>@border-radius-base</label>
+                <input type="text" placeholder="4px">
+                <label>@border-radius-large</label>
+                <input type="text" placeholder="6px">
+                <label>@border-radius-small</label>
+                <input type="text" placeholder="3px">
+
+                <label>@hero-background</label>
+                <input type="text" placeholder="@grayLighter">
+                <label>@hero-heading-color</label>
+                <input type="text" placeholder="inherit">
+                <label>@hero-lead-color</label>
+                <input type="text" placeholder="inherit">
+
+                <h3>Tables</h3>
+                <label>@table-background</label>
+                <input type="text" placeholder="transparent">
+                <label>@table-background-accent</label>
+                <input type="text" placeholder="#f9f9f9">
+                <label>@table-background-hover</label>
+                <input type="text" placeholder="#f5f5f5">
+                <label>@table-border</label>
+                <input type="text" placeholder="#ddd">
+
+                <h3>Forms</h3>
+                <label>@input-color-placeholder</label>
+                <input type="text" placeholder="@grayLight">
+                <label>@input-background</label>
+                <input type="text" placeholder="#fff">
+                <label>@input-border</label>
+                <input type="text" placeholder="#ccc">
+                <label>@input-border-radius</label>
+                <input type="text" placeholder="3px">
+                <label>@input-background-disabled</label>
+                <input type="text" placeholder="@grayLighter">
+                <label>@form-actions-background</label>
+                <input type="text" placeholder="#f5f5f5">
+                <label>@btn-backround-primary</label>
+                <input type="text" placeholder="@link-color">
+                <label>@btn-backround-primary-highlight</label>
+                <input type="text" placeholder="darken(#fff, 10%)">
+
+              </div><!-- /span -->
+              <div class="col-span-3">
+
+                <h3>Form states &amp; alerts</h3>
+                <label>@state-warning-text</label>
+                <input type="text" placeholder="#c09853">
+                <label>@state-warning-background</label>
+                <input type="text" placeholder="#fcf8e3">
+                <label>@state-error-text</label>
+                <input type="text" placeholder="#b94a48">
+                <label>@state-error-background</label>
+                <input type="text" placeholder="#f2dede">
+                <label>@state-success-text</label>
+                <input type="text" placeholder="#468847">
+                <label>@state-success-background</label>
+                <input type="text" placeholder="#dff0d8">
+                <label>@state-info-text</label>
+                <input type="text" placeholder="#3a87ad">
+                <label>@state-info-background</label>
+                <input type="text" placeholder="#d9edf7">
+
+                <h3>Navbar</h3>
+                <label>@navbar-height</label>
+                <input type="text" placeholder="40px">
+                <label>@navbar-background</label>
+                <input type="text" placeholder="@grayDarker">
+                <label>@navbar-background-highlight</label>
+                <input type="text" placeholder="@grayDark">
+                <label>@navbar-text</label>
+                <input type="text" placeholder="@grayLight">
+                <label>@navbar-brand-color</label>
+                <input type="text" placeholder="@navbar-link-color">
+                <label>@navbar-link-color</label>
+                <input type="text" placeholder="@grayLight">
+                <label>@navbar-link-color-hover</label>
+                <input type="text" placeholder="#fff">
+                <label>@navbar-link-color-active</label>
+                <input type="text" placeholder="@navbar-link-color-hover">
+                <label>@navbar-link-background-hover</label>
+                <input type="text" placeholder="transparent">
+                <label>@navbar-link-background-active</label>
+                <input type="text" placeholder="@navbar-background">
+                <label>@navbarSearchBackground</label>
+                <input type="text" placeholder="lighten(@navbar-background, 25%)">
+                <label>@navbarSearchBackgroundFocus</label>
+                <input type="text" placeholder="#fff">
+                <label>@navbarSearchBorder</label>
+                <input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
+                <label>@navbarSearchPlaceholderColor</label>
+                <input type="text" placeholder="#ccc">
+
+                <label>@navbar-collapse-width</label>
+                <input type="text" placeholder="979px">
+                <label>@navbar-collapse-width-desktop</label>
+                <input type="text" placeholder="@navbar-collapse-width + 1">
+
+                <h3>Dropdowns</h3>
+                <label>@dropdown-background</label>
+                <input type="text" placeholder="#fff">
+                <label>@dropdown-border</label>
+                <input type="text" placeholder="rgba(0,0,0,.2)">
+                <label>@dropdown-link-color</label>
+                <input type="text" placeholder="@grayDark">
+                <label>@dropdown-link-color-hover</label>
+                <input type="text" placeholder="#fff">
+                <label>@dropdown-link-background-hover</label>
+                <input type="text" placeholder="@link-color">
+              </div><!-- /span -->
+            </div><!-- /row -->
+          </section>
+
+          <section class="download" id="download">
+            <div class="page-header">
+              <h1>
+                4. Download
+              </h1>
+            </div>
+            <div class="download-btn">
+              <a class="btn btn-primary" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
+              <h4>What's included?</h4>
+              <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
+            </div>
+          </section><!-- /download -->
+        </form>
+
+
+  </div><!-- /.container -->
-- 
cgit v1.2.3


From 19d5e616685cc0ad72c216e04a69758bf0ed67bf Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 00:34:58 -0700
Subject: clearer separation with section headers; simpler customizing copy

---
 docs/assets/css/docs.css | 14 ++++++++++++--
 docs/docs.html           | 29 +++++++++++++++--------------
 2 files changed, 27 insertions(+), 16 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b5f565cd3..fc653277e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -48,6 +48,16 @@ body {
   bottom: 15px;
 }
 
+/* Side notes for calling out things */
+.bs-docs-sidenote {
+  margin: 20px 0;
+  padding: 15px 30px 15px 15px;
+  background-color: #fcf2f2;
+  border-left: 5px solid #df7c7b;
+}
+.bs-docs-sidenote p:last-child {
+  margin-bottom: 0;
+}
 
 
 /* Sections
@@ -75,13 +85,13 @@ section > ul li {
 
 .bs-docs-section-header {
   padding-top: 60px;
-  color: #8a8a8a;
+  color: #b94a48;
+  border-bottom: 5px solid #b94a48;
 }
 .bs-docs-section-header h1 {
   font-size: 80px;
   font-size: 8rem;
   line-height: 1;
-  color: #b94a48;
 }
 
 /* Base class */
diff --git a/docs/docs.html b/docs/docs.html
index 4460506d3..1af0f367b 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -195,22 +195,19 @@ title: Bootstrap Documentation
     <div class="page-header">
       <h1>Customizing Bootstrap</h1>
     </div>
-    <p class="lead">Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also exposing you to the intricacies of the framework.</p>
-    <p><strong>Side note:</strong> While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
+    <p class="lead">Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also familiarizing yourself to the intricacies of the framework.</p>
 
-    <h3>Bootstrap as a dependency</h3>
-    <p>The best way to become familiar with Bootstrap's CSS, ensure straightforward updates, and provide flexible options to minimize code bloat, we recommend you get started by including a vanilla version of Bootstrap.</p>
+    <p>Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
 
-    <h3>Get your templates ready</h3>
-    <p><a href="#">Download the latest master release</a> and snag the compiled (bootstrap.css) or minified (bootstrap.min.css) versions. As documented above, include one of them in your <code>&lt;head&gt;</code> along with a separate blank CSS file for your own modifications. Alternatively you may use one of the example templates for a quicker start.</p>
-
-    <p class="muted"><strong>Compiled or minified?</strong></p>
-    <p class="muted">Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.</p>
+    <div class="bs-docs-sidenote">
+      <p><strong>Compiled or minified?</strong></p>
+      <p>Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.</p>
+    </div>
 
-    <p>From there, include whatever Bootstrap components and content you need to get you going. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
+    <p>From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
 
     <h3>Customizing components</h3>
-    <p>Here comes the good part: customizing Bootstrap's components to suite your own needs. There are varying degrees to this, but the two most common are light customizations and complete visual overhauls. Luckily, there are plenty of examples of both of those.</p>
+    <p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p>
     <p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
     <p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
 {% highlight html linenos %}
@@ -248,16 +245,20 @@ title: Bootstrap Documentation
 }
 {% endhighlight %}
 
-    <p>Customizing Bootstrap components takes time, but should be straightforward. <strong>Look to the source code often and duplicate the selectors you need for your modifications.</strong> Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:</p>
+    <p>Customizing Bootstrap components takes time, but should be straightforward. <strong>Look to the source code often and duplicate the selectors you need for your modifications.</strong> Placing them after the Bootstrap source makes for easy overriding without complication. <strong>To recap, here's the basic workflow:</strong></p>
     <ul>
       <li>For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is. For instance, to customize the navbar background, just snag <code>.navbar</code>.</li>
       <li>Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using <code>!important</code> here.</li>
       <li>Rinse and repeat until you're happy with your customizations.</li>
     </ul>
-    <p>Going beyond light customizations and into visual overhauls is just as easy as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which use Bootstrap as a reset of sorts with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
+    <p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
+
+    <div class="bs-docs-sidenote">
+      <p><strong>Side note:</strong> While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
+    </div>
 
     <h3>Removing potential bloat</h3>
-    <p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth becomes more of a financial issue. We encourage folks to remove whatever is unused with our <a href="#">Customizer</a>.</p>
+    <p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth literally becomes a financial issue. We encourage folks to remove whatever is unused with our <a href="./customizer/">Customizer</a>.</p>
     <p>**img**</p>
     <p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
 
-- 
cgit v1.2.3


From e183dd46a20daa725fe5ad7acb5313d7b20db6f1 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Mon, 1 Apr 2013 09:27:49 -0400
Subject: Update carousel-caption btn styles

---
 docs/examples/carousel.html | 2 --
 1 file changed, 2 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 0c50c7a14..e97d895c2 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -91,8 +91,6 @@ body {
 .carousel-caption .lead {
   margin: 0;
   line-height: 1.25;
-  color: #fff;
-  text-shadow: 0 1px 1px rgba(0,0,0,.4);
 }
 .carousel-caption .btn {
   margin-top: 10px;
-- 
cgit v1.2.3


From 1816483baa9de59dc1ea0cec67fcbd00b28c6b79 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Mon, 1 Apr 2013 09:29:43 -0400
Subject: Add carousel indicators to example

---
 docs/examples/carousel.html | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index e97d895c2..925314922 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -273,6 +273,12 @@ body {
 <!-- Carousel
 ================================================== -->
 <div id="myCarousel" class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+    <li data-target="#myCarousel" data-slide-to="1"></li>
+    <li data-target="#myCarousel" data-slide-to="2"></li>
+  </ol>
   <div class="carousel-inner">
     <div class="item active">
       <img src="../../assets/img/examples/slide-01.jpg" alt="">
-- 
cgit v1.2.3


From 89bbeec898c07a191e9f1a696e9061278e4da9f2 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Mon, 1 Apr 2013 12:58:40 -0400
Subject: Additional cleanup to responsive navbar

---
 docs/examples/carousel.html | 38 +-------------------------------------
 1 file changed, 1 insertion(+), 37 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 925314922..be75a5cc3 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -30,30 +30,6 @@ body {
   margin-top: 20px;
   margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 }
-.navbar-wrapper .navbar {
-
-}
-
-/* Remove border and change up box shadow for more contrast */
-.navbar .navbar-inner {
-  border: 0;
-  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-     -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-          box-shadow: 0 2px 10px rgba(0,0,0,.25);
-}
-
-/* Downsize the brand/project name a bit */
-.navbar .brand {
-  padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
-  font-size: 16px;
-  font-weight: bold;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-}
-
-/* Navbar links: increase padding for taller navbar */
-.navbar .nav > li > a {
-  padding: 15px 20px;
-}
 
 
 /* CUSTOMIZE THE CAROUSEL
@@ -87,11 +63,7 @@ body {
   padding: 0 20px;
   margin-top: 200px;
 }
-.carousel-caption h1,
-.carousel-caption .lead {
-  margin: 0;
-  line-height: 1.25;
-}
+
 .carousel-caption .btn {
   margin-top: 10px;
 }
@@ -155,10 +127,6 @@ body {
     margin-bottom: 0;
     width: auto;
   }
-  .navbar-inner {
-    border-radius: 0;
-    margin: -20px 0;
-  }
 
   .carousel .item {
     height: 500px;
@@ -184,10 +152,6 @@ body {
 
 @media (max-width: 767px) {
 
-  .navbar-inner {
-    margin: -20px;
-  }
-
   .carousel {
     margin-left: -20px;
     margin-right: -20px;
-- 
cgit v1.2.3


From c231dba7ee23bd72f3a158caaf66bb882b8eb2d5 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 11:10:56 -0700
Subject: updated links on homepage

---
 docs/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/index.html b/docs/index.html
index bef668fd4..b2e6aa432 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -44,7 +44,7 @@ title: Bootstrap
       <div class="col-span-4">
         <img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
         <h2>Packed with features.</h2>
-        <p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
+        <p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./docs/#js">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
       </div>
     </div>
 
-- 
cgit v1.2.3


From 93db7c2c74d67e946276f635094c4e997839ee97 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 11:14:11 -0700
Subject: more link fixing

---
 docs/_includes/docs-nav.html |  4 ++--
 docs/docs.html               | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index f4caabc5c..75967f704 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -211,8 +211,8 @@
     <li><a href="#tabs">Tab</a></li>
     <li><a href="#tooltips">Tooltip</a></li>
     <li><a href="#popovers">Popover</a></li>
-    <li><a href="#alerts">Alert</a></li>
-    <li><a href="#buttons">Button</a></li>
+    <li><a href="#js-alerts">Alert</a></li>
+    <li><a href="#js-buttons">Button</a></li>
     <li><a href="#collapse">Collapse</a></li>
     <li><a href="#carousel">Carousel</a></li>
     <li><a href="#typeahead">Typeahead</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index 1af0f367b..d27c6e223 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3677,7 +3677,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="page-header">
       <h1>Pagination</h1>
     </div>
-    <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
+    <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./docs/#pagination-pager">pager alternative</a>.</p>
 
     <h2 id="pagination-default">Standard pagination</h2>
     <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
@@ -4024,7 +4024,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="page-header">
       <h1>Thumbnails</h1>
     </div>
-    <p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
+    <p class="lead">Extend Bootstrap's <a href="./docs/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
 
     <h3>Default thumbnails</h3>
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
@@ -4124,7 +4124,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="page-header">
       <h1>Alerts</h1>
     </div>
-    <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
+    <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./docs/#js-alerts">alerts jQuery plugin</a>.</p>
 
     <h3 id="alerts-default">Default alert</h3>
     <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
@@ -5790,7 +5790,7 @@ $('#example').tooltip(options)
 
       <!-- Alert
       ================================================== -->
-      <section id="alerts">
+      <div class="bs-docs-section" id="js-alerts">
         <div class="page-header">
           <h1>Alert messages <small>bootstrap-alert.js</small></h1>
         </div>
@@ -5863,13 +5863,13 @@ $('#my-alert').bind('closed', function () {
   // do something…
 })
 {% endhighlight %}
-      </section>
+      </div>
 
 
 
           <!-- Buttons
           ================================================== -->
-          <section id="buttons">
+          <div class="bs-docs-section" id="js-buttons">
             <div class="page-header">
               <h1>Buttons <small>bootstrap-button.js</small></h1>
             </div>
@@ -6008,7 +6008,7 @@ $('.nav-tabs').button()
   $('.btn').button('complete')
 </script>
 {% endhighlight %}
-          </section>
+          </div>
 
 
 
-- 
cgit v1.2.3


From e6d6fcffb0491534201e23867fffdc53b4568fab Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 12:09:49 -0700
Subject: button for navbar toggle

---
 docs/docs.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index d27c6e223..a8f55d948 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3506,11 +3506,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="navbar">
         <div class="container">
-          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
-          </a>
+          </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-responsive-collapse">
             <ul class="nav">
@@ -3556,11 +3556,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="container">
 
     <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
-    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
-    </a>
+    </button>
 
     <!-- Be sure to leave the brand out there if you want it shown -->
     <a class="navbar-brand" href="#">Title</a>
-- 
cgit v1.2.3


From a0726e605f0fdf5bbe83c149b18b4b238dbc61d8 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 12:10:53 -0700
Subject: add type attr

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index a8f55d948..30ca03415 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3506,7 +3506,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="navbar">
         <div class="container">
-          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -3556,7 +3556,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="container">
 
     <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
-    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
-- 
cgit v1.2.3


From eac987c0d2bdb93ea4c916d52f38655bcc5e1255 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 12:55:48 -0700
Subject: only negative indent nested grid rows; add new grid example

---
 docs/assets/css/bootstrap.css | 10 ++++----
 docs/examples/grid.html       | 56 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 docs/examples/grid.html

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 76b5ec31d..7f498b0c5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -757,11 +757,6 @@ pre code {
   clear: both;
 }
 
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-}
-
 .row:before,
 .row:after {
   display: table;
@@ -782,6 +777,11 @@ pre code {
   clear: both;
 }
 
+.row .row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
 [class*="col-span-"] {
   position: relative;
   min-height: 1px;
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
new file mode 100644
index 000000000..f2028b8bf
--- /dev/null
+++ b/docs/examples/grid.html
@@ -0,0 +1,56 @@
+---
+layout: example
+title: Grid template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  .container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .row {
+    margin-bottom: 20px;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  [class*="col-span-"] {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: #f5f5f5;
+    border: 1px solid #e5e5e5;
+  }
+</style>
+
+
+<div class="container">
+
+  <h2>Bootstrap grids</h2>
+  <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+
+  <h4>Three equal columns</h4>
+  <div class="row">
+    <div class="col-span-4">.col-span-4</div>
+    <div class="col-span-4">.col-span-4</div>
+    <div class="col-span-4">.col-span-4</div>
+  </div>
+
+  <h4>Three unequal columns</h4>
+  <div class="row">
+    <div class="col-span-3">.col-span-3</div>
+    <div class="col-span-6">.col-span-6</div>
+    <div class="col-span-3">.col-span-3</div>
+  </div>
+
+  <h4>Two columns</h4>
+  <div class="row">
+    <div class="col-span-8">.col-span-8</div>
+    <div class="col-span-4">.col-span-4</div>
+  </div>
+
+  <h4>Full width, single column</h4>
+  <p class="text-muted">No grid classes are necessary for full-width elements.</p>
+
+</div> <!-- /container -->
-- 
cgit v1.2.3


From 292734d7f34b59152c66ade7490d18036dee7bb7 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 13:14:39 -0700
Subject: Docs examples update

* Remove unused fluid image
* Add image, link, and description for new grid example
* Update sign in example image
---
 docs/assets/css/docs.css                            |  10 +++++++---
 .../assets/img/examples/bootstrap-example-fluid.png | Bin 209039 -> 0 bytes
 docs/assets/img/examples/bootstrap-example-grid.png | Bin 0 -> 44966 bytes
 .../img/examples/bootstrap-example-signin.png       | Bin 22037 -> 16397 bytes
 docs/docs.html                                      |  12 +++++++++---
 5 files changed, 16 insertions(+), 6 deletions(-)
 delete mode 100644 docs/assets/img/examples/bootstrap-example-fluid.png
 create mode 100644 docs/assets/img/examples/bootstrap-example-grid.png

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fc653277e..fb4ed9ea3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -21,6 +21,10 @@ body {
 .bs-docs-container {
   max-width: 860px;
 }
+.bs-docs-container .row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
 
 /*  */
 .bs-docs-footer {
@@ -215,15 +219,15 @@ section > ul li {
   left: 0;
   bottom: 0;
   width: 240px;
-  background-color: #f5f5f5;
   overflow-y: scroll;
   text-shadow: 0 1px 0 #fff;
-  box-shadow: inset -1px 0 0 #e5e5e5;
+  background-color: #f5f5f5;
+  border-right: 1px solid #e5e5e5;
 }
 
 /* Nav: first level */
 .bs-docs-sidebar > .nav {
-  margin: 0 0 25px;
+  margin: 0 -1px 25px 0;
 }
 .bs-docs-sidebar .nav > li > a {
   display: block;
diff --git a/docs/assets/img/examples/bootstrap-example-fluid.png b/docs/assets/img/examples/bootstrap-example-fluid.png
deleted file mode 100644
index 5f49a332f..000000000
Binary files a/docs/assets/img/examples/bootstrap-example-fluid.png and /dev/null differ
diff --git a/docs/assets/img/examples/bootstrap-example-grid.png b/docs/assets/img/examples/bootstrap-example-grid.png
new file mode 100644
index 000000000..cdc1c0726
Binary files /dev/null and b/docs/assets/img/examples/bootstrap-example-grid.png differ
diff --git a/docs/assets/img/examples/bootstrap-example-signin.png b/docs/assets/img/examples/bootstrap-example-signin.png
index b649a985d..c55bbd59d 100644
Binary files a/docs/assets/img/examples/bootstrap-example-signin.png and b/docs/assets/img/examples/bootstrap-example-signin.png differ
diff --git a/docs/docs.html b/docs/docs.html
index 30ca03415..73d045104 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -112,14 +112,21 @@ title: Bootstrap Documentation
           <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
         </a>
         <h4>Starter template</h4>
-        <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
+        <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
+      </div>
+      <div class="col-span-4">
+        <a class="thumbnail" href="/examples/grid/" target="_blank">
+          <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
+        </a>
+        <h4>Basic grid layouts</h4>
+        <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
       </div>
       <div class="col-span-4">
         <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
         </a>
         <h4>Basic marketing site</h4>
-        <p>Featuring a hero unit for a primary message and three supporting elements.</p>
+        <p>Features a jumbotron for primary message and three supporting elements.</p>
       </div>
       <div class="col-span-4">
         <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
@@ -259,7 +266,6 @@ title: Bootstrap Documentation
 
     <h3>Removing potential bloat</h3>
     <p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth literally becomes a financial issue. We encourage folks to remove whatever is unused with our <a href="./customizer/">Customizer</a>.</p>
-    <p>**img**</p>
     <p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
 
   </div>
-- 
cgit v1.2.3


From 7e31bea11410f9c1838aeabcb97ad802b69b658c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 1 Apr 2013 13:25:51 -0700
Subject: run make

---
 docs/assets/css/bootstrap.css | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7f498b0c5..1a7f3deec 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5147,6 +5147,10 @@ a.list-group-item.active > .badge,
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 
+.carousel-caption .btn {
+  text-shadow: none;
+}
+
 @media screen and (min-width: 768px) {
   .carousel-control .glyphicon {
     width: 30px;
-- 
cgit v1.2.3


From 3233155bb4ce84c3ca0ecd90ad2d284d3c65b99e Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Mon, 1 Apr 2013 22:02:35 -0400
Subject: Fix responsive view for inverted navbar example

---
 docs/docs.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 73d045104..561fad88f 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3587,13 +3587,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h2>Inverted variation</h2>
     <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
     <div class="bs-docs-example">
-      <div class="navbar navbar-inverse" style="position: static;">
+      <div class="navbar navbar-inverse">
         <div class="container">
-          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
-          </a>
+          </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-inverse-collapse">
             <ul class="nav">
@@ -3631,8 +3631,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
               </li>
             </ul>
           </div><!-- /.nav-collapse -->
-        </div>
-      </div><!-- /navbar -->
+        </div><!-- /.container -->
+      </div><!-- /.navbar -->
     </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar navbar-inverse">
-- 
cgit v1.2.3


From 9ecc43d21a7c26ad799e9c2dfd8149e1d8d50851 Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Tue, 2 Apr 2013 13:22:31 +0200
Subject: Fix link to navbar doc

---
 docs/examples/navbar-fixed-top.html  | 2 +-
 docs/examples/navbar-static-top.html | 2 +-
 docs/examples/navbar.html            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/navbar-fixed-top.html b/docs/examples/navbar-fixed-top.html
index e1f1c882a..06ed424c2 100644
--- a/docs/examples/navbar-fixed-top.html
+++ b/docs/examples/navbar-fixed-top.html
@@ -60,7 +60,7 @@ title: Fixed navbar template
         <h1>Navbar example</h1>
         <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
         <p>
-          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+          <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
         </p>
       </div>
 
diff --git a/docs/examples/navbar-static-top.html b/docs/examples/navbar-static-top.html
index 2679a670b..9a234114f 100644
--- a/docs/examples/navbar-static-top.html
+++ b/docs/examples/navbar-static-top.html
@@ -57,7 +57,7 @@ title: Static navbar template
     <h1>Navbar example</h1>
     <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
     <p>
-      <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+      <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
     </p>
   </div>
 
diff --git a/docs/examples/navbar.html b/docs/examples/navbar.html
index 6cba51dc5..5b5ffb77b 100644
--- a/docs/examples/navbar.html
+++ b/docs/examples/navbar.html
@@ -60,7 +60,7 @@ title: Navbar template
     <h1>Navbar example</h1>
     <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
     <p>
-      <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+      <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
     </p>
   </div>
 
-- 
cgit v1.2.3


From aa51a36686a62ad5ec0bac3958b08151fc9d5d05 Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Tue, 2 Apr 2013 13:26:35 +0200
Subject: Fix corss link for sticky footer

---
 docs/examples/sticky-footer-navbar.html | 2 +-
 docs/examples/sticky-footer.html        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index 96b228212..716412a9d 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -104,7 +104,7 @@ title: Sticky footer with navbar template
       <h1>Sticky footer with fixed navbar</h1>
     </div>
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
-    <p>Back to <a href="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p>
+    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
   </div>
 
   <div id="push"></div>
diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html
index 1f27ffabc..62c108812 100644
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -69,7 +69,7 @@ title: Sticky footer template
       <h1>Sticky footer</h1>
     </div>
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
-    <p>Use <a href="./sticky-footer-navbar.html">the sticky footer with a fixed navbar</a> if need be, too.</p>
+    <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
   </div>
 
   <div id="push"></div>
-- 
cgit v1.2.3


From e0bce6af123fc3d935a34aae87d0787e7e54e07f Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Tue, 2 Apr 2013 13:30:13 +0200
Subject: Replace png img by holder.js in carousel example

---
 docs/examples/carousel.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index be75a5cc3..538a440da 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -245,7 +245,7 @@ body {
   </ol>
   <div class="carousel-inner">
     <div class="item active">
-      <img src="../../assets/img/examples/slide-01.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:First slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Example headline.</h1>
@@ -255,7 +255,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../../assets/img/examples/slide-02.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Second slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Another example headline.</h1>
@@ -265,7 +265,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../../assets/img/examples/slide-03.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Third slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>One more for good measure.</h1>
@@ -315,7 +315,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-chrome.png">
+    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
     <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -323,7 +323,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-left" src="../../assets/img/examples/browser-icon-firefox.png">
+    <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -331,7 +331,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-safari.png">
+    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
     <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
-- 
cgit v1.2.3


From 8f99692f5609da492ece960277590e7252a72028 Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Tue, 2 Apr 2013 13:31:15 +0200
Subject: remove unused img from previous commit

---
 docs/assets/img/examples/browser-icon-chrome.png  | Bin 55522 -> 0 bytes
 docs/assets/img/examples/browser-icon-firefox.png | Bin 175944 -> 0 bytes
 docs/assets/img/examples/browser-icon-safari.png  | Bin 209494 -> 0 bytes
 docs/assets/img/examples/slide-01.jpg             | Bin 83303 -> 0 bytes
 docs/assets/img/examples/slide-02.jpg             | Bin 137070 -> 0 bytes
 docs/assets/img/examples/slide-03.jpg             | Bin 137378 -> 0 bytes
 6 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 docs/assets/img/examples/browser-icon-chrome.png
 delete mode 100644 docs/assets/img/examples/browser-icon-firefox.png
 delete mode 100644 docs/assets/img/examples/browser-icon-safari.png
 delete mode 100644 docs/assets/img/examples/slide-01.jpg
 delete mode 100644 docs/assets/img/examples/slide-02.jpg
 delete mode 100644 docs/assets/img/examples/slide-03.jpg

(limited to 'docs')

diff --git a/docs/assets/img/examples/browser-icon-chrome.png b/docs/assets/img/examples/browser-icon-chrome.png
deleted file mode 100644
index 8c846c54e..000000000
Binary files a/docs/assets/img/examples/browser-icon-chrome.png and /dev/null differ
diff --git a/docs/assets/img/examples/browser-icon-firefox.png b/docs/assets/img/examples/browser-icon-firefox.png
deleted file mode 100644
index 2af3cd856..000000000
Binary files a/docs/assets/img/examples/browser-icon-firefox.png and /dev/null differ
diff --git a/docs/assets/img/examples/browser-icon-safari.png b/docs/assets/img/examples/browser-icon-safari.png
deleted file mode 100644
index 880e31daa..000000000
Binary files a/docs/assets/img/examples/browser-icon-safari.png and /dev/null differ
diff --git a/docs/assets/img/examples/slide-01.jpg b/docs/assets/img/examples/slide-01.jpg
deleted file mode 100644
index bedab7d81..000000000
Binary files a/docs/assets/img/examples/slide-01.jpg and /dev/null differ
diff --git a/docs/assets/img/examples/slide-02.jpg b/docs/assets/img/examples/slide-02.jpg
deleted file mode 100644
index 4ed12cc07..000000000
Binary files a/docs/assets/img/examples/slide-02.jpg and /dev/null differ
diff --git a/docs/assets/img/examples/slide-03.jpg b/docs/assets/img/examples/slide-03.jpg
deleted file mode 100644
index 37415da3e..000000000
Binary files a/docs/assets/img/examples/slide-03.jpg and /dev/null differ
-- 
cgit v1.2.3


From e56461fbd71af38cabff4cc650f6050f765ec603 Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Tue, 2 Apr 2013 13:39:04 +0200
Subject: Improve responsiveness for tablet and below of navbar in carousel
 example

- Remove margin-top of navbar-wrapper
- Remove border radius of navbar
- Space out the carousel
---
 docs/examples/carousel.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 538a440da..e86029221 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -189,6 +189,18 @@ body {
     font-size: 18px;
     line-height: 1.5;
   }
+  
+  .navbar-wrapper {
+    margin-top: 0;
+  }
+
+  .navbar {
+    border-radius: 0;
+  }
+  
+  #myCarousel {
+    margin-top: 54px;
+  }
 
 }
 </style>
-- 
cgit v1.2.3


From 0ac711059ba7aaa2996a529d7f9bf4110a6dd765 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 2 Apr 2013 16:17:04 -0700
Subject: refactor some of the carousel caption stuff to center it and tighten
 styles up; update carousel template to start to redo mobile first

---
 docs/assets/css/bootstrap.css | 16 +++-----
 docs/docs.html                |  6 +--
 docs/examples/carousel.html   | 90 +++++++++++++++++++++++++++----------------
 3 files changed, 64 insertions(+), 48 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1a7f3deec..44978573e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5137,13 +5137,14 @@ a.list-group-item.active > .badge,
 
 .carousel-caption {
   position: absolute;
-  right: 20%;
+  right: 15%;
   bottom: 20px;
-  left: 20%;
-  display: none;
+  left: 15%;
+  z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #fff;
+  text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 
@@ -5160,14 +5161,7 @@ a.list-group-item.active > .badge,
     font-size: 30px;
   }
   .carousel-caption {
-    right: 0;
-    left: 0;
-    z-index: 10;
-    display: block;
-    max-width: 60%;
-    padding: 30px;
-    margin-right: 0;
-    margin-left: 0;
+    padding-bottom: 30px;
   }
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 561fad88f..f0086c583 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -6304,21 +6304,21 @@ $('#myCollapsible').on('hidden', function () {
                     <img data-src="holder.js/900x500/auto/#777:#777" alt="">
                     <div class="carousel-caption">
                       <h3>First slide label</h3>
-                      <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
+                      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                     </div>
                   </div>
                   <div class="item">
                     <img data-src="holder.js/900x500/auto/#777:#777" alt="">
                     <div class="carousel-caption">
                       <h3>Second slide label</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
                   </div>
                   <div class="item">
                     <img data-src="holder.js/900x500/auto/#777:#777" alt="">
                     <div class="carousel-caption">
                       <h3>Third slide label</h3>
-                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                     </div>
                   </div>
                 </div>
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index e86029221..792949fb0 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -27,11 +27,10 @@ body {
   left: 0;
   right: 0;
   z-index: 10;
-  margin-top: 20px;
-  margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 }
 
 
+
 /* CUSTOMIZE THE CAROUSEL
 -------------------------------------------------- */
 
@@ -39,12 +38,12 @@ body {
 .carousel {
   margin-bottom: 60px;
 }
-
-.carousel .container {
-  position: relative;
-  z-index: 9;
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  z-index: 10;
 }
 
+/* Declare heights because of positioning of img element */
 .carousel .item {
   height: 500px;
 }
@@ -56,26 +55,21 @@ body {
   height: 500px;
 }
 
-.carousel-caption {
-  background-color: transparent;
-  position: static;
-  max-width: 550px;
-  padding: 0 20px;
-  margin-top: 200px;
-}
-
-.carousel-caption .btn {
-  margin-top: 10px;
-}
-
 
 
 /* MARKETING CONTENT
 -------------------------------------------------- */
 
+/* Pad the edges of the mobile views a bit */
+.marketing {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
 /* Center align the text within the three columns below the carousel */
 .marketing .col-span-4 {
   text-align: center;
+  margin-bottom: 20px;
 }
 .marketing h2 {
   font-weight: normal;
@@ -121,7 +115,35 @@ body {
 /* RESPONSIVE CSS
 -------------------------------------------------- */
 
-@media (max-width: 979px) {
+@media (min-width: 768px) {
+
+  /* Remve the edge padding needed for mobile */
+  .marketing {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+    margin-top: 20px;
+    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+  }
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+}
+
+
+/*@media (max-width: 979px) {
 
   .container.navbar-wrapper {
     margin-bottom: 0;
@@ -189,7 +211,7 @@ body {
     font-size: 18px;
     line-height: 1.5;
   }
-  
+
   .navbar-wrapper {
     margin-top: 0;
   }
@@ -197,12 +219,12 @@ body {
   .navbar {
     border-radius: 0;
   }
-  
+
   #myCarousel {
     margin-top: 54px;
   }
 
-}
+}*/
 </style>
 
 
@@ -212,7 +234,7 @@ body {
 <div class="navbar-wrapper">
   <div class="container">
 
-    <div class="navbar navbar-inverse">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="container">
 	    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
 	      <span class="icon-bar"></span>
@@ -257,32 +279,32 @@ body {
   </ol>
   <div class="carousel-inner">
     <div class="item active">
-      <img data-src="holder.js/1500x550/auto/#777:#fff/text:First slide" alt="">
+      <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Example headline.</h1>
-          <p class="lead">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>
-          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
+          <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 class="btn btn-large btn-primary" href="#">Sign up today</a></p>
         </div>
       </div>
     </div>
     <div class="item">
-      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Second slide" alt="">
+      <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Another example headline.</h1>
-          <p class="lead">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>
-          <a class="btn btn-large btn-primary" href="#">Learn more</a>
+          <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 class="btn btn-large btn-primary" href="#">Learn more</a></p>
         </div>
       </div>
     </div>
     <div class="item">
-      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Third slide" alt="">
+      <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>One more for good measure.</h1>
-          <p class="lead">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>
-          <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
+          <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 class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
         </div>
       </div>
     </div>
@@ -304,13 +326,13 @@ body {
     <div class="col-span-4">
       <img class="img-circle" data-src="holder.js/140x140">
       <h2>Heading</h2>
-      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
       <p><a class="btn" href="#">View details &raquo;</a></p>
     </div><!-- /.col-span-4 -->
     <div class="col-span-4">
       <img class="img-circle" data-src="holder.js/140x140">
       <h2>Heading</h2>
-      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
       <p><a class="btn" href="#">View details &raquo;</a></p>
     </div><!-- /.col-span-4 -->
     <div class="col-span-4">
-- 
cgit v1.2.3


From c570ae49ef7494f2b28f6f0dc27214e6912eef25 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 2 Apr 2013 16:22:42 -0700
Subject: fix that sidenav

---
 docs/assets/css/docs.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fb4ed9ea3..8bf3426f7 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -222,12 +222,12 @@ section > ul li {
   overflow-y: scroll;
   text-shadow: 0 1px 0 #fff;
   background-color: #f5f5f5;
-  border-right: 1px solid #e5e5e5;
+  box-shadow: inset -1px 0 0 #e5e5e5;
 }
 
 /* Nav: first level */
 .bs-docs-sidebar > .nav {
-  margin: 0 -1px 25px 0;
+  margin: 0 0 25px 0;
 }
 .bs-docs-sidebar .nav > li > a {
   display: block;
-- 
cgit v1.2.3


From 610eb8fb78952ad3b1b43df2362bcfef9b223a01 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 2 Apr 2013 18:02:53 -0700
Subject: sidenote edit under customization section

---
 docs/_includes/docs-nav.html | 2 +-
 docs/docs.html               | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 75967f704..f9670a0d8 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -181,7 +181,7 @@
         <li><a href="#panels-basic">Basic panel</a></li>
         <li><a href="#panels-heading">Panel with heading</a></li>
         <li><a href="#panels-alternatives">Contextual alternatives</a></li>
-        <li><a href="#panels-list-group">With list groups</a></li>
+        <li><a href="#panels-list-group">With list groups</a>
       </ul>
     </li>
     <li><a href="#wells">Wells</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index f0086c583..517b81cfa 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -261,7 +261,8 @@ title: Bootstrap Documentation
     <p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
 
     <div class="bs-docs-sidenote">
-      <p><strong>Side note:</strong> While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
+      <p><strong>Alternate customization methods</strong></p>
+      <p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
     </div>
 
     <h3>Removing potential bloat</h3>
-- 
cgit v1.2.3


From eadfa59d92ad8bd898b2586056fbbf55906e1420 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 2 Apr 2013 19:40:43 -0700
Subject: Add small grid for phones and tablets

---
 docs/_includes/docs-nav.html  |  1 +
 docs/assets/css/bootstrap.css | 57 ++++++++++++++++++++++++++++++++++++++++++-
 docs/docs.html                | 23 ++++++++++++++---
 3 files changed, 77 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index f9670a0d8..fa20d9e98 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -18,6 +18,7 @@
         <li><a href="#grid-offsetting">Offset columns</a></li>
         <li><a href="#grid-nesting">Nested columns</a></li>
         <li><a href="#grid-column-ordering">Column ordering</a></li>
+        <li><a href="#grid-small">Small device grid</a></li>
         <li><a href="#grid-less">LESS mixins and variables</a></li>
       </ul>
     </li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 44978573e..b4b499e8f 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -782,13 +782,66 @@ pre code {
   margin-left: -15px;
 }
 
-[class*="col-span-"] {
+[class*="col-span-"],
+[class*="col-small-"] {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
+[class*="col-small-"] {
+  float: left;
+}
+
+.col-small-span-12 {
+  width: 100%;
+}
+
+.col-small-span-11 {
+  width: 91.66666666666666%;
+}
+
+.col-small-span-10 {
+  width: 83.33333333333334%;
+}
+
+.col-small-span-9 {
+  width: 75%;
+}
+
+.col-small-span-8 {
+  width: 66.66666666666666%;
+}
+
+.col-small-span-7 {
+  width: 58.333333333333336%;
+}
+
+.col-small-span-6 {
+  width: 50%;
+}
+
+.col-small-span-5 {
+  width: 41.66666666666667%;
+}
+
+.col-small-span-4 {
+  width: 33.33333333333333%;
+}
+
+.col-small-span-3 {
+  width: 25%;
+}
+
+.col-small-span-2 {
+  width: 16.666666666666664%;
+}
+
+.col-small-span-1 {
+  width: 8.333333333333332%;
+}
+
 @media screen and (min-width: 768px) {
   .container {
     max-width: 728px;
@@ -5161,6 +5214,8 @@ a.list-group-item.active > .badge,
     font-size: 30px;
   }
   .carousel-caption {
+    right: 20%;
+    left: 20%;
     padding-bottom: 30px;
   }
 }
diff --git a/docs/docs.html b/docs/docs.html
index 517b81cfa..73c81ff40 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -321,6 +321,8 @@ title: Bootstrap Documentation
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
   </div>
 
+
+
   <!-- Grid system
   ================================================== -->
   <div class="bs-docs-section" id="grid">
@@ -438,15 +440,30 @@ title: Bootstrap Documentation
 
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
+    <div class="row show-grid">
+      <div class="col-span-9 col-push-3">9</div>
+      <div class="col-span-3 col-pull-9">3</div>
+    </div>
+
+{% highlight html linenos %}
 <div class="row show-grid">
   <div class="col-span-9 col-push-3">9</div>
   <div class="col-span-3 col-pull-9">3</div>
 </div>
+{% endhighlight %}
 
+    <h3 id="grid-small">Small device grid</h3>
+    <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
+    <div class="row show-grid">
+      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+      <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+    </div>
 {% highlight html linenos %}
-<div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
+<div class="row">
+  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+  <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
 </div>
 {% endhighlight %}
 
-- 
cgit v1.2.3


From c1ab200985cf84f52f13997955396dea0618d9b1 Mon Sep 17 00:00:00 2001
From: Andrew Scofied <apotropaics@gmail.com>
Date: Wed, 3 Apr 2013 09:48:39 -0700
Subject: updated docs, changed out span* for col-span-*

---
 docs/docs.html | 66 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 73c81ff40..321f63ab5 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -332,7 +332,7 @@ title: Bootstrap Documentation
     <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
 
     <h3 id="grid-example">Grid example</h3>
-    <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
+    <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
         <div class="col-span-1">1</div>
@@ -1172,8 +1172,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use contextual classes to color table rows.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
-        <col class="span1">
-        <col class="span7">
+        <col class="col-span-1">
+        <col class="col-span-7">
       </colgroup>
       <thead>
         <tr>
@@ -1640,12 +1640,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
     <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
     <form class="bs-docs-example">
-      <div class="input-group span9">
+      <div class="input-group col-span-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group span6">
+      <div class="input-group col-span-6">
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
@@ -1657,12 +1657,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group span9">
+<div class="input-group col-span-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group span6">
+<div class="input-group col-span-6">
   <input type="text">
   <span class="input-group-addon">.00</span>
 </div>
@@ -1677,33 +1677,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
     <form class="bs-docs-example">
-      <div class="input-group span9">
+      <div class="input-group col-span-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
       </div>
       <br>
-      <div class="input-group span9">
+      <div class="input-group col-span-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group span9">
+      <div class="input-group col-span-9">
         <span class="input-group-addon input-small">@</span>
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group span9">
+<div class="input-group col-span-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
 </div>
 
-<div class="input-group span9">
+<div class="input-group col-span-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group span9">
+<div class="input-group col-span-9">
   <span class="input-group-addon input-small">@</span>
   <input type="text" class="input-small" placeholder="Username">
 </div>
@@ -1712,14 +1712,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
     <form class="bs-docs-example">
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
         </span>
         <input type="text">
       </div>
       <br>
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <input type="text">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
@@ -1727,14 +1727,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
   </span>
   <input type="text">
 </div>
 
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <input type="text">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
@@ -1745,7 +1745,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Button dropdowns</h4>
     <p></p>
     <form class="bs-docs-example">
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1759,7 +1759,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text">
       </div><!-- /input-group -->
       <br>
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1774,7 +1774,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /input-group -->
     </form>
 {% highlight html linenos %}
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1788,7 +1788,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <input type="text">
 </div><!-- /input-group -->
 
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <input type="text">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1805,7 +1805,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Segmented dropdown groups</h4>
     <form class="bs-docs-example">
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
           <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1824,7 +1824,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <br>
 
-      <div class="input-group span7">
+      <div class="input-group col-span-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
@@ -1842,14 +1842,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
 </div>
 
-<div class="input-group span7">
+<div class="input-group col-span-7">
   <input type="text">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
@@ -1876,13 +1876,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Column sizing</h4>
-    <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+    <p>Use <code>.col-span-12</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="controls docs-input-sizes">
-        <input class="span1" type="text" placeholder=".span1">
+        <input class="col-span-1" type="text" placeholder=".col-span-1">
         <input class="span2" type="text" placeholder=".span2">
         <input class="col-span-3" type="text" placeholder=".col-span-3">
-        <select class="span1">
+        <select class="col-span-1">
           <option>1</option>
           <option>2</option>
           <option>3</option>
@@ -1906,10 +1906,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<input class="span1" type="text" placeholder=".span1">
+<input class="col-span-1" type="text" placeholder=".col-span-1">
 <input class="span2" type="text" placeholder=".span2">
 <input class="col-span-3" type="text" placeholder=".col-span-3">
-<select class="span1">
+<select class="col-span-1">
   ...
 </select>
 <select class="span2">
@@ -3555,7 +3555,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="span8" placeholder="Search">
+              <input type="text" class="col-span-8" placeholder="Search">
             </form>
             <ul class="nav pull-right">
               <li><a href="#">Link</a></li>
@@ -3598,7 +3598,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <div class="alert alert-info">
-      <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
+      <strong>Heads up!</strong> The responsive navbar requires the <a href="#collapse">collapse plugin</a>.
     </div>
 
 
@@ -3632,7 +3632,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="span8" placeholder="Search">
+              <input type="text" class="col-span-8" placeholder="Search">
             </form>
             <ul class="nav pull-right">
               <li><a href="#">Link</a></li>
-- 
cgit v1.2.3


From 05710e10f7d4a823bb4854add74e974ced858e14 Mon Sep 17 00:00:00 2001
From: Garvin <gjcasimir@gmail.com>
Date: Sat, 6 Apr 2013 21:48:53 -0400
Subject: Added min-height to modal-header for modals with no header text

---
 docs/assets/css/bootstrap.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b4b499e8f..2c7a106fc 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4302,6 +4302,7 @@ button.close {
 }
 
 .modal-header {
+  min-height: 40px;
   padding: 9px 15px;
   border-bottom: 1px solid #e5e5e5;
 }
-- 
cgit v1.2.3


From 06a4bb38c02447a6434b6d1381f183d8678373b8 Mon Sep 17 00:00:00 2001
From: Phil Freo <phil@philfreo.com>
Date: Sat, 6 Apr 2013 21:02:24 -0700
Subject: Fix typo in docs

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 321f63ab5..0d259169a 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2137,7 +2137,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">
 {% endhighlight %}
-    <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+    <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
 
   </div>
 
-- 
cgit v1.2.3


From c78c66527dcb9b2481fd0494081adf4e9ebe94bd Mon Sep 17 00:00:00 2001
From: Jamie Knight <jamie@jkg3.com>
Date: Sun, 7 Apr 2013 16:25:00 +0200
Subject: Update docs.html

Added heads up regarding lone icons providing accessibility issues for screen readers.
---
 docs/docs.html | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 0d259169a..4506d5ae5 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2561,6 +2561,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
+    <p class="alert alert-info">
+      <strong>Heads up!</strong>
+      Using icons without any additional content means the icons are not represented to screen reader users.
+    </p>
+
     <h5>Dropdown in a button group</h5>
     <div class="bs-docs-example">
       <div class="btn-group">
-- 
cgit v1.2.3


From 92977fb13e6a837cd0bc31cb2003fce7c235bf4b Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 7 Apr 2013 22:58:16 -0700
Subject: fixes #7503: don't do dat

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 4506d5ae5..0ae2198ad 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4809,7 +4809,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+    <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do not attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
 
     <h3 id="js-data-attrs">Data attributes</h3>
     <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
-- 
cgit v1.2.3


From dd533aaaf0c4d7162d5746948b02b9c710a1df66 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 9 Apr 2013 10:16:37 -0700
Subject: better buttons on mobile

---
 docs/assets/css/docs.css | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 8bf3426f7..0f20ec6d4 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -125,6 +125,8 @@ section > ul li {
 
 /* Download button */
 .bs-docs-jumbotron .btn {
+  margin-top: 5px;
+  margin-bottom: 5px;
   padding: 18px 24px;
   font-size: 21px;
   color: #b94a48; /* redeclare to override the `.jumbotron a` */
-- 
cgit v1.2.3


From 1a546278b93a08817152736247469c1155ae3ae2 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 9 Apr 2013 10:20:50 -0700
Subject: make back to top and big headings only for tablets and up

---
 docs/assets/css/docs.css | 51 ++++++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0f20ec6d4..b6117e927 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -32,26 +32,6 @@ body {
   padding-right: 15px;
 }
 
-/* Back to top link */
-.bs-docs-top {
-  float: left;
-  padding: 7px 15px;
-  font-weight: 500;
-  color: #999;
-  background-color: #eee;
-  border-radius: 4px;
-}
-.bs-docs-top:hover {
-  color: #fff;
-  text-decoration: none;
-  background-color: #999;
-}
-.bs-docs-top.affix {
-  position: fixed;
-  right:  15px;
-  bottom: 15px;
-}
-
 /* Side notes for calling out things */
 .bs-docs-sidenote {
   margin: 20px 0;
@@ -92,11 +72,6 @@ section > ul li {
   color: #b94a48;
   border-bottom: 5px solid #b94a48;
 }
-.bs-docs-section-header h1 {
-  font-size: 80px;
-  font-size: 8rem;
-  line-height: 1;
-}
 
 /* Base class */
 .bs-docs-jumbotron {
@@ -728,6 +703,32 @@ input.focused {
 /* Tablets and up */
 @media screen and (min-width: 768px) {
 
+  /* Back to top link */
+  .bs-docs-top {
+    float: left;
+    padding: 7px 15px;
+    font-weight: 500;
+    color: #999;
+    background-color: #eee;
+    border-radius: 4px;
+  }
+  .bs-docs-top:hover {
+    color: #fff;
+    text-decoration: none;
+    background-color: #999;
+  }
+  .bs-docs-top.affix {
+    position: fixed;
+    right:  15px;
+    bottom: 15px;
+  }
+
+  .bs-docs-section-header h1 {
+    font-size: 80px;
+    font-size: 8rem;
+    line-height: 1;
+  }
+
   /* Account for fixed navbar (which is static to start) */
   .bs-docs-docs {
     padding-left: 260px;
-- 
cgit v1.2.3


From 24f8d9e1374d88f852402f71de0f728d1e8d62ed Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 9 Apr 2013 10:43:37 -0700
Subject: don't use table for label variatons

---
 docs/assets/css/bootstrap.css |  3 +-
 docs/docs.html                | 64 ++++++++++---------------------------------
 2 files changed, 15 insertions(+), 52 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b4b499e8f..641de8a4a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4624,11 +4624,10 @@ button.close {
   color: #a47e3c;
 }
 
-.close {
+.alert .close {
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: 20px;
   color: inherit;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 0ae2198ad..e7d7efb58 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3894,56 +3894,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Available variations</h3>
     <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
-    <table class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th>Labels</th>
-          <th>Markup</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <span class="label">Default</span>
-          </td>
-          <td>
-            <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-success">Success</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-warning">Warning</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-danger">Danger</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-info">Info</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="bs-docs-example">
+      <span class="label">Default</span>
+      <span class="label label-success">Success</span>
+      <span class="label label-warning">Warning</span>
+      <span class="label label-danger">Danger</span>
+      <span class="label label-info">Info</span>
+    </div>
+{% highlight html linenos %}
+<span class="label">Default</span>
+<span class="label label-success">Success</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+<span class="label label-info">Info</span>
+{% endhighlight %}
 
   </div>
 
-- 
cgit v1.2.3


From ece78ff086cab6c1a4381f108acd108be4d5b560 Mon Sep 17 00:00:00 2001
From: Julian Thilo <bigj95t@gmail.com>
Date: Wed, 10 Apr 2013 00:04:44 +0200
Subject: cololol

Correct all span, push, pull, offset classes to col- schema
Fix a typo
---
 docs/docs.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index e7d7efb58..ba32b3295 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -408,7 +408,7 @@ title: Bootstrap Documentation
 
 
     <h3 id="grid-nesting">Nesting columns</h3>
-    <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
+    <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
       <div class="col-span-9">
         Level 1: 9 columns
@@ -439,7 +439,7 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
     <h3 id="grid-column-ordering">Column ordering</h3>
-    <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
+    <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
       <div class="col-span-9 col-push-3">9</div>
       <div class="col-span-3 col-pull-9">3</div>
@@ -1876,11 +1876,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Column sizing</h4>
-    <p>Use <code>.col-span-12</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+    <p>Use <code>.col-span-1</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="controls docs-input-sizes">
         <input class="col-span-1" type="text" placeholder=".col-span-1">
-        <input class="span2" type="text" placeholder=".span2">
+        <input class="col-span-2" type="text" placeholder=".col-span-2">
         <input class="col-span-3" type="text" placeholder=".col-span-3">
         <select class="col-span-1">
           <option>1</option>
@@ -1889,7 +1889,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="span2">
+        <select class="col-span-2">
           <option>1</option>
           <option>2</option>
           <option>3</option>
@@ -1907,12 +1907,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form>
 {% highlight html linenos %}
 <input class="col-span-1" type="text" placeholder=".col-span-1">
-<input class="span2" type="text" placeholder=".span2">
+<input class="col-span-2" type="text" placeholder=".col-span-2">
 <input class="col-span-3" type="text" placeholder=".col-span-3">
 <select class="col-span-1">
   ...
 </select>
-<select class="span2">
+<select class="col-span-2">
   ...
 </select>
 <select class="col-span-3">
@@ -1920,7 +1920,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </select>
 {% endhighlight %}
 
-    <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+    <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
         <div class="col-span-4">
-- 
cgit v1.2.3


From 78d64e97e9f2bb2d0ae10a089e3f3f9ff53cd1f5 Mon Sep 17 00:00:00 2001
From: Julian Thilo <bigj95t@gmail.com>
Date: Wed, 10 Apr 2013 19:18:04 +0200
Subject: Dusting the docs

* Fix some typos, grammar, sentence structure
* Fix left-over error tr class
* Remove uneditable inputs section
* Make compatibility sections stand out as sidenotes
* Make modal example scrollable on big screens, too
* Make some examples more self-explanatory
---
 docs/docs.html | 50 +++++++++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 23 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ba32b3295..7d5630242 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -385,7 +385,7 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
     <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
         <div class="col-span-4">4</div>
@@ -396,7 +396,7 @@ title: Bootstrap Documentation
         <div class="col-span-3 col-offset-3">3 offset 3</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col-span-6 col-offset-6">6 offset 6</div>
+        <div class="col-span-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
 {% highlight html linenos %}
@@ -404,6 +404,10 @@ title: Bootstrap Documentation
   <div class="col-span-4">...</div>
   <div class="col-span-4 col-offset-4">...</div>
 </div>
+...
+<div class="row">
+  <div class="col-span-6 col-offset-3">...</div>
+</div>
 {% endhighlight %}
 
 
@@ -1190,7 +1194,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tr>
         <tr>
           <td>
-            <code>.error</code>
+            <code>.danger</code>
           </td>
           <td>Indicates a dangerous or potentially negative action.</td>
         </tr>
@@ -1225,7 +1229,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>01/04/2012</td>
             <td>Approved</td>
           </tr>
-          <tr class="error">
+          <tr class="danger">
             <td>2</td>
             <td>TB - Monthly</td>
             <td>02/04/2012</td>
@@ -1946,15 +1950,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <input type="text" placeholder=".col-span-4">
   </div>
 </div>
-{% endhighlight %}
-
-    <h3>Uneditable inputs</h3>
-    <p>Present data in a form that's not editable without using actual form markup.</p>
-    <form class="bs-docs-example">
-      <span class="input-xlarge uneditable-input">Some value here</span>
-    </form>
-{% highlight html linenos %}
-<span class="uneditable-input">Some value here</span>
 {% endhighlight %}
 
     <h3 id="forms-actions">Form actions</h3>
@@ -2038,9 +2033,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
 
-    <h4>Cross browser compatibility</h4>
-    <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
-
 
     <h2 id="buttons-sizes">Button sizes</h2>
     <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
@@ -2100,14 +2092,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Button element</h3>
     <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
     <p class="bs-docs-example">
-      <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+      <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
       <button type="button" class="btn btn-large" disabled="disabled">Button</button>
     </p>
 {% highlight html linenos %}
-<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled="disabled">Button</button>
 {% endhighlight %}
 
+    <div class="bs-docs-sidenote">
+      <p><strong>Cross-browser compatibility</strong></p>
+      <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
+    </div>
+
     <h3>Anchor element</h3>
     <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
     <p class="bs-docs-example">
@@ -2137,7 +2134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">
 {% endhighlight %}
-    <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+    <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
 
   </div>
 
@@ -3996,7 +3993,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h2 id="type-components-page-header">Page header</h2>
-    <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
+    <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element as well as most other components (with additional styles).</p>
     <div class="bs-docs-example">
       <div class="page-header">
         <h1>Example page header <small>Subtext for header</small></h1>
@@ -4185,7 +4182,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
     <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
-    <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
+    <div class="bs-docs-sidenote">
+      <p><strong>Cross-browser compatibility</strong></p>
+      <p>Progress bars use CSS3 transitions and animations to achieve some of their effects.</p>
+      <p>These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
+    </div>
 
     <h3 id="progress-basic">Basic</h3>
     <p>Default progress bar with a vertical gradient.</p>
@@ -4450,7 +4451,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="list-group-chevrons">With chevrons</h3>
-    <p>Adding Glyphicon chevrons are automatically moved to the right.</p>
+    <p>Add Glyphicon chevrons that are automatically moved to the right.</p>
     <div class="bs-docs-example">
       <ul class="list-group">
         <li class="list-group-item">
@@ -4535,7 +4536,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="list-group-linked">Linked list group</h3>
-    <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p>
+    <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
     <div class="bs-docs-example">
       <div class="list-group">
         <a href="#" class="list-group-item active">
@@ -4925,6 +4926,9 @@ $('#myModal').on('show', function (e) {
             <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
             <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
           </div>
           <div class="modal-footer">
             <button class="btn" data-dismiss="modal">Close</button>
-- 
cgit v1.2.3


From 3dc8be74fe574a4f300c3f0d28678038d071e796 Mon Sep 17 00:00:00 2001
From: Stephen Edgar <stephen@netweb.com.au>
Date: Thu, 11 Apr 2013 20:24:13 +1000
Subject: Fix docs.html Table Row Danger CSS Class

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ba32b3295..11f0e7bc9 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1190,7 +1190,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tr>
         <tr>
           <td>
-            <code>.error</code>
+            <code>.danger</code>
           </td>
           <td>Indicates a dangerous or potentially negative action.</td>
         </tr>
@@ -1225,7 +1225,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>01/04/2012</td>
             <td>Approved</td>
           </tr>
-          <tr class="error">
+          <tr class="danger">
             <td>2</td>
             <td>TB - Monthly</td>
             <td>02/04/2012</td>
-- 
cgit v1.2.3


From 0d70b3c54e65f323655e07ff1c29cb9230852484 Mon Sep 17 00:00:00 2001
From: Jonathan Knapp <jon@coffeeandcode.com>
Date: Thu, 11 Apr 2013 16:02:29 -0300
Subject: fixed typo in typography documentation

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ba32b3295..921075b78 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -620,7 +620,7 @@ title: Bootstrap Documentation
     <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
     <h3>Small text</h3>
-    <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&lt;</code> elements.</p>
+    <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
     <div class="bs-docs-example">
       <p><small>This line of text is meant to be treated as fine print.</small></p>
     </div>
-- 
cgit v1.2.3


From b3bb89520d02cabbb75958bfea1b02b57fa3d7b0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 11 Apr 2013 20:16:20 -0700
Subject: add comma; more accurate code snippet

---
 docs/docs.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index d30ae9f95..d668999e6 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -404,7 +404,10 @@ title: Bootstrap Documentation
   <div class="col-span-4">...</div>
   <div class="col-span-4 col-offset-4">...</div>
 </div>
-...
+<div class="row">
+  <div class="col-span-3 col-offset-3">3 offset 3</div>
+  <div class="col-span-3 col-offset-3">3 offset 3</div>
+</div>
 <div class="row">
   <div class="col-span-6 col-offset-3">...</div>
 </div>
@@ -3993,7 +3996,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h2 id="type-components-page-header">Page header</h2>
-    <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element as well as most other components (with additional styles).</p>
+    <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
     <div class="bs-docs-example">
       <div class="page-header">
         <h1>Example page header <small>Subtext for header</small></h1>
-- 
cgit v1.2.3


From ae98f1803f09fae7e427075f99c19d218d68f46c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 12 Apr 2013 20:56:19 -0700
Subject: add modal variables and tweak padding for min-height on modal title

---
 docs/assets/css/bootstrap.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d550f0c83..374c1d132 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4302,18 +4302,18 @@ button.close {
 }
 
 .modal-header {
-  min-height: 40px;
-  padding: 9px 15px;
+  min-height: 35px;
+  padding: 15px;
   border-bottom: 1px solid #e5e5e5;
 }
 
 .modal-header .close {
-  margin-top: 2px;
+  margin-top: -2px;
 }
 
 .modal-title {
   margin: 0;
-  line-height: 30px;
+  line-height: 20px;
 }
 
 .modal-body {
-- 
cgit v1.2.3


From bec5679264d92b94c44c7d9ebe92c9f735ac0d07 Mon Sep 17 00:00:00 2001
From: Paul Tyng <paul@paultyng.net>
Date: Sat, 13 Apr 2013 17:13:14 -0300
Subject: update docs bootstrap.css

---
 docs/assets/css/bootstrap.css | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 374c1d132..2d2d624cd 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1226,6 +1226,12 @@ label {
   font-weight: bold;
 }
 
+input[type="search"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 select,
 textarea,
 input[type="text"],
-- 
cgit v1.2.3


From d7bc89b4334762e452c76458012305553cff7691 Mon Sep 17 00:00:00 2001
From: Julian Thilo <bigj95t@gmail.com>
Date: Sun, 14 Apr 2013 04:04:01 +0200
Subject: Sidenotes instead of alerts

* I propose: make the docs rely more heavily on the new design language,
replace alerts (not the .alert examples) by sidenotes.
* Remove alert-heading class, which no longer exists in CSS.
---
 docs/docs.html | 52 +++++++++++++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index d668999e6..6d6888e04 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2561,10 +2561,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <p class="alert alert-info">
-      <strong>Heads up!</strong>
-      Using icons without any additional content means the icons are not represented to screen reader users.
-    </p>
+    <div class="bs-docs-sidenote">
+      <p><strong>Accessibility</strong></p>
+      <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
+    </div>
 
     <h5>Dropdown in a button group</h5>
     <div class="bs-docs-example">
@@ -3602,8 +3602,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div><!-- /.navbar -->
 {% endhighlight %}
 
-    <div class="alert alert-info">
-      <strong>Heads up!</strong> The responsive navbar requires the <a href="#collapse">collapse plugin</a>.
+    <div class="bs-docs-sidenote">
+      <p><strong>Plugin dependency</strong></p>
+      <p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
     </div>
 
 
@@ -5288,9 +5289,9 @@ $('.dropdown-toggle').dropdown()
 $('.navbar').scrollspy()
 {% endhighlight %}
 
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+          <div class="bs-docs-sidenote">
+            <p><strong>Resolvable ID targets required</strong></p>
+            <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
           </div>
 
           <h3>Methods</h3>
@@ -5577,9 +5578,9 @@ $('#example').tooltip(options)
              </tr>
             </tbody>
           </table>
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Options for individual tooltips can alternatively be specified through the use of data attributes.
+          <div class="bs-docs-sidenote">
+            <p><strong>Data attributes for individual tooltips</strong></p>
+            <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
           </div>
 
           <h3>Markup</h3>
@@ -5757,9 +5758,9 @@ $('#example').tooltip(options)
            </tr>
           </tbody>
         </table>
-        <div class="alert alert-info">
-          <strong>Heads up!</strong>
-          Options for individual popovers can alternatively be specified through the use of data attributes.
+        <div class="bs-docs-sidenote">
+          <p><strong>Data attributes for individual popovers</strong>
+          <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
         </div>
 
         <h3>Markup</h3>
@@ -5808,7 +5809,7 @@ $('#example').tooltip(options)
         <div class="bs-docs-example">
           <div class="alert alert-block alert-error fade in">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
-            <h4 class="alert-heading">Oh snap! You got an error!</h4>
+            <h4>Oh snap! You got an error!</h4>
             <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <p>
               <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
@@ -5977,9 +5978,9 @@ $('.nav-tabs').button()
 
             <h4>$().button('toggle')</h4>
             <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
+            <div class="bs-docs-sidenote">
+              <p><strong>Auto toggling</strong></p>
+              <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
             </div>
 {% highlight html linenos %}
 <button type="button" class="btn" data-toggle="button">...</button>
@@ -5992,9 +5993,9 @@ $('.nav-tabs').button()
 <button type="button" class="btn" data-loading-text="loading stuff...">...</button>
 {% endhighlight %}
 
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              <a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
+            <div class="bs-docs-sidenote">
+              <p><strong>Cross-browser compatibility</strong></p>
+              <p><a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
             </div>
 
             <h4>$().button('reset')</h4>
@@ -6393,6 +6394,7 @@ $('.carousel').carousel({
             <h4>.carousel('pause')</h4>
             <p>Stops the carousel from cycling through items.</p>
 
+
             <h4>.carousel(number)</h4>
             <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
 
@@ -6544,9 +6546,9 @@ $('.typeahead').typeahead()
 <div data-spy="affix" data-offset-top="200">...</div>
 {% endhighlight %}
 
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
+            <div class="bs-docs-sidenote">
+              <p><strong>Heads up!</strong></p>
+              <p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.</p>
             </div>
 
             <h3>Via JavaScript</h3>
-- 
cgit v1.2.3


From fc8b9fb07df5d63a162c94ba165bc3759ec2a889 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 13 Apr 2013 22:10:34 -0700
Subject: swap all bold p tags in sidenotes for h4s

---
 docs/assets/css/docs.css |  4 ++++
 docs/docs.html           | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 12 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b6117e927..2ec7799ed 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -39,6 +39,9 @@ body {
   background-color: #fcf2f2;
   border-left: 5px solid #df7c7b;
 }
+.bs-docs-sidenote h4 {
+  margin-top: 0;
+}
 .bs-docs-sidenote p:last-child {
   margin-bottom: 0;
 }
@@ -662,6 +665,7 @@ input.focused {
   margin-bottom: 0;
   background-color: transparent;
   border: 0;
+  white-space: nowrap;
 }
 .highlight pre code {
   font-size: inherit;
diff --git a/docs/docs.html b/docs/docs.html
index 6d6888e04..258dabe1d 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -207,7 +207,7 @@ title: Bootstrap Documentation
     <p>Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
 
     <div class="bs-docs-sidenote">
-      <p><strong>Compiled or minified?</strong></p>
+      <h4>Compiled or minified?</h4>
       <p>Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.</p>
     </div>
 
@@ -261,7 +261,7 @@ title: Bootstrap Documentation
     <p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
 
     <div class="bs-docs-sidenote">
-      <p><strong>Alternate customization methods</strong></p>
+      <h4>Alternate customization methods</h4>
       <p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
     </div>
 
@@ -2104,7 +2104,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <div class="bs-docs-sidenote">
-      <p><strong>Cross-browser compatibility</strong></p>
+      <h4>Cross-browser compatibility</h4>
       <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
     </div>
 
@@ -2562,7 +2562,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <div class="bs-docs-sidenote">
-      <p><strong>Accessibility</strong></p>
+      <h4>Accessibility</h4>
       <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
     </div>
 
@@ -3603,7 +3603,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <div class="bs-docs-sidenote">
-      <p><strong>Plugin dependency</strong></p>
+      <h4>Plugin dependency</h4>
       <p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
     </div>
 
@@ -4187,7 +4187,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
     <div class="bs-docs-sidenote">
-      <p><strong>Cross-browser compatibility</strong></p>
+      <h4>Cross-browser compatibility</h4>
       <p>Progress bars use CSS3 transitions and animations to achieve some of their effects.</p>
       <p>These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
     </div>
@@ -5290,7 +5290,7 @@ $('.navbar').scrollspy()
 {% endhighlight %}
 
           <div class="bs-docs-sidenote">
-            <p><strong>Resolvable ID targets required</strong></p>
+            <h4>Resolvable ID targets required</h4>
             <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
           </div>
 
@@ -5579,7 +5579,7 @@ $('#example').tooltip(options)
             </tbody>
           </table>
           <div class="bs-docs-sidenote">
-            <p><strong>Data attributes for individual tooltips</strong></p>
+            <h4>Data attributes for individual tooltips</h4>
             <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
           </div>
 
@@ -5759,7 +5759,7 @@ $('#example').tooltip(options)
           </tbody>
         </table>
         <div class="bs-docs-sidenote">
-          <p><strong>Data attributes for individual popovers</strong>
+          <h4>Data attributes for individual popovers</h4>
           <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
         </div>
 
@@ -5979,7 +5979,7 @@ $('.nav-tabs').button()
             <h4>$().button('toggle')</h4>
             <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
             <div class="bs-docs-sidenote">
-              <p><strong>Auto toggling</strong></p>
+              <h4>Auto toggling</h4>
               <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
             </div>
 {% highlight html linenos %}
@@ -5994,7 +5994,7 @@ $('.nav-tabs').button()
 {% endhighlight %}
 
             <div class="bs-docs-sidenote">
-              <p><strong>Cross-browser compatibility</strong></p>
+              <h4>Cross-browser compatibility</h4>
               <p><a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
             </div>
 
@@ -6547,7 +6547,7 @@ $('.typeahead').typeahead()
 {% endhighlight %}
 
             <div class="bs-docs-sidenote">
-              <p><strong>Heads up!</strong></p>
+              <h4>Requires positioning</h4>
               <p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.</p>
             </div>
 
-- 
cgit v1.2.3


From 20259e23505fdcb1a898be42ae27ff94f0d8884b Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 13 Apr 2013 22:48:44 -0700
Subject: fixes #7191 and cleans up indenting some

---
 docs/docs.html | 132 ++++++++++++++++++++++++++++-----------------------------
 1 file changed, 66 insertions(+), 66 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 258dabe1d..76e1b7e0e 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -5688,74 +5688,74 @@ $('#example').tooltip(options)
         <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
         <table class="table table-bordered table-striped">
           <thead>
-           <tr>
-             <th style="width: 100px;">Name</th>
-             <th style="width: 100px;">type</th>
-             <th style="width: 50px;">default</th>
-             <th>description</th>
-           </tr>
+            <tr>
+              <th style="width: 100px;">Name</th>
+              <th style="width: 100px;">type</th>
+              <th style="width: 50px;">default</th>
+              <th>description</th>
+            </tr>
           </thead>
           <tbody>
-           <tr>
-             <td>animation</td>
-             <td>boolean</td>
-             <td>true</td>
-             <td>apply a css fade transition to the tooltip</td>
-           </tr>
-           <tr>
-             <td>html</td>
-             <td>boolean</td>
-             <td>false</td>
-             <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
-           </tr>
-           <tr>
-             <td>placement</td>
-             <td>string | function</td>
-             <td>'right'</td>
-             <td>how to position the popover - top | bottom | left | right</td>
-           </tr>
-           <tr>
-             <td>selector</td>
-             <td>string</td>
-             <td>false</td>
-             <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
-           </tr>
-           <tr>
-             <td>trigger</td>
-             <td>string</td>
-             <td>'click'</td>
-             <td>how popover is triggered - click | hover | focus | manual</td>
-           </tr>
-           <tr>
-             <td>title</td>
-             <td>string | function</td>
-             <td>''</td>
-             <td>default title value if `title` attribute isn't present</td>
-           </tr>
-           <tr>
-             <td>content</td>
-             <td>string | function</td>
-             <td>''</td>
-             <td>default content value if `data-content` attribute isn't present</td>
-           </tr>
-           <tr>
-             <td>delay</td>
-             <td>number | object</td>
-             <td>0</td>
-             <td>
-              <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
-              <p>If a number is supplied, delay is applied to both hide/show</p>
-              <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-             </td>
-           </tr>
-           <tr>
-             <td>container</td>
-             <td>string | false</td>
-             <td>false</td>
-             <td>
-              <p>Appends the popover to a specific element <code>container: 'body'</code></p>
-             </td>
-           </tr>
+            <tr>
+              <td>animation</td>
+              <td>boolean</td>
+              <td>true</td>
+              <td>apply a css fade transition to the tooltip</td>
+            </tr>
+            <tr>
+              <td>html</td>
+              <td>boolean</td>
+              <td>false</td>
+              <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if   you're worried about XSS attacks.</td>
+            </tr>
+            <tr>
+              <td>placement</td>
+              <td>string | function</td>
+              <td>'right'</td>
+              <td>how to position the popover - top | bottom | left | right</td>
+            </tr>
+            <tr>
+              <td>selector</td>
+              <td>string</td>
+              <td>false</td>
+              <td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twitter/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
+            </tr>
+            <tr>
+              <td>trigger</td>
+              <td>string</td>
+              <td>'click'</td>
+              <td>how popover is triggered - click | hover | focus | manual</td>
+            </tr>
+            <tr>
+              <td>title</td>
+              <td>string | function</td>
+              <td>''</td>
+              <td>default title value if `title` attribute isn't present</td>
+            </tr>
+            <tr>
+              <td>content</td>
+              <td>string | function</td>
+              <td>''</td>
+              <td>default content value if `data-content` attribute isn't present</td>
+            </tr>
+            <tr>
+              <td>delay</td>
+              <td>number | object</td>
+              <td>0</td>
+              <td>
+               <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+               <p>If a number is supplied, delay is applied to both hide/show</p>
+               <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+              </td>
+            </tr>
+            <tr>
+              <td>container</td>
+              <td>string | false</td>
+              <td>false</td>
+              <td>
+               <p>Appends the popover to a specific element <code>container: 'body'</code></p>
+              </td>
+            </tr>
           </tbody>
         </table>
         <div class="bs-docs-sidenote">
-- 
cgit v1.2.3


From eefddb1eab113de7aeb5d23c856e872841b4bef9 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 13 Apr 2013 22:49:21 -0700
Subject: more indenting

---
 docs/docs.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 76e1b7e0e..cbea472fa 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -5843,20 +5843,20 @@ $('#example').tooltip(options)
         <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
         <table class="table table-bordered table-striped">
           <thead>
-           <tr>
-             <th style="width: 150px;">Event</th>
-             <th>Description</th>
-           </tr>
+            <tr>
+              <th style="width: 150px;">Event</th>
+              <th>Description</th>
+            </tr>
           </thead>
           <tbody>
-           <tr>
-             <td>close</td>
-             <td>This event fires immediately when the <code>close</code> instance method is called.</td>
-           </tr>
-           <tr>
-             <td>closed</td>
-             <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
-           </tr>
+            <tr>
+              <td>close</td>
+              <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+            </tr>
+            <tr>
+              <td>closed</td>
+              <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+            </tr>
           </tbody>
         </table>
 {% highlight js linenos %}
-- 
cgit v1.2.3


From 86bb3b8126c94ee8c839eac4d9120f3edeafefdd Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 13 Apr 2013 23:17:39 -0700
Subject: IE8 doesn't need help with responsive images, they work just dandy
 apparently (see http://jsbin.com/idesit/1)

---
 docs/assets/css/bootstrap.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2d2d624cd..9bc946e70 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -322,7 +322,6 @@ a:focus {
 }
 
 img {
-  width: auto\9;
   height: auto;
   max-width: 100%;
   vertical-align: middle;
@@ -1226,12 +1225,6 @@ label {
   font-weight: bold;
 }
 
-input[type="search"] {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
 select,
 textarea,
 input[type="text"],
@@ -1282,6 +1275,12 @@ input[type="checkbox"] {
   width: auto;
 }
 
+input[type="search"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 textarea {
   height: auto;
 }
-- 
cgit v1.2.3


From f226463b057f945795661c3d19fbcabf63b931f7 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 13 Apr 2013 23:54:51 -0700
Subject: Restore  on links in dropdowns as they are randomly breaking onto new
 lines

---
 docs/assets/css/bootstrap.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9bc946e70..74cb44246 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2860,6 +2860,7 @@ fieldset[disabled] .btn-link:focus {
   font-weight: normal;
   line-height: 20px;
   color: #333333;
+  white-space: nowrap;
 }
 
 .dropdown-menu > li > a:hover,
-- 
cgit v1.2.3


From 2b228bae60d652f07c38e5e52fa976e67ac2e99c Mon Sep 17 00:00:00 2001
From: Julian Thilo <bigj95t@gmail.com>
Date: Sun, 14 Apr 2013 18:36:11 +0200
Subject: More work on the sidenotes

* Convert more inline advices (compatibility, dependencies, ...) to
sidenotes
* Add sidenotes for:
** Note on plugin dependencies in general
** Required padding for navbar-fixed- (incl. code snippet)
* Fixed text for the small tag
---
 docs/docs.html | 151 +++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 130 insertions(+), 21 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index cbea472fa..ce0a99f0d 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -69,7 +69,10 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
     <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
-    <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
+    <div class="bs-docs-sidenote">
+    	<h4>jQuery required</h4>
+    	<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">101 template</a>.</p>
+    </div>
   </div>
 
   <!-- Examples
@@ -627,7 +630,7 @@ title: Bootstrap Documentation
     <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
     <h3>Small text</h3>
-    <p>For de-emphasizing inline or blocks of text, <small>use the small tag</small> to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
+    <p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
     <div class="bs-docs-example">
       <p><small>This line of text is meant to be treated as fine print.</small></p>
     </div>
@@ -1011,7 +1014,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Add any of the following classes to the <code>.table</code> base class.</p>
 
     <h3 id="tables-striped">Striped</h3>
-    <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
+    <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
+    </div>
+    
     <div class="bs-docs-example">
       <table class="table table-striped">
         <thead>
@@ -1396,7 +1405,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Inputs</h3>
     <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
-    <p>Requires the use of a specified <code>type</code> at all times.</p>
+    <div class="bs-docs-sidenote">
+    	<h4>Type declaration required</h4>
+    	<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
+    </div>
     <form class="bs-docs-example form-inline">
       <input type="text" placeholder="Text input">
     </form>
@@ -1530,8 +1542,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-invalid-inputs">Invalid inputs</h3>
-    <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-    <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
+    <p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
+    </div>
+    
     <form class="bs-docs-example form-inline">
       <input class="col-span-3" type="email" placeholder="test@example.com" required>
     </form>
@@ -1549,7 +1566,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
-    <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
+    <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
+      <p>This class will only change the appearance of <code>&lt;a class="btn"&gt;</code> buttons, not their functionality. You need to use custom JavaScript to disable links here.</p>
+    </div>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. You need to use custom JavaScript to disable the fieldset in these browsers.</p>
+    </div>
+    
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
@@ -1645,7 +1673,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="forms-input-groups">Input groups</h3>
     <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
-    <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+    </div>
+    
     <form class="bs-docs-example">
       <div class="input-group col-span-9">
         <span class="input-group-addon">@</span>
@@ -2119,8 +2152,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <a href="#" class="btn btn-large disabled">Link</a>
 {% endhighlight %}
     <p>
-      We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
+      We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
     </p>
+    <div class="bs-docs-sidenote">
+    	<h4>Link functionality not impacted</h4>
+      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
+    </div>
 
 
     <h2 id="buttons-tags">One class, multiple tags</h2>
@@ -2137,7 +2174,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">
 {% endhighlight %}
-    <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+
+		<div class="bs-docs-sidenote">
+    	<h4>Cross-browser rendering</h4>
+    	<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+    </div>
 
   </div>
 
@@ -2150,7 +2191,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1>Images</h1>
     </div>
 
-    <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
+    <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
+    </div>
     <div class="bs-docs-example bs-docs-example-images">
       <img data-src="holder.js/140x140" class="img-rounded">
       <img data-src="holder.js/140x140" class="img-circle">
@@ -2904,7 +2949,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="page-header">
       <h1>Button dropdown menus</h1>
     </div>
-    <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
+    <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Plugin dependency</h4>
+      <p>Button dropdowns require the <a href="#dropdown-plugin">dropdown plugin</a> to be included in your version of Bootstrap.</p>
+    </div>
 
     <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
     <p>Turn a button into dropdown toggle with some basic markup changes.</p>
@@ -3257,7 +3307,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="nav-disabled-links">Disabled state</h3>
-    <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
+    <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Link functionality not impacted</h4>
+      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
+    </div>
+    
     <div class="bs-docs-example">
       <ul class="nav nav-pills">
         <li><a href="#">Clickable link</a></li>
@@ -3467,10 +3523,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <h2>Optional display variations</h2>
-    <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
-
+    <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
+		
     <h3 id="navbar-fixed-top">Fixed to top</h3>
-    <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+    <p>Add <code>.navbar-fixed-top</code>.</p>
     <div class="bs-docs-example bs-navbar-top-example">
       <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
         <div class="container" style="width: auto;">
@@ -3488,6 +3544,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   ...
 </div>
 {% endhighlight %}
+		
+    <div class="bs-docs-sidenote">
+    	<h4>Body padding required</h4>
+      <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+{% highlight css linenos %}
+body {
+  padding-top: 64px;
+}
+@media screen and (min-width: 768px) {
+  body {
+    padding-top: 60px;
+  }
+}
+{% endhighlight %}
+			<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
+    </div>
 
     <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
@@ -3509,8 +3581,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
+		<div class="bs-docs-sidenote">
+    	<h4>Body padding required</h4>
+      <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+{% highlight css linenos %}
+body {
+  padding-bottom: 64px;
+}
+@media screen and (min-width: 768px) {
+  body {
+    padding-bottom: 60px;
+  }
+}
+{% endhighlight %}
+			<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
+    </div>
+
     <h3 id="navbar-static-top">Static top navbar</h3>
-    <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
+    <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
     <div class="bs-docs-example bs-navbar-top-example">
       <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
         <div class="container" style="width: auto;">
@@ -3931,6 +4019,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Self collapsing</h4>
     <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
+    
+    <div class="bs-docs-sidenote">
+    	<h4>Cross-browser compatibility</h4>
+      <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
+    </div>
 
     <h4>Adapts to active nav states</h4>
     <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
@@ -4778,7 +4871,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do not attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+    <p>Plugins can be included individually, or all at once. <strong>Do not attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
+    <div class="bs-docs-sidenote">
+    	<h4>Plugin dependencies</h4>
+      <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs (in notes like this one).</p>
+    </div>
 
     <h3 id="js-data-attrs">Data attributes</h3>
     <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
@@ -5620,7 +5717,12 @@ $('#example').tooltip(options)
         </div>
 
         <h2>Examples</h2>
-        <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
+        <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.</p>
+        
+        <div class="bs-docs-sidenote">
+        	<h4>Plugin dependency</h4>
+          <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
+        </div>
 
         <h3>Static popover</h3>
         <p>Four options are available: top, right, bottom, and left aligned.</p>
@@ -6022,7 +6124,11 @@ $('.nav-tabs').button()
 
             <h3>About</h3>
             <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
-            <p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
+            
+            <div class="bs-docs-sidenote">
+            	<h4>Plugin dependency</h4>
+              <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
+            </div>
 
             <h2>Example accordion</h2>
             <p>Using the collapse plugin, we built a simple accordion style widget:</p>
@@ -6286,7 +6392,10 @@ $('#myCollapsible').on('hidden', function () {
 
             <h3>Optional captions</h3>
             <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
-            <p><strong>Captions are hidden in mobile views</strong> and shown with viewports greater than 768px wide.</p>
+            <div class="bs-docs-sidenote">
+            	<h4>Responsive visibility</h4>
+              <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
+            </div>
             <div class="bs-docs-example">
               <div class="carousel slide bs-docs-carousel-example">
                 <ol class="carousel-indicators">
-- 
cgit v1.2.3


From 5f88887c7e979999e4852fa6207b7b2ba266db93 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 12:49:35 -0700
Subject: redo all the things

---
 docs/_includes/colophon.html |  2 +-
 docs/_layouts/home.html      |  3 --
 docs/assets/css/docs.css     | 91 +++++++-------------------------------------
 docs/index.html              | 27 ++++++++++++-
 4 files changed, 41 insertions(+), 82 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/colophon.html b/docs/_includes/colophon.html
index 5c15d7c78..2cae5ef56 100644
--- a/docs/_includes/colophon.html
+++ b/docs/_includes/colophon.html
@@ -1,7 +1,7 @@
 <!-- Footer
 ================================================== -->
 <footer class="bs-docs-footer">
-  <div class="container">
+  <div class="bs-docs-container">
 
     <div class="bs-docs-social">
       <ul class="bs-docs-social-buttons">
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
index e837f9517..184936f38 100644
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
@@ -10,9 +10,6 @@
     <!-- Page content of course! -->
     {{ content }}
 
-    <!-- Main docs footer (social buttons, copyright, etc). -->
-    {% include colophon.html %}
-
     <!-- JS and analytics only. -->
     {% include footer.html %}
 
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2ec7799ed..b2fb42c17 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,12 +26,6 @@ body {
   margin-right: -15px;
 }
 
-/*  */
-.bs-docs-footer {
-  padding-left:  15px;
-  padding-right: 15px;
-}
-
 /* Side notes for calling out things */
 .bs-docs-sidenote {
   margin: 20px 0;
@@ -81,24 +75,10 @@ section > ul li {
   position: relative;
   margin-bottom: 20px;
   padding: 30px 15px;
-  color: #fff;
-  text-align: center;
-  background-color: #b94a48;
 }
 .bs-docs-jumbotron h1 {
   font-size: 50px;
-}
-
-/* Link styles (used on .masthead-links as well) */
-.bs-docs-jumbotron a {
-  color: #fff;
-  color: rgba(255,255,255,.5);
-  -webkit-transition: all .2s ease-in-out;
-     -moz-transition: all .2s ease-in-out;
-          transition: all .2s ease-in-out;
-}
-.bs-docs-jumbotron a:hover {
-  color: #fff;
+  line-height: 1;
 }
 
 /* Download button */
@@ -109,19 +89,13 @@ section > ul li {
   font-size: 21px;
   color: #b94a48; /* redeclare to override the `.jumbotron a` */
   background-color: #fff;
+  border-color: #e5e5e5;
 }
-.bs-docs-jumbotron .btn,
 .bs-docs-jumbotron .btn:hover,
 .bs-docs-jumbotron .btn:active {
-  color: #b94a48; /* redeclare to override the `.jumbotron a` */
-  background-color: #fff;
-  border-color: #fff;
-}
-
-/* Masthead (docs home)
-------------------------- */
-.masthead h1 {
-  line-height: 1;
+  color: #fff; /* redeclare to override the `.jumbotron a` */
+  background-color: #b94a48;
+  border-color: #b94a48;
 }
 
 /* Textual links in masthead */
@@ -131,42 +105,10 @@ section > ul li {
 }
 .masthead-links li {
   display: inline;
-  padding: 0 10px;
-  color: rgba(255,255,255,.25);
-}
-
-
-
-/* Marketing section of Overview
--------------------------------------------------- */
-
-.bs-docs-marketing {
-  text-align: center;
-  color: #5a5a5a;
-}
-.bs-docs-marketing h1 {
-  margin: 60px 0 10px;
-  font-size: 50px;
-  line-height: 1;
-}
-.bs-docs-marketing h2 {
-  margin-bottom: 5px;
-}
-.bs-docs-marketing p {
-  font-size: 16px;
-  line-height: 1.4;
-}
-.bs-docs-marketing .marketing-byline {
-  margin-bottom: 40px;
-  font-size: 21px;
-  font-weight: 300;
-  line-height: 1.25;
   color: #999;
 }
-.marketing-img {
-  display: block;
-  margin: 30px auto 10px;
-  max-height: 145px;
+.masthead-links li + li {
+  margin-left: 20px;
 }
 
 
@@ -309,9 +251,6 @@ section > ul li {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.prettyprint .linenums {
-  /*margin-left: 0;*/
-}
 
 /* Tweak content of examples for optimum awesome */
 .bs-docs-example > p:last-child,
@@ -585,7 +524,6 @@ section > ul li {
 -------------------------------------------------- */
 
 .bs-docs-footer {
-  text-align: center;
   padding-top: 30px;
   padding-bottom: 30px;
   margin-top: 100px;
@@ -608,22 +546,23 @@ section > ul li {
 
 /* Social proof buttons from GitHub & Twitter */
 .bs-docs-social {
-  margin-top: 10px;
+  margin-top: 40px;
   margin-bottom: 20px;
-  text-align: center;
+  border-top: 1px solid #e5e5e5;
 }
 /* Quick links on Home */
 .bs-docs-social-buttons {
   display: inline-block;
   margin: 0;
-  padding: 0 10px;
   list-style: none;
 }
 .bs-docs-social-buttons li {
   display: inline-block;
-  padding: 5px 8px;
   line-height: 1;
 }
+.bs-docs-social-buttons li + li {
+  margin-left: 15px;
+}
 .bs-docs-social-buttons .twitter-follow-button {
   width: 225px !important;
 }
@@ -739,8 +678,7 @@ input.focused {
   }
 
   /* Undo custom padding */
-  .bs-docs-container,
-  .bs-home-container {
+  .bs-docs-container {
     padding-left: 0;
     padding-right: 0;
   }
@@ -759,9 +697,8 @@ input.focused {
     font-size: 100px;
   }
   .masthead p {
+    max-width: 70%;
     font-size: 30px;
-    margin-left: 10%;
-    margin-right: 10%;
   }
   .subhead {
     padding-top:    60px;
diff --git a/docs/index.html b/docs/index.html
index b2e6aa432..0349069fb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,12 +5,31 @@ title: Bootstrap
 
 <div class="bs-docs-jumbotron masthead">
   <div class="container">
+
     <h1>Bootstrap</h1>
     <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
     <p>
       <a href="assets/bootstrap.zip" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a>
       <a href="./docs/" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Docs', 'View docs']);">View docs</a>
     </p>
+
+    <div class="bs-docs-social">
+      <ul class="bs-docs-social-buttons">
+        <li>
+          <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+        </li>
+        <li>
+          <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
+        </li>
+        <li class="follow-btn">
+          <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
+        </li>
+        <li class="tweet-btn">
+          <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+        </li>
+      </ul>
+    </div>
+
     <ul class="masthead-links">
       <li>
         <a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
@@ -18,12 +37,17 @@ title: Bootstrap
       <li>
         <a href="./docs/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
       </li>
+      <li>
+        <a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
+      </li>
       <li>Version 3.0.0</li>
     </ul>
+
   </div>
 </div>
 
-<div class="container bs-home-container">
+
+<!-- <div class="container bs-home-container">
 
   <div class="bs-docs-marketing">
 
@@ -76,3 +100,4 @@ title: Bootstrap
   </div>
 
 </div>
+ -->
\ No newline at end of file
-- 
cgit v1.2.3


From f78945ccc9c848318f2a2e58d3ea1cc2c3ea6b61 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 12:54:02 -0700
Subject: More contrast with code snippets in sidenotes

---
 docs/assets/css/docs.css | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2ec7799ed..67b369692 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -45,6 +45,9 @@ body {
 .bs-docs-sidenote p:last-child {
   margin-bottom: 0;
 }
+.bs-docs-sidenote code {
+  background-color: #fff;
+}
 
 
 /* Sections
-- 
cgit v1.2.3


From 32761b33036eb3a0e186d310b56877b1c994ac89 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 12:54:56 -0700
Subject: use spaces for indenting, not tabs /cc @juthilo

---
 docs/docs.html | 84 ++++++++++++++++++++++++++++------------------------------
 1 file changed, 41 insertions(+), 43 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index ce0a99f0d..c57ced0d2 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -70,8 +70,8 @@ title: Bootstrap Documentation
 
     <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
     <div class="bs-docs-sidenote">
-    	<h4>jQuery required</h4>
-    	<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">101 template</a>.</p>
+      <h4>jQuery required</h4>
+      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">starter template</a>.</p>
     </div>
   </div>
 
@@ -1015,12 +1015,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="tables-striped">Striped</h3>
     <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
-    
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
     </div>
-    
     <div class="bs-docs-example">
       <table class="table table-striped">
         <thead>
@@ -1406,8 +1404,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Inputs</h3>
     <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
     <div class="bs-docs-sidenote">
-    	<h4>Type declaration required</h4>
-    	<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
+      <h4>Type declaration required</h4>
+      <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
     <form class="bs-docs-example form-inline">
       <input type="text" placeholder="Text input">
@@ -1543,12 +1541,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="forms-invalid-inputs">Invalid inputs</h3>
     <p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
     </div>
-    
+
     <form class="bs-docs-example form-inline">
       <input class="col-span-3" type="email" placeholder="test@example.com" required>
     </form>
@@ -1567,17 +1565,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
     <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
+      <h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
       <p>This class will only change the appearance of <code>&lt;a class="btn"&gt;</code> buttons, not their functionality. You need to use custom JavaScript to disable links here.</p>
     </div>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. You need to use custom JavaScript to disable the fieldset in these browsers.</p>
     </div>
-    
+
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
@@ -1673,12 +1671,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="forms-input-groups">Input groups</h3>
     <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
     </div>
-    
+
     <form class="bs-docs-example">
       <div class="input-group col-span-9">
         <span class="input-group-addon">@</span>
@@ -2155,7 +2153,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
     </p>
     <div class="bs-docs-sidenote">
-    	<h4>Link functionality not impacted</h4>
+      <h4>Link functionality not impacted</h4>
       <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
     </div>
 
@@ -2175,9 +2173,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <input class="btn" type="submit" value="Submit">
 {% endhighlight %}
 
-		<div class="bs-docs-sidenote">
-    	<h4>Cross-browser rendering</h4>
-    	<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+    <div class="bs-docs-sidenote">
+      <h4>Cross-browser rendering</h4>
+      <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
     </div>
 
   </div>
@@ -2193,7 +2191,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>
     <div class="bs-docs-example bs-docs-example-images">
@@ -2950,9 +2948,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1>Button dropdown menus</h1>
     </div>
     <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Plugin dependency</h4>
+      <h4>Plugin dependency</h4>
       <p>Button dropdowns require the <a href="#dropdown-plugin">dropdown plugin</a> to be included in your version of Bootstrap.</p>
     </div>
 
@@ -3308,12 +3306,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="nav-disabled-links">Disabled state</h3>
     <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Link functionality not impacted</h4>
+      <h4>Link functionality not impacted</h4>
       <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
     </div>
-    
+
     <div class="bs-docs-example">
       <ul class="nav nav-pills">
         <li><a href="#">Clickable link</a></li>
@@ -3524,7 +3522,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2>Optional display variations</h2>
     <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
-		
+
     <h3 id="navbar-fixed-top">Fixed to top</h3>
     <p>Add <code>.navbar-fixed-top</code>.</p>
     <div class="bs-docs-example bs-navbar-top-example">
@@ -3544,9 +3542,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   ...
 </div>
 {% endhighlight %}
-		
+
     <div class="bs-docs-sidenote">
-    	<h4>Body padding required</h4>
+      <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
 {% highlight css linenos %}
 body {
@@ -3558,7 +3556,7 @@ body {
   }
 }
 {% endhighlight %}
-			<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
+      <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
     </div>
 
     <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
@@ -3581,8 +3579,8 @@ body {
 </div>
 {% endhighlight %}
 
-		<div class="bs-docs-sidenote">
-    	<h4>Body padding required</h4>
+    <div class="bs-docs-sidenote">
+      <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
 {% highlight css linenos %}
 body {
@@ -3594,7 +3592,7 @@ body {
   }
 }
 {% endhighlight %}
-			<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
+      <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
     </div>
 
     <h3 id="navbar-static-top">Static top navbar</h3>
@@ -4019,9 +4017,9 @@ body {
 
     <h4>Self collapsing</h4>
     <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
-    
+
     <div class="bs-docs-sidenote">
-    	<h4>Cross-browser compatibility</h4>
+      <h4>Cross-browser compatibility</h4>
       <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
     </div>
 
@@ -4873,7 +4871,7 @@ body {
     <h3 id="js-individual-compiled">Individual or compiled</h3>
     <p>Plugins can be included individually, or all at once. <strong>Do not attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
     <div class="bs-docs-sidenote">
-    	<h4>Plugin dependencies</h4>
+      <h4>Plugin dependencies</h4>
       <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs (in notes like this one).</p>
     </div>
 
@@ -5718,9 +5716,9 @@ $('#example').tooltip(options)
 
         <h2>Examples</h2>
         <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.</p>
-        
+
         <div class="bs-docs-sidenote">
-        	<h4>Plugin dependency</h4>
+          <h4>Plugin dependency</h4>
           <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
         </div>
 
@@ -6124,9 +6122,9 @@ $('.nav-tabs').button()
 
             <h3>About</h3>
             <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
-            
+
             <div class="bs-docs-sidenote">
-            	<h4>Plugin dependency</h4>
+              <h4>Plugin dependency</h4>
               <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
             </div>
 
@@ -6393,7 +6391,7 @@ $('#myCollapsible').on('hidden', function () {
             <h3>Optional captions</h3>
             <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
             <div class="bs-docs-sidenote">
-            	<h4>Responsive visibility</h4>
+              <h4>Responsive visibility</h4>
               <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
             </div>
             <div class="bs-docs-example">
-- 
cgit v1.2.3


From 0a84a7c43d6eedcf25997857ed7ea30979108354 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 12:56:21 -0700
Subject: shorter copy

---
 docs/docs.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index c57ced0d2..d1c99fd92 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1568,12 +1568,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <div class="bs-docs-sidenote">
       <h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
-      <p>This class will only change the appearance of <code>&lt;a class="btn"&gt;</code> buttons, not their functionality. You need to use custom JavaScript to disable links here.</p>
+      <p>This class will only change the appearance of <code>&lt;a class="btn"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
     </div>
 
     <div class="bs-docs-sidenote">
       <h4>Cross-browser compatibility</h4>
-      <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. You need to use custom JavaScript to disable the fieldset in these browsers.</p>
+      <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
     </div>
 
     <form class="bs-docs-example form-inline">
@@ -2154,7 +2154,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </p>
     <div class="bs-docs-sidenote">
       <h4>Link functionality not impacted</h4>
-      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
+      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
     </div>
 
 
@@ -3309,7 +3309,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <div class="bs-docs-sidenote">
       <h4>Link functionality not impacted</h4>
-      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.</p>
+      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
     </div>
 
     <div class="bs-docs-example">
-- 
cgit v1.2.3


From ccb6ac570f7b4cc022c29f42a4b36c667ba6eb1e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 13:00:53 -0700
Subject: lighter .highlight in sidenotes as well

---
 docs/assets/css/docs.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 67b369692..87460ca98 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -45,7 +45,8 @@ body {
 .bs-docs-sidenote p:last-child {
   margin-bottom: 0;
 }
-.bs-docs-sidenote code {
+.bs-docs-sidenote code,
+.bs-docs-sidenote .highlight {
   background-color: #fff;
 }
 
-- 
cgit v1.2.3


From 526534f337b1c2b60b08189618988256f0775cbd Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 13:01:00 -0700
Subject: more copy edits to sidenotes

---
 docs/docs.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index d1c99fd92..976396eba 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4279,8 +4279,7 @@ body {
 
     <div class="bs-docs-sidenote">
       <h4>Cross-browser compatibility</h4>
-      <p>Progress bars use CSS3 transitions and animations to achieve some of their effects.</p>
-      <p>These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
+      <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
     </div>
 
     <h3 id="progress-basic">Basic</h3>
@@ -5386,7 +5385,7 @@ $('.navbar').scrollspy()
 
           <div class="bs-docs-sidenote">
             <h4>Resolvable ID targets required</h4>
-            <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
+            <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
           </div>
 
           <h3>Methods</h3>
-- 
cgit v1.2.3


From 8d9106f2c50d4eb1e3648ad6db07e03f4c15f4d8 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 15:32:52 -0700
Subject: nuke hidden homepage content

---
 docs/assets/css/docs.css |  1 +
 docs/index.html          | 56 ------------------------------------------------
 2 files changed, 1 insertion(+), 56 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0758911ee..86a6e474d 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -552,6 +552,7 @@ section > ul li {
 .bs-docs-social {
   margin-top: 40px;
   margin-bottom: 20px;
+  padding-top: 39px;
   border-top: 1px solid #e5e5e5;
 }
 /* Quick links on Home */
diff --git a/docs/index.html b/docs/index.html
index 0349069fb..28bd6f6ac 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -45,59 +45,3 @@ title: Bootstrap
 
   </div>
 </div>
-
-
-<!-- <div class="container bs-home-container">
-
-  <div class="bs-docs-marketing">
-
-    <h1>Introducing Bootstrap.</h1>
-    <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
-
-    <div class="row">
-      <div class="col-span-4">
-        <img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
-        <h2>By nerds, for nerds.</h2>
-        <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
-      </div>
-      <div class="col-span-4">
-        <img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
-        <h2>Made for everyone.</h2>
-        <p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
-      </div>
-      <div class="col-span-4">
-        <img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
-        <h2>Packed with features.</h2>
-        <p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./docs/#js">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
-      </div>
-    </div>
-
-    <h1>Built with Bootstrap.</h1>
-    <p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./docs/#examples">browse the examples</a>.</p>
-    <div class="row bs-docs-gallery">
-      <div class="col-span-3">
-        <a class="thumbnail" href="http://delicious.com" target="_blank">
-          <img src="http://expo.getbootstrap.com/screenshots/delicious.jpg" alt="Delicious">
-        </a>
-      </div>
-      <div class="col-span-3">
-        <a class="thumbnail" href="https://yourkarma.com" target="_blank">
-          <img src="http://expo.getbootstrap.com/screenshots/karma.jpg" alt="Karma">
-        </a>
-      </div>
-      <div class="col-span-3">
-        <a class="thumbnail" href="http://soundready.fm/" target="_blank">
-          <img src="http://expo.getbootstrap.com/screenshots/soundready.jpg" alt="SoundReady">
-        </a>
-      </div>
-      <div class="col-span-3">
-        <a class="thumbnail" href="http://kippt.com/" target="_blank">
-          <img src="http://expo.getbootstrap.com/screenshots/kippt.jpg" alt="Kippt">
-        </a>
-      </div>
-    </div>
-
-  </div>
-
-</div>
- -->
\ No newline at end of file
-- 
cgit v1.2.3


From 7dca242b5e9563ce0d4ea4820557ace18519b8b6 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 15:33:48 -0700
Subject: nuke all the assets

---
 docs/assets/img/bootstrap-docs-readme.png            | Bin 30612 -> 0 bytes
 docs/assets/img/bs-docs-bootstrap-features.png       | Bin 11244 -> 0 bytes
 docs/assets/img/bs-docs-masthead-pattern.png         | Bin 6450 -> 0 bytes
 docs/assets/img/bs-docs-responsive-illustrations.png | Bin 10572 -> 0 bytes
 docs/assets/img/bs-docs-twitter-github.png           | Bin 30968 -> 0 bytes
 docs/assets/img/grid-baseline-20px.png               | Bin 84 -> 0 bytes
 6 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 docs/assets/img/bootstrap-docs-readme.png
 delete mode 100644 docs/assets/img/bs-docs-bootstrap-features.png
 delete mode 100644 docs/assets/img/bs-docs-masthead-pattern.png
 delete mode 100644 docs/assets/img/bs-docs-responsive-illustrations.png
 delete mode 100644 docs/assets/img/bs-docs-twitter-github.png
 delete mode 100644 docs/assets/img/grid-baseline-20px.png

(limited to 'docs')

diff --git a/docs/assets/img/bootstrap-docs-readme.png b/docs/assets/img/bootstrap-docs-readme.png
deleted file mode 100644
index 36603bd3b..000000000
Binary files a/docs/assets/img/bootstrap-docs-readme.png and /dev/null differ
diff --git a/docs/assets/img/bs-docs-bootstrap-features.png b/docs/assets/img/bs-docs-bootstrap-features.png
deleted file mode 100644
index 7cd8501ae..000000000
Binary files a/docs/assets/img/bs-docs-bootstrap-features.png and /dev/null differ
diff --git a/docs/assets/img/bs-docs-masthead-pattern.png b/docs/assets/img/bs-docs-masthead-pattern.png
deleted file mode 100644
index 75c46a152..000000000
Binary files a/docs/assets/img/bs-docs-masthead-pattern.png and /dev/null differ
diff --git a/docs/assets/img/bs-docs-responsive-illustrations.png b/docs/assets/img/bs-docs-responsive-illustrations.png
deleted file mode 100644
index 77c8f18f5..000000000
Binary files a/docs/assets/img/bs-docs-responsive-illustrations.png and /dev/null differ
diff --git a/docs/assets/img/bs-docs-twitter-github.png b/docs/assets/img/bs-docs-twitter-github.png
deleted file mode 100644
index 06100f398..000000000
Binary files a/docs/assets/img/bs-docs-twitter-github.png and /dev/null differ
diff --git a/docs/assets/img/grid-baseline-20px.png b/docs/assets/img/grid-baseline-20px.png
deleted file mode 100644
index ce8c69ca2..000000000
Binary files a/docs/assets/img/grid-baseline-20px.png and /dev/null differ
-- 
cgit v1.2.3


From 02eba5e5fc624189fdbc154ab1adc81275d027bb Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 16:31:52 -0700
Subject: center

---
 docs/assets/css/docs.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 86a6e474d..3f3a253c8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -79,6 +79,7 @@ section > ul li {
   position: relative;
   margin-bottom: 20px;
   padding: 30px 15px;
+  text-align: center;
 }
 .bs-docs-jumbotron h1 {
   font-size: 50px;
@@ -550,10 +551,8 @@ section > ul li {
 
 /* Social proof buttons from GitHub & Twitter */
 .bs-docs-social {
-  margin-top: 40px;
+  margin-top: 80px;
   margin-bottom: 20px;
-  padding-top: 39px;
-  border-top: 1px solid #e5e5e5;
 }
 /* Quick links on Home */
 .bs-docs-social-buttons {
@@ -702,7 +701,8 @@ input.focused {
     font-size: 100px;
   }
   .masthead p {
-    max-width: 70%;
+    margin-left: 15%;
+    margin-right: 15%;
     font-size: 30px;
   }
   .subhead {
-- 
cgit v1.2.3


From ab7070bb49cf4cd68d19c84ce5a50ee939b9589d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 19:45:32 -0700
Subject: change var from @table-border to @table-border-color

---
 docs/customize.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/customize.html b/docs/customize.html
index 61a789b1a..e445ccab9 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -248,7 +248,7 @@ title: Customize and download
                 <input type="text" placeholder="#f9f9f9">
                 <label>@table-background-hover</label>
                 <input type="text" placeholder="#f5f5f5">
-                <label>@table-border</label>
+                <label>@table-border-color</label>
                 <input type="text" placeholder="#ddd">
 
                 <h3>Forms</h3>
-- 
cgit v1.2.3


From 5471ce8ea3471562cc56dd3e349982c54f6ed624 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 14 Apr 2013 20:33:10 -0700
Subject: Fixes #5256: Use > selector for better nesting of tables

---
 docs/assets/css/bootstrap.css | 90 +++++++++++++++++++++++--------------------
 1 file changed, 48 insertions(+), 42 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 74cb44246..616661fa4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1026,15 +1026,17 @@ th {
   margin-bottom: 20px;
 }
 
-.table th,
-.table td {
+.table thead > tr > th,
+.table tbody > tr > th,
+.table thead > tr > td,
+.table tbody > tr > td {
   padding: 8px;
   line-height: 20px;
   vertical-align: top;
   border-top: 1px solid #dddddd;
 }
 
-.table thead th {
+.table thead > tr > th {
   vertical-align: bottom;
 }
 
@@ -1055,8 +1057,10 @@ th {
   background-color: #ffffff;
 }
 
-.table-condensed th,
-.table-condensed td {
+.table-condensed thead > tr > th,
+.table-condensed tbody > tr > th,
+.table-condensed thead > tr > td,
+.table-condensed tbody > tr > td {
   padding: 4px 5px;
 }
 
@@ -1067,70 +1071,72 @@ th {
   border-radius: 4px;
 }
 
-.table-bordered th,
-.table-bordered td {
+.table-bordered thead > tr > th,
+.table-bordered tbody > tr > th,
+.table-bordered thead > tr > td,
+.table-bordered tbody > tr > td {
   border-left: 1px solid #dddddd;
 }
 
-.table-bordered caption + thead tr:first-child th,
-.table-bordered caption + tbody tr:first-child th,
-.table-bordered caption + tbody tr:first-child td,
-.table-bordered colgroup + thead tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child td,
-.table-bordered thead:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child td {
+.table-bordered caption + thead > tr:first-child th,
+.table-bordered caption + tbody > tr:first-child th,
+.table-bordered caption + tbody > tr:first-child td,
+.table-bordered colgroup + thead > tr:first-child th,
+.table-bordered colgroup + tbody > tr:first-child th,
+.table-bordered colgroup + tbody > tr:first-child td,
+.table-bordered thead:first-child > tr:first-child th,
+.table-bordered tbody:first-child > tr:first-child th,
+.table-bordered tbody:first-child > tr:first-child td {
   border-top: 0;
 }
 
-.table-bordered thead:first-child tr:first-child > th:first-child,
-.table-bordered tbody:first-child tr:first-child > td:first-child,
-.table-bordered tbody:first-child tr:first-child > th:first-child {
+.table-bordered thead:first-child > tr:first-child > th:first-child,
+.table-bordered tbody:first-child > tr:first-child > td:first-child,
+.table-bordered tbody:first-child > tr:first-child > th:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered thead:first-child tr:first-child > th:last-child,
-.table-bordered tbody:first-child tr:first-child > td:last-child,
-.table-bordered tbody:first-child tr:first-child > th:last-child {
+.table-bordered thead:first-child > tr:first-child > th:last-child,
+.table-bordered tbody:first-child > tr:first-child > td:last-child,
+.table-bordered tbody:first-child > tr:first-child > th:last-child {
   border-top-right-radius: 4px;
 }
 
-.table-bordered thead:last-child tr:last-child > th:first-child,
-.table-bordered tbody:last-child tr:last-child > td:first-child,
-.table-bordered tbody:last-child tr:last-child > th:first-child,
-.table-bordered tfoot:last-child tr:last-child > td:first-child,
-.table-bordered tfoot:last-child tr:last-child > th:first-child {
+.table-bordered thead:last-child > tr:last-child > th:first-child,
+.table-bordered tbody:last-child > tr:last-child > td:first-child,
+.table-bordered tbody:last-child > tr:last-child > th:first-child,
+.table-bordered tfoot:last-child > tr:last-child > td:first-child,
+.table-bordered tfoot:last-child > tr:last-child > th:first-child {
   border-bottom-left-radius: 4px;
 }
 
-.table-bordered thead:last-child tr:last-child > th:last-child,
-.table-bordered tbody:last-child tr:last-child > td:last-child,
-.table-bordered tbody:last-child tr:last-child > th:last-child,
-.table-bordered tfoot:last-child tr:last-child > td:last-child,
-.table-bordered tfoot:last-child tr:last-child > th:last-child {
+.table-bordered thead:last-child > tr:last-child > th:last-child,
+.table-bordered tbody:last-child > tr:last-child > td:last-child,
+.table-bordered tbody:last-child > tr:last-child > th:last-child,
+.table-bordered tfoot:last-child > tr:last-child > td:last-child,
+.table-bordered tfoot:last-child > tr:last-child > th:last-child {
   border-bottom-right-radius: 4px;
 }
 
-.table-bordered tfoot + tbody:last-child tr:last-child > td:first-child {
+.table-bordered tfoot + tbody:last-child > tr:last-child > td:first-child {
   border-bottom-left-radius: 0;
 }
 
-.table-bordered tfoot + tbody:last-child tr:last-child > td:last-child {
+.table-bordered tfoot + tbody:last-child > tr:last-child > td:last-child {
   border-bottom-right-radius: 0;
 }
 
-.table-bordered caption + thead tr:first-child th:first-child,
-.table-bordered caption + tbody tr:first-child td:first-child,
-.table-bordered colgroup + thead tr:first-child th:first-child,
-.table-bordered colgroup + tbody tr:first-child td:first-child {
+.table-bordered caption + thead > tr:first-child > th:first-child,
+.table-bordered caption + tbody > tr:first-child > td:first-child,
+.table-bordered colgroup + thead > tr:first-child > th:first-child,
+.table-bordered colgroup + tbody > tr:first-child > td:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered caption + thead tr:first-child th:last-child,
-.table-bordered caption + tbody tr:first-child td:last-child,
-.table-bordered colgroup + thead tr:first-child th:last-child,
-.table-bordered colgroup + tbody tr:first-child td:last-child {
+.table-bordered caption + thead > tr:first-child > th:last-child,
+.table-bordered caption + tbody > tr:first-child > td:last-child,
+.table-bordered colgroup + thead > tr:first-child > th:last-child,
+.table-bordered colgroup + tbody > tr:first-child > td:last-child {
   border-top-right-radius: 4px;
 }
 
-- 
cgit v1.2.3


From dc97a1967b81e994ebb31ed3cad89f58794b46b9 Mon Sep 17 00:00:00 2001
From: Artur Kwiatkowski <artur@ciecieprojektow.pl>
Date: Tue, 16 Apr 2013 16:45:51 +0200
Subject: more nested navs

---
 docs/assets/css/bootstrap.css | 97 +++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 46 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 616661fa4..7ab329bbe 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3262,10 +3262,34 @@ button.close {
   background-color: #eeeeee;
 }
 
+.nav > li.disabled > a {
+  color: #999999;
+}
+
+.nav > li.disabled > a:hover,
+.nav > li.disabled > a:focus {
+  color: #999999;
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
+.nav > li + .nav-header {
+  margin-top: 9px;
+}
+
 .nav > .pull-right {
   float: right;
 }
 
+.nav .divider {
+  height: 2px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+}
+
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
@@ -3286,9 +3310,9 @@ button.close {
   border-color: #eeeeee #eeeeee #dddddd;
 }
 
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
   color: #555555;
   cursor: default;
   background-color: #ffffff;
@@ -3296,6 +3320,27 @@ button.close {
   border-bottom-color: transparent;
 }
 
+.nav-tabs.nav-justified {
+  width: 100%;
+  border-bottom: 0;
+}
+
+.nav-tabs.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  text-align: center;
+}
+
+.nav-tabs.nav-justified > li > a {
+  margin-right: 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs.nav-justified > .active > a {
+  border-bottom-color: #ffffff;
+}
+
 .nav-pills > li {
   float: left;
 }
@@ -3308,9 +3353,9 @@ button.close {
   margin-left: 2px;
 }
 
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover,
-.nav-pills > .active > a:focus {
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
   color: #fff;
   background-color: #428bca;
 }
@@ -3335,34 +3380,6 @@ button.close {
   text-align: center;
 }
 
-.nav-justified.nav-tabs {
-  border-bottom: 0;
-}
-
-.nav-justified.nav-tabs > li > a {
-  border-bottom: 1px solid #ddd;
-}
-
-.nav-justified.nav-tabs > .active > a {
-  border-bottom-color: #ffffff;
-}
-
-.nav-justified > li > a {
-  margin-right: 0;
-}
-
-.nav > .disabled > a {
-  color: #999999;
-}
-
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
-  color: #999999;
-  text-decoration: none;
-  cursor: default;
-  background-color: transparent;
-}
-
 .nav-header {
   display: block;
   padding: 3px 15px;
@@ -3374,18 +3391,6 @@ button.close {
   text-transform: uppercase;
 }
 
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-.nav .divider {
-  height: 2px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid #ffffff;
-}
-
 .tabbable:before,
 .tabbable:after {
   display: table;
-- 
cgit v1.2.3


From 5892cea20723c41532c61fe39b758ec86972e982 Mon Sep 17 00:00:00 2001
From: wangshishuo <wangshishuo@wangshishuo-Inspiron-5420.(none)>
Date: Wed, 17 Apr 2013 12:27:30 +0800
Subject: change nav's #tables-hover to #tables-hover-rows

---
 docs/_includes/docs-nav.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index fa20d9e98..c10bea4d3 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -42,7 +42,7 @@
         <li><a href="#tables-example">Basic example</a></li>
         <li><a href="#tables-striped">Zebra striping</a></li>
         <li><a href="#tables-bordered">Bordered tables</a></li>
-        <li><a href="#tables-hover">Hover rows</a></li>
+        <li><a href="#tables-hover-rows">Hover rows</a></li>
         <li><a href="#tables-condensed">Condensed tables</a></li>
         <li><a href="#tables-row-classes">Contextual row classes</a></li>
       </ul>
-- 
cgit v1.2.3


From 4bd6abaff2ce71f78e6f8c9fc2e42d70122c6de2 Mon Sep 17 00:00:00 2001
From: Artur Kwiatkowski <artur@ciecieprojektow.pl>
Date: Wed, 17 Apr 2013 19:47:23 +0200
Subject: applied @pagination-bg for .disabled state instead of hardcoded color
 in hex

---
 docs/assets/css/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7ab329bbe..bf2a529b4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4242,7 +4242,7 @@ button.close {
 .pager .disabled > span {
   color: #999999;
   cursor: default;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .modal-open {
-- 
cgit v1.2.3


From d3e0d4a7baad213ccbfa8049d5f920ed1863b76b Mon Sep 17 00:00:00 2001
From: Jeremy Denoun <denoun_j@epita.fr>
Date: Thu, 18 Apr 2013 17:05:50 +0200
Subject: update docs

---
 docs/assets/css/bootstrap.css | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2f56af33f..145e08a5b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5813,6 +5813,9 @@ a.badge:focus {
      -moz-transition: width 0.6s ease;
        -o-transition: width 0.6s ease;
           transition: width 0.6s ease;
+  -webkit-backface-visibility: hidden;
+     -moz-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 
 .progress .bar + .bar {
-- 
cgit v1.2.3


From 7b5fcc2c9ae7631e114cec106c2f14c560617cbd Mon Sep 17 00:00:00 2001
From: Fabien <fabien.creative@gmail.com>
Date: Fri, 19 Apr 2013 02:48:08 +0200
Subject: Remove dupe css rule of table element

 This are already declare in normalize
---
 docs/assets/css/bootstrap.css | 2 --
 1 file changed, 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7ab329bbe..e6382cdee 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1013,8 +1013,6 @@ pre code {
 table {
   max-width: 100%;
   background-color: transparent;
-  border-collapse: collapse;
-  border-spacing: 0;
 }
 
 th {
-- 
cgit v1.2.3


From 39bb8146f863474eee6c7daa946ea07f6ce2aa04 Mon Sep 17 00:00:00 2001
From: Artur Kwiatkowski <artur@ciecieprojektow.pl>
Date: Fri, 19 Apr 2013 21:31:55 +0200
Subject: more nested labels component

---
 docs/assets/css/bootstrap.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b9809980c..5e5c7d44d 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4784,6 +4784,7 @@ a.thumbnail:focus {
 }
 
 .label {
+  display: inline;
   padding: .25em .6em;
   font-size: 75%;
   font-weight: 500;
-- 
cgit v1.2.3


From ce719925af8d0d4f443f46b6a93bd4e2d59aca8e Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sat, 20 Apr 2013 13:25:22 -0400
Subject: Fix carousel examples within docs

---
 docs/docs.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 976396eba..8eaab75d4 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -6332,11 +6332,11 @@ $('#myCollapsible').on('hidden', function () {
             <h2>Examples</h2>
             <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
             <div class="bs-docs-example">
-              <div class="carousel slide bs-docs-carousel-example">
+              <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
                 <ol class="carousel-indicators">
-                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                  <li data-target="#myCarousel" data-slide-to="1"></li>
-                  <li data-target="#myCarousel" data-slide-to="2"></li>
+                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                 </ol>
                 <div class="carousel-inner">
                   <div class="item active">
@@ -6349,21 +6349,21 @@ $('#myCollapsible').on('hidden', function () {
                     <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
                   </div>
                 </div>
-                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right"></span>
                 </a>
               </div>
             </div><!-- /example -->
 {% highlight html linenos %}
-<div class="carousel slide">
+<div id="carousel-example-generic" class="carousel slide">
   <!-- Indicators -->
   <ol class="carousel-indicators">
-    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-    <li data-target="#myCarousel" data-slide-to="1"></li>
-    <li data-target="#myCarousel" data-slide-to="2"></li>
+    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
 
   <!-- Wrapper for slides -->
@@ -6378,10 +6378,10 @@ $('#myCollapsible').on('hidden', function () {
   </div>
 
   <!-- Controls -->
-  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
-  <a class="right carousel-control" href="#myCarousel" data-slide="next">
+  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
 </div>
@@ -6394,11 +6394,11 @@ $('#myCollapsible').on('hidden', function () {
               <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
             </div>
             <div class="bs-docs-example">
-              <div class="carousel slide bs-docs-carousel-example">
+              <div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
                 <ol class="carousel-indicators">
-                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                  <li data-target="#myCarousel" data-slide-to="1"></li>
-                  <li data-target="#myCarousel" data-slide-to="2"></li>
+                  <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
+                  <li data-target="#carousel-example-captions" data-slide-to="1"></li>
+                  <li data-target="#carousel-example-captions" data-slide-to="2"></li>
                 </ol>
                 <div class="carousel-inner">
                   <div class="item active">
@@ -6423,10 +6423,10 @@ $('#myCollapsible').on('hidden', function () {
                     </div>
                   </div>
                 </div>
-                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right"></span>
                 </a>
               </div>
-- 
cgit v1.2.3


From afdab35aca4ccfbe9214c4cdf6f6b1d2da595cad Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 12:09:08 -0700
Subject: Fixes #7640: only reset margin on last-child p within blockquotes

---
 docs/assets/css/bootstrap.css | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b9809980c..1e86761f4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -623,18 +623,21 @@ abbr.initialism {
 }
 
 blockquote {
-  padding: 0 0 0 15px;
+  padding: 10px 20px;
   margin: 0 0 20px;
   border-left: 5px solid #eeeeee;
 }
 
 blockquote p {
-  margin-bottom: 0;
   font-size: 17.5px;
   font-weight: 300;
   line-height: 1.25;
 }
 
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
 blockquote small {
   display: block;
   line-height: 20px;
@@ -2874,10 +2877,9 @@ fieldset[disabled] .btn-link:focus {
   color: #ffffff;
   text-decoration: none;
   background-color: #357ebd;
-  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
   background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
-  background-image: -o-linear-gradient(top, #428bca, #357ebd);
+  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
   background-image: linear-gradient(to bottom, #428bca, #357ebd);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@@ -2889,10 +2891,9 @@ fieldset[disabled] .btn-link:focus {
   color: #ffffff;
   text-decoration: none;
   background-color: #357ebd;
-  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
   background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
-  background-image: -o-linear-gradient(top, #428bca, #357ebd);
+  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
   background-image: linear-gradient(to bottom, #428bca, #357ebd);
   background-repeat: repeat-x;
   outline: 0;
@@ -4957,7 +4958,6 @@ a.list-group-item.active > .badge,
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   -webkit-background-size: 40px 40px;
      -moz-background-size: 40px 40px;
@@ -4982,7 +4982,6 @@ a.list-group-item.active > .badge,
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
@@ -4995,7 +4994,6 @@ a.list-group-item.active > .badge,
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
@@ -5008,7 +5006,6 @@ a.list-group-item.active > .badge,
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
@@ -5021,7 +5018,6 @@ a.list-group-item.active > .badge,
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
@@ -5133,10 +5129,9 @@ a.list-group-item.active > .badge,
 .carousel-control.left {
   background-color: rgba(0, 0, 0, 0.0001);
   background-color: transparent;
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
   background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
@@ -5147,10 +5142,9 @@ a.list-group-item.active > .badge,
   left: auto;
   background-color: rgba(0, 0, 0, 0.5);
   background-color: transparent;
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
   background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
-- 
cgit v1.2.3


From a956a3258b48e697666058889b3c0add591647a2 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 12:23:27 -0700
Subject: Alternate docs mention of breadcrumbs separator, as called out in
 #7601

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 8eaab75d4..7fc72bf9c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3761,7 +3761,7 @@ body {
       <h1>Breadcrumbs <small></small></h1>
     </div>
     <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
-
+    <p>Separators are automatically added in CSS through `:after` and `content`.</p>
     <div class="bs-docs-example">
       <ul class="breadcrumb">
         <li class="active">Home</li>
-- 
cgit v1.2.3


From 70f8d77012bea29b9544a14458450adb8fbd0a2c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 12:28:36 -0700
Subject: correct grid class mention in docs

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 7fc72bf9c..bb2aa68f3 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1896,7 +1896,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-control-sizes">Control sizing</h3>
-    <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
+    <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-span-*</code> classes.</p>
 
     <h4>Relative sizing</h4>
     <p>Create larger or smaller form controls that match button sizes.</p>
-- 
cgit v1.2.3


From 04d782efabb8648bdd67c2d0d164518c01d2603e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 12:29:12 -0700
Subject: correct grid class in example code

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index bb2aa68f3..dcb379bf0 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <div class="controls">
           <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-            <input class="span2" id="inputIcon" type="text">
+            <input class="col-span-2" id="inputIcon" type="text">
           </div>
         </div>
       </div>
@@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="controls">
     <div class="input-group">
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="span2" id="inputIcon" type="text">
+      <input class="col-span-2" id="inputIcon" type="text">
     </div>
   </div>
 </div>
-- 
cgit v1.2.3


From 510c9a6ad87a1148fe59a7b8531d9b9e11b0ae17 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 12:33:09 -0700
Subject: First pass at updated responsive utilities to be mobile-first. Pulled
 from #7490 by @apotropaic

---
 docs/assets/css/bootstrap.css | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1e86761f4..d24999c4a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5310,47 +5310,67 @@ a.list-group-item.active > .badge,
 }
 
 .visible-phone {
-  display: none !important;
+  display: inherit !important;
 }
 
 .visible-tablet {
   display: none !important;
 }
 
-.hidden-desktop {
+.visible-desktop {
   display: none !important;
 }
 
-.visible-desktop {
+.hidden-phone {
+  display: none !important;
+}
+
+.hidden-tablet {
+  display: inherit !important;
+}
+
+.hidden-desktop {
   display: inherit !important;
 }
 
 @media (min-width: 768px) and (max-width: 979px) {
-  .hidden-desktop {
+  .visible-phone {
+    display: none !important;
+  }
+  .visible-tablet {
     display: inherit !important;
   }
   .visible-desktop {
-    display: none !important ;
+    display: none !important;
   }
-  .visible-tablet {
+  .hidden-phone {
     display: inherit !important;
   }
   .hidden-tablet {
     display: none !important;
   }
-}
-
-@media (max-width: 767px) {
   .hidden-desktop {
     display: inherit !important;
   }
-  .visible-desktop {
+}
+
+@media (min-width: 980px) {
+  .visible-phone {
     display: none !important;
   }
-  .visible-phone {
+  .visible-tablet {
+    display: none !important;
+  }
+  .visible-desktop {
     display: inherit !important;
   }
   .hidden-phone {
+    display: inherit !important;
+  }
+  .hidden-tablet {
+    display: inherit !important;
+  }
+  .hidden-desktop {
     display: none !important;
   }
 }
-- 
cgit v1.2.3


From 0c9b161bb889a5f47f7ef0752d90c41c9f957695 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 15:32:16 -0700
Subject: Fixes #7093: more consistent scrollspy docs

---
 docs/docs.html | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index dcb379bf0..55e3dfb72 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
           <h2>Example in navbar</h2>
           <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
           <div class="bs-docs-example">
-            <div id="navbarExample" class="navbar navbar-static">
+            <div id="navbar-example" class="navbar navbar-static">
               <div class="navbar-inner">
                 <div class="container" style="width: auto;">
                   <a class="navbar-brand" href="#">Project Name</a>
@@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
                 </div>
               </div>
             </div>
-            <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
+            <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
               <h4 id="fat">@fat</h4>
               <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
               <h4 id="mdo">@mdo</h4>
@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
           </div><!-- /example -->
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Usage</h2>
 
           <h3>Via data attributes</h3>
-          <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
+          <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
 {% highlight html linenos %}
-<body data-spy="scroll" data-target=".navbar">
+<body data-spy="scroll" data-target="#navbar-example">
   ...
 </body>
 {% endhighlight %}
@@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
           <h3>Via JavaScript</h3>
           <p>Call the scrollspy via JavaScript:</p>
 {% highlight js linenos %}
-$('.navbar').scrollspy()
+$('#navbar-example').scrollspy()
 {% endhighlight %}
 
           <div class="bs-docs-sidenote">
-- 
cgit v1.2.3


From dc4436dbc9f328f4ad6ee391b6836b6c8d0324c2 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 20 Apr 2013 15:36:11 -0700
Subject: Only use .danger for alerts, no more .error

---
 docs/assets/css/bootstrap.css | 10 +++-------
 docs/docs.html                |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d24999c4a..4553a1592 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4663,22 +4663,18 @@ button.close {
   color: #356635;
 }
 
-.alert-danger,
-.alert-error {
+.alert-danger {
   color: #b94a48;
   background-color: #f2dede;
   border-color: #eed3d7;
 }
 
-.alert-danger hr,
-.alert-error hr {
+.alert-danger hr {
   border-top-color: #e6c1c7;
 }
 
 .alert-danger > a,
-.alert-error > a,
-.alert-danger > p > a,
-.alert-error > p > a {
+.alert-danger > p > a {
   color: #953b39;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 55e3dfb72..e62e44661 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4246,7 +4246,7 @@ body {
     <h3 id="alerts-alternatives">Contextual alternatives</h3>
     <p>Add optional classes to change an alert's connotation.</p>
     <div class="bs-docs-example">
-      <div class="alert alert-error">
+      <div class="alert alert-danger">
         <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
@@ -4260,7 +4260,7 @@ body {
       </div>
     </div>
 {% highlight html linenos %}
-<div class="alert alert-error">...</div>
+<div class="alert alert-danger">...</div>
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
 {% endhighlight %}
-- 
cgit v1.2.3


From 30d6e0530effef6379fb555491bc5064668f3359 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 21 Apr 2013 14:50:44 -0700
Subject: Fixes #7577: Attempt to fix, at least, issues with Windows Phone 8
 and responsive not kicking in correctly

---
 docs/assets/css/bootstrap.css | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4553a1592..53f9a9693 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5300,6 +5300,12 @@ a.list-group-item.active > .badge,
   width: device-width;
 }
 
+@media screen and (max-width: 400px) {
+  @-ms-viewport {
+    width: 320px;
+  }
+}
+
 .hidden {
   display: none;
   visibility: hidden;
-- 
cgit v1.2.3


From 364f8330a159f9448833d88740e259219883d404 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 21 Apr 2013 18:29:06 -0700
Subject: Fixes #7648: Thumbnail caption should use @text-color variable. Also
 adds other thumbnail vars

---
 docs/assets/css/bootstrap.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 53f9a9693..f40720bf4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4711,7 +4711,8 @@ button.close {
 .img-thumbnail {
   padding: 4px;
   line-height: 20px;
-  border: 1px solid #ddd;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
@@ -4741,7 +4742,7 @@ a.thumbnail:focus {
 
 .thumbnail .caption {
   padding: 9px;
-  color: #555555;
+  color: #333333;
 }
 
 .media,
-- 
cgit v1.2.3


From e0d60b1325591a347d9e49e44be6d77401b07749 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 21 Apr 2013 19:35:36 -0700
Subject: Fixes #7617: lowercase and dash gray color vars

---
 docs/assets/css/bootstrap.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f40720bf4..624daf46c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3471,8 +3471,8 @@ button.close {
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
   color: #fff;
-  background-color: @grayLight;
-  border-color: @grayLight;
+  background-color: @gray-light;
+  border-color: @gray-light;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
@@ -3484,7 +3484,7 @@ button.close {
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover {
-  border-color: @grayLight;
+  border-color: @gray-light;
 }
 
 */
-- 
cgit v1.2.3


From 55bbb9ffd704353140cb1d42804ecd99f576f642 Mon Sep 17 00:00:00 2001
From: Artur Kwiatkowski <artur@ciecieprojektow.pl>
Date: Mon, 22 Apr 2013 15:34:23 +0200
Subject: Nuked local .a() mixins and simplified the nesting

---
 docs/assets/css/bootstrap.css | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3a6866785..c7e2b4eb1 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4795,7 +4795,9 @@ a.thumbnail:focus {
   border-radius: .25em;
 }
 
+.label[href]:hover,
 a.label:hover,
+.label[href]:focus,
 a.label:focus {
   color: #fff;
   text-decoration: none;
@@ -4810,14 +4812,6 @@ a.label:focus {
   background-color: #c9302c;
 }
 
-.label-warning {
-  background-color: #f0ad4e;
-}
-
-.label-warning[href] {
-  background-color: #ec971f;
-}
-
 .label-success {
   background-color: #5cb85c;
 }
@@ -4826,6 +4820,14 @@ a.label:focus {
   background-color: #449d44;
 }
 
+.label-warning {
+  background-color: #f0ad4e;
+}
+
+.label-warning[href] {
+  background-color: #ec971f;
+}
+
 .label-info {
   background-color: #5bc0de;
 }
-- 
cgit v1.2.3


From 8311ad513f4300ddc3360305d2831c6310f1b71a Mon Sep 17 00:00:00 2001
From: Stephen Edgar <stephen@netweb.com.au>
Date: Tue, 23 Apr 2013 17:40:41 +1000
Subject: 'docs' folder .editorconfig code guide updates

---
 docs/_includes/colophon.html           | 2 +-
 docs/_includes/footer.html             | 2 +-
 docs/_layouts/example.html             | 2 +-
 docs/assets/js/README.md               | 2 +-
 docs/assets/js/bootstrap-affix.js      | 2 +-
 docs/assets/js/bootstrap-alert.js      | 2 +-
 docs/assets/js/bootstrap-button.js     | 2 +-
 docs/assets/js/bootstrap-carousel.js   | 2 +-
 docs/assets/js/bootstrap-collapse.js   | 2 +-
 docs/assets/js/bootstrap-scrollspy.js  | 2 +-
 docs/assets/js/bootstrap-tab.js        | 2 +-
 docs/assets/js/bootstrap-transition.js | 2 +-
 docs/assets/js/bootstrap.js            | 2 +-
 docs/assets/js/bootstrap.min.js        | 2 +-
 docs/assets/js/holder/holder.js        | 2 +-
 docs/assets/js/jquery.js               | 2 +-
 docs/assets/js/respond/respond.min.js  | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/colophon.html b/docs/_includes/colophon.html
index 2cae5ef56..5018113b4 100644
--- a/docs/_includes/colophon.html
+++ b/docs/_includes/colophon.html
@@ -32,4 +32,4 @@
       <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">Changelog</a></li>
     </ul>
   </div>
-</footer>
\ No newline at end of file
+</footer>
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 71994a8c8..048f31359 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -35,4 +35,4 @@
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(t, s);
   })();
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/_layouts/example.html b/docs/_layouts/example.html
index 38510f13a..617fc8ab2 100644
--- a/docs/_layouts/example.html
+++ b/docs/_layouts/example.html
@@ -14,4 +14,4 @@
     {% include footer.html %}
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/assets/js/README.md b/docs/assets/js/README.md
index 66903c71a..b72826a2b 100644
--- a/docs/assets/js/README.md
+++ b/docs/assets/js/README.md
@@ -103,4 +103,4 @@ examples:
 
     data-toggle="button"
     data-toggle="buttons-checkbox"
-    data-toggle="buttons-radio"
\ No newline at end of file
+    data-toggle="buttons-radio"
diff --git a/docs/assets/js/bootstrap-affix.js b/docs/assets/js/bootstrap-affix.js
index 2b76881c5..e9a730654 100644
--- a/docs/assets/js/bootstrap-affix.js
+++ b/docs/assets/js/bootstrap-affix.js
@@ -114,4 +114,4 @@
   })
 
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-alert.js b/docs/assets/js/bootstrap-alert.js
index bc4567453..7a9f62e2d 100644
--- a/docs/assets/js/bootstrap-alert.js
+++ b/docs/assets/js/bootstrap-alert.js
@@ -96,4 +96,4 @@
 
   $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-button.js b/docs/assets/js/bootstrap-button.js
index 6e1aa9c81..a42baf2a8 100644
--- a/docs/assets/js/bootstrap-button.js
+++ b/docs/assets/js/bootstrap-button.js
@@ -102,4 +102,4 @@
     $btn.button('toggle')
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js
index 3a9d980c4..0dfb70f8d 100644
--- a/docs/assets/js/bootstrap-carousel.js
+++ b/docs/assets/js/bootstrap-carousel.js
@@ -204,4 +204,4 @@
     e.preventDefault()
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-collapse.js b/docs/assets/js/bootstrap-collapse.js
index 2730a48d4..7bd40c233 100644
--- a/docs/assets/js/bootstrap-collapse.js
+++ b/docs/assets/js/bootstrap-collapse.js
@@ -164,4 +164,4 @@
     $(target).collapse(option)
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js
index 8ccd43fa1..e5f0c3c1a 100644
--- a/docs/assets/js/bootstrap-scrollspy.js
+++ b/docs/assets/js/bootstrap-scrollspy.js
@@ -159,4 +159,4 @@
     })
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-tab.js b/docs/assets/js/bootstrap-tab.js
index 2914cdb17..a7a6a83e5 100644
--- a/docs/assets/js/bootstrap-tab.js
+++ b/docs/assets/js/bootstrap-tab.js
@@ -141,4 +141,4 @@
     $(this).tab('show')
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap-transition.js b/docs/assets/js/bootstrap-transition.js
index db83485bc..e1bc4021b 100644
--- a/docs/assets/js/bootstrap-transition.js
+++ b/docs/assets/js/bootstrap-transition.js
@@ -57,4 +57,4 @@
 
   })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
index 95469f900..c0c8a77bb 100644
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -2277,4 +2277,4 @@
   })
 
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js
index 646b3bc73..7f1b1a73c 100644
--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
@@ -3,4 +3,4 @@
 * Copyright 2012 Twitter, Inc.
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
-!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
+!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
diff --git a/docs/assets/js/holder/holder.js b/docs/assets/js/holder/holder.js
index 9c36d4281..71b4a47ef 100755
--- a/docs/assets/js/holder/holder.js
+++ b/docs/assets/js/holder/holder.js
@@ -398,4 +398,4 @@ if ( typeof define === "function" && define.amd ) {
 	define( "Holder", [], function () { return app; } );
 }
 
-})(Holder, window);
\ No newline at end of file
+})(Holder, window);
diff --git a/docs/assets/js/jquery.js b/docs/assets/js/jquery.js
index 006e95310..32d50cb0e 100644
--- a/docs/assets/js/jquery.js
+++ b/docs/assets/js/jquery.js
@@ -2,4 +2,4 @@
 //@ sourceMappingURL=jquery.min.map
 */(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p="1.9.1",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^[\],:{}\s]*$/,E=/(?:^|:|,)(?:\s*\[)+/g,S=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,A=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,j=/^-ms-/,D=/-([\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||"load"===e.type||"complete"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener("DOMContentLoaded",H,!1),e.removeEventListener("load",H,!1)):(o.detachEvent("onreadystatechange",H),e.detachEvent("onload",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElementById(i[2]),a&&a.parentNode){if(a.id!==i[2])return r.find(e);this.length=1,this[0]=a}return this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):b.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),b.makeArray(e,this))},selector:"",length:0,size:function(){return this.length},toArray:function(){return h.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=b.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return b.each(this,e,t)},ready:function(e){return b.ready.promise().done(e),this},slice:function(){return this.pushStack(h.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(b.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:d,sort:[].sort,splice:[].splice},b.fn.init.prototype=b.fn,b.extend=b.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},u=1,l=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},u=2),"object"==typeof s||b.isFunction(s)||(s={}),l===u&&(s=this,--u);l>u;u++)if(null!=(o=arguments[u]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(b.isPlainObject(r)||(n=b.isArray(r)))?(n?(n=!1,a=e&&b.isArray(e)?e:[]):a=e&&b.isPlainObject(e)?e:{},s[i]=b.extend(c,a,r)):r!==t&&(s[i]=r));return s},b.extend({noConflict:function(t){return e.$===b&&(e.$=u),t&&e.jQuery===b&&(e.jQuery=s),b},isReady:!1,readyWait:1,holdReady:function(e){e?b.readyWait++:b.ready(!0)},ready:function(e){if(e===!0?!--b.readyWait:!b.isReady){if(!o.body)return setTimeout(b.ready);b.isReady=!0,e!==!0&&--b.readyWait>0||(n.resolveWith(o,[b]),b.fn.trigger&&b(o).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===b.type(e)},isArray:Array.isArray||function(e){return"array"===b.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[m.call(e)]||"object":typeof e},isPlainObject:function(e){if(!e||"object"!==b.type(e)||e.nodeType||b.isWindow(e))return!1;try{if(e.constructor&&!y.call(e,"constructor")&&!y.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||y.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||o;var r=C.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=b.buildFragment([e],t,i),i&&b(i).remove(),b.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=b.trim(n),n&&k.test(n.replace(S,"@").replace(A,"]").replace(E,"")))?Function("return "+n)():(b.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||b.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&b.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(j,"ms-").replace(D,L)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,a=M(e);if(n){if(a){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(a){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:v&&!v.call("\ufeff\u00a0")?function(e){return null==e?"":v.call(e)}:function(e){return null==e?"":(e+"").replace(T,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(M(Object(e))?b.merge(n,"string"==typeof e?[e]:e):d.call(n,e)),n},inArray:function(e,t,n){var r;if(t){if(g)return g.call(t,e,n);for(r=t.length,n=n?0>n?Math.max(0,r+n):n:0;r>n;n++)if(n in t&&t[n]===e)return n}return-1},merge:function(e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else while(n[o]!==t)e[i++]=n[o++];return e.length=i,e},grep:function(e,t,n){var r,i=[],o=0,a=e.length;for(n=!!n;a>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,a=M(e),s=[];if(a)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(s[s.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(s[s.length]=r);return f.apply([],s)},guid:1,proxy:function(e,n){var r,i,o;return"string"==typeof n&&(o=e[n],n=e,e=o),b.isFunction(e)?(r=h.call(arguments,2),i=function(){return e.apply(n||this,r.concat(h.call(arguments)))},i.guid=e.guid=e.guid||b.guid++,i):t},access:function(e,n,r,i,o,a,s){var u=0,l=e.length,c=null==r;if("object"===b.type(r)){o=!0;for(u in r)b.access(e,n,u,r[u],!0,a,s)}else if(i!==t&&(o=!0,b.isFunction(i)||(s=!0),c&&(s?(n.call(e,i),n=null):(c=n,n=function(e,t,n){return c.call(b(e),n)})),n))for(;l>u;u++)n(e[u],r,s?i:i.call(e[u],u,n(e[u],r)));return o?e:c?n.call(e):l?n(e[0],r):a},now:function(){return(new Date).getTime()}}),b.ready.promise=function(t){if(!n)if(n=b.Deferred(),"complete"===o.readyState)setTimeout(b.ready);else if(o.addEventListener)o.addEventListener("DOMContentLoaded",H,!1),e.addEventListener("load",H,!1);else{o.attachEvent("onreadystatechange",H),e.attachEvent("onload",H);var r=!1;try{r=null==e.frameElement&&o.documentElement}catch(i){}r&&r.doScroll&&function a(){if(!b.isReady){try{r.doScroll("left")}catch(e){return setTimeout(a,50)}q(),b.ready()}}()}return n.promise(t)},b.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){l["[object "+t+"]"]=t.toLowerCase()});function M(e){var t=e.length,n=b.type(e);return b.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}r=b(o);var _={};function F(e){var t=_[e]={};return b.each(e.match(w)||[],function(e,n){t[n]=!0}),t}b.Callbacks=function(e){e="string"==typeof e?_[e]||F(e):b.extend({},e);var n,r,i,o,a,s,u=[],l=!e.once&&[],c=function(t){for(r=e.memory&&t,i=!0,a=s||0,s=0,o=u.length,n=!0;u&&o>a;a++)if(u[a].apply(t[0],t[1])===!1&&e.stopOnFalse){r=!1;break}n=!1,u&&(l?l.length&&c(l.shift()):r?u=[]:p.disable())},p={add:function(){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this},remove:function(){return u&&b.each(arguments,function(e,t){var r;while((r=b.inArray(t,u,r))>-1)u.splice(r,1),n&&(o>=r&&o--,a>=r&&a--)}),this},has:function(e){return e?b.inArray(e,u)>-1:!(!u||!u.length)},empty:function(){return u=[],this},disable:function(){return u=l=r=t,this},disabled:function(){return!u},lock:function(){return l=t,r||p.disable(),this},locked:function(){return!l},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],!u||i&&!l||(n?l.push(t):c(t)),this},fire:function(){return p.fireWith(this,arguments),this},fired:function(){return!!i}};return p},b.extend({Deferred:function(e){var t=[["resolve","done",b.Callbacks("once memory"),"resolved"],["reject","fail",b.Callbacks("once memory"),"rejected"],["notify","progress",b.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?b.extend(e,r):r}},i={};return r.pipe=r.then,b.each(t,function(e,o){var a=o[2],s=o[3];r[o[1]]=a.add,s&&a.add(function(){n=s},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=a.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=h.call(arguments),r=n.length,i=1!==r||e&&b.isFunction(e.promise)?r:0,o=1===i?e:b.Deferred(),a=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?h.call(arguments):r,n===s?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},s,u,l;if(r>1)for(s=Array(r),u=Array(r),l=Array(r);r>t;t++)n[t]&&b.isFunction(n[t].promise)?n[t].promise().done(a(t,l,n)).fail(o.reject).progress(a(t,u,s)):--i;return i||o.resolveWith(l,n),o.promise()}}),b.support=function(){var t,n,r,a,s,u,l,c,p,f,d=o.createElement("div");if(d.setAttribute("className","t"),d.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",n=d.getElementsByTagName("*"),r=d.getElementsByTagName("a")[0],!n||!r||!n.length)return{};s=o.createElement("select"),l=s.appendChild(o.createElement("option")),a=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t={getSetAttribute:"t"!==d.className,leadingWhitespace:3===d.firstChild.nodeType,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/top/.test(r.getAttribute("style")),hrefNormalized:"/a"===r.getAttribute("href"),opacity:/^0.5/.test(r.style.opacity),cssFloat:!!r.style.cssFloat,checkOn:!!a.value,optSelected:l.selected,enctype:!!o.createElement("form").enctype,html5Clone:"<:nav></:nav>"!==o.createElement("nav").cloneNode(!0).outerHTML,boxModel:"CSS1Compat"===o.compatMode,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},a.checked=!0,t.noCloneChecked=a.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!l.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}a=o.createElement("input"),a.setAttribute("value",""),t.input=""===a.getAttribute("value"),a.value="t",a.setAttribute("type","radio"),t.radioValue="t"===a.value,a.setAttribute("checked","t"),a.setAttribute("name","t"),u=o.createDocumentFragment(),u.appendChild(a),t.appendChecked=a.checked,t.checkClone=u.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;return d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip,b(function(){var n,r,a,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",u=o.getElementsByTagName("body")[0];u&&(n=o.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",u.appendChild(n).appendChild(d),d.innerHTML="<table><tr><td></td><td>t</td></tr></table>",a=d.getElementsByTagName("td"),a[0].style.cssText="padding:0;margin:0;border:0;display:none",p=0===a[0].offsetHeight,a[0].style.display="",a[1].style.display="none",t.reliableHiddenOffsets=p&&0===a[0].offsetHeight,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",t.boxSizing=4===d.offsetWidth,t.doesNotIncludeMarginInBodyOffset=1!==u.offsetTop,e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(d,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(d,null)||{width:"4px"}).width,r=d.appendChild(o.createElement("div")),r.style.cssText=d.style.cssText=s,r.style.marginRight=r.style.width="0",d.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),typeof d.style.zoom!==i&&(d.innerHTML="",d.style.cssText=s+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=3===d.offsetWidth,d.style.display="block",d.innerHTML="<div></div>",d.firstChild.style.width="5px",t.shrinkWrapBlocks=3!==d.offsetWidth,t.inlineBlockNeedsLayout&&(u.style.zoom=1)),u.removeChild(n),n=d=a=r=null)}),n=s=u=l=r=a=null,t}();var O=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,B=/([A-Z])/g;function P(e,n,r,i){if(b.acceptData(e)){var o,a,s=b.expando,u="string"==typeof n,l=e.nodeType,p=l?b.cache:e,f=l?e[s]:e[s]&&s;if(f&&p[f]&&(i||p[f].data)||!u||r!==t)return f||(l?e[s]=f=c.pop()||b.guid++:f=s),p[f]||(p[f]={},l||(p[f].toJSON=b.noop)),("object"==typeof n||"function"==typeof n)&&(i?p[f]=b.extend(p[f],n):p[f].data=b.extend(p[f].data,n)),o=p[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[b.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[b.camelCase(n)])):a=o,a}}function R(e,t,n){if(b.acceptData(e)){var r,i,o,a=e.nodeType,s=a?b.cache:e,u=a?e[b.expando]:b.expando;if(s[u]){if(t&&(o=n?s[u]:s[u].data)){b.isArray(t)?t=t.concat(b.map(t,b.camelCase)):t in o?t=[t]:(t=b.camelCase(t),t=t in o?[t]:t.split(" "));for(r=0,i=t.length;i>r;r++)delete o[t[r]];if(!(n?$:b.isEmptyObject)(o))return}(n||(delete s[u].data,$(s[u])))&&(a?b.cleanData([e],!0):b.support.deleteExpando||s!=s.window?delete s[u]:s[u]=null)}}}b.extend({cache:{},expando:"jQuery"+(p+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?b.cache[e[b.expando]]:e[b.expando],!!e&&!$(e)},data:function(e,t,n){return P(e,t,n)},removeData:function(e,t){return R(e,t)},_data:function(e,t,n){return P(e,t,n,!0)},_removeData:function(e,t){return R(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&b.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),b.fn.extend({data:function(e,n){var r,i,o=this[0],a=0,s=null;if(e===t){if(this.length&&(s=b.data(o),1===o.nodeType&&!b._data(o,"parsedAttrs"))){for(r=o.attributes;r.length>a;a++)i=r[a].name,i.indexOf("data-")||(i=b.camelCase(i.slice(5)),W(o,i,s[i]));b._data(o,"parsedAttrs",!0)}return s}return"object"==typeof e?this.each(function(){b.data(this,e)}):b.access(this,function(n){return n===t?o?W(o,e,b.data(o,e)):null:(this.each(function(){b.data(this,e,n)}),t)},null,n,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){b.removeData(this,e)})}});function W(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(B,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:O.test(r)?b.parseJSON(r):r}catch(o){}b.data(e,n,r)}else r=t}return r}function $(e){var t;for(t in e)if(("data"!==t||!b.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}b.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=b._data(e,n),r&&(!i||b.isArray(r)?i=b._data(e,n,b.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=b.queue(e,t),r=n.length,i=n.shift(),o=b._queueHooks(e,t),a=function(){b.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),o.cur=i,i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return b._data(e,n)||b._data(e,n,{empty:b.Callbacks("once memory").add(function(){b._removeData(e,t+"queue"),b._removeData(e,n)})})}}),b.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?b.queue(this[0],e):n===t?this:this.each(function(){var t=b.queue(this,e,n);b._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&b.dequeue(this,e)})},dequeue:function(e){return this.each(function(){b.dequeue(this,e)})},delay:function(e,t){return e=b.fx?b.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=b.Deferred(),a=this,s=this.length,u=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=b._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(u));return u(),o.promise(n)}});var I,z,X=/[\t\r\n]/g,U=/\r/g,V=/^(?:input|select|textarea|button|object)$/i,Y=/^(?:a|area)$/i,J=/^(?:checked|selected|autofocus|autoplay|async|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped)$/i,G=/^(?:checked|selected)$/i,Q=b.support.getSetAttribute,K=b.support.input;b.fn.extend({attr:function(e,t){return b.access(this,b.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){b.removeAttr(this,e)})},prop:function(e,t){return b.access(this,b.prop,e,t,arguments.length>1)},removeProp:function(e){return e=b.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,u="string"==typeof e&&e;if(b.isFunction(e))return this.each(function(t){b(this).addClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(X," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=b.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,u=0===arguments.length||"string"==typeof e&&e;if(b.isFunction(e))return this.each(function(t){b(this).removeClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(X," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?b.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e,r="boolean"==typeof t;return b.isFunction(e)?this.each(function(n){b(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var o,a=0,s=b(this),u=t,l=e.match(w)||[];while(o=l[a++])u=r?u:!s.hasClass(o),s[u?"addClass":"removeClass"](o)}else(n===i||"boolean"===n)&&(this.className&&b._data(this,"__className__",this.className),this.className=this.className||e===!1?"":b._data(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(X," ").indexOf(t)>=0)return!0;return!1},val:function(e){var n,r,i,o=this[0];{if(arguments.length)return i=b.isFunction(e),this.each(function(n){var o,a=b(this);1===this.nodeType&&(o=i?e.call(this,n,a.val()):e,null==o?o="":"number"==typeof o?o+="":b.isArray(o)&&(o=b.map(o,function(e){return null==e?"":e+""})),r=b.valHooks[this.type]||b.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=b.valHooks[o.type]||b.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(U,""):null==n?"":n)}}}),b.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,a=o?null:[],s=o?i+1:r.length,u=0>i?s:o?i:0;for(;s>u;u++)if(n=r[u],!(!n.selected&&u!==i||(b.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&b.nodeName(n.parentNode,"optgroup"))){if(t=b(n).val(),o)return t;a.push(t)}return a},set:function(e,t){var n=b.makeArray(t);return b(e).find("option").each(function(){this.selected=b.inArray(b(this).val(),n)>=0}),n.length||(e.selectedIndex=-1),n}}},attr:function(e,n,r){var o,a,s,u=e.nodeType;if(e&&3!==u&&8!==u&&2!==u)return typeof e.getAttribute===i?b.prop(e,n,r):(a=1!==u||!b.isXMLDoc(e),a&&(n=n.toLowerCase(),o=b.attrHooks[n]||(J.test(n)?z:I)),r===t?o&&a&&"get"in o&&null!==(s=o.get(e,n))?s:(typeof e.getAttribute!==i&&(s=e.getAttribute(n)),null==s?t:s):null!==r?o&&a&&"set"in o&&(s=o.set(e,r,n))!==t?s:(e.setAttribute(n,r+""),r):(b.removeAttr(e,n),t))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(w);if(o&&1===e.nodeType)while(n=o[i++])r=b.propFix[n]||n,J.test(n)?!Q&&G.test(n)?e[b.camelCase("default-"+n)]=e[r]=!1:e[r]=!1:b.attr(e,n,""),e.removeAttribute(Q?n:r)},attrHooks:{type:{set:function(e,t){if(!b.support.radioValue&&"radio"===t&&b.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return a=1!==s||!b.isXMLDoc(e),a&&(n=b.propFix[n]||n,o=b.propHooks[n]),r!==t?o&&"set"in o&&(i=o.set(e,r,n))!==t?i:e[n]=r:o&&"get"in o&&null!==(i=o.get(e,n))?i:e[n]},propHooks:{tabIndex:{get:function(e){var n=e.getAttributeNode("tabindex");return n&&n.specified?parseInt(n.value,10):V.test(e.nodeName)||Y.test(e.nodeName)&&e.href?0:t}}}}),z={get:function(e,n){var r=b.prop(e,n),i="boolean"==typeof r&&e.getAttribute(n),o="boolean"==typeof r?K&&Q?null!=i:G.test(n)?e[b.camelCase("default-"+n)]:!!i:e.getAttributeNode(n);return o&&o.value!==!1?n.toLowerCase():t},set:function(e,t,n){return t===!1?b.removeAttr(e,n):K&&Q||!G.test(n)?e.setAttribute(!Q&&b.propFix[n]||n,n):e[b.camelCase("default-"+n)]=e[n]=!0,n}},K&&Q||(b.attrHooks.value={get:function(e,n){var r=e.getAttributeNode(n);return b.nodeName(e,"input")?e.defaultValue:r&&r.specified?r.value:t},set:function(e,n,r){return b.nodeName(e,"input")?(e.defaultValue=n,t):I&&I.set(e,n,r)}}),Q||(I=b.valHooks.button={get:function(e,n){var r=e.getAttributeNode(n);return r&&("id"===n||"name"===n||"coords"===n?""!==r.value:r.specified)?r.value:t},set:function(e,n,r){var i=e.getAttributeNode(r);return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}},b.attrHooks.contenteditable={get:I.get,set:function(e,t,n){I.set(e,""===t?!1:t,n)}},b.each(["width","height"],function(e,n){b.attrHooks[n]=b.extend(b.attrHooks[n],{set:function(e,r){return""===r?(e.setAttribute(n,"auto"),r):t}})})),b.support.hrefNormalized||(b.each(["href","src","width","height"],function(e,n){b.attrHooks[n]=b.extend(b.attrHooks[n],{get:function(e){var r=e.getAttribute(n,2);return null==r?t:r}})}),b.each(["href","src"],function(e,t){b.propHooks[t]={get:function(e){return e.getAttribute(t,4)}}})),b.support.style||(b.attrHooks.style={get:function(e){return e.style.cssText||t},set:function(e,t){return e.style.cssText=t+""}}),b.support.optSelected||(b.propHooks.selected=b.extend(b.propHooks.selected,{get:function(e){var t=e.parentNode;return t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex),null}})),b.support.enctype||(b.propFix.enctype="encoding"),b.support.checkOn||b.each(["radio","checkbox"],function(){b.valHooks[this]={get:function(e){return null===e.getAttribute("value")?"on":e.value}}}),b.each(["radio","checkbox"],function(){b.valHooks[this]=b.extend(b.valHooks[this],{set:function(e,n){return b.isArray(n)?e.checked=b.inArray(b(e).val(),n)>=0:t}})});var Z=/^(?:input|select|textarea)$/i,et=/^key/,tt=/^(?:mouse|contextmenu)|click/,nt=/^(?:focusinfocus|focusoutblur)$/,rt=/^([^.]*)(?:\.(.+)|)$/;function it(){return!0}function ot(){return!1}b.event={global:{},add:function(e,n,r,o,a){var s,u,l,c,p,f,d,h,g,m,y,v=b._data(e);if(v){r.handler&&(c=r,r=c.handler,a=c.selector),r.guid||(r.guid=b.guid++),(u=v.events)||(u=v.events={}),(f=v.handle)||(f=v.handle=function(e){return typeof b===i||e&&b.event.triggered===e.type?t:b.event.dispatch.apply(f.elem,arguments)},f.elem=e),n=(n||"").match(w)||[""],l=n.length;while(l--)s=rt.exec(n[l])||[],g=y=s[1],m=(s[2]||"").split(".").sort(),p=b.event.special[g]||{},g=(a?p.delegateType:p.bindType)||g,p=b.event.special[g]||{},d=b.extend({type:g,origType:y,data:o,handler:r,guid:r.guid,selector:a,needsContext:a&&b.expr.match.needsContext.test(a),namespace:m.join(".")},c),(h=u[g])||(h=u[g]=[],h.delegateCount=0,p.setup&&p.setup.call(e,o,m,f)!==!1||(e.addEventListener?e.addEventListener(g,f,!1):e.attachEvent&&e.attachEvent("on"+g,f))),p.add&&(p.add.call(e,d),d.handler.guid||(d.handler.guid=r.guid)),a?h.splice(h.delegateCount++,0,d):h.push(d),b.event.global[g]=!0;e=null}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,p,f,d,h,g,m=b.hasData(e)&&b._data(e);if(m&&(c=m.events)){t=(t||"").match(w)||[""],l=t.length;while(l--)if(s=rt.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){p=b.event.special[d]||{},d=(r?p.delegateType:p.bindType)||d,f=c[d]||[],s=s[2]&&RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),u=o=f.length;while(o--)a=f[o],!i&&g!==a.origType||n&&n.guid!==a.guid||s&&!s.test(a.namespace)||r&&r!==a.selector&&("**"!==r||!a.selector)||(f.splice(o,1),a.selector&&f.delegateCount--,p.remove&&p.remove.call(e,a));u&&!f.length&&(p.teardown&&p.teardown.call(e,h,m.handle)!==!1||b.removeEvent(e,d,m.handle),delete c[d])}else for(d in c)b.event.remove(e,d+t[l],n,r,!0);b.isEmptyObject(c)&&(delete m.handle,b._removeData(e,"events"))}},trigger:function(n,r,i,a){var s,u,l,c,p,f,d,h=[i||o],g=y.call(n,"type")?n.type:n,m=y.call(n,"namespace")?n.namespace.split("."):[];if(l=f=i=i||o,3!==i.nodeType&&8!==i.nodeType&&!nt.test(g+b.event.triggered)&&(g.indexOf(".")>=0&&(m=g.split("."),g=m.shift(),m.sort()),u=0>g.indexOf(":")&&"on"+g,n=n[b.expando]?n:new b.Event(g,"object"==typeof n&&n),n.isTrigger=!0,n.namespace=m.join("."),n.namespace_re=n.namespace?RegExp("(^|\\.)"+m.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,n.result=t,n.target||(n.target=i),r=null==r?[n]:b.makeArray(r,[n]),p=b.event.special[g]||{},a||!p.trigger||p.trigger.apply(i,r)!==!1)){if(!a&&!p.noBubble&&!b.isWindow(i)){for(c=p.delegateType||g,nt.test(c+g)||(l=l.parentNode);l;l=l.parentNode)h.push(l),f=l;f===(i.ownerDocument||o)&&h.push(f.defaultView||f.parentWindow||e)}d=0;while((l=h[d++])&&!n.isPropagationStopped())n.type=d>1?c:p.bindType||g,s=(b._data(l,"events")||{})[n.type]&&b._data(l,"handle"),s&&s.apply(l,r),s=u&&l[u],s&&b.acceptData(l)&&s.apply&&s.apply(l,r)===!1&&n.preventDefault();if(n.type=g,!(a||n.isDefaultPrevented()||p._default&&p._default.apply(i.ownerDocument,r)!==!1||"click"===g&&b.nodeName(i,"a")||!b.acceptData(i)||!u||!i[g]||b.isWindow(i))){f=i[u],f&&(i[u]=null),b.event.triggered=g;try{i[g]()}catch(v){}b.event.triggered=t,f&&(i[u]=f)}return n.result}},dispatch:function(e){e=b.event.fix(e);var n,r,i,o,a,s=[],u=h.call(arguments),l=(b._data(this,"events")||{})[e.type]||[],c=b.event.special[e.type]||{};if(u[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){s=b.event.handlers.call(this,e,l),n=0;while((o=s[n++])&&!e.isPropagationStopped()){e.currentTarget=o.elem,a=0;while((i=o.handlers[a++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(i.namespace))&&(e.handleObj=i,e.data=i.data,r=((b.event.special[i.origType]||{}).handle||i.handler).apply(o.elem,u),r!==t&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,e),e.result}},handlers:function(e,n){var r,i,o,a,s=[],u=n.delegateCount,l=e.target;if(u&&l.nodeType&&(!e.button||"click"!==e.type))for(;l!=this;l=l.parentNode||this)if(1===l.nodeType&&(l.disabled!==!0||"click"!==e.type)){for(o=[],a=0;u>a;a++)i=n[a],r=i.selector+" ",o[r]===t&&(o[r]=i.needsContext?b(r,this).index(l)>=0:b.find(r,this,null,[l]).length),o[r]&&o.push(i);o.length&&s.push({elem:l,handlers:o})}return n.length>u&&s.push({elem:this,handlers:n.slice(u)}),s},fix:function(e){if(e[b.expando])return e;var t,n,r,i=e.type,a=e,s=this.fixHooks[i];s||(this.fixHooks[i]=s=tt.test(i)?this.mouseHooks:et.test(i)?this.keyHooks:{}),r=s.props?this.props.concat(s.props):this.props,e=new b.Event(a),t=r.length;while(t--)n=r[t],e[n]=a[n];return e.target||(e.target=a.srcElement||o),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,s.filter?s.filter(e,a):e},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,n){var r,i,a,s=n.button,u=n.fromElement;return null==e.pageX&&null!=n.clientX&&(i=e.target.ownerDocument||o,a=i.documentElement,r=i.body,e.pageX=n.clientX+(a&&a.scrollLeft||r&&r.scrollLeft||0)-(a&&a.clientLeft||r&&r.clientLeft||0),e.pageY=n.clientY+(a&&a.scrollTop||r&&r.scrollTop||0)-(a&&a.clientTop||r&&r.clientTop||0)),!e.relatedTarget&&u&&(e.relatedTarget=u===e.target?n.toElement:u),e.which||s===t||(e.which=1&s?1:2&s?3:4&s?2:0),e}},special:{load:{noBubble:!0},click:{trigger:function(){return b.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):t}},focus:{trigger:function(){if(this!==o.activeElement&&this.focus)try{return this.focus(),!1}catch(e){}},delegateType:"focusin"},blur:{trigger:function(){return this===o.activeElement&&this.blur?(this.blur(),!1):t},delegateType:"focusout"},beforeunload:{postDispatch:function(e){e.result!==t&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=b.extend(new b.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?b.event.trigger(i,null,t):b.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},b.removeEvent=o.removeEventListener?function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)}:function(e,t,n){var r="on"+t;e.detachEvent&&(typeof e[r]===i&&(e[r]=null),e.detachEvent(r,n))},b.Event=function(e,n){return this instanceof b.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.returnValue===!1||e.getPreventDefault&&e.getPreventDefault()?it:ot):this.type=e,n&&b.extend(this,n),this.timeStamp=e&&e.timeStamp||b.now(),this[b.expando]=!0,t):new b.Event(e,n)},b.Event.prototype={isDefaultPrevented:ot,isPropagationStopped:ot,isImmediatePropagationStopped:ot,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=it,e&&(e.preventDefault?e.preventDefault():e.returnValue=!1)},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=it,e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=it,this.stopPropagation()}},b.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){b.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;
 return(!i||i!==r&&!b.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),b.support.submitBubbles||(b.event.special.submit={setup:function(){return b.nodeName(this,"form")?!1:(b.event.add(this,"click._submit keypress._submit",function(e){var n=e.target,r=b.nodeName(n,"input")||b.nodeName(n,"button")?n.form:t;r&&!b._data(r,"submitBubbles")&&(b.event.add(r,"submit._submit",function(e){e._submit_bubble=!0}),b._data(r,"submitBubbles",!0))}),t)},postDispatch:function(e){e._submit_bubble&&(delete e._submit_bubble,this.parentNode&&!e.isTrigger&&b.event.simulate("submit",this.parentNode,e,!0))},teardown:function(){return b.nodeName(this,"form")?!1:(b.event.remove(this,"._submit"),t)}}),b.support.changeBubbles||(b.event.special.change={setup:function(){return Z.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(b.event.add(this,"propertychange._change",function(e){"checked"===e.originalEvent.propertyName&&(this._just_changed=!0)}),b.event.add(this,"click._change",function(e){this._just_changed&&!e.isTrigger&&(this._just_changed=!1),b.event.simulate("change",this,e,!0)})),!1):(b.event.add(this,"beforeactivate._change",function(e){var t=e.target;Z.test(t.nodeName)&&!b._data(t,"changeBubbles")&&(b.event.add(t,"change._change",function(e){!this.parentNode||e.isSimulated||e.isTrigger||b.event.simulate("change",this.parentNode,e,!0)}),b._data(t,"changeBubbles",!0))}),t)},handle:function(e){var n=e.target;return this!==n||e.isSimulated||e.isTrigger||"radio"!==n.type&&"checkbox"!==n.type?e.handleObj.handler.apply(this,arguments):t},teardown:function(){return b.event.remove(this,"._change"),!Z.test(this.nodeName)}}),b.support.focusinBubbles||b.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){b.event.simulate(t,e.target,b.event.fix(e),!0)};b.event.special[t]={setup:function(){0===n++&&o.addEventListener(e,r,!0)},teardown:function(){0===--n&&o.removeEventListener(e,r,!0)}}}),b.fn.extend({on:function(e,n,r,i,o){var a,s;if("object"==typeof e){"string"!=typeof n&&(r=r||n,n=t);for(a in e)this.on(a,n,r,e[a],o);return this}if(null==r&&null==i?(i=n,r=n=t):null==i&&("string"==typeof n?(i=r,r=t):(i=r,r=n,n=t)),i===!1)i=ot;else if(!i)return this;return 1===o&&(s=i,i=function(e){return b().off(e),s.apply(this,arguments)},i.guid=s.guid||(s.guid=b.guid++)),this.each(function(){b.event.add(this,e,i,r,n)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,n,r){var i,o;if(e&&e.preventDefault&&e.handleObj)return i=e.handleObj,b(e.delegateTarget).off(i.namespace?i.origType+"."+i.namespace:i.origType,i.selector,i.handler),this;if("object"==typeof e){for(o in e)this.off(o,n,e[o]);return this}return(n===!1||"function"==typeof n)&&(r=n,n=t),r===!1&&(r=ot),this.each(function(){b.event.remove(this,e,r,n)})},bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},trigger:function(e,t){return this.each(function(){b.event.trigger(e,t,this)})},triggerHandler:function(e,n){var r=this[0];return r?b.event.trigger(e,n,r,!0):t}}),function(e,t){var n,r,i,o,a,s,u,l,c,p,f,d,h,g,m,y,v,x="sizzle"+-new Date,w=e.document,T={},N=0,C=0,k=it(),E=it(),S=it(),A=typeof t,j=1<<31,D=[],L=D.pop,H=D.push,q=D.slice,M=D.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},_="[\\x20\\t\\r\\n\\f]",F="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=F.replace("w","w#"),B="([*^$|!~]?=)",P="\\["+_+"*("+F+")"+_+"*(?:"+B+_+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+O+")|)|)"+_+"*\\]",R=":("+F+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+P.replace(3,8)+")*)|.*)\\)|)",W=RegExp("^"+_+"+|((?:^|[^\\\\])(?:\\\\.)*)"+_+"+$","g"),$=RegExp("^"+_+"*,"+_+"*"),I=RegExp("^"+_+"*([\\x20\\t\\r\\n\\f>+~])"+_+"*"),z=RegExp(R),X=RegExp("^"+O+"$"),U={ID:RegExp("^#("+F+")"),CLASS:RegExp("^\\.("+F+")"),NAME:RegExp("^\\[name=['\"]?("+F+")['\"]?\\]"),TAG:RegExp("^("+F.replace("w","w*")+")"),ATTR:RegExp("^"+P),PSEUDO:RegExp("^"+R),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+_+"*(even|odd|(([+-]|)(\\d*)n|)"+_+"*(?:([+-]|)"+_+"*(\\d+)|))"+_+"*\\)|)","i"),needsContext:RegExp("^"+_+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+_+"*((?:-\\d)?\\d*)"+_+"*\\)|)(?=[^-]|$)","i")},V=/[\x20\t\r\n\f]*[+~]/,Y=/^[^{]+\{\s*\[native code/,J=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,G=/^(?:input|select|textarea|button)$/i,Q=/^h\d$/i,K=/'|\\/g,Z=/\=[\x20\t\r\n\f]*([^'"\]]*)[\x20\t\r\n\f]*\]/g,et=/\\([\da-fA-F]{1,6}[\x20\t\r\n\f]?|.)/g,tt=function(e,t){var n="0x"+t-65536;return n!==n?t:0>n?String.fromCharCode(n+65536):String.fromCharCode(55296|n>>10,56320|1023&n)};try{q.call(w.documentElement.childNodes,0)[0].nodeType}catch(nt){q=function(e){var t,n=[];while(t=this[e++])n.push(t);return n}}function rt(e){return Y.test(e+"")}function it(){var e,t=[];return e=function(n,r){return t.push(n+=" ")>i.cacheLength&&delete e[t.shift()],e[n]=r}}function ot(e){return e[x]=!0,e}function at(e){var t=p.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}}function st(e,t,n,r){var i,o,a,s,u,l,f,g,m,v;if((t?t.ownerDocument||t:w)!==p&&c(t),t=t||p,n=n||[],!e||"string"!=typeof e)return n;if(1!==(s=t.nodeType)&&9!==s)return[];if(!d&&!r){if(i=J.exec(e))if(a=i[1]){if(9===s){if(o=t.getElementById(a),!o||!o.parentNode)return n;if(o.id===a)return n.push(o),n}else if(t.ownerDocument&&(o=t.ownerDocument.getElementById(a))&&y(t,o)&&o.id===a)return n.push(o),n}else{if(i[2])return H.apply(n,q.call(t.getElementsByTagName(e),0)),n;if((a=i[3])&&T.getByClassName&&t.getElementsByClassName)return H.apply(n,q.call(t.getElementsByClassName(a),0)),n}if(T.qsa&&!h.test(e)){if(f=!0,g=x,m=t,v=9===s&&e,1===s&&"object"!==t.nodeName.toLowerCase()){l=ft(e),(f=t.getAttribute("id"))?g=f.replace(K,"\\$&"):t.setAttribute("id",g),g="[id='"+g+"'] ",u=l.length;while(u--)l[u]=g+dt(l[u]);m=V.test(e)&&t.parentNode||t,v=l.join(",")}if(v)try{return H.apply(n,q.call(m.querySelectorAll(v),0)),n}catch(b){}finally{f||t.removeAttribute("id")}}}return wt(e.replace(W,"$1"),t,n,r)}a=st.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},c=st.setDocument=function(e){var n=e?e.ownerDocument||e:w;return n!==p&&9===n.nodeType&&n.documentElement?(p=n,f=n.documentElement,d=a(n),T.tagNameNoComments=at(function(e){return e.appendChild(n.createComment("")),!e.getElementsByTagName("*").length}),T.attributes=at(function(e){e.innerHTML="<select></select>";var t=typeof e.lastChild.getAttribute("multiple");return"boolean"!==t&&"string"!==t}),T.getByClassName=at(function(e){return e.innerHTML="<div class='hidden e'></div><div class='hidden'></div>",e.getElementsByClassName&&e.getElementsByClassName("e").length?(e.lastChild.className="e",2===e.getElementsByClassName("e").length):!1}),T.getByName=at(function(e){e.id=x+0,e.innerHTML="<a name='"+x+"'></a><div name='"+x+"'></div>",f.insertBefore(e,f.firstChild);var t=n.getElementsByName&&n.getElementsByName(x).length===2+n.getElementsByName(x+0).length;return T.getIdNotName=!n.getElementById(x),f.removeChild(e),t}),i.attrHandle=at(function(e){return e.innerHTML="<a href='#'></a>",e.firstChild&&typeof e.firstChild.getAttribute!==A&&"#"===e.firstChild.getAttribute("href")})?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},T.getIdNotName?(i.find.ID=function(e,t){if(typeof t.getElementById!==A&&!d){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},i.filter.ID=function(e){var t=e.replace(et,tt);return function(e){return e.getAttribute("id")===t}}):(i.find.ID=function(e,n){if(typeof n.getElementById!==A&&!d){var r=n.getElementById(e);return r?r.id===e||typeof r.getAttributeNode!==A&&r.getAttributeNode("id").value===e?[r]:t:[]}},i.filter.ID=function(e){var t=e.replace(et,tt);return function(e){var n=typeof e.getAttributeNode!==A&&e.getAttributeNode("id");return n&&n.value===t}}),i.find.TAG=T.tagNameNoComments?function(e,n){return typeof n.getElementsByTagName!==A?n.getElementsByTagName(e):t}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},i.find.NAME=T.getByName&&function(e,n){return typeof n.getElementsByName!==A?n.getElementsByName(name):t},i.find.CLASS=T.getByClassName&&function(e,n){return typeof n.getElementsByClassName===A||d?t:n.getElementsByClassName(e)},g=[],h=[":focus"],(T.qsa=rt(n.querySelectorAll))&&(at(function(e){e.innerHTML="<select><option selected=''></option></select>",e.querySelectorAll("[selected]").length||h.push("\\["+_+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||h.push(":checked")}),at(function(e){e.innerHTML="<input type='hidden' i=''/>",e.querySelectorAll("[i^='']").length&&h.push("[*^$]="+_+"*(?:\"\"|'')"),e.querySelectorAll(":enabled").length||h.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),h.push(",.*:")})),(T.matchesSelector=rt(m=f.matchesSelector||f.mozMatchesSelector||f.webkitMatchesSelector||f.oMatchesSelector||f.msMatchesSelector))&&at(function(e){T.disconnectedMatch=m.call(e,"div"),m.call(e,"[s!='']:x"),g.push("!=",R)}),h=RegExp(h.join("|")),g=RegExp(g.join("|")),y=rt(f.contains)||f.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},v=f.compareDocumentPosition?function(e,t){var r;return e===t?(u=!0,0):(r=t.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(t))?1&r||e.parentNode&&11===e.parentNode.nodeType?e===n||y(w,e)?-1:t===n||y(w,t)?1:0:4&r?-1:1:e.compareDocumentPosition?-1:1}:function(e,t){var r,i=0,o=e.parentNode,a=t.parentNode,s=[e],l=[t];if(e===t)return u=!0,0;if(!o||!a)return e===n?-1:t===n?1:o?-1:a?1:0;if(o===a)return ut(e,t);r=e;while(r=r.parentNode)s.unshift(r);r=t;while(r=r.parentNode)l.unshift(r);while(s[i]===l[i])i++;return i?ut(s[i],l[i]):s[i]===w?-1:l[i]===w?1:0},u=!1,[0,0].sort(v),T.detectDuplicates=u,p):p},st.matches=function(e,t){return st(e,null,null,t)},st.matchesSelector=function(e,t){if((e.ownerDocument||e)!==p&&c(e),t=t.replace(Z,"='$1']"),!(!T.matchesSelector||d||g&&g.test(t)||h.test(t)))try{var n=m.call(e,t);if(n||T.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(r){}return st(t,p,null,[e]).length>0},st.contains=function(e,t){return(e.ownerDocument||e)!==p&&c(e),y(e,t)},st.attr=function(e,t){var n;return(e.ownerDocument||e)!==p&&c(e),d||(t=t.toLowerCase()),(n=i.attrHandle[t])?n(e):d||T.attributes?e.getAttribute(t):((n=e.getAttributeNode(t))||e.getAttribute(t))&&e[t]===!0?t:n&&n.specified?n.value:null},st.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},st.uniqueSort=function(e){var t,n=[],r=1,i=0;if(u=!T.detectDuplicates,e.sort(v),u){for(;t=e[r];r++)t===e[r-1]&&(i=n.push(r));while(i--)e.splice(n[i],1)}return e};function ut(e,t){var n=t&&e,r=n&&(~t.sourceIndex||j)-(~e.sourceIndex||j);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function lt(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function ct(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function pt(e){return ot(function(t){return t=+t,ot(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}o=st.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=o(t);return n},i=st.selectors={cacheLength:50,createPseudo:ot,match:U,find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(et,tt),e[3]=(e[4]||e[5]||"").replace(et,tt),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||st.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&st.error(e[0]),e},PSEUDO:function(e){var t,n=!e[5]&&e[2];return U.CHILD.test(e[0])?null:(e[4]?e[2]=e[4]:n&&z.test(n)&&(t=ft(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){return"*"===e?function(){return!0}:(e=e.replace(et,tt).toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=k[e+" "];return t||(t=RegExp("(^|"+_+")"+e+"("+_+"|$)"))&&k(e,function(e){return t.test(e.className||typeof e.getAttribute!==A&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=st.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,p,f,d,h,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,y=s&&t.nodeName.toLowerCase(),v=!u&&!s;if(m){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&v){c=m[x]||(m[x]={}),l=c[e]||[],d=l[0]===N&&l[1],f=l[0]===N&&l[2],p=d&&m.childNodes[d];while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[N,d,f];break}}else if(v&&(l=(t[x]||(t[x]={}))[e])&&l[0]===N)f=l[1];else while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(v&&((p[x]||(p[x]={}))[e]=[N,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||st.error("unsupported pseudo: "+e);return r[x]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?ot(function(e,n){var i,o=r(e,t),a=o.length;while(a--)i=M.call(e,o[a]),e[i]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:ot(function(e){var t=[],n=[],r=s(e.replace(W,"$1"));return r[x]?ot(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:ot(function(e){return function(t){return st(e,t).length>0}}),contains:ot(function(e){return function(t){return(t.textContent||t.innerText||o(t)).indexOf(e)>-1}}),lang:ot(function(e){return X.test(e||"")||st.error("unsupported lang: "+e),e=e.replace(et,tt).toLowerCase(),function(t){var n;do if(n=d?t.getAttribute("xml:lang")||t.getAttribute("lang"):t.lang)return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===f},focus:function(e){return e===p.activeElement&&(!p.hasFocus||p.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!i.pseudos.empty(e)},header:function(e){return Q.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:pt(function(){return[0]}),last:pt(function(e,t){return[t-1]}),eq:pt(function(e,t,n){return[0>n?n+t:n]}),even:pt(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:pt(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:pt(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:pt(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}};for(n in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})i.pseudos[n]=lt(n);for(n in{submit:!0,reset:!0})i.pseudos[n]=ct(n);function ft(e,t){var n,r,o,a,s,u,l,c=E[e+" "];if(c)return t?0:c.slice(0);s=e,u=[],l=i.preFilter;while(s){(!n||(r=$.exec(s)))&&(r&&(s=s.slice(r[0].length)||s),u.push(o=[])),n=!1,(r=I.exec(s))&&(n=r.shift(),o.push({value:n,type:r[0].replace(W," ")}),s=s.slice(n.length));for(a in i.filter)!(r=U[a].exec(s))||l[a]&&!(r=l[a](r))||(n=r.shift(),o.push({value:n,type:a,matches:r}),s=s.slice(n.length));if(!n)break}return t?s.length:s?st.error(e):E(e,u).slice(0)}function dt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function ht(e,t,n){var i=t.dir,o=n&&"parentNode"===i,a=C++;return t.first?function(t,n,r){while(t=t[i])if(1===t.nodeType||o)return e(t,n,r)}:function(t,n,s){var u,l,c,p=N+" "+a;if(s){while(t=t[i])if((1===t.nodeType||o)&&e(t,n,s))return!0}else while(t=t[i])if(1===t.nodeType||o)if(c=t[x]||(t[x]={}),(l=c[i])&&l[0]===p){if((u=l[1])===!0||u===r)return u===!0}else if(l=c[i]=[p],l[1]=e(t,n,s)||r,l[1]===!0)return!0}}function gt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function mt(e,t,n,r,i){var o,a=[],s=0,u=e.length,l=null!=t;for(;u>s;s++)(o=e[s])&&(!n||n(o,r,i))&&(a.push(o),l&&t.push(s));return a}function yt(e,t,n,r,i,o){return r&&!r[x]&&(r=yt(r)),i&&!i[x]&&(i=yt(i,o)),ot(function(o,a,s,u){var l,c,p,f=[],d=[],h=a.length,g=o||xt(t||"*",s.nodeType?[s]:s,[]),m=!e||!o&&t?g:mt(g,f,e,s,u),y=n?i||(o?e:h||r)?[]:a:m;if(n&&n(m,y,s,u),r){l=mt(y,d),r(l,[],s,u),c=l.length;while(c--)(p=l[c])&&(y[d[c]]=!(m[d[c]]=p))}if(o){if(i||e){if(i){l=[],c=y.length;while(c--)(p=y[c])&&l.push(m[c]=p);i(null,y=[],l,u)}c=y.length;while(c--)(p=y[c])&&(l=i?M.call(o,p):f[c])>-1&&(o[l]=!(a[l]=p))}}else y=mt(y===a?y.splice(h,y.length):y),i?i(null,a,y,u):H.apply(a,y)})}function vt(e){var t,n,r,o=e.length,a=i.relative[e[0].type],s=a||i.relative[" "],u=a?1:0,c=ht(function(e){return e===t},s,!0),p=ht(function(e){return M.call(t,e)>-1},s,!0),f=[function(e,n,r){return!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;o>u;u++)if(n=i.relative[e[u].type])f=[ht(gt(f),n)];else{if(n=i.filter[e[u].type].apply(null,e[u].matches),n[x]){for(r=++u;o>r;r++)if(i.relative[e[r].type])break;return yt(u>1&&gt(f),u>1&&dt(e.slice(0,u-1)).replace(W,"$1"),n,r>u&&vt(e.slice(u,r)),o>r&&vt(e=e.slice(r)),o>r&&dt(e))}f.push(n)}return gt(f)}function bt(e,t){var n=0,o=t.length>0,a=e.length>0,s=function(s,u,c,f,d){var h,g,m,y=[],v=0,b="0",x=s&&[],w=null!=d,T=l,C=s||a&&i.find.TAG("*",d&&u.parentNode||u),k=N+=null==T?1:Math.random()||.1;for(w&&(l=u!==p&&u,r=n);null!=(h=C[b]);b++){if(a&&h){g=0;while(m=e[g++])if(m(h,u,c)){f.push(h);break}w&&(N=k,r=++n)}o&&((h=!m&&h)&&v--,s&&x.push(h))}if(v+=b,o&&b!==v){g=0;while(m=t[g++])m(x,y,u,c);if(s){if(v>0)while(b--)x[b]||y[b]||(y[b]=L.call(f));y=mt(y)}H.apply(f,y),w&&!s&&y.length>0&&v+t.length>1&&st.uniqueSort(f)}return w&&(N=k,l=T),x};return o?ot(s):s}s=st.compile=function(e,t){var n,r=[],i=[],o=S[e+" "];if(!o){t||(t=ft(e)),n=t.length;while(n--)o=vt(t[n]),o[x]?r.push(o):i.push(o);o=S(e,bt(i,r))}return o};function xt(e,t,n){var r=0,i=t.length;for(;i>r;r++)st(e,t[r],n);return n}function wt(e,t,n,r){var o,a,u,l,c,p=ft(e);if(!r&&1===p.length){if(a=p[0]=p[0].slice(0),a.length>2&&"ID"===(u=a[0]).type&&9===t.nodeType&&!d&&i.relative[a[1].type]){if(t=i.find.ID(u.matches[0].replace(et,tt),t)[0],!t)return n;e=e.slice(a.shift().value.length)}o=U.needsContext.test(e)?0:a.length;while(o--){if(u=a[o],i.relative[l=u.type])break;if((c=i.find[l])&&(r=c(u.matches[0].replace(et,tt),V.test(a[0].type)&&t.parentNode||t))){if(a.splice(o,1),e=r.length&&dt(a),!e)return H.apply(n,q.call(r,0)),n;break}}}return s(e,p)(r,t,d,n,V.test(e)),n}i.pseudos.nth=i.pseudos.eq;function Tt(){}i.filters=Tt.prototype=i.pseudos,i.setFilters=new Tt,c(),st.attr=b.attr,b.find=st,b.expr=st.selectors,b.expr[":"]=b.expr.pseudos,b.unique=st.uniqueSort,b.text=st.getText,b.isXMLDoc=st.isXML,b.contains=st.contains}(e);var at=/Until$/,st=/^(?:parents|prev(?:Until|All))/,ut=/^.[^:#\[\.,]*$/,lt=b.expr.match.needsContext,ct={children:!0,contents:!0,next:!0,prev:!0};b.fn.extend({find:function(e){var t,n,r,i=this.length;if("string"!=typeof e)return r=this,this.pushStack(b(e).filter(function(){for(t=0;i>t;t++)if(b.contains(r[t],this))return!0}));for(n=[],t=0;i>t;t++)b.find(e,this[t],n);return n=this.pushStack(i>1?b.unique(n):n),n.selector=(this.selector?this.selector+" ":"")+e,n},has:function(e){var t,n=b(e,this),r=n.length;return this.filter(function(){for(t=0;r>t;t++)if(b.contains(this,n[t]))return!0})},not:function(e){return this.pushStack(ft(this,e,!1))},filter:function(e){return this.pushStack(ft(this,e,!0))},is:function(e){return!!e&&("string"==typeof e?lt.test(e)?b(e,this.context).index(this[0])>=0:b.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){var n,r=0,i=this.length,o=[],a=lt.test(e)||"string"!=typeof e?b(e,t||this.context):0;for(;i>r;r++){n=this[r];while(n&&n.ownerDocument&&n!==t&&11!==n.nodeType){if(a?a.index(n)>-1:b.find.matchesSelector(n,e)){o.push(n);break}n=n.parentNode}}return this.pushStack(o.length>1?b.unique(o):o)},index:function(e){return e?"string"==typeof e?b.inArray(this[0],b(e)):b.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?b(e,t):b.makeArray(e&&e.nodeType?[e]:e),r=b.merge(this.get(),n);return this.pushStack(b.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),b.fn.andSelf=b.fn.addBack;function pt(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}b.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return b.dir(e,"parentNode")},parentsUntil:function(e,t,n){return b.dir(e,"parentNode",n)},next:function(e){return pt(e,"nextSibling")},prev:function(e){return pt(e,"previousSibling")},nextAll:function(e){return b.dir(e,"nextSibling")},prevAll:function(e){return b.dir(e,"previousSibling")},nextUntil:function(e,t,n){return b.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return b.dir(e,"previousSibling",n)},siblings:function(e){return b.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return b.sibling(e.firstChild)},contents:function(e){return b.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:b.merge([],e.childNodes)}},function(e,t){b.fn[e]=function(n,r){var i=b.map(this,t,n);return at.test(e)||(r=n),r&&"string"==typeof r&&(i=b.filter(r,i)),i=this.length>1&&!ct[e]?b.unique(i):i,this.length>1&&st.test(e)&&(i=i.reverse()),this.pushStack(i)}}),b.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),1===t.length?b.find.matchesSelector(t[0],e)?[t[0]]:[]:b.find.matches(e,t)},dir:function(e,n,r){var i=[],o=e[n];while(o&&9!==o.nodeType&&(r===t||1!==o.nodeType||!b(o).is(r)))1===o.nodeType&&i.push(o),o=o[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function ft(e,t,n){if(t=t||0,b.isFunction(t))return b.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return b.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=b.grep(e,function(e){return 1===e.nodeType});if(ut.test(t))return b.filter(t,r,!n);t=b.filter(t,r)}return b.grep(e,function(e){return b.inArray(e,t)>=0===n})}function dt(e){var t=ht.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}var ht="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",gt=/ jQuery\d+="(?:null|\d+)"/g,mt=RegExp("<(?:"+ht+")[\\s/>]","i"),yt=/^\s+/,vt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bt=/<([\w:]+)/,xt=/<tbody/i,wt=/<|&#?\w+;/,Tt=/<(?:script|style|link)/i,Nt=/^(?:checkbox|radio)$/i,Ct=/checked\s*(?:[^=]|=\s*.checked.)/i,kt=/^$|\/(?:java|ecma)script/i,Et=/^true\/(.*)/,St=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,At={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:b.support.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},jt=dt(o),Dt=jt.appendChild(o.createElement("div"));At.optgroup=At.option,At.tbody=At.tfoot=At.colgroup=At.caption=At.thead,At.th=At.td,b.fn.extend({text:function(e){return b.access(this,function(e){return e===t?b.text(this):this.empty().append((this[0]&&this[0].ownerDocument||o).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(b.isFunction(e))return this.each(function(t){b(this).wrapAll(e.call(this,t))});if(this[0]){var t=b(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return b.isFunction(e)?this.each(function(t){b(this).wrapInner(e.call(this,t))}):this.each(function(){var t=b(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=b.isFunction(e);return this.each(function(n){b(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){b.nodeName(this,"body")||b(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.insertBefore(e,this.firstChild)})},before:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=0;for(;null!=(n=this[r]);r++)(!e||b.filter(e,[n]).length>0)&&(t||1!==n.nodeType||b.cleanData(Ot(n)),n.parentNode&&(t&&b.contains(n.ownerDocument,n)&&Mt(Ot(n,"script")),n.parentNode.removeChild(n)));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++){1===e.nodeType&&b.cleanData(Ot(e,!1));while(e.firstChild)e.removeChild(e.firstChild);e.options&&b.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return b.clone(this,e,t)})},html:function(e){return b.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!b.support.htmlSerialize&&mt.test(e)||!b.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(b.cleanData(Ot(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(e){var t=b.isFunction(e);return t||"string"==typeof e||(e=b(e).not(this).detach()),this.domManip([e],!0,function(e){var t=this.nextSibling,n=this.parentNode;n&&(b(this).remove(),n.insertBefore(e,t))})},detach:function(e){return this.remove(e,!0)},domManip:function(e,n,r){e=f.apply([],e);var i,o,a,s,u,l,c=0,p=this.length,d=this,h=p-1,g=e[0],m=b.isFunction(g);if(m||!(1>=p||"string"!=typeof g||b.support.checkClone)&&Ct.test(g))return this.each(function(i){var o=d.eq(i);m&&(e[0]=g.call(this,i,n?o.html():t)),o.domManip(e,n,r)});if(p&&(l=b.buildFragment(e,this[0].ownerDocument,!1,this),i=l.firstChild,1===l.childNodes.length&&(l=i),i)){for(n=n&&b.nodeName(i,"tr"),s=b.map(Ot(l,"script"),Ht),a=s.length;p>c;c++)o=l,c!==h&&(o=b.clone(o,!0,!0),a&&b.merge(s,Ot(o,"script"))),r.call(n&&b.nodeName(this[c],"table")?Lt(this[c],"tbody"):this[c],o,c);if(a)for(u=s[s.length-1].ownerDocument,b.map(s,qt),c=0;a>c;c++)o=s[c],kt.test(o.type||"")&&!b._data(o,"globalEval")&&b.contains(u,o)&&(o.src?b.ajax({url:o.src,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0}):b.globalEval((o.text||o.textContent||o.innerHTML||"").replace(St,"")));l=i=null}return this}});function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function Ht(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function qt(e){var t=Et.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function Mt(e,t){var n,r=0;for(;null!=(n=e[r]);r++)b._data(n,"globalEval",!t||b._data(t[r],"globalEval"))}function _t(e,t){if(1===t.nodeType&&b.hasData(e)){var n,r,i,o=b._data(e),a=b._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)b.event.add(t,n,s[n][r])}a.data&&(a.data=b.extend({},a.data))}}function Ft(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!b.support.noCloneEvent&&t[b.expando]){i=b._data(t);for(r in i.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}"script"===n&&t.text!==e.text?(Ht(t).text=e.text,qt(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),b.support.html5Clone&&e.innerHTML&&!b.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Nt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}b.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){b.fn[e]=function(e){var n,r=0,i=[],o=b(e),a=o.length-1;for(;a>=r;r++)n=r===a?this:this.clone(!0),b(o[r])[t](n),d.apply(i,n.get());return this.pushStack(i)}});function Ot(e,n){var r,o,a=0,s=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!s)for(s=[],r=e.childNodes||e;null!=(o=r[a]);a++)!n||b.nodeName(o,n)?s.push(o):b.merge(s,Ot(o,n));return n===t||n&&b.nodeName(e,n)?b.merge([e],s):s}function Bt(e){Nt.test(e.type)&&(e.defaultChecked=e.checked)}b.extend({clone:function(e,t,n){var r,i,o,a,s,u=b.contains(e.ownerDocument,e);if(b.support.html5Clone||b.isXMLDoc(e)||!mt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(Dt.innerHTML=e.outerHTML,Dt.removeChild(o=Dt.firstChild)),!(b.support.noCloneEvent&&b.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||b.isXMLDoc(e)))for(r=Ot(o),s=Ot(e),a=0;null!=(i=s[a]);++a)r[a]&&Ft(i,r[a]);if(t)if(n)for(s=s||Ot(e),r=r||Ot(o),a=0;null!=(i=s[a]);a++)_t(i,r[a]);else _t(e,o);return r=Ot(o,"script"),r.length>0&&Mt(r,!u&&Ot(e,"script")),r=s=i=null,o},buildFragment:function(e,t,n,r){var i,o,a,s,u,l,c,p=e.length,f=dt(t),d=[],h=0;for(;p>h;h++)if(o=e[h],o||0===o)if("object"===b.type(o))b.merge(d,o.nodeType?[o]:o);else if(wt.test(o)){s=s||f.appendChild(t.createElement("div")),u=(bt.exec(o)||["",""])[1].toLowerCase(),c=At[u]||At._default,s.innerHTML=c[1]+o.replace(vt,"<$1></$2>")+c[2],i=c[0];while(i--)s=s.lastChild;if(!b.support.leadingWhitespace&&yt.test(o)&&d.push(t.createTextNode(yt.exec(o)[0])),!b.support.tbody){o="table"!==u||xt.test(o)?"<table>"!==c[1]||xt.test(o)?0:s:s.firstChild,i=o&&o.childNodes.length;while(i--)b.nodeName(l=o.childNodes[i],"tbody")&&!l.childNodes.length&&o.removeChild(l)
-}b.merge(d,s.childNodes),s.textContent="";while(s.firstChild)s.removeChild(s.firstChild);s=f.lastChild}else d.push(t.createTextNode(o));s&&f.removeChild(s),b.support.appendChecked||b.grep(Ot(d,"input"),Bt),h=0;while(o=d[h++])if((!r||-1===b.inArray(o,r))&&(a=b.contains(o.ownerDocument,o),s=Ot(f.appendChild(o),"script"),a&&Mt(s),n)){i=0;while(o=s[i++])kt.test(o.type||"")&&n.push(o)}return s=null,f},cleanData:function(e,t){var n,r,o,a,s=0,u=b.expando,l=b.cache,p=b.support.deleteExpando,f=b.event.special;for(;null!=(n=e[s]);s++)if((t||b.acceptData(n))&&(o=n[u],a=o&&l[o])){if(a.events)for(r in a.events)f[r]?b.event.remove(n,r):b.removeEvent(n,r,a.handle);l[o]&&(delete l[o],p?delete n[u]:typeof n.removeAttribute!==i?n.removeAttribute(u):n[u]=null,c.push(o))}}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+x+")(.*)$","i"),Yt=RegExp("^("+x+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+x+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===b.css(e,"display")||!b.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=b._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=b._data(r,"olddisplay",un(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&b._data(r,"olddisplay",i?n:b.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}b.fn.extend({css:function(e,n){return b.access(this,function(e,n,r){var i,o,a={},s=0;if(b.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=b.css(e,n[s],!1,o);return a}return r!==t?b.style(e,n,r):b.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){var t="boolean"==typeof e;return this.each(function(){(t?e:nn(this))?b(this).show():b(this).hide()})}}),b.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":b.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,u=b.camelCase(n),l=e.style;if(n=b.cssProps[u]||(b.cssProps[u]=tn(l,u)),s=b.cssHooks[n]||b.cssHooks[u],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:l[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(b.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||b.cssNumber[u]||(r+="px"),b.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(l[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{l[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,u=b.camelCase(n);return n=b.cssProps[u]||(b.cssProps[u]=tn(e.style,u)),s=b.cssHooks[n]||b.cssHooks[u],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||b.isNumeric(o)?o||0:a):a},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s.getPropertyValue(n)||s[n]:t,l=e.style;return s&&(""!==u||b.contains(e.ownerDocument,e)||(u=b.style(e,n)),Yt.test(u)&&Ut.test(n)&&(i=l.width,o=l.minWidth,a=l.maxWidth,l.minWidth=l.maxWidth=l.width=u,u=s.width,l.width=i,l.minWidth=o,l.maxWidth=a)),u}):o.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s[n]:t,l=e.style;return null==u&&l&&l[n]&&(u=l[n]),Yt.test(u)&&!zt.test(n)&&(i=l.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),l.left="fontSize"===n?"1em":u,u=l.pixelLeft+"px",l.left=i,a&&(o.left=a)),""===u?"auto":u});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=b.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=b.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=b.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=b.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=b.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Yt.test(i))return i;r=a&&(b.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+an(e,t,n||(a?"border":"content"),r,o)+"px"}function un(e){var t=o,n=Gt[e];return n||(n=ln(e,t),"none"!==n&&n||(Pt=(Pt||b("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(t.documentElement),t=(Pt[0].contentWindow||Pt[0].contentDocument).document,t.write("<!doctype html><html><body>"),t.close(),n=ln(e,t),Pt.detach()),Gt[e]=n),n}function ln(e,t){var n=b(t.createElement(e)).appendTo(t.body),r=b.css(n[0],"display");return n.remove(),r}b.each(["height","width"],function(e,n){b.cssHooks[n]={get:function(e,r,i){return r?0===e.offsetWidth&&Xt.test(b.css(e,"display"))?b.swap(e,Qt,function(){return sn(e,n,i)}):sn(e,n,i):t},set:function(e,t,r){var i=r&&Rt(e);return on(e,t,r?an(e,n,r,b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,i),i):0)}}}),b.support.opacity||(b.cssHooks.opacity={get:function(e,t){return It.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=b.isNumeric(t)?"alpha(opacity="+100*t+")":"",o=r&&r.filter||n.filter||"";n.zoom=1,(t>=1||""===t)&&""===b.trim(o.replace($t,""))&&n.removeAttribute&&(n.removeAttribute("filter"),""===t||r&&!r.filter)||(n.filter=$t.test(o)?o.replace($t,i):o+" "+i)}}),b(function(){b.support.reliableMarginRight||(b.cssHooks.marginRight={get:function(e,n){return n?b.swap(e,{display:"inline-block"},Wt,[e,"marginRight"]):t}}),!b.support.pixelPosition&&b.fn.position&&b.each(["top","left"],function(e,n){b.cssHooks[n]={get:function(e,r){return r?(r=Wt(e,n),Yt.test(r)?b(e).position()[n]+"px":r):t}}})}),b.expr&&b.expr.filters&&(b.expr.filters.hidden=function(e){return 0>=e.offsetWidth&&0>=e.offsetHeight||!b.support.reliableHiddenOffsets&&"none"===(e.style&&e.style.display||b.css(e,"display"))},b.expr.filters.visible=function(e){return!b.expr.filters.hidden(e)}),b.each({margin:"",padding:"",border:"Width"},function(e,t){b.cssHooks[e+t]={expand:function(n){var r=0,i={},o="string"==typeof n?n.split(" "):[n];for(;4>r;r++)i[e+Zt[r]+t]=o[r]||o[r-2]||o[0];return i}},Ut.test(e)||(b.cssHooks[e+t].set=on)});var cn=/%20/g,pn=/\[\]$/,fn=/\r?\n/g,dn=/^(?:submit|button|image|reset|file)$/i,hn=/^(?:input|select|textarea|keygen)/i;b.fn.extend({serialize:function(){return b.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=b.prop(this,"elements");return e?b.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!b(this).is(":disabled")&&hn.test(this.nodeName)&&!dn.test(e)&&(this.checked||!Nt.test(e))}).map(function(e,t){var n=b(this).val();return null==n?null:b.isArray(n)?b.map(n,function(e){return{name:t.name,value:e.replace(fn,"\r\n")}}):{name:t.name,value:n.replace(fn,"\r\n")}}).get()}}),b.param=function(e,n){var r,i=[],o=function(e,t){t=b.isFunction(t)?t():null==t?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};if(n===t&&(n=b.ajaxSettings&&b.ajaxSettings.traditional),b.isArray(e)||e.jquery&&!b.isPlainObject(e))b.each(e,function(){o(this.name,this.value)});else for(r in e)gn(r,e[r],n,o);return i.join("&").replace(cn,"+")};function gn(e,t,n,r){var i;if(b.isArray(t))b.each(t,function(t,i){n||pn.test(e)?r(e,i):gn(e+"["+("object"==typeof i?t:"")+"]",i,n,r)});else if(n||"object"!==b.type(t))r(e,t);else for(i in t)gn(e+"["+i+"]",t[i],n,r)}b.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(e,t){b.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}}),b.fn.hover=function(e,t){return this.mouseenter(e).mouseleave(t||e)};var mn,yn,vn=b.now(),bn=/\?/,xn=/#.*$/,wn=/([?&])_=[^&]*/,Tn=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Nn=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Cn=/^(?:GET|HEAD)$/,kn=/^\/\//,En=/^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,Sn=b.fn.load,An={},jn={},Dn="*/".concat("*");try{yn=a.href}catch(Ln){yn=o.createElement("a"),yn.href="",yn=yn.href}mn=En.exec(yn.toLowerCase())||[];function Hn(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(w)||[];if(b.isFunction(n))while(r=o[i++])"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function qn(e,n,r,i){var o={},a=e===jn;function s(u){var l;return o[u]=!0,b.each(e[u]||[],function(e,u){var c=u(n,r,i);return"string"!=typeof c||a||o[c]?a?!(l=c):t:(n.dataTypes.unshift(c),s(c),!1)}),l}return s(n.dataTypes[0])||!o["*"]&&s("*")}function Mn(e,n){var r,i,o=b.ajaxSettings.flatOptions||{};for(i in n)n[i]!==t&&((o[i]?e:r||(r={}))[i]=n[i]);return r&&b.extend(!0,e,r),e}b.fn.load=function(e,n,r){if("string"!=typeof e&&Sn)return Sn.apply(this,arguments);var i,o,a,s=this,u=e.indexOf(" ");return u>=0&&(i=e.slice(u,e.length),e=e.slice(0,u)),b.isFunction(n)?(r=n,n=t):n&&"object"==typeof n&&(a="POST"),s.length>0&&b.ajax({url:e,type:a,dataType:"html",data:n}).done(function(e){o=arguments,s.html(i?b("<div>").append(b.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},b.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){b.fn[t]=function(e){return this.on(t,e)}}),b.each(["get","post"],function(e,n){b[n]=function(e,r,i,o){return b.isFunction(r)&&(o=o||i,i=r,r=t),b.ajax({url:e,type:n,dataType:o,data:r,success:i})}}),b.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Nn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":b.parseJSON,"text xml":b.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Mn(Mn(e,b.ajaxSettings),t):Mn(b.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,u,l,c,p=b.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?b(f):b.event,h=b.Deferred(),g=b.Callbacks("once memory"),m=p.statusCode||{},y={},v={},x=0,T="canceled",N={readyState:0,getResponseHeader:function(e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===x?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return x||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this},abort:function(e){var t=e||T;return l&&l.abort(t),k(0,t),this}};if(h.promise(N).complete=g.add,N.success=N.done,N.error=N.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=b.trim(p.dataType||"*").toLowerCase().match(w)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?80:443))==(mn[3]||("http:"===mn[1]?80:443)))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=b.param(p.data,p.traditional)),qn(An,p,n,N),2===x)return N;u=p.global,u&&0===b.active++&&b.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Cn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(b.lastModified[o]&&N.setRequestHeader("If-Modified-Since",b.lastModified[o]),b.etag[o]&&N.setRequestHeader("If-None-Match",b.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&N.setRequestHeader("Content-Type",p.contentType),N.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)N.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,N,p)===!1||2===x))return N.abort();T="abort";for(i in{success:1,error:1,complete:1})N[i](p[i]);if(l=qn(jn,p,n,N)){N.readyState=1,u&&d.trigger("ajaxSend",[N,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){N.abort("timeout")},p.timeout));try{x=1,l.send(y,k)}catch(C){if(!(2>x))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,C=n;2!==x&&(x=2,s&&clearTimeout(s),l=t,a=i||"",N.readyState=e>0?4:0,r&&(w=_n(p,N,r)),e>=200&&300>e||304===e?(p.ifModified&&(T=N.getResponseHeader("Last-Modified"),T&&(b.lastModified[o]=T),T=N.getResponseHeader("etag"),T&&(b.etag[o]=T)),204===e?(c=!0,C="nocontent"):304===e?(c=!0,C="notmodified"):(c=Fn(p,w),C=c.state,y=c.data,v=c.error,c=!v)):(v=C,(e||!C)&&(C="error",0>e&&(e=0))),N.status=e,N.statusText=(n||C)+"",c?h.resolveWith(f,[y,C,N]):h.rejectWith(f,[N,C,v]),N.statusCode(m),m=t,u&&d.trigger(c?"ajaxSuccess":"ajaxError",[N,p,c?y:v]),g.fireWith(f,[N,C]),u&&(d.trigger("ajaxComplete",[N,p]),--b.active||b.event.trigger("ajaxStop")))}return N},getScript:function(e,n){return b.get(e,t,n,"script")},getJSON:function(e,t,n){return b.get(e,t,n,"json")}});function _n(e,n,r){var i,o,a,s,u=e.contents,l=e.dataTypes,c=e.responseFields;for(s in c)s in r&&(n[c[s]]=r[s]);while("*"===l[0])l.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in u)if(u[s]&&u[s].test(o)){l.unshift(s);break}if(l[0]in r)a=l[0];else{for(s in r){if(!l[0]||e.converters[s+" "+l[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==l[0]&&l.unshift(a),r[a]):t}function Fn(e,t){var n,r,i,o,a={},s=0,u=e.dataTypes.slice(),l=u[0];if(e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u[1])for(i in e.converters)a[i.toLowerCase()]=e.converters[i];for(;r=u[++s];)if("*"!==r){if("*"!==l&&l!==r){if(i=a[l+" "+r]||a["* "+r],!i)for(n in a)if(o=n.split(" "),o[1]===r&&(i=a[l+" "+o[0]]||a["* "+o[0]])){i===!0?i=a[n]:a[n]!==!0&&(r=o[0],u.splice(s--,0,r));break}if(i!==!0)if(i&&e["throws"])t=i(t);else try{t=i(t)}catch(c){return{state:"parsererror",error:i?c:"No conversion from "+l+" to "+r}}}l=r}return{state:"success",data:t}}b.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return b.globalEval(e),e}}}),b.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),b.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=o.head||b("head")[0]||o.documentElement;return{send:function(t,i){n=o.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var On=[],Bn=/(=)\?(?=&|$)|\?\?/;b.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=On.pop()||b.expando+"_"+vn++;return this[e]=!0,e}}),b.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,u=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return u||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=b.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,u?n[u]=n[u].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||b.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,On.push(o)),s&&b.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}b.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=b.ajaxSettings.xhr(),b.support.cors=!!Rn&&"withCredentials"in Rn,Rn=b.support.ajax=!!Rn,Rn&&b.ajaxTransport(function(n){if(!n.crossDomain||b.support.cors){var r;return{send:function(i,o){var a,s,u=n.xhr();if(n.username?u.open(n.type,n.url,n.async,n.username,n.password):u.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)u[s]=n.xhrFields[s];n.mimeType&&u.overrideMimeType&&u.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)u.setRequestHeader(s,i[s])}catch(l){}u.send(n.hasContent&&n.data||null),r=function(e,i){var s,l,c,p;try{if(r&&(i||4===u.readyState))if(r=t,a&&(u.onreadystatechange=b.noop,$n&&delete Pn[a]),i)4!==u.readyState&&u.abort();else{p={},s=u.status,l=u.getAllResponseHeaders(),"string"==typeof u.responseText&&(p.text=u.responseText);try{c=u.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,l)},n.async?4===u.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},b(e).unload($n)),Pn[a]=r),u.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+x+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n,r,i=this.createTween(e,t),o=Yn.exec(t),a=i.cur(),s=+a||0,u=1,l=20;if(o){if(n=+o[2],r=o[3]||(b.cssNumber[e]?"":"px"),"px"!==r&&s){s=b.css(i.elem,e,!0)||n||1;do u=u||".5",s/=u,b.style(i.elem,e,s+r);while(u!==(u=i.cur()/a)&&1!==u&&--l)}i.unit=r,i.start=s,i.end=o[1]?s+(o[1]+1)*n:n}return i}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=b.now()}function Zn(e,t){b.each(t,function(t,n){var r=(Qn[t]||[]).concat(Qn["*"]),i=0,o=r.length;for(;o>i;i++)if(r[i].call(e,t,n))return})}function er(e,t,n){var r,i,o=0,a=Gn.length,s=b.Deferred().always(function(){delete u.elem}),u=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,l.startTime+l.duration-t),r=n/l.duration||0,o=1-r,a=0,u=l.tweens.length;for(;u>a;a++)l.tweens[a].run(o);return s.notifyWith(e,[l,o,n]),1>o&&u?n:(s.resolveWith(e,[l]),!1)},l=s.promise({elem:e,props:b.extend({},t),opts:b.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=b.Tween(e,l.opts,t,n,l.opts.specialEasing[t]||l.opts.easing);return l.tweens.push(r),r},stop:function(t){var n=0,r=t?l.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)l.tweens[n].run(1);return t?s.resolveWith(e,[l,t]):s.rejectWith(e,[l,t]),this}}),c=l.props;for(tr(c,l.opts.specialEasing);a>o;o++)if(r=Gn[o].call(l,e,c,l.opts))return r;return Zn(l,c),b.isFunction(l.opts.start)&&l.opts.start.call(e,l),b.fx.timer(b.extend(u,{elem:e,anim:l,queue:l.opts.queue})),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always)}function tr(e,t){var n,r,i,o,a;for(i in e)if(r=b.camelCase(i),o=t[r],n=e[i],b.isArray(n)&&(o=n[1],n=e[i]=n[0]),i!==r&&(e[r]=n,delete e[i]),a=b.cssHooks[r],a&&"expand"in a){n=a.expand(n),delete e[r];for(i in n)i in e||(e[i]=n[i],t[i]=o)}else t[r]=o}b.Animation=b.extend(er,{tweener:function(e,t){b.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,u,l,c,p,f=this,d=e.style,h={},g=[],m=e.nodeType&&nn(e);n.queue||(c=b._queueHooks(e,"fx"),null==c.unqueued&&(c.unqueued=0,p=c.empty.fire,c.empty.fire=function(){c.unqueued||p()}),c.unqueued++,f.always(function(){f.always(function(){c.unqueued--,b.queue(e,"fx").length||c.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[d.overflow,d.overflowX,d.overflowY],"inline"===b.css(e,"display")&&"none"===b.css(e,"float")&&(b.support.inlineBlockNeedsLayout&&"inline"!==un(e.nodeName)?d.zoom=1:d.display="inline-block")),n.overflow&&(d.overflow="hidden",b.support.shrinkWrapBlocks||f.always(function(){d.overflow=n.overflow[0],d.overflowX=n.overflow[1],d.overflowY=n.overflow[2]}));for(i in t)if(a=t[i],Vn.exec(a)){if(delete t[i],u=u||"toggle"===a,a===(m?"hide":"show"))continue;g.push(i)}if(o=g.length){s=b._data(e,"fxshow")||b._data(e,"fxshow",{}),"hidden"in s&&(m=s.hidden),u&&(s.hidden=!m),m?b(e).show():f.done(function(){b(e).hide()}),f.done(function(){var t;b._removeData(e,"fxshow");for(t in h)b.style(e,t,h[t])});for(i=0;o>i;i++)r=g[i],l=f.createTween(r,m?s[r]:0),h[r]=s[r]||b.style(e,r),r in s||(s[r]=l.start,m&&(l.end=l.start,l.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}b.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(b.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?b.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=b.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){b.fx.step[e.prop]?b.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[b.cssProps[e.prop]]||b.cssHooks[e.prop])?b.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},b.each(["toggle","show","hide"],function(e,t){var n=b.fn[t];b.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),b.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=b.isEmptyObject(e),o=b.speed(t,n,r),a=function(){var t=er(this,b.extend({},e),o);a.finish=function(){t.stop(!0)},(i||b._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=b.timers,a=b._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&b.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=b._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=b.timers,a=r?r.length:0;for(n.finish=!0,b.queue(this,e,[]),i&&i.cur&&i.cur.finish&&i.cur.finish.call(this),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}b.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){b.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),b.speed=function(e,t,n){var r=e&&"object"==typeof e?b.extend({},e):{complete:n||!n&&t||b.isFunction(e)&&e,duration:e,easing:n&&t||t&&!b.isFunction(t)&&t};return r.duration=b.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in b.fx.speeds?b.fx.speeds[r.duration]:b.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){b.isFunction(r.old)&&r.old.call(this),r.queue&&b.dequeue(this,r.queue)},r},b.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},b.timers=[],b.fx=rr.prototype.init,b.fx.tick=function(){var e,n=b.timers,r=0;for(Xn=b.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||b.fx.stop(),Xn=t},b.fx.timer=function(e){e()&&b.timers.push(e)&&b.fx.start()},b.fx.interval=13,b.fx.start=function(){Un||(Un=setInterval(b.fx.tick,b.fx.interval))},b.fx.stop=function(){clearInterval(Un),Un=null},b.fx.speeds={slow:600,fast:200,_default:400},b.fx.step={},b.expr&&b.expr.filters&&(b.expr.filters.animated=function(e){return b.grep(b.timers,function(t){return e===t.elem}).length}),b.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){b.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,b.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},b.offset={setOffset:function(e,t,n){var r=b.css(e,"position");"static"===r&&(e.style.position="relative");var i=b(e),o=i.offset(),a=b.css(e,"top"),s=b.css(e,"left"),u=("absolute"===r||"fixed"===r)&&b.inArray("auto",[a,s])>-1,l={},c={},p,f;u?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),b.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(l.top=t.top-o.top+p),null!=t.left&&(l.left=t.left-o.left+f),"using"in t?t.using.call(e,l):i.css(l)}},b.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===b.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),b.nodeName(e[0],"html")||(n=e.offset()),n.top+=b.css(e[0],"borderTopWidth",!0),n.left+=b.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-b.css(r,"marginTop",!0),left:t.left-n.left-b.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||o.documentElement;while(e&&!b.nodeName(e,"html")&&"static"===b.css(e,"position"))e=e.offsetParent;return e||o.documentElement})}}),b.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);b.fn[e]=function(i){return b.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?b(a).scrollLeft():o,r?o:b(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return b.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}b.each({Height:"height",Width:"width"},function(e,n){b.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){b.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return b.access(this,function(n,r,i){var o;return b.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?b.css(n,r,s):b.style(n,r,i,s)},n,a?i:t,a,null)}})}),e.jQuery=e.$=b,"function"==typeof define&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return b})})(window);
\ No newline at end of file
+}b.merge(d,s.childNodes),s.textContent="";while(s.firstChild)s.removeChild(s.firstChild);s=f.lastChild}else d.push(t.createTextNode(o));s&&f.removeChild(s),b.support.appendChecked||b.grep(Ot(d,"input"),Bt),h=0;while(o=d[h++])if((!r||-1===b.inArray(o,r))&&(a=b.contains(o.ownerDocument,o),s=Ot(f.appendChild(o),"script"),a&&Mt(s),n)){i=0;while(o=s[i++])kt.test(o.type||"")&&n.push(o)}return s=null,f},cleanData:function(e,t){var n,r,o,a,s=0,u=b.expando,l=b.cache,p=b.support.deleteExpando,f=b.event.special;for(;null!=(n=e[s]);s++)if((t||b.acceptData(n))&&(o=n[u],a=o&&l[o])){if(a.events)for(r in a.events)f[r]?b.event.remove(n,r):b.removeEvent(n,r,a.handle);l[o]&&(delete l[o],p?delete n[u]:typeof n.removeAttribute!==i?n.removeAttribute(u):n[u]=null,c.push(o))}}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+x+")(.*)$","i"),Yt=RegExp("^("+x+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+x+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===b.css(e,"display")||!b.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=b._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=b._data(r,"olddisplay",un(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&b._data(r,"olddisplay",i?n:b.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}b.fn.extend({css:function(e,n){return b.access(this,function(e,n,r){var i,o,a={},s=0;if(b.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=b.css(e,n[s],!1,o);return a}return r!==t?b.style(e,n,r):b.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){var t="boolean"==typeof e;return this.each(function(){(t?e:nn(this))?b(this).show():b(this).hide()})}}),b.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":b.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,u=b.camelCase(n),l=e.style;if(n=b.cssProps[u]||(b.cssProps[u]=tn(l,u)),s=b.cssHooks[n]||b.cssHooks[u],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:l[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(b.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||b.cssNumber[u]||(r+="px"),b.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(l[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{l[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,u=b.camelCase(n);return n=b.cssProps[u]||(b.cssProps[u]=tn(e.style,u)),s=b.cssHooks[n]||b.cssHooks[u],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||b.isNumeric(o)?o||0:a):a},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s.getPropertyValue(n)||s[n]:t,l=e.style;return s&&(""!==u||b.contains(e.ownerDocument,e)||(u=b.style(e,n)),Yt.test(u)&&Ut.test(n)&&(i=l.width,o=l.minWidth,a=l.maxWidth,l.minWidth=l.maxWidth=l.width=u,u=s.width,l.width=i,l.minWidth=o,l.maxWidth=a)),u}):o.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s[n]:t,l=e.style;return null==u&&l&&l[n]&&(u=l[n]),Yt.test(u)&&!zt.test(n)&&(i=l.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),l.left="fontSize"===n?"1em":u,u=l.pixelLeft+"px",l.left=i,a&&(o.left=a)),""===u?"auto":u});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=b.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=b.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=b.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=b.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=b.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Yt.test(i))return i;r=a&&(b.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+an(e,t,n||(a?"border":"content"),r,o)+"px"}function un(e){var t=o,n=Gt[e];return n||(n=ln(e,t),"none"!==n&&n||(Pt=(Pt||b("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(t.documentElement),t=(Pt[0].contentWindow||Pt[0].contentDocument).document,t.write("<!doctype html><html><body>"),t.close(),n=ln(e,t),Pt.detach()),Gt[e]=n),n}function ln(e,t){var n=b(t.createElement(e)).appendTo(t.body),r=b.css(n[0],"display");return n.remove(),r}b.each(["height","width"],function(e,n){b.cssHooks[n]={get:function(e,r,i){return r?0===e.offsetWidth&&Xt.test(b.css(e,"display"))?b.swap(e,Qt,function(){return sn(e,n,i)}):sn(e,n,i):t},set:function(e,t,r){var i=r&&Rt(e);return on(e,t,r?an(e,n,r,b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,i),i):0)}}}),b.support.opacity||(b.cssHooks.opacity={get:function(e,t){return It.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=b.isNumeric(t)?"alpha(opacity="+100*t+")":"",o=r&&r.filter||n.filter||"";n.zoom=1,(t>=1||""===t)&&""===b.trim(o.replace($t,""))&&n.removeAttribute&&(n.removeAttribute("filter"),""===t||r&&!r.filter)||(n.filter=$t.test(o)?o.replace($t,i):o+" "+i)}}),b(function(){b.support.reliableMarginRight||(b.cssHooks.marginRight={get:function(e,n){return n?b.swap(e,{display:"inline-block"},Wt,[e,"marginRight"]):t}}),!b.support.pixelPosition&&b.fn.position&&b.each(["top","left"],function(e,n){b.cssHooks[n]={get:function(e,r){return r?(r=Wt(e,n),Yt.test(r)?b(e).position()[n]+"px":r):t}}})}),b.expr&&b.expr.filters&&(b.expr.filters.hidden=function(e){return 0>=e.offsetWidth&&0>=e.offsetHeight||!b.support.reliableHiddenOffsets&&"none"===(e.style&&e.style.display||b.css(e,"display"))},b.expr.filters.visible=function(e){return!b.expr.filters.hidden(e)}),b.each({margin:"",padding:"",border:"Width"},function(e,t){b.cssHooks[e+t]={expand:function(n){var r=0,i={},o="string"==typeof n?n.split(" "):[n];for(;4>r;r++)i[e+Zt[r]+t]=o[r]||o[r-2]||o[0];return i}},Ut.test(e)||(b.cssHooks[e+t].set=on)});var cn=/%20/g,pn=/\[\]$/,fn=/\r?\n/g,dn=/^(?:submit|button|image|reset|file)$/i,hn=/^(?:input|select|textarea|keygen)/i;b.fn.extend({serialize:function(){return b.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=b.prop(this,"elements");return e?b.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!b(this).is(":disabled")&&hn.test(this.nodeName)&&!dn.test(e)&&(this.checked||!Nt.test(e))}).map(function(e,t){var n=b(this).val();return null==n?null:b.isArray(n)?b.map(n,function(e){return{name:t.name,value:e.replace(fn,"\r\n")}}):{name:t.name,value:n.replace(fn,"\r\n")}}).get()}}),b.param=function(e,n){var r,i=[],o=function(e,t){t=b.isFunction(t)?t():null==t?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};if(n===t&&(n=b.ajaxSettings&&b.ajaxSettings.traditional),b.isArray(e)||e.jquery&&!b.isPlainObject(e))b.each(e,function(){o(this.name,this.value)});else for(r in e)gn(r,e[r],n,o);return i.join("&").replace(cn,"+")};function gn(e,t,n,r){var i;if(b.isArray(t))b.each(t,function(t,i){n||pn.test(e)?r(e,i):gn(e+"["+("object"==typeof i?t:"")+"]",i,n,r)});else if(n||"object"!==b.type(t))r(e,t);else for(i in t)gn(e+"["+i+"]",t[i],n,r)}b.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(e,t){b.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}}),b.fn.hover=function(e,t){return this.mouseenter(e).mouseleave(t||e)};var mn,yn,vn=b.now(),bn=/\?/,xn=/#.*$/,wn=/([?&])_=[^&]*/,Tn=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Nn=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Cn=/^(?:GET|HEAD)$/,kn=/^\/\//,En=/^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,Sn=b.fn.load,An={},jn={},Dn="*/".concat("*");try{yn=a.href}catch(Ln){yn=o.createElement("a"),yn.href="",yn=yn.href}mn=En.exec(yn.toLowerCase())||[];function Hn(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(w)||[];if(b.isFunction(n))while(r=o[i++])"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function qn(e,n,r,i){var o={},a=e===jn;function s(u){var l;return o[u]=!0,b.each(e[u]||[],function(e,u){var c=u(n,r,i);return"string"!=typeof c||a||o[c]?a?!(l=c):t:(n.dataTypes.unshift(c),s(c),!1)}),l}return s(n.dataTypes[0])||!o["*"]&&s("*")}function Mn(e,n){var r,i,o=b.ajaxSettings.flatOptions||{};for(i in n)n[i]!==t&&((o[i]?e:r||(r={}))[i]=n[i]);return r&&b.extend(!0,e,r),e}b.fn.load=function(e,n,r){if("string"!=typeof e&&Sn)return Sn.apply(this,arguments);var i,o,a,s=this,u=e.indexOf(" ");return u>=0&&(i=e.slice(u,e.length),e=e.slice(0,u)),b.isFunction(n)?(r=n,n=t):n&&"object"==typeof n&&(a="POST"),s.length>0&&b.ajax({url:e,type:a,dataType:"html",data:n}).done(function(e){o=arguments,s.html(i?b("<div>").append(b.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},b.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){b.fn[t]=function(e){return this.on(t,e)}}),b.each(["get","post"],function(e,n){b[n]=function(e,r,i,o){return b.isFunction(r)&&(o=o||i,i=r,r=t),b.ajax({url:e,type:n,dataType:o,data:r,success:i})}}),b.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Nn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":b.parseJSON,"text xml":b.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Mn(Mn(e,b.ajaxSettings),t):Mn(b.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,u,l,c,p=b.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?b(f):b.event,h=b.Deferred(),g=b.Callbacks("once memory"),m=p.statusCode||{},y={},v={},x=0,T="canceled",N={readyState:0,getResponseHeader:function(e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===x?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return x||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this},abort:function(e){var t=e||T;return l&&l.abort(t),k(0,t),this}};if(h.promise(N).complete=g.add,N.success=N.done,N.error=N.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=b.trim(p.dataType||"*").toLowerCase().match(w)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?80:443))==(mn[3]||("http:"===mn[1]?80:443)))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=b.param(p.data,p.traditional)),qn(An,p,n,N),2===x)return N;u=p.global,u&&0===b.active++&&b.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Cn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(b.lastModified[o]&&N.setRequestHeader("If-Modified-Since",b.lastModified[o]),b.etag[o]&&N.setRequestHeader("If-None-Match",b.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&N.setRequestHeader("Content-Type",p.contentType),N.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)N.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,N,p)===!1||2===x))return N.abort();T="abort";for(i in{success:1,error:1,complete:1})N[i](p[i]);if(l=qn(jn,p,n,N)){N.readyState=1,u&&d.trigger("ajaxSend",[N,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){N.abort("timeout")},p.timeout));try{x=1,l.send(y,k)}catch(C){if(!(2>x))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,C=n;2!==x&&(x=2,s&&clearTimeout(s),l=t,a=i||"",N.readyState=e>0?4:0,r&&(w=_n(p,N,r)),e>=200&&300>e||304===e?(p.ifModified&&(T=N.getResponseHeader("Last-Modified"),T&&(b.lastModified[o]=T),T=N.getResponseHeader("etag"),T&&(b.etag[o]=T)),204===e?(c=!0,C="nocontent"):304===e?(c=!0,C="notmodified"):(c=Fn(p,w),C=c.state,y=c.data,v=c.error,c=!v)):(v=C,(e||!C)&&(C="error",0>e&&(e=0))),N.status=e,N.statusText=(n||C)+"",c?h.resolveWith(f,[y,C,N]):h.rejectWith(f,[N,C,v]),N.statusCode(m),m=t,u&&d.trigger(c?"ajaxSuccess":"ajaxError",[N,p,c?y:v]),g.fireWith(f,[N,C]),u&&(d.trigger("ajaxComplete",[N,p]),--b.active||b.event.trigger("ajaxStop")))}return N},getScript:function(e,n){return b.get(e,t,n,"script")},getJSON:function(e,t,n){return b.get(e,t,n,"json")}});function _n(e,n,r){var i,o,a,s,u=e.contents,l=e.dataTypes,c=e.responseFields;for(s in c)s in r&&(n[c[s]]=r[s]);while("*"===l[0])l.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in u)if(u[s]&&u[s].test(o)){l.unshift(s);break}if(l[0]in r)a=l[0];else{for(s in r){if(!l[0]||e.converters[s+" "+l[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==l[0]&&l.unshift(a),r[a]):t}function Fn(e,t){var n,r,i,o,a={},s=0,u=e.dataTypes.slice(),l=u[0];if(e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u[1])for(i in e.converters)a[i.toLowerCase()]=e.converters[i];for(;r=u[++s];)if("*"!==r){if("*"!==l&&l!==r){if(i=a[l+" "+r]||a["* "+r],!i)for(n in a)if(o=n.split(" "),o[1]===r&&(i=a[l+" "+o[0]]||a["* "+o[0]])){i===!0?i=a[n]:a[n]!==!0&&(r=o[0],u.splice(s--,0,r));break}if(i!==!0)if(i&&e["throws"])t=i(t);else try{t=i(t)}catch(c){return{state:"parsererror",error:i?c:"No conversion from "+l+" to "+r}}}l=r}return{state:"success",data:t}}b.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return b.globalEval(e),e}}}),b.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),b.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=o.head||b("head")[0]||o.documentElement;return{send:function(t,i){n=o.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var On=[],Bn=/(=)\?(?=&|$)|\?\?/;b.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=On.pop()||b.expando+"_"+vn++;return this[e]=!0,e}}),b.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,u=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return u||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=b.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,u?n[u]=n[u].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||b.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,On.push(o)),s&&b.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}b.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=b.ajaxSettings.xhr(),b.support.cors=!!Rn&&"withCredentials"in Rn,Rn=b.support.ajax=!!Rn,Rn&&b.ajaxTransport(function(n){if(!n.crossDomain||b.support.cors){var r;return{send:function(i,o){var a,s,u=n.xhr();if(n.username?u.open(n.type,n.url,n.async,n.username,n.password):u.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)u[s]=n.xhrFields[s];n.mimeType&&u.overrideMimeType&&u.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)u.setRequestHeader(s,i[s])}catch(l){}u.send(n.hasContent&&n.data||null),r=function(e,i){var s,l,c,p;try{if(r&&(i||4===u.readyState))if(r=t,a&&(u.onreadystatechange=b.noop,$n&&delete Pn[a]),i)4!==u.readyState&&u.abort();else{p={},s=u.status,l=u.getAllResponseHeaders(),"string"==typeof u.responseText&&(p.text=u.responseText);try{c=u.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,l)},n.async?4===u.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},b(e).unload($n)),Pn[a]=r),u.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+x+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n,r,i=this.createTween(e,t),o=Yn.exec(t),a=i.cur(),s=+a||0,u=1,l=20;if(o){if(n=+o[2],r=o[3]||(b.cssNumber[e]?"":"px"),"px"!==r&&s){s=b.css(i.elem,e,!0)||n||1;do u=u||".5",s/=u,b.style(i.elem,e,s+r);while(u!==(u=i.cur()/a)&&1!==u&&--l)}i.unit=r,i.start=s,i.end=o[1]?s+(o[1]+1)*n:n}return i}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=b.now()}function Zn(e,t){b.each(t,function(t,n){var r=(Qn[t]||[]).concat(Qn["*"]),i=0,o=r.length;for(;o>i;i++)if(r[i].call(e,t,n))return})}function er(e,t,n){var r,i,o=0,a=Gn.length,s=b.Deferred().always(function(){delete u.elem}),u=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,l.startTime+l.duration-t),r=n/l.duration||0,o=1-r,a=0,u=l.tweens.length;for(;u>a;a++)l.tweens[a].run(o);return s.notifyWith(e,[l,o,n]),1>o&&u?n:(s.resolveWith(e,[l]),!1)},l=s.promise({elem:e,props:b.extend({},t),opts:b.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=b.Tween(e,l.opts,t,n,l.opts.specialEasing[t]||l.opts.easing);return l.tweens.push(r),r},stop:function(t){var n=0,r=t?l.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)l.tweens[n].run(1);return t?s.resolveWith(e,[l,t]):s.rejectWith(e,[l,t]),this}}),c=l.props;for(tr(c,l.opts.specialEasing);a>o;o++)if(r=Gn[o].call(l,e,c,l.opts))return r;return Zn(l,c),b.isFunction(l.opts.start)&&l.opts.start.call(e,l),b.fx.timer(b.extend(u,{elem:e,anim:l,queue:l.opts.queue})),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always)}function tr(e,t){var n,r,i,o,a;for(i in e)if(r=b.camelCase(i),o=t[r],n=e[i],b.isArray(n)&&(o=n[1],n=e[i]=n[0]),i!==r&&(e[r]=n,delete e[i]),a=b.cssHooks[r],a&&"expand"in a){n=a.expand(n),delete e[r];for(i in n)i in e||(e[i]=n[i],t[i]=o)}else t[r]=o}b.Animation=b.extend(er,{tweener:function(e,t){b.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,u,l,c,p,f=this,d=e.style,h={},g=[],m=e.nodeType&&nn(e);n.queue||(c=b._queueHooks(e,"fx"),null==c.unqueued&&(c.unqueued=0,p=c.empty.fire,c.empty.fire=function(){c.unqueued||p()}),c.unqueued++,f.always(function(){f.always(function(){c.unqueued--,b.queue(e,"fx").length||c.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[d.overflow,d.overflowX,d.overflowY],"inline"===b.css(e,"display")&&"none"===b.css(e,"float")&&(b.support.inlineBlockNeedsLayout&&"inline"!==un(e.nodeName)?d.zoom=1:d.display="inline-block")),n.overflow&&(d.overflow="hidden",b.support.shrinkWrapBlocks||f.always(function(){d.overflow=n.overflow[0],d.overflowX=n.overflow[1],d.overflowY=n.overflow[2]}));for(i in t)if(a=t[i],Vn.exec(a)){if(delete t[i],u=u||"toggle"===a,a===(m?"hide":"show"))continue;g.push(i)}if(o=g.length){s=b._data(e,"fxshow")||b._data(e,"fxshow",{}),"hidden"in s&&(m=s.hidden),u&&(s.hidden=!m),m?b(e).show():f.done(function(){b(e).hide()}),f.done(function(){var t;b._removeData(e,"fxshow");for(t in h)b.style(e,t,h[t])});for(i=0;o>i;i++)r=g[i],l=f.createTween(r,m?s[r]:0),h[r]=s[r]||b.style(e,r),r in s||(s[r]=l.start,m&&(l.end=l.start,l.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}b.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(b.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?b.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=b.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){b.fx.step[e.prop]?b.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[b.cssProps[e.prop]]||b.cssHooks[e.prop])?b.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},b.each(["toggle","show","hide"],function(e,t){var n=b.fn[t];b.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),b.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=b.isEmptyObject(e),o=b.speed(t,n,r),a=function(){var t=er(this,b.extend({},e),o);a.finish=function(){t.stop(!0)},(i||b._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=b.timers,a=b._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&b.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=b._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=b.timers,a=r?r.length:0;for(n.finish=!0,b.queue(this,e,[]),i&&i.cur&&i.cur.finish&&i.cur.finish.call(this),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}b.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){b.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),b.speed=function(e,t,n){var r=e&&"object"==typeof e?b.extend({},e):{complete:n||!n&&t||b.isFunction(e)&&e,duration:e,easing:n&&t||t&&!b.isFunction(t)&&t};return r.duration=b.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in b.fx.speeds?b.fx.speeds[r.duration]:b.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){b.isFunction(r.old)&&r.old.call(this),r.queue&&b.dequeue(this,r.queue)},r},b.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},b.timers=[],b.fx=rr.prototype.init,b.fx.tick=function(){var e,n=b.timers,r=0;for(Xn=b.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||b.fx.stop(),Xn=t},b.fx.timer=function(e){e()&&b.timers.push(e)&&b.fx.start()},b.fx.interval=13,b.fx.start=function(){Un||(Un=setInterval(b.fx.tick,b.fx.interval))},b.fx.stop=function(){clearInterval(Un),Un=null},b.fx.speeds={slow:600,fast:200,_default:400},b.fx.step={},b.expr&&b.expr.filters&&(b.expr.filters.animated=function(e){return b.grep(b.timers,function(t){return e===t.elem}).length}),b.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){b.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,b.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},b.offset={setOffset:function(e,t,n){var r=b.css(e,"position");"static"===r&&(e.style.position="relative");var i=b(e),o=i.offset(),a=b.css(e,"top"),s=b.css(e,"left"),u=("absolute"===r||"fixed"===r)&&b.inArray("auto",[a,s])>-1,l={},c={},p,f;u?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),b.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(l.top=t.top-o.top+p),null!=t.left&&(l.left=t.left-o.left+f),"using"in t?t.using.call(e,l):i.css(l)}},b.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===b.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),b.nodeName(e[0],"html")||(n=e.offset()),n.top+=b.css(e[0],"borderTopWidth",!0),n.left+=b.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-b.css(r,"marginTop",!0),left:t.left-n.left-b.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||o.documentElement;while(e&&!b.nodeName(e,"html")&&"static"===b.css(e,"position"))e=e.offsetParent;return e||o.documentElement})}}),b.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);b.fn[e]=function(i){return b.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?b(a).scrollLeft():o,r?o:b(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return b.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}b.each({Height:"height",Width:"width"},function(e,n){b.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){b.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return b.access(this,function(n,r,i){var o;return b.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?b.css(n,r,s):b.style(n,r,i,s)},n,a?i:t,a,null)}})}),e.jQuery=e.$=b,"function"==typeof define&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return b})})(window);
diff --git a/docs/assets/js/respond/respond.min.js b/docs/assets/js/respond/respond.min.js
index b7d5c7e62..56418a245 100644
--- a/docs/assets/js/respond/respond.min.js
+++ b/docs/assets/js/respond/respond.min.js
@@ -3,4 +3,4 @@
 window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document);
 
 /*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
-(function(a){"use strict";function x(){u(!0)}var b={};a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,b.mediaQueriesSupported;var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var a=m.shift();v(a.href,function(b){p(b,a.href,a.media),h[a.href]=!0,setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(a){var b="clientWidth",h=d[b],k="CSS1Compat"===c.compatMode&&h||c.body[b]||h,m={},n=l[l.length-1],o=(new Date).getTime();if(a&&q&&i>o-q)return clearTimeout(r),r=setTimeout(u,i),void 0;q=o;for(var p in e)if(e.hasOwnProperty(p)){var v=e[p],w=v.minw,x=v.maxw,y=null===w,z=null===x,A="em";w&&(w=parseFloat(w)*(w.indexOf(A)>-1?t||s():1)),x&&(x=parseFloat(x)*(x.indexOf(A)>-1?t||s():1)),v.hasquery&&(y&&z||!(y||k>=w)||!(z||x>=k))||(m[v.media]||(m[v.media]=[]),m[v.media].push(f[v.rules]))}for(var B in g)g.hasOwnProperty(B)&&g[B]&&g[B].parentNode===j&&j.removeChild(g[B]);for(var C in m)if(m.hasOwnProperty(C)){var D=c.createElement("style"),E=m[C].join("\n");D.type="text/css",D.media=C,j.insertBefore(D,n.nextSibling),D.styleSheet?D.styleSheet.cssText=E:D.appendChild(c.createTextNode(E)),g.push(D)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)})(this);
\ No newline at end of file
+(function(a){"use strict";function x(){u(!0)}var b={};a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,b.mediaQueriesSupported;var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var a=m.shift();v(a.href,function(b){p(b,a.href,a.media),h[a.href]=!0,setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(a){var b="clientWidth",h=d[b],k="CSS1Compat"===c.compatMode&&h||c.body[b]||h,m={},n=l[l.length-1],o=(new Date).getTime();if(a&&q&&i>o-q)return clearTimeout(r),r=setTimeout(u,i),void 0;q=o;for(var p in e)if(e.hasOwnProperty(p)){var v=e[p],w=v.minw,x=v.maxw,y=null===w,z=null===x,A="em";w&&(w=parseFloat(w)*(w.indexOf(A)>-1?t||s():1)),x&&(x=parseFloat(x)*(x.indexOf(A)>-1?t||s():1)),v.hasquery&&(y&&z||!(y||k>=w)||!(z||x>=k))||(m[v.media]||(m[v.media]=[]),m[v.media].push(f[v.rules]))}for(var B in g)g.hasOwnProperty(B)&&g[B]&&g[B].parentNode===j&&j.removeChild(g[B]);for(var C in m)if(m.hasOwnProperty(C)){var D=c.createElement("style"),E=m[C].join("\n");D.type="text/css",D.media=C,j.insertBefore(D,n.nextSibling),D.styleSheet?D.styleSheet.cssText=E:D.appendChild(c.createTextNode(E)),g.push(D)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)})(this);
-- 
cgit v1.2.3


From 57ba494409f91f63b1b1a6ac3d2e74da9635135e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 26 Apr 2013 10:44:44 -0700
Subject: running make

---
 docs/assets/css/bootstrap.css   | 17 ++++++++++-------
 docs/assets/js/bootstrap.js     | 21 ++++++++++++++-------
 docs/assets/js/bootstrap.min.js |  2 +-
 3 files changed, 25 insertions(+), 15 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c7e2b4eb1..f8db46767 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4796,19 +4796,19 @@ a.thumbnail:focus {
 }
 
 .label[href]:hover,
-a.label:hover,
-.label[href]:focus,
-a.label:focus {
+.label[href]:focus {
   color: #fff;
   text-decoration: none;
   cursor: pointer;
+  background-color: #808080;
 }
 
 .label-danger {
   background-color: #d9534f;
 }
 
-.label-danger[href] {
+.label-danger[href]:hover,
+.label-danger[href]:focus {
   background-color: #c9302c;
 }
 
@@ -4816,7 +4816,8 @@ a.label:focus {
   background-color: #5cb85c;
 }
 
-.label-success[href] {
+.label-success[href]:hover,
+.label-success[href]:focus {
   background-color: #449d44;
 }
 
@@ -4824,7 +4825,8 @@ a.label:focus {
   background-color: #f0ad4e;
 }
 
-.label-warning[href] {
+.label-warning[href]:hover,
+.label-warning[href]:focus {
   background-color: #ec971f;
 }
 
@@ -4832,7 +4834,8 @@ a.label:focus {
   background-color: #5bc0de;
 }
 
-.label-info[href] {
+.label-info[href]:hover,
+.label-info[href]:focus {
   background-color: #31b0d5;
 }
 
diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
index c0c8a77bb..8de108627 100644
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -57,7 +57,8 @@
 
   })
 
-}(window.jQuery);/* ==========================================================
+}(window.jQuery);
+/* ==========================================================
  * bootstrap-alert.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#alerts
  * ==========================================================
@@ -155,7 +156,8 @@
 
   $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)
 
-}(window.jQuery);/* ============================================================
+}(window.jQuery);
+/* ============================================================
  * bootstrap-button.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#buttons
  * ============================================================
@@ -259,7 +261,8 @@
     $btn.button('toggle')
   })
 
-}(window.jQuery);/* ==========================================================
+}(window.jQuery);
+/* ==========================================================
  * bootstrap-carousel.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#carousel
  * ==========================================================
@@ -465,7 +468,8 @@
     e.preventDefault()
   })
 
-}(window.jQuery);/* =============================================================
+}(window.jQuery);
+/* =============================================================
  * bootstrap-collapse.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#collapse
  * =============================================================
@@ -631,7 +635,8 @@
     $(target).collapse(option)
   })
 
-}(window.jQuery);/* ============================================================
+}(window.jQuery);
+/* ============================================================
  * bootstrap-dropdown.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#dropdowns
  * ============================================================
@@ -1683,7 +1688,8 @@
     })
   })
 
-}(window.jQuery);/* ========================================================
+}(window.jQuery);
+/* ========================================================
  * bootstrap-tab.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#tabs
  * ========================================================
@@ -1826,7 +1832,8 @@
     $(this).tab('show')
   })
 
-}(window.jQuery);/* =============================================================
+}(window.jQuery);
+/* =============================================================
  * bootstrap-typeahead.js v3.0.0
  * http://twitter.github.com/bootstrap/javascript.html#typeahead
  * =============================================================
diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js
index 7f1b1a73c..646b3bc73 100644
--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
@@ -3,4 +3,4 @@
 * Copyright 2012 Twitter, Inc.
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
-!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
+!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
-- 
cgit v1.2.3


From aa146582d6e4f23a36edf9bddb1570d16cd61f34 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 26 Apr 2013 20:51:48 -0700
Subject: Redo the getting started section to mention BootstrapCDN

---
 docs/assets/css/docs.css | 10 +++++++++
 docs/docs.html           | 53 ++++++++++++++++++++++++++++++------------------
 2 files changed, 43 insertions(+), 20 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3f3a253c8..ad211d2fd 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -13,6 +13,16 @@ body {
   /* We add the padding to the body for >768px only */
 }
 
+hr {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.bs-docs-dl-options h4 {
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+
 .bs-docs-container,
 .bs-home-container {
   padding-left: 15px;
diff --git a/docs/docs.html b/docs/docs.html
index e62e44661..bd61e6a6b 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -19,28 +19,41 @@ title: Bootstrap Documentation
       <h1>Getting started</h1>
     </div>
     <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
-    <div class="row">
-      <div class="col-span-6">
-        <h3>Compiled CSS and JS</h3>
-        <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
-        <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-      </div>
-      <div class="col-span-6">
-        <h3>Latest source code</h3>
-        <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
-        <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
-      </div>
-      <div class="col-span-6">
-        <h3>Clone or fork via GitHub</h3>
-        <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
-        <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p>
-      </div>
-      <div class="col-span-6">
-        <h3>Bower</h3>
-        <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
+
+    <h3>Download compiled CSS and JS</h3>
+    <p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
+    <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+
+    <hr>
+
+    <h3 id="download-options">More download options</h3>
+    <div class="bs-docs-dl-options">
+      <h4>
+        <a href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
+      </h4>
+      <p>Get the original files for all CSS and JavaScript by downloading the latest version directly from GitHub.</p>
+      <h4>
+        <a href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
+      </h4>
+      <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
+      <h4>
+        Install with <a href="http://twitter.github.com/bower">Bower</a>
+      </h4>
+      <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
         {% highlight bash %}$ bower install bootstrap{% endhighlight %}
-      </div>
     </div>
+
+    <hr>
+
+    <h3 id="bootstrap-cdn">Use the Bootstrap CDN</h3>
+    <p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
+{% highlight html linenos %}
+<!-- Latest compiled and minified CSS -->
+<link href="//netdna.bootstrapcdn.com/bootstrap/head/css/bootstrap.min.css">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="//netdna.bootstrapcdn.com/bootstrap/head/js/bootstrap.min.js"></script>
+{% endhighlight %}
   </div>
 
   <!-- File structure
-- 
cgit v1.2.3


From 8ae9c6ab34128ea863343abaeff39ca7c6f4618c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 26 Apr 2013 23:13:04 -0700
Subject: Fixes #7688: move font-weight for glyphicons to before pseudo element

---
 docs/assets/css/bootstrap.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f8db46767..70b610e52 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2147,15 +2147,14 @@ fieldset[disabled] .btn-link:focus {
 
 @font-face {
   font-family: 'Glyphicons Halflings';
-  font-style: normal;
-  font-weight: normal;
   src: url('../fonts/glyphiconshalflings-regular.eot');
   src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 
-.glyphicon:before {
+.glyphicon::before {
   font-family: 'Glyphicons Halflings';
   font-style: normal;
+  font-weight: normal;
   line-height: 1;
 }
 
-- 
cgit v1.2.3


From efd3b0c1711a443e5ad97c6278addadfe2cedc5d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 26 Apr 2013 23:59:51 -0700
Subject: Back to two grid classes, .col and .col-lg-*

---
 docs/assets/css/bootstrap.css |  73 +++++-----
 docs/assets/css/docs.css      |   4 +-
 docs/docs.html                | 306 +++++++++++++++++++++---------------------
 3 files changed, 190 insertions(+), 193 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 70b610e52..380a75738 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -784,107 +784,98 @@ pre code {
   margin-left: -15px;
 }
 
-[class*="col-span-"],
-[class*="col-small-"] {
+.col {
   position: relative;
+  float: left;
+  width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
-[class*="col-small-"] {
-  float: left;
-}
-
-.col-small-span-12 {
+.col-sm-12 {
   width: 100%;
 }
 
-.col-small-span-11 {
+.col-sm-11 {
   width: 91.66666666666666%;
 }
 
-.col-small-span-10 {
+.col-sm-10 {
   width: 83.33333333333334%;
 }
 
-.col-small-span-9 {
+.col-sm-9 {
   width: 75%;
 }
 
-.col-small-span-8 {
+.col-sm-8 {
   width: 66.66666666666666%;
 }
 
-.col-small-span-7 {
+.col-sm-7 {
   width: 58.333333333333336%;
 }
 
-.col-small-span-6 {
+.col-sm-6 {
   width: 50%;
 }
 
-.col-small-span-5 {
+.col-sm-5 {
   width: 41.66666666666667%;
 }
 
-.col-small-span-4 {
+.col-sm-4 {
   width: 33.33333333333333%;
 }
 
-.col-small-span-3 {
+.col-sm-3 {
   width: 25%;
 }
 
-.col-small-span-2 {
+.col-sm-2 {
   width: 16.666666666666664%;
 }
 
-.col-small-span-1 {
+.col-sm-1 {
   width: 8.333333333333332%;
 }
 
 @media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
-  }
-  [class*="col-span-"] {
-    float: left;
-  }
-  .col-span-12 {
+  .col-lg-12 {
     width: 100%;
   }
-  .col-span-11 {
+  .col-lg-11 {
     width: 91.66666666666666%;
   }
-  .col-span-10 {
+  .col-lg-10 {
     width: 83.33333333333334%;
   }
-  .col-span-9 {
+  .col-lg-9 {
     width: 75%;
   }
-  .col-span-8 {
+  .col-lg-8 {
     width: 66.66666666666666%;
   }
-  .col-span-7 {
+  .col-lg-7 {
     width: 58.333333333333336%;
   }
-  .col-span-6 {
+  .col-lg-6 {
     width: 50%;
   }
-  .col-span-5 {
+  .col-lg-5 {
     width: 41.66666666666667%;
   }
-  .col-span-4 {
+  .col-lg-4 {
     width: 33.33333333333333%;
   }
-  .col-span-3 {
+  .col-lg-3 {
     width: 25%;
   }
-  .col-span-2 {
+  .col-lg-2 {
     width: 16.666666666666664%;
   }
-  .col-span-1 {
+  .col-lg-1 {
     width: 8.333333333333332%;
   }
   .col-offset-12 {
@@ -997,6 +988,12 @@ pre code {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .container {
+    max-width: 728px;
+  }
+}
+
 @media screen and (min-width: 992px) {
   .container {
     max-width: 940px;
@@ -1009,9 +1006,9 @@ pre code {
   }
 }
 
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
 
 table {
   max-width: 100%;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3f3a253c8..9a6aa99cb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -124,13 +124,13 @@ section > ul li {
 .show-grid {
   margin-bottom: 15px;
 }
-.show-grid [class*="col-span-"] {
+.show-grid .col {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
 }
-.show-grid [class*="col-span-"]:hover {
+.show-grid .col:hover {
   background-color: #ddd;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index e62e44661..3ea2d84f7 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -20,22 +20,22 @@ title: Bootstrap Documentation
     </div>
     <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
     <div class="row">
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Compiled CSS and JS</h3>
         <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
         <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Latest source code</h3>
         <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Clone or fork via GitHub</h3>
         <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Bower</h3>
         <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
         {% highlight bash %}$ bower install bootstrap{% endhighlight %}
@@ -110,63 +110,63 @@ title: Bootstrap Documentation
 
     <h3>Examples</h3>
     <div class="row bs-docs-examples">
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/starter-template/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
         </a>
         <h4>Starter template</h4>
         <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/grid/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
         </a>
         <h4>Basic grid layouts</h4>
         <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
         </a>
         <h4>Basic marketing site</h4>
         <p>Features a jumbotron for primary message and three supporting elements.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
         </a>
         <h4>Narrow marketing</h4>
         <p>Slim, lightweight marketing template for small projects or teams.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
         </a>
         <h4>Justified nav</h4>
         <p>Marketing page with equal-width navigation links in a modified navbar.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/signin/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
         </a>
         <h4>Sign in</h4>
         <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
         </a>
         <h4>Sticky footer</h4>
         <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
         </a>
         <h4>Sticky footer w/ navbar</h4>
         <p>Add a fixed navbar to the default sticky footer template.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/carousel/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
         </a>
@@ -174,21 +174,21 @@ title: Bootstrap Documentation
         <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
       </div>
 
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
         </a>
         <h4>Navbar</h4>
         <p>Basic template for showcasing how the navbar works.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
         </a>
         <h4>Static top navbar</h4>
         <p>Basic template for showcasing the static navbar variation.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
         </a>
@@ -338,81 +338,81 @@ title: Bootstrap Documentation
     <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
       </div>
       <div class="row show-grid">
-        <div class="col-span-4">4</div>
-        <div class="col-span-4">4</div>
-        <div class="col-span-4">4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4">4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-span-6">6</div>
-        <div class="col-span-6">6</div>
+        <div class="col col-lg-6">6</div>
+        <div class="col col-lg-6">6</div>
       </div>
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
 </div>
 <div class="row">
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
+  <div class="col col-lg-4">4</div>
+  <div class="col col-lg-4">4</div>
+  <div class="col col-lg-4">4</div>
 </div>
 <div class="row">
-  <div class="col-span-6">6</div>
-  <div class="col-span-6">6</div>
+  <div class="col col-lg-6">6</div>
+  <div class="col col-lg-6">6</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-span-4">4</div>
-        <div class="col-span-4 col-offset-4">4 offset 4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4 col-offset-4">4 offset 4</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col-span-3 col-offset-3">3 offset 3</div>
-        <div class="col-span-3 col-offset-3">3 offset 3</div>
+        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col-span-6 col-offset-3">6 offset 3</div>
+        <div class="col col-lg-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4">...</div>
-  <div class="col-span-4 col-offset-4">...</div>
+  <div class="col col-lg-4">...</div>
+  <div class="col col-lg-4 col-offset-4">...</div>
 </div>
 <div class="row">
-  <div class="col-span-3 col-offset-3">3 offset 3</div>
-  <div class="col-span-3 col-offset-3">3 offset 3</div>
+  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
 </div>
 <div class="row">
-  <div class="col-span-6 col-offset-3">...</div>
+  <div class="col col-lg-6 col-offset-3">...</div>
 </div>
 {% endhighlight %}
 
@@ -420,13 +420,13 @@ title: Bootstrap Documentation
     <h3 id="grid-nesting">Nesting columns</h3>
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
-      <div class="col-span-9">
+      <div class="col col-lg-9">
         Level 1: 9 columns
         <div class="row show-grid">
-          <div class="col-span-6">
+          <div class="col col-lg-6">
             Level 2: 6 columns
           </div>
-          <div class="col-span-6">
+          <div class="col col-lg-6">
             Level 2: 6 columns
           </div>
         </div>
@@ -434,13 +434,13 @@ title: Bootstrap Documentation
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-9">
+  <div class="col col-lg-9">
     Level 1: 9 columns
     <div class="row">
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         Level 2: 6 columns
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         Level 2: 6 columns
       </div>
     </div>
@@ -451,29 +451,29 @@ title: Bootstrap Documentation
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col-span-9 col-push-3">9</div>
-      <div class="col-span-3 col-pull-9">3</div>
+      <div class="col col-lg-9 col-push-3">9</div>
+      <div class="col col-lg-3 col-pull-9">3</div>
     </div>
 
 {% highlight html linenos %}
 <div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
+  <div class="col col-lg-9 col-push-3">9</div>
+  <div class="col col-lg-3 col-pull-9">3</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-small">Small device grid</h3>
-    <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
+    <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
     <div class="row show-grid">
-      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-      <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-  <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
 </div>
 {% endhighlight %}
 
@@ -1186,8 +1186,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use contextual classes to color table rows.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
-        <col class="col-span-1">
-        <col class="col-span-7">
+        <col class="col col-lg-1">
+        <col class="col col-lg-7">
       </colgroup>
       <thead>
         <tr>
@@ -1316,8 +1316,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-inline">Inline form</h3>
     <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
     <form class="bs-docs-example form-inline">
-      <input type="text" class="col-span-3" placeholder="Email">
-      <input type="password" class="col-span-3" placeholder="Password">
+      <input type="text" class="col col-lg-3" placeholder="Email">
+      <input type="password" class="col col-lg-3" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1327,8 +1327,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html linenos %}
 <form class="form-inline">
-  <input type="text" class="col-span-3" placeholder="Email">
-  <input type="password" class="col-span-3" placeholder="Password">
+  <input type="text" class="col col-lg-3" placeholder="Email">
+  <input type="password" class="col col-lg-3" placeholder="Password">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1548,10 +1548,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example form-inline">
-      <input class="col-span-3" type="email" placeholder="test@example.com" required>
+      <input class="col col-lg-3" type="email" placeholder="test@example.com" required>
     </form>
 {% highlight html linenos %}
-<input class="col-span-3" type="email" placeholder="test@example.com" required>
+<input class="col col-lg-3" type="email" placeholder="test@example.com" required>
 {% endhighlight %}
 
     <h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1579,10 +1579,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
-          <input type="text" class="col-span-4" placeholder="Disabled input">
+          <input type="text" class="col col-lg-4" placeholder="Disabled input">
         </div>
         <div>
-          <select class="col-span-4">
+          <select class="col col-lg-4">
             <option>Disabled select</option>
           </select>
         </div>
@@ -1598,10 +1598,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form class="form-inline">
   <fieldset disabled>
     <div>
-      <input type="text" class="col-span-4" placeholder="Disabled input">
+      <input type="text" class="col col-lg-4" placeholder="Disabled input">
     </div>
     <div>
-      <select class="col-span-4">
+      <select class="col col-lg-4">
         <option>Disabled select</option>
       </select>
     </div>
@@ -1678,34 +1678,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example">
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-6">
+      <div class="input-group col col-lg-6">
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
       <br>
-      <div class="input-group col-span-3">
+      <div class="input-group col col-lg-3">
         <span class="input-group-addon">$</span>
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col-span-6">
+<div class="input-group col col-lg-6">
   <input type="text">
   <span class="input-group-addon">.00</span>
 </div>
 
-<div class="input-group col-span-3">
+<div class="input-group col col-lg-3">
   <span class="input-group-addon">$</span>
   <input type="text">
   <span class="input-group-addon">.00</span>
@@ -1715,33 +1715,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon input-small">@</span>
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
 </div>
 
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon input-small">@</span>
   <input type="text" class="input-small" placeholder="Username">
 </div>
@@ -1750,14 +1750,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
         </span>
         <input type="text">
       </div>
       <br>
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
@@ -1765,14 +1765,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
   </span>
   <input type="text">
 </div>
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
@@ -1783,7 +1783,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Button dropdowns</h4>
     <p></p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1797,7 +1797,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text">
       </div><!-- /input-group -->
       <br>
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1812,7 +1812,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /input-group -->
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1826,7 +1826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <input type="text">
 </div><!-- /input-group -->
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1843,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Segmented dropdown groups</h4>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
           <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1862,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <br>
 
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
@@ -1880,14 +1880,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
 </div>
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
@@ -1914,27 +1914,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Column sizing</h4>
-    <p>Use <code>.col-span-1</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+    <p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="controls docs-input-sizes">
-        <input class="col-span-1" type="text" placeholder=".col-span-1">
-        <input class="col-span-2" type="text" placeholder=".col-span-2">
-        <input class="col-span-3" type="text" placeholder=".col-span-3">
-        <select class="col-span-1">
+        <input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
+        <input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
+        <input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
+        <select class="col col-lg-1">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="col-span-2">
+        <select class="col col-lg-2">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="col-span-3">
+        <select class="col col-lg-3">
           <option>1</option>
           <option>2</option>
           <option>3</option>
@@ -1944,16 +1944,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<input class="col-span-1" type="text" placeholder=".col-span-1">
-<input class="col-span-2" type="text" placeholder=".col-span-2">
-<input class="col-span-3" type="text" placeholder=".col-span-3">
-<select class="col-span-1">
+<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
+<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
+<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
+<select class="col col-lg-1">
   ...
 </select>
-<select class="col-span-2">
+<select class="col col-lg-2">
   ...
 </select>
-<select class="col-span-3">
+<select class="col col-lg-3">
   ...
 </select>
 {% endhighlight %}
@@ -1961,27 +1961,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
       </div>
     </form>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
 </div>
 {% endhighlight %}
@@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <div class="controls">
           <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-            <input class="col-span-2" id="inputIcon" type="text">
+            <input class="col col-lg-2" id="inputIcon" type="text">
           </div>
         </div>
       </div>
@@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="controls">
     <div class="input-group">
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="col-span-2" id="inputIcon" type="text">
+      <input class="col col-lg-2" id="inputIcon" type="text">
     </div>
   </div>
 </div>
@@ -3646,7 +3646,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-span-8" placeholder="Search">
+              <input type="text" class="col col-lg-8" placeholder="Search">
             </form>
             <ul class="nav pull-right">
               <li><a href="#">Link</a></li>
@@ -3724,7 +3724,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-span-8" placeholder="Search">
+              <input type="text" class="col col-lg-8" placeholder="Search">
             </form>
             <ul class="nav pull-right">
               <li><a href="#">Link</a></li>
@@ -4115,22 +4115,22 @@ body {
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
@@ -4139,7 +4139,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-3">
+  <div class="col col-lg-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/260x180" alt="">
     </a>
@@ -4152,7 +4152,7 @@ body {
     <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>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4162,7 +4162,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4172,7 +4172,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4186,7 +4186,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-3">
+  <div class="col col-lg-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="">
       <div class="caption">
@@ -6542,7 +6542,7 @@ $('.carousel').carousel({
             <h2>Example</h2>
             <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
-              <input type="text" class="col-span-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+              <input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div><!-- /example -->
 {% highlight html linenos %}
 <input type="text" data-provide="typeahead">
-- 
cgit v1.2.3


From 9ce7f22e991804cd08c4dc612cd929d07dc0a28f Mon Sep 17 00:00:00 2001
From: Kevin <kevin@theranking.com>
Date: Sat, 27 Apr 2013 18:47:47 +0200
Subject: Adding media queries breakpoints variables

---
 docs/assets/css/bootstrap.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 70b610e52..2b4ca441f 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: 768px) and (max-width: 992px) {
   .visible-phone {
     display: none !important;
   }
@@ -5362,7 +5362,7 @@ a.list-group-item.active > .badge,
   }
 }
 
-@media (min-width: 980px) {
+@media (min-width: 992px) {
   .visible-phone {
     display: none !important;
   }
-- 
cgit v1.2.3


From 2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 27 Apr 2013 11:55:45 -0700
Subject: Add maximum bounds variables for so our responsive utilities don't
 overlap

---
 docs/assets/css/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2b4ca441f..be8236ea3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-phone {
     display: none !important;
   }
-- 
cgit v1.2.3


From 8b3a1702d443c4a451d02d3482ed2cb4aeff0d44 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 27 Apr 2013 18:28:39 -0700
Subject: Overhaul navbar navs

* Switch from  to  to eliminate an element in selectors
* Drop .navbar-divider entirely
---
 docs/assets/css/bootstrap.css | 129 +++++++++++++++---------------------------
 docs/assets/css/docs.css      |   2 +-
 docs/docs.html                |  44 ++++----------
 3 files changed, 57 insertions(+), 118 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index be8236ea3..b4a3b5854 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3515,33 +3515,33 @@ button.close {
   clear: both;
 }
 
-.navbar .nav {
+.navbar-nav {
   margin-top: 15px;
 }
 
-.navbar .nav > li > a {
+.navbar-nav > li > a {
   padding-top: 15px;
   padding-bottom: 15px;
   line-height: 20px;
   color: #777777;
 }
 
-.navbar .nav > li > a:hover,
-.navbar .nav > li > a:focus {
+.navbar-nav > li > a:hover,
+.navbar-nav > li > a:focus {
   color: #333333;
   background-color: transparent;
 }
 
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
+.navbar-nav > .active > a,
+.navbar-nav > .active > a:hover,
+.navbar-nav > .active > a:focus {
   color: #555555;
   background-color: #d5d5d5;
 }
 
-.navbar .nav > .disabled > a,
-.navbar .nav > .disabled > a:hover,
-.navbar .nav > .disabled > a:focus {
+.navbar-nav > .disabled > a,
+.navbar-nav > .disabled > a:hover,
+.navbar-nav > .disabled > a:focus {
   color: #cccccc;
   background-color: transparent;
 }
@@ -3570,7 +3570,7 @@ button.close {
 .navbar-brand {
   display: block;
   max-width: 200px;
-  padding: 7px 15px;
+  padding: 15px;
   margin-right: auto;
   margin-left: auto;
   font-size: 18px;
@@ -3614,57 +3614,49 @@ button.close {
   margin-top: 4px;
 }
 
-.navbar .nav > .divider {
-  height: 2px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: #e1e1e1;
-  border-bottom: 1px solid #fbfbfb;
-}
-
 .navbar-form {
   margin-top: 8px;
   margin-bottom: 8px;
 }
 
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.navbar .nav li.dropdown > a:hover .caret,
-.navbar .nav li.dropdown > a:focus .caret {
+.navbar-nav li.dropdown > a:hover .caret,
+.navbar-nav li.dropdown > a:focus .caret {
   border-top-color: #333333;
   border-bottom-color: #333333;
 }
 
-.navbar .nav li.dropdown.open > .dropdown-toggle,
-.navbar .nav li.dropdown.active > .dropdown-toggle,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+.navbar-nav li.dropdown.open > .dropdown-toggle,
+.navbar-nav li.dropdown.active > .dropdown-toggle,
+.navbar-nav li.dropdown.open.active > .dropdown-toggle {
   color: #555555;
   background-color: #d5d5d5;
 }
 
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
+.navbar-nav li.dropdown > .dropdown-toggle .caret {
   border-top-color: #777777;
   border-bottom-color: #777777;
 }
 
-.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+.navbar-nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar-nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
   border-top-color: #555555;
   border-bottom-color: #555555;
 }
 
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   right: 0;
   left: auto;
 }
@@ -3687,26 +3679,26 @@ button.close {
   color: #999999;
 }
 
-.navbar-inverse .nav > li > a {
+.navbar-inverse .navbar-nav > li > a {
   color: #999999;
 }
 
-.navbar-inverse .nav > li > a:hover,
-.navbar-inverse .nav > li > a:focus {
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
-.navbar-inverse .nav > .active > a,
-.navbar-inverse .nav > .active > a:hover,
-.navbar-inverse .nav > .active > a:focus {
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
-.navbar-inverse .nav > .disabled > a,
-.navbar-inverse .nav > .disabled > a:hover,
-.navbar-inverse .nav > .disabled > a:focus {
+.navbar-inverse .navbar-nav > .disabled > a,
+.navbar-inverse .navbar-nav > .disabled > a:hover,
+.navbar-inverse .navbar-nav > .disabled > a:focus {
   color: #444444;
   background-color: transparent;
 }
@@ -3724,31 +3716,26 @@ button.close {
   background-color: #fff;
 }
 
-.navbar-inverse .nav > .divider {
-  background-color: #151515;
-  border-bottom-color: #2f2f2f;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
+.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
+.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
+.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
   color: #ffffff;
   background-color: #080808;
 }
 
-.navbar-inverse .nav li.dropdown > a:hover .caret {
+.navbar-inverse .navbar-nav li.dropdown > a:hover .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
-.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
+.navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret {
   border-top-color: #999999;
   border-bottom-color: #999999;
 }
 
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
+.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
@@ -3760,36 +3747,19 @@ button.close {
   }
   .navbar-brand {
     float: left;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    margin-left: -10px;
+    margin-right: 5px;
+    margin-left: -5px;
   }
   .navbar .nav {
     float: left;
     margin-top: 0;
   }
-  .navbar .nav:before,
-  .navbar .nav:after {
-    display: table;
-    content: " ";
-  }
-  .navbar .nav:after {
-    clear: both;
-  }
-  .navbar .nav:before,
-  .navbar .nav:after {
-    display: table;
-    content: " ";
-  }
-  .navbar .nav:after {
-    clear: both;
+  .navbar .nav > li {
+    float: left;
   }
   .navbar .nav.pull-right {
     float: right;
   }
-  .navbar .nav > li {
-    float: left;
-  }
   .navbar .nav > .divider {
     width: 1px;
     height: 30px;
@@ -3800,15 +3770,6 @@ button.close {
   .navbar-inverse .nav > .divider {
     border-right-color: #2f2f2f;
   }
-  .navbar-fixed-left {
-    padding-right: 0;
-    padding-left: 0;
-  }
-  .navbar-fixed-left .navbar-brand,
-  .navbar-fixed-left .nav,
-  .navbar-fixed-left .nav > li {
-    float: none;
-  }
   .navbar-toggle {
     position: relative;
     top: auto;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3f3a253c8..0e9292495 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -308,7 +308,7 @@ section > ul li {
 .bs-navbar-bottom-example {
   z-index: 1;
   padding: 0;
-  height: 90px;
+  height: 110px;
   overflow: hidden; /* cut the drop shadows off */
 }
 .bs-navbar-top-example .navbar-fixed-top,
diff --git a/docs/docs.html b/docs/docs.html
index e62e44661..48e2aae0b 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3423,7 +3423,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="navbar">
         <a class="navbar-brand" href="#">Title</a>
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
@@ -3433,7 +3433,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html linenos %}
 <div class="navbar">
   <a class="navbar-brand" href="#">Title</a>
-  <ul class="nav">
+  <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
@@ -3458,7 +3458,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Nav items are simple to add via unordered lists.</p>
     <div class="bs-docs-example">
       <div class="navbar">
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li class="disabled"><a href="#">Disabled</a></li>
@@ -3466,31 +3466,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </div><!-- /example -->
 {% highlight html linenos %}
-<ul class="nav">
+<ul class="nav navbar-nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Link</a></li>
   <li class="disabled"><a href="#">Disabled</a></li>
 </ul>
-{% endhighlight %}
-    <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
-    <div class="bs-docs-example">
-      <div class="navbar">
-        <ul class="nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li class="divider"></li>
-          <li><a href="#">Link</a></li>
-          <li class="divider"></li>
-          <li><a href="#">Link</a></li>
-          <li class="divider"></li>
-        </ul>
-      </div>
-    </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="nav">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
 {% endhighlight %}
 
     <h3 id="navbar-forms">Forms</h3>
@@ -3529,7 +3509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3565,7 +3545,7 @@ body {
       <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3601,7 +3581,7 @@ body {
       <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3628,7 +3608,7 @@ body {
           </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-responsive-collapse">
-            <ul class="nav">
+            <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
@@ -3648,9 +3628,8 @@ body {
             <form class="navbar-form pull-left" action="">
               <input type="text" class="col-span-8" placeholder="Search">
             </form>
-            <ul class="nav pull-right">
+            <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
-              <li class="divider"></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                 <ul class="dropdown-menu">
@@ -3706,7 +3685,7 @@ body {
           </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-inverse-collapse">
-            <ul class="nav">
+            <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
@@ -3726,9 +3705,8 @@ body {
             <form class="navbar-form pull-left" action="">
               <input type="text" class="col-span-8" placeholder="Search">
             </form>
-            <ul class="nav pull-right">
+            <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
-              <li class="divider"></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                 <ul class="dropdown-menu">
-- 
cgit v1.2.3


From ddc0e98716d05b2b583c0097a8fc76f976730fc6 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 28 Apr 2013 09:10:01 -0400
Subject: Update examples after overhaul of navbar navs

---
 docs/examples/carousel.html             | 2 +-
 docs/examples/jumbotron.html            | 2 +-
 docs/examples/justified-nav.html        | 2 +-
 docs/examples/navbar-fixed-top.html     | 2 +-
 docs/examples/navbar-static-top.html    | 2 +-
 docs/examples/navbar.html               | 2 +-
 docs/examples/starter-template.html     | 2 +-
 docs/examples/sticky-footer-navbar.html | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 792949fb0..4142b38f4 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -243,7 +243,7 @@ body {
 	    </a>
         <a class="navbar-brand" href="#">Project name</a>
         <div class="nav-collapse collapse">
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/jumbotron.html b/docs/examples/jumbotron.html
index 86d035f07..68231a063 100644
--- a/docs/examples/jumbotron.html
+++ b/docs/examples/jumbotron.html
@@ -46,7 +46,7 @@ title: Jumbotron template
     </a>
     <a class="navbar-brand" href="#">Project name</a>
     <div class="nav-collapse collapse">
-      <ul class="nav">
+      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index f136ee92a..f8123388a 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -97,7 +97,7 @@ title: Justified nav template
 
   <div class="masthead">
     <h3 class="text-muted">Project name</h3>
-    <ul class="nav nav-justified">
+    <ul class="nav navbar-nav nav-justified">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Projects</a></li>
       <li><a href="#">Services</a></li>
diff --git a/docs/examples/navbar-fixed-top.html b/docs/examples/navbar-fixed-top.html
index 06ed424c2..906ca32c9 100644
--- a/docs/examples/navbar-fixed-top.html
+++ b/docs/examples/navbar-fixed-top.html
@@ -27,7 +27,7 @@ title: Fixed navbar template
         </a>
         <a class="navbar-brand" href="#">Project name</a>
         <div class="nav-collapse collapse">
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/navbar-static-top.html b/docs/examples/navbar-static-top.html
index 9a234114f..d636cbd3b 100644
--- a/docs/examples/navbar-static-top.html
+++ b/docs/examples/navbar-static-top.html
@@ -23,7 +23,7 @@ title: Static navbar template
     </a>
     <a class="navbar-brand" href="#">Project name</a>
     <div class="nav-collapse collapse">
-      <ul class="nav">
+      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/navbar.html b/docs/examples/navbar.html
index 5b5ffb77b..a74f3b356 100644
--- a/docs/examples/navbar.html
+++ b/docs/examples/navbar.html
@@ -29,7 +29,7 @@ title: Navbar template
       </a>
       <a class="navbar-brand" href="#">Project name</a>
       <div class="nav-collapse collapse">
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html
index 62da929da..18fdaf5fc 100644
--- a/docs/examples/starter-template.html
+++ b/docs/examples/starter-template.html
@@ -24,7 +24,7 @@ title: Starter template
     </button>
     <a class="navbar-brand" href="#">Project name</a>
     <div class="nav-collapse collapse">
-      <ul class="nav">
+      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index 716412a9d..429b74f91 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -77,7 +77,7 @@ title: Sticky footer with navbar template
       </button>
       <a class="navbar-brand" href="#">Project name</a>
       <div class="nav-collapse collapse">
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#contact">Contact</a></li>
-- 
cgit v1.2.3


From 3326e1b21e2368878a1c7f7bbd8d31d58fff5276 Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 28 Apr 2013 10:08:48 -0400
Subject: Fix navbar on phone/tablet devices after navbar overhaul

---
 docs/assets/css/bootstrap.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b4a3b5854..888730f7a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3490,7 +3490,7 @@ button.close {
 
 .navbar {
   position: relative;
-  padding: 10px 15px;
+  padding: 0 15px;
   background-color: #eeeeee;
   border-radius: 4px;
 }
@@ -3741,10 +3741,6 @@ button.close {
 }
 
 @media screen and (min-width: 768px) {
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
   .navbar-brand {
     float: left;
     margin-right: 5px;
-- 
cgit v1.2.3


From bbee78b30b40ff0b1473a06ea7ecf5a42d51b614 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 28 Apr 2013 14:27:48 -0700
Subject: derp on navbar toggle and docs positions

---
 docs/assets/css/bootstrap.css |  2 +-
 docs/assets/css/docs.css      | 14 +++++++++++++-
 docs/docs.html                |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b4a3b5854..5e5d325a6 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3516,7 +3516,7 @@ button.close {
 }
 
 .navbar-nav {
-  margin-top: 15px;
+  margin-top: 5px;
 }
 
 .navbar-nav > li > a {
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0e9292495..ff605b21e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -308,14 +308,21 @@ section > ul li {
 .bs-navbar-bottom-example {
   z-index: 1;
   padding: 0;
-  height: 110px;
+  min-height: 110px;
   overflow: hidden; /* cut the drop shadows off */
 }
 .bs-navbar-top-example .navbar-fixed-top,
 .bs-navbar-bottom-example .navbar-fixed-bottom {
+  position: relative;
   margin-left: 0;
   margin-right: 0;
 }
+.bs-navbar-top-example .navbar-fixed-top {
+  top: -1px;
+}
+.bs-navbar-bottom-example .navbar-fixed-bottom {
+  bottom: -1px;
+}
 .bs-navbar-top-example {
   -webkit-border-radius: 0 0 4px 4px;
      -moz-border-radius: 0 0 4px 4px;
@@ -711,6 +718,11 @@ input.focused {
     text-align: left;
   }
 
+  .bs-navbar-top-example .navbar-fixed-top,
+  .bs-navbar-bottom-example .navbar-fixed-bottom {
+    position: absolute;
+  }
+
 }
 
 /* Tablets/desktops and up */
diff --git a/docs/docs.html b/docs/docs.html
index 48e2aae0b..c405293ea 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3506,7 +3506,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="navbar-fixed-top">Fixed to top</h3>
     <p>Add <code>.navbar-fixed-top</code>.</p>
     <div class="bs-docs-example bs-navbar-top-example">
-      <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
+      <div class="navbar navbar-fixed-top">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
           <ul class="nav navbar-nav">
@@ -3542,7 +3542,7 @@ body {
     <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
     <div class="bs-docs-example bs-navbar-bottom-example">
-      <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
+      <div class="navbar navbar-fixed-bottom">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
           <ul class="nav navbar-nav">
-- 
cgit v1.2.3


From 447be1b3264eac4b22edc1584a6cb6f098bb2d7c Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 28 Apr 2013 21:51:02 -0400
Subject: Cleanup breadcrumb divider last item

Modify to hide both padding and leading/trailing whitespace
Thanks to https://github.com/holic for suggestion
---
 docs/assets/css/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 97e43f22c..12d4e5021 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4024,7 +4024,7 @@ button.close {
 }
 
 .breadcrumb > li:last-child:after {
-  content: "";
+  display: none;
 }
 
 .breadcrumb > .active {
-- 
cgit v1.2.3


From 62afdd01763466e413fbe67c7622e08a16fa30aa Mon Sep 17 00:00:00 2001
From: Robert Burns <burnsra@gmail.com>
Date: Sun, 28 Apr 2013 22:22:33 -0400
Subject: Update examples after grid changes

---
 docs/examples/carousel.html         | 16 ++++++++--------
 docs/examples/grid.html             | 18 +++++++++---------
 docs/examples/jumbotron-narrow.html |  4 ++--
 docs/examples/jumbotron.html        |  6 +++---
 docs/examples/justified-nav.html    |  6 +++---
 5 files changed, 25 insertions(+), 25 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 4142b38f4..954375d4b 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -67,14 +67,14 @@ body {
 }
 
 /* Center align the text within the three columns below the carousel */
-.marketing .col-span-4 {
+.marketing .col-lg-4 {
   text-align: center;
   margin-bottom: 20px;
 }
 .marketing h2 {
   font-weight: normal;
 }
-.marketing .col-span-4 p {
+.marketing .col-lg-4 p {
   margin-left: 10px;
   margin-right: 10px;
 }
@@ -323,24 +323,24 @@ body {
 
   <!-- Three columns of text below the carousel -->
   <div class="row">
-    <div class="col-span-4">
+    <div class="col col-lg-4">
       <img class="img-circle" data-src="holder.js/140x140">
       <h2>Heading</h2>
       <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
       <p><a class="btn" href="#">View details &raquo;</a></p>
-    </div><!-- /.col-span-4 -->
-    <div class="col-span-4">
+    </div><!-- /.col-lg-4 -->
+    <div class="col col-lg-4">
       <img class="img-circle" data-src="holder.js/140x140">
       <h2>Heading</h2>
       <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
       <p><a class="btn" href="#">View details &raquo;</a></p>
-    </div><!-- /.col-span-4 -->
-    <div class="col-span-4">
+    </div><!-- /.col-lg-4 -->
+    <div class="col col-lg-4">
       <img class="img-circle" data-src="holder.js/140x140">
       <h2>Heading</h2>
       <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
       <p><a class="btn" href="#">View details &raquo;</a></p>
-    </div><!-- /.col-span-4 -->
+    </div><!-- /.col-lg-4 -->
   </div><!-- /.row -->
 
 
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
index f2028b8bf..580f69cbf 100644
--- a/docs/examples/grid.html
+++ b/docs/examples/grid.html
@@ -16,7 +16,7 @@ title: Grid template
     margin-left: -15px;
     margin-right: -15px;
   }
-  [class*="col-span-"] {
+  [class*="col-lg-"] {
     padding-top: 15px;
     padding-bottom: 15px;
     background-color: #f5f5f5;
@@ -32,22 +32,22 @@ title: Grid template
 
   <h4>Three equal columns</h4>
   <div class="row">
-    <div class="col-span-4">.col-span-4</div>
-    <div class="col-span-4">.col-span-4</div>
-    <div class="col-span-4">.col-span-4</div>
+    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col col-lg-4">.col .col-lg-4</div>
   </div>
 
   <h4>Three unequal columns</h4>
   <div class="row">
-    <div class="col-span-3">.col-span-3</div>
-    <div class="col-span-6">.col-span-6</div>
-    <div class="col-span-3">.col-span-3</div>
+    <div class="col col-lg-3">.col .col-lg-3</div>
+    <div class="col col-lg-6">.col .col-lg-6</div>
+    <div class="col col-lg-3">.col .col-lg-3</div>
   </div>
 
   <h4>Two columns</h4>
   <div class="row">
-    <div class="col-span-8">.col-span-8</div>
-    <div class="col-span-4">.col-span-4</div>
+    <div class="col col-lg-8">.col .col-lg-8</div>
+    <div class="col col-lg-4">.col .col-lg-4</div>
   </div>
 
   <h4>Full width, single column</h4>
diff --git a/docs/examples/jumbotron-narrow.html b/docs/examples/jumbotron-narrow.html
index 84a918064..a6fd4e950 100644
--- a/docs/examples/jumbotron-narrow.html
+++ b/docs/examples/jumbotron-narrow.html
@@ -104,7 +104,7 @@ title: Narrow page template
   </div>
 
   <div class="row marketing">
-    <div class="col-span-6">
+    <div class="col col-lg-6">
       <h4>Subheading</h4>
       <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 
@@ -115,7 +115,7 @@ title: Narrow page template
       <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
     </div>
 
-    <div class="col-span-6">
+    <div class="col col-lg-6">
       <h4>Subheading</h4>
       <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 
diff --git a/docs/examples/jumbotron.html b/docs/examples/jumbotron.html
index 68231a063..3982a34d9 100644
--- a/docs/examples/jumbotron.html
+++ b/docs/examples/jumbotron.html
@@ -85,17 +85,17 @@ title: Jumbotron template
 
     <!-- Example row of columns -->
     <div class="row">
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index f8123388a..a87b3b9d1 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -119,17 +119,17 @@ title: Justified nav template
 
     <!-- Example row of columns -->
     <div class="row">
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <h2>Heading</h2>
         <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
         <p><a class="btn" href="#">View details &raquo;</a></p>
-- 
cgit v1.2.3


From e13d05317ee5a944bdf34c1dda65bcc30a7915f6 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 28 Apr 2013 22:45:56 -0700
Subject: single colon pseudo element for ie8

---
 docs/assets/css/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 97e43f22c..4a57ea259 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2148,7 +2148,7 @@ fieldset[disabled] .btn-link:focus {
   src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 
-.glyphicon::before {
+.glyphicon:before {
   font-family: 'Glyphicons Halflings';
   font-style: normal;
   font-weight: normal;
-- 
cgit v1.2.3


From e67d3818ed962a69cb970fa9255647a087c643c9 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 11:32:11 -0700
Subject: nuke line numbers

---
 docs/docs.html | 440 ++++++++++++++++++++++++++++-----------------------------
 1 file changed, 220 insertions(+), 220 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index b134416cc..60711f5da 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -85,7 +85,7 @@ title: Bootstrap Documentation
 
     <h3>HTML template</h3>
     <p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <!DOCTYPE html>
 <html>
   <head>
@@ -220,13 +220,13 @@ title: Bootstrap Documentation
     <p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p>
     <p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
     <p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn btn-ttc">Save changes</button>
 {% endhighlight %}
 
   <p>In the custom stylesheet, add the following CSS:</p>
 
-{% highlight css linenos %}
+{% highlight css %}
 /* Custom button
 -------------------------------------------------- */
 
@@ -293,7 +293,7 @@ title: Bootstrap Documentation
 
     <h3>HTML5 doctype required</h3>
     <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <!DOCTYPE html>
 <html lang="en">
   ...
@@ -303,7 +303,7 @@ title: Bootstrap Documentation
     <h3>Mobile first</h3>
     <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
     <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {% endhighlight %}
 
@@ -361,7 +361,7 @@ title: Bootstrap Documentation
         <div class="col col-lg-6">6</div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-1">1</div>
   <div class="col col-lg-1">1</div>
@@ -402,7 +402,7 @@ title: Bootstrap Documentation
         <div class="col col-lg-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-4">...</div>
   <div class="col col-lg-4 col-offset-4">...</div>
@@ -432,7 +432,7 @@ title: Bootstrap Documentation
         </div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-9">
     Level 1: 9 columns
@@ -455,7 +455,7 @@ title: Bootstrap Documentation
       <div class="col col-lg-3 col-pull-9">3</div>
     </div>
 
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row show-grid">
   <div class="col col-lg-9 col-push-3">9</div>
   <div class="col col-lg-3 col-pull-9">3</div>
@@ -469,7 +469,7 @@ title: Bootstrap Documentation
       <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
       <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
   <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
@@ -482,7 +482,7 @@ title: Bootstrap Documentation
 
     <h4>Variables</h4>
     <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
-{% highlight css linenos %}
+{% highlight css %}
 @grid-columns:              12;
 @grid-gutter-width:         30px;
 @grid-float-breakpoint:     768px;
@@ -490,7 +490,7 @@ title: Bootstrap Documentation
 
     <h4>Mixins</h4>
     <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
-{% highlight css linenos %}
+{% highlight css %}
 // Creates a wrapper for a series of columns
 .make-row() {
   // Negative margin the row out to align the content of columns
@@ -524,7 +524,7 @@ title: Bootstrap Documentation
 
     <h4>Example usage</h4>
     <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
-{% highlight css linenos %}
+{% highlight css %}
 .wrapper {
   .make-row();
 }
@@ -536,7 +536,7 @@ title: Bootstrap Documentation
   .make-column-offset(1);
 }
 {% endhighlight %}
-{% highlight html linenos %}
+{% highlight html %}
 <div class="wrapper">
   <div class="content-main">...</div>
   <div class="content-secondary">...</div>
@@ -589,7 +589,7 @@ title: Bootstrap Documentation
         </tbody>
       </table>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <h1>...</h1>
 <h2>...</h2>
 <h3>...</h3>
@@ -606,7 +606,7 @@ title: Bootstrap Documentation
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
       <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <p>...</p>
 {% endhighlight %}
 
@@ -616,7 +616,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <p class="lead">...</p>
 {% endhighlight %}
 
@@ -634,7 +634,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p><small>This line of text is meant to be treated as fine print.</small></p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <small>This line of text is meant to be treated as fine print.</small>
 {% endhighlight %}
 
@@ -644,7 +644,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <strong>rendered as bold text</strong>
 {% endhighlight %}
 
@@ -653,7 +653,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <em>rendered as italicized text</em>
 {% endhighlight %}
 
@@ -666,7 +666,7 @@ title: Bootstrap Documentation
       <p class="text-center">Center aligned text.</p>
       <p class="text-right">Right aligned text.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <p class="text-left">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-right">Right aligned text.</p>
@@ -680,7 +680,7 @@ title: Bootstrap Documentation
       <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
       <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <p class="text-muted">...</p>
 <p class="text-warning">...</p>
 <p class="text-danger">...</p>
@@ -697,7 +697,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <abbr title="attribute">attr</abbr>
 {% endhighlight %}
 
@@ -706,7 +706,7 @@ title: Bootstrap Documentation
     <div class="bs-docs-example">
       <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
 {% endhighlight %}
 
@@ -726,7 +726,7 @@ title: Bootstrap Documentation
         <a href="mailto:#">first.last@example.com</a>
       </address>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <address>
   <strong>Twitter, Inc.</strong><br>
   795 Folsom Ave, Suite 600<br>
@@ -752,7 +752,7 @@ title: Bootstrap Documentation
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       </blockquote>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
@@ -769,7 +769,7 @@ title: Bootstrap Documentation
         <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
       </blockquote>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <small>Someone famous <cite title="Source Title">Source Title</cite></small>
@@ -784,7 +784,7 @@ title: Bootstrap Documentation
         <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
       </blockquote>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <blockquote class="pull-right">
   ...
 </blockquote>
@@ -815,7 +815,7 @@ title: Bootstrap Documentation
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul>
   <li>...</li>
 </ul>
@@ -835,7 +835,7 @@ title: Bootstrap Documentation
         <li>Eget porttitor lorem</li>
       </ol>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ol>
   <li>...</li>
 </ol>
@@ -862,7 +862,7 @@ title: Bootstrap Documentation
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-unstyled">
   <li>...</li>
 </ul>
@@ -877,7 +877,7 @@ title: Bootstrap Documentation
         <li>Nulla volutpat</li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-inline">
   <li>...</li>
 </ul>
@@ -896,7 +896,7 @@ title: Bootstrap Documentation
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <dl>
   <dt>...</dt>
   <dd>...</dd>
@@ -918,7 +918,7 @@ title: Bootstrap Documentation
         <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <dl class="dl-horizontal">
   <dt>...</dt>
   <dd>...</dd>
@@ -944,7 +944,7 @@ title: Bootstrap Documentation
 <div class="bs-docs-example">
   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
-{% highlight html linenos %}
+{% highlight html %}
 For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
@@ -953,7 +953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="bs-docs-example">
   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 </div>
-{% highlight html linenos %}
+{% highlight html %}
 <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 {% endhighlight %}
 
@@ -1003,7 +1003,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <table class="table">
   ...
 </table>
@@ -1051,7 +1051,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <table class="table table-striped">
   ...
 </table>
@@ -1095,7 +1095,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <table class="table table-bordered">
   ...
 </table>
@@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <table class="table table-hover">
   ...
 </table>
@@ -1174,7 +1174,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <table class="table table-condensed">
   ...
 </table>
@@ -1254,7 +1254,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </tbody>
       </table>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 ...
 <tr class="success">
   <td>1</td>
@@ -1292,7 +1292,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="submit" class="btn">Submit</button>
       </fieldset>
     </form><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <form>
   <fieldset>
     <legend>Legend</legend>
@@ -1325,7 +1325,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
       <button type="submit" class="btn">Sign in</button>
     </form><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <form class="form-inline">
   <input type="text" class="col col-lg-3" placeholder="Email">
   <input type="password" class="col col-lg-3" placeholder="Password">
@@ -1370,7 +1370,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <form class="form-horizontal">
   <div class="control-group">
     <label class="control-label" for="inputEmail">Email</label>
@@ -1410,7 +1410,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <input type="text" placeholder="Text input">
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input type="text" placeholder="Text input">
 {% endhighlight %}
 
@@ -1419,7 +1419,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <textarea rows="3"></textarea>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <textarea rows="3"></textarea>
 {% endhighlight %}
 
@@ -1447,7 +1447,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </label>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="checkbox">
   <label>
     <input type="checkbox" value="">
@@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
       </label>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
 </label>
@@ -1507,7 +1507,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <option>5</option>
       </select>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <select>
   <option>1</option>
   <option>2</option>
@@ -1535,7 +1535,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <input class="focused" id="focusedInput" type="text" value="This is focused...">
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input id="focusedInput" type="text" value="This is focused...">
 {% endhighlight %}
 
@@ -1550,7 +1550,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <input class="col col-lg-3" type="email" placeholder="test@example.com" required>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input class="col col-lg-3" type="email" placeholder="test@example.com" required>
 {% endhighlight %}
 
@@ -1559,7 +1559,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 {% endhighlight %}
 
@@ -1594,7 +1594,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="submit" class="btn btn-primary">Submit</button>
       </fieldset>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <form class="form-inline">
   <fieldset disabled>
     <div>
@@ -1643,7 +1643,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="control-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
   <div class="controls">
@@ -1694,7 +1694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="input-group-addon">.00</span>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="input-group col col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
@@ -1730,7 +1730,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="input-group col col-lg-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
@@ -1764,7 +1764,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </span>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="input-group col col-lg-7">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
@@ -1811,7 +1811,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div><!-- /btn-group -->
       </div><!-- /input-group -->
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1879,7 +1879,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
@@ -1907,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input class="input-small" type="text" placeholder=".input-small">
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input class="input-large" type="text" placeholder=".input-large">
 <input type="text" placeholder="Default input">
 <input class="input-small" type="text" placeholder=".input-small">
@@ -1943,7 +1943,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </select>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
 <input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
 <input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
@@ -1972,7 +1972,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-4">
     <input type="text" placeholder=".col col-lg-4">
@@ -1994,7 +1994,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn">Cancel</button>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save changes</button>
   <button type="button" class="btn">Cancel</button>
@@ -2007,7 +2007,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <input type="text"> <span class="help-inline">Inline help text</span>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input type="text">
 <span class="help-inline">Inline help text</span>
 {% endhighlight %}
@@ -2017,7 +2017,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <input type="text">
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <input type="text">
 <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
@@ -2044,7 +2044,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-link">Link</button>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <!-- Standard gray button with gradient -->
 <button type="button" class="btn btn-default">Default</button>
 
@@ -2088,7 +2088,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn btn-mini">Mini button</button>
       </p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <p>
   <button type="button" class="btn btn-large btn-primary">Large button</button>
   <button type="button" class="btn btn-large">Large button</button>
@@ -2114,7 +2114,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn btn-large btn-block">Block level button</button>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
 <button type="button" class="btn btn-large btn-block">Block level button</button>
 {% endhighlight %}
@@ -2129,7 +2129,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
       <button type="button" class="btn btn-large" disabled="disabled">Button</button>
     </p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled="disabled">Button</button>
 {% endhighlight %}
@@ -2145,7 +2145,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
       <a href="#" class="btn btn-large disabled">Link</a>
     </p>
-{% highlight html linenos %}
+{% highlight html %}
 <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 <a href="#" class="btn btn-large disabled">Link</a>
 {% endhighlight %}
@@ -2166,7 +2166,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <input class="btn" type="button" value="Input">
       <input class="btn" type="submit" value="Submit">
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <a class="btn" href="">Link</a>
 <button class="btn" type="submit">Button</button>
 <input class="btn" type="button" value="Input">
@@ -2199,7 +2199,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <img data-src="holder.js/140x140" class="img-circle">
       <img data-src="holder.js/140x140" class="img-thumbnail">
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <img src="..." class="img-rounded">
 <img src="..." class="img-circle">
 <img src="..." class="img-thumbnail">
@@ -2220,16 +2220,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <p><button class="close" style="float: none;">&times;</button></p>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <button class="close" style="float: none;">&times;</button>
 {% endhighlight %}
 
     <h3>.pull-left</h3>
     <p>Float an element left</p>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="pull-left">...</div>
 {% endhighlight %}
-{% highlight css linenos %}
+{% highlight css %}
 .pull-left {
   float: left;
 }
@@ -2237,10 +2237,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>.pull-right</h3>
     <p>Float an element right</p>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="pull-right">...</div>
 {% endhighlight %}
-{% highlight css linenos %}
+{% highlight css %}
 .pull-right {
   float: right;
 }
@@ -2248,10 +2248,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>.clearfix</h3>
     <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="clearfix">...</div>
 {% endhighlight %}
-{% highlight css linenos %}
+{% highlight css %}
 // Mixin
 .clearfix {
   &:before,
@@ -2570,7 +2570,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2>How to use</h2>
     <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
-{% highlight html linenos %}
+{% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}
     <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
@@ -2593,7 +2593,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-toolbar">
   <div class="btn-group">
     <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
@@ -2623,7 +2623,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </ul>
       </div>
     </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group">
   <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@@ -2641,7 +2641,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
     </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
 {% endhighlight %}
 
@@ -2649,7 +2649,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
     </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
 {% endhighlight %}
 
@@ -2663,7 +2663,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
       </ul>
     </div><!-- /bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
   <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
@@ -2684,7 +2684,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </form>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="control-group">
   <label class="control-label" for="inputIcon">Email address</label>
   <div class="controls">
@@ -2721,7 +2721,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </ul>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
@@ -2736,7 +2736,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="dropdowns-alignment">Aligning the menus</h3>
     <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
   ...
 </ul>
@@ -2753,7 +2753,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </ul>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Regular link</a></li>
   <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
@@ -2832,7 +2832,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
 
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   ...
   <li class="dropdown-submenu pull-left">
@@ -2870,7 +2870,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn">Right</button>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
@@ -2898,7 +2898,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-toolbar">
   <div class="btn-group">...</div>
   <div class="btn-group">...</div>
@@ -2916,7 +2916,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group btn-group-vertical">
   ...
 </div>
@@ -2931,7 +2931,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <a href="#" class="btn">Middle</a>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group btn-group-justified">
   ...
 </div>
@@ -3010,7 +3010,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div><!-- /btn-group -->
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -3087,7 +3087,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <!-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
@@ -3146,7 +3146,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
   <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
@@ -3206,7 +3206,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div><!-- /btn-group -->
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group dropup">
   <button class="btn">Dropup</button>
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -3240,7 +3240,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#">Messages</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
@@ -3257,7 +3257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#">Messages</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
@@ -3272,7 +3272,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#">Messages</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-pills nav-stacked">
   ...
 </ul>
@@ -3295,7 +3295,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li><a href="#">Messages</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs nav-justified">
   ...
 </ul>
@@ -3319,7 +3319,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <li class="disabled"><a href="#">Disabled link</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs">
   ...
   <li class="disabled"><a href="#">Disabled link</a></li>
@@ -3357,7 +3357,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs">
   ...
   <li class="dropdown">
@@ -3391,7 +3391,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </li>
       </ul>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-pills">
   ...
   <li class="dropdown">
@@ -3430,7 +3430,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </ul>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar">
   <a class="navbar-brand" href="#">Title</a>
   <ul class="nav navbar-nav">
@@ -3450,7 +3450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <a class="navbar-brand" href="#">Title</a>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <a class="navbar-brand" href="#">Title</a>
 {% endhighlight %}
 
@@ -3465,7 +3465,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </ul>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav navbar-nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Link</a></li>
@@ -3483,7 +3483,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </form>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <form class="navbar-form pull-left">
   <input type="text" style="width: 200px;">
   <button type="submit" class="btn">Submit</button>
@@ -3517,7 +3517,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar navbar-fixed-top">
   ...
 </div>
@@ -3526,7 +3526,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-sidenote">
       <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
-{% highlight css linenos %}
+{% highlight css %}
 body {
   padding-top: 64px;
 }
@@ -3553,7 +3553,7 @@ body {
         </div>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar navbar-fixed-bottom">
   ...
 </div>
@@ -3562,7 +3562,7 @@ body {
     <div class="bs-docs-sidenote">
       <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
-{% highlight css linenos %}
+{% highlight css %}
 body {
   padding-bottom: 64px;
 }
@@ -3589,7 +3589,7 @@ body {
         </div>
       </div>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar navbar-static-top">
   ...
 </div>
@@ -3645,7 +3645,7 @@ body {
         </div><!-- /.container -->
       </div><!-- /.navbar -->
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar">
   <div class="container">
 
@@ -3722,7 +3722,7 @@ body {
         </div><!-- /.container -->
       </div><!-- /.navbar -->
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="navbar navbar-inverse">
   ...
 </div>
@@ -3754,7 +3754,7 @@ body {
         <li class="active">Data</li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">Library</a></li>
@@ -3786,7 +3786,7 @@ body {
         <li><a href="#">&raquo;</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
@@ -3811,7 +3811,7 @@ body {
         <li><a href="#">&raquo;</a></li>
      </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pagination">
   <li class="disabled"><a href="#">&laquo;</a></li>
   <li class="active"><a href="#">1</a></li>
@@ -3819,7 +3819,7 @@ body {
 </ul>
 {% endhighlight %}
     <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pagination">
   <li class="disabled"><span>&laquo;</span></li>
   <li class="active"><span>1</span></li>
@@ -3876,7 +3876,7 @@ body {
         </ul>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pagination pagination-large">...</ul>
 <ul class="pagination pagination">...</ul>
 <ul class="pagination pagination-small">...</ul>
@@ -3895,7 +3895,7 @@ body {
         <li><a href="#">Next</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pager">
   <li><a href="#">Previous</a></li>
   <li><a href="#">Next</a></li>
@@ -3910,7 +3910,7 @@ body {
         <li class="next"><a href="#">Newer &rarr;</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pager">
   <li class="previous"><a href="#">&larr; Older</a></li>
   <li class="next"><a href="#">Newer &rarr;</a></li>
@@ -3926,7 +3926,7 @@ body {
         <li class="next"><a href="#">Newer &rarr;</a></li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="pager">
   <li class="previous disabled"><a href="#">&larr; Older</a></li>
   <li class="next"><a href="#">Newer &rarr;</a></li>
@@ -3953,7 +3953,7 @@ body {
       <h5>Example heading <span class="label">New</span></h5>
       <h6>Example heading <span class="label">New</span></h6>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <h3>Example heading <span class="label">New</span></h3>
 {% endhighlight %}
 
@@ -3966,7 +3966,7 @@ body {
       <span class="label label-danger">Danger</span>
       <span class="label label-info">Info</span>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <span class="label">Default</span>
 <span class="label label-success">Success</span>
 <span class="label label-warning">Warning</span>
@@ -3989,7 +3989,7 @@ body {
     <div class="bs-docs-example">
       <a href="#">Inbox <span class="badge">42</span></a>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <a href="#">Inbox <span class="badge">42</span></a>
 {% endhighlight %}
 
@@ -4026,7 +4026,7 @@ body {
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-pills nav-stacked">
   <li class="active">
     <a href="#">
@@ -4057,7 +4057,7 @@ body {
         <p><a class="btn btn-primary btn-large">Learn more</a></p>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="jumbotron">
   <h1>Hello, world!</h1>
   <p>...</p>
@@ -4072,7 +4072,7 @@ body {
         <h1>Example page header <small>Subtext for header</small></h1>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="page-header">
   <h1>Example page header <small>Subtext for header</small></h1>
 </div>
@@ -4115,7 +4115,7 @@ body {
         </div>
       </div>
     </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-3">
     <a href="#" class="thumbnail">
@@ -4162,7 +4162,7 @@ body {
         </div>
       </div>
     </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="row">
   <div class="col col-lg-3">
     <div class="thumbnail">
@@ -4197,7 +4197,7 @@ body {
         <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="alert">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
@@ -4213,7 +4213,7 @@ body {
         <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="alert alert-block">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <h4>Warning!</h4>
@@ -4237,7 +4237,7 @@ body {
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="alert alert-danger">...</div>
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
@@ -4267,7 +4267,7 @@ body {
         <div class="progress-bar" style="width: 60%;"></div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="progress">
   <div class="progress-bar" style="width: 60%;"></div>
 </div>
@@ -4289,7 +4289,7 @@ body {
         <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="progress">
   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
@@ -4320,7 +4320,7 @@ body {
         <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
@@ -4342,7 +4342,7 @@ body {
         <div class="progress-bar" style="width: 45%"></div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="progress progress-striped active">
   <div class="progress-bar" style="width: 45%"></div>
 </div>
@@ -4357,7 +4357,7 @@ body {
         <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 35%"></div>
   <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
@@ -4408,7 +4408,7 @@ body {
         </div>
       </div>
     </div><!-- /.bs-docs-example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="media">
   <a class="pull-left" href="#">
     <img class="media-object" src="...">
@@ -4474,7 +4474,7 @@ body {
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="media-list">
   <li class="media">
     <a class="pull-left" href="#">
@@ -4512,7 +4512,7 @@ body {
         <li class="list-group-item">Vestibulum at eros</li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-group">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -4540,7 +4540,7 @@ body {
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-group">
   <li class="list-group-item">
     <span class="glyphicon glyphicon-chevron-right"></span>
@@ -4567,7 +4567,7 @@ body {
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-group">
   <li class="list-group-item">
     <span class="badge">14</span>
@@ -4597,7 +4597,7 @@ body {
         </li>
       </ul>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="list-group">
   <li class="list-group-item">
     <span class="glyphicon glyphicon-chevron-right"></span>
@@ -4629,7 +4629,7 @@ body {
         </a>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="list-group">
   <a href="#" class="list-group-item active">
     Cras justo odio
@@ -4668,7 +4668,7 @@ body {
         </a>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="list-group">
   <a href="#" class="list-group-item active">
     <h4 class="list-group-item-heading">List group item heading</h4>
@@ -4696,7 +4696,7 @@ body {
         Basic panel example
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="panel">
   Basic panel example
 </div>
@@ -4710,7 +4710,7 @@ body {
         Panel content
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="panel">
   <div class="panel-heading">Panel heading</div>
   Panel content
@@ -4741,7 +4741,7 @@ body {
         Panel content
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="panel panel-primary">...</div>
 <div class="panel panel-success">...</div>
 <div class="panel panel-warning">...</div>
@@ -4767,7 +4767,7 @@ body {
         </ul>
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="panel">
   <!-- Default panel contents -->
   <div class="panel-heading">Panel heading</div>
@@ -4804,7 +4804,7 @@ body {
         Look, I'm in a well!
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="well">...</div>
 {% endhighlight %}
     <h3>Optional classes</h3>
@@ -4814,7 +4814,7 @@ body {
         Look, I'm in a well!
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="well well-large">...</div>
 {% endhighlight %}
 
@@ -4823,7 +4823,7 @@ body {
         Look, I'm in a well!
       </div>
     </div>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="well well-small">...</div>
 {% endhighlight %}
   </div>
@@ -4856,23 +4856,23 @@ body {
     <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
 
     <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
-{% highlight js linenos %}
+{% highlight js %}
 $('body').off('.data-api')
 {% endhighlight %}
 
     <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('body').off('.alert.data-api')
 {% endhighlight %}
 
     <h3 id="js-programmatic-api">Programmatic API</h3>
     <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
-{% highlight js linenos %}
+{% highlight js %}
 $(".btn.danger").button("toggle").addClass("fat")
 {% endhighlight %}
 
     <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
-{% highlight js linenos %}
+{% highlight js %}
 $("#myModal").modal()                      // initialized with defaults
 $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
 $("#myModal").modal('show')                // initializes and invokes show immediately</p>
@@ -4882,7 +4882,7 @@ $("#myModal").modal('show')                // initializes and invokes show immed
 
     <h3 id="js-noconflict">No conflict</h3>
     <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
-{% highlight js linenos %}
+{% highlight js %}
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
 {% endhighlight %}
@@ -4890,7 +4890,7 @@ $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the boot
     <h3 id="js-events">Events</h3>
     <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
     <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myModal').on('show', function (e) {
   if (!data) return e.preventDefault() // stops modal from being shown
 })
@@ -4952,7 +4952,7 @@ $('#myModal').on('show', function (e) {
         </div><!-- /.modal-dalog -->
       </div><!-- /.modal -->
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="modal">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -5018,7 +5018,7 @@ $('#myModal').on('show', function (e) {
     <div class="bs-docs-example" style="padding-bottom: 24px;">
       <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
     </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="modal">
   <!-- Button trigger modal -->
   <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
@@ -5048,13 +5048,13 @@ $('#myModal').on('show', function (e) {
 
     <h3>Via data attributes</h3>
     <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
 {% endhighlight %}
 
     <h3>Via JavaScript</h3>
     <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
-    {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
+    {% highlight js %}$('#myModal').modal(options){% endhighlight %}
 
     <h3>Options</h3>
     <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
@@ -5091,7 +5091,7 @@ $('#myModal').on('show', function (e) {
          <td>path</td>
          <td>false</td>
          <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
-{% highlight html linenos %}
+{% highlight html %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
 {% endhighlight %}
        </tr>
@@ -5102,7 +5102,7 @@ $('#myModal').on('show', function (e) {
 
     <h4>.modal(options)</h4>
     <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myModal').modal({
   keyboard: false
 })
@@ -5110,15 +5110,15 @@ $('#myModal').modal({
 
     <h4>.modal('toggle')</h4>
     <p>Manually toggles a modal.</p>
-    {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
+    {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
 
     <h4>.modal('show')</h4>
     <p>Manually opens a modal.</p>
-    {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
+    {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
 
     <h4>.modal('hide')</h4>
     <p>Manually hides a modal.</p>
-    {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
+    {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
 
     <h3>Events</h3>
     <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
@@ -5148,7 +5148,7 @@ $('#myModal').modal({
        </tr>
       </tbody>
     </table>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myModal').on('hidden', function () {
   // do something…
 })
@@ -5258,7 +5258,7 @@ $('#myModal').on('hidden', function () {
 
           <h3>Via data attributes</h3>
           <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@@ -5267,7 +5267,7 @@ $('#myModal').on('hidden', function () {
 </div>
 {% endhighlight %}
           <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <div class="dropdown">
   <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
     Dropdown <span class="caret"></span>
@@ -5280,7 +5280,7 @@ $('#myModal').on('hidden', function () {
 
           <h3>Via JavaScript</h3>
           <p>Call the dropdowns via JavaScript:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('.dropdown-toggle').dropdown()
 {% endhighlight %}
 
@@ -5346,7 +5346,7 @@ $('.dropdown-toggle').dropdown()
 
           <h3>Via data attributes</h3>
           <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <body data-spy="scroll" data-target="#navbar-example">
   ...
 </body>
@@ -5354,7 +5354,7 @@ $('.dropdown-toggle').dropdown()
 
           <h3>Via JavaScript</h3>
           <p>Call the scrollspy via JavaScript:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#navbar-example').scrollspy()
 {% endhighlight %}
 
@@ -5366,7 +5366,7 @@ $('#navbar-example').scrollspy()
           <h3>Methods</h3>
           <h4>.scrollspy('refresh')</h4>
           <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
 });
@@ -5457,7 +5457,7 @@ $('[data-spy="scroll"]').each(function () {
 
           <h2>Usage</h2>
           <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
@@ -5465,7 +5465,7 @@ $('#myTab a').click(function (e) {
 {% endhighlight %}
 
           <p>You can activate individual tabs in several ways:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
 $('#myTab a:last').tab('show'); // Select last tab
@@ -5474,7 +5474,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 
           <h3>Markup</h3>
           <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
@@ -5490,7 +5490,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
           <p>
             Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
           </p>
-{% highlight html linenos %}
+{% highlight html %}
 <ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">Home</a></li>
   <li><a href="#profile">Profile</a></li>
@@ -5531,7 +5531,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
              </tr>
             </tbody>
           </table>
-{% highlight js linenos %}
+{% highlight js %}
 $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
@@ -5575,7 +5575,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           <h2>Usage</h2>
           <p>Trigger the tooltip via JavaScript:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#example').tooltip(options)
 {% endhighlight %}
 
@@ -5653,7 +5653,7 @@ $('#example').tooltip(options)
           </div>
 
           <h3>Markup</h3>
-{% highlight html linenos %}
+{% highlight html %}
 <a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
 {% endhighlight %}
 
@@ -5664,19 +5664,19 @@ $('#example').tooltip(options)
 
           <h4>.tooltip('show')</h4>
           <p>Reveals an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}
+          {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
 
           <h4>.tooltip('hide')</h4>
           <p>Hides an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}
+          {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
 
           <h4>.tooltip('toggle')</h4>
           <p>Toggles an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}
+          {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
 
           <h4>.tooltip('destroy')</h4>
           <p>Hides and destroys an element's tooltip.</p>
-          {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}
+          {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
         </section>
 
 
@@ -5756,7 +5756,7 @@ $('#example').tooltip(options)
 
         <h2>Usage</h2>
         <p>Enable popovers via JavaScript:</p>
-        {% highlight js linenos %}$('#example').popover(options){% endhighlight %}
+        {% highlight js %}$('#example').popover(options){% endhighlight %}
 
         <h3>Options</h3>
         <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
@@ -5846,19 +5846,19 @@ $('#example').tooltip(options)
 
         <h4>.popover('show')</h4>
         <p>Reveals an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('show'){% endhighlight %}
+        {% highlight js %}$('#element').popover('show'){% endhighlight %}
 
         <h4>.popover('hide')</h4>
         <p>Hides an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}
+        {% highlight js %}$('#element').popover('hide'){% endhighlight %}
 
         <h4>.popover('toggle')</h4>
         <p>Toggles an elements popover.</p>
-        {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}
+        {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
 
         <h4>.popover('destroy')</h4>
         <p>Hides and destroys an element's popover.</p>
-        {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}
+        {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
       </section>
 
 
@@ -5897,11 +5897,11 @@ $('#example').tooltip(options)
 
         <h2>Usage</h2>
         <p>Enable dismissal of an alert via JavaScript:</p>
-        {% highlight js linenos %}$(".alert").alert(){% endhighlight %}
+        {% highlight js %}$(".alert").alert(){% endhighlight %}
 
         <h3>Markup</h3>
         <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
-        {% highlight html linenos %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
+        {% highlight html %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
 
         <h3>Methods</h3>
 
@@ -5910,7 +5910,7 @@ $('#example').tooltip(options)
 
         <h4>.alert('close')</h4>
         <p>Closes an alert.</p>
-        {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}
+        {% highlight js %}$(".alert").alert('close'){% endhighlight %}
 
 
         <h3>Events</h3>
@@ -5933,7 +5933,7 @@ $('#example').tooltip(options)
             </tr>
           </tbody>
         </table>
-{% highlight js linenos %}
+{% highlight js %}
 $('#my-alert').bind('closed', function () {
   // do something…
 })
@@ -5959,7 +5959,7 @@ $('#my-alert').bind('closed', function () {
                 Loading state
               </button>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
   Loading state
 </button>
@@ -5970,7 +5970,7 @@ $('#my-alert').bind('closed', function () {
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
 {% endhighlight %}
 
@@ -5989,7 +5989,7 @@ $('#my-alert').bind('closed', function () {
                 </label>
               </div>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group" data-toggle="buttons-checkbox">
   <label class="btn btn-primary">
     <input type="checkbox"> Option 1
@@ -6018,7 +6018,7 @@ $('#my-alert').bind('closed', function () {
                 </label>
               </div>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="btn-group" data-toggle="buttons-radio">
   <label class="btn btn-primary">
     <input type="radio" name="options" id="option1"> Option 1
@@ -6038,7 +6038,7 @@ $('#my-alert').bind('closed', function () {
 
             <h2>Usage</h2>
             <p>Enable buttons via JavaScript:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('.nav-tabs').button()
 {% endhighlight %}
 
@@ -6056,14 +6056,14 @@ $('.nav-tabs').button()
               <h4>Auto toggling</h4>
               <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
             </div>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn" data-toggle="button">...</button>
 {% endhighlight %}
 
             <h4>$().button('loading')</h4>
             <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
             </p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn" data-loading-text="loading stuff...">...</button>
 {% endhighlight %}
 
@@ -6077,7 +6077,7 @@ $('.nav-tabs').button()
 
             <h4>$().button(string)</h4>
             <p>Resets button state - swaps text to any data defined text state.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
@@ -6145,7 +6145,7 @@ $('.nav-tabs').button()
                 </div>
               </div>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="accordion" id="accordion2">
   <div class="accordion-group">
     <div class="accordion-heading">
@@ -6187,7 +6187,7 @@ $('.nav-tabs').button()
 {% endhighlight %}
 
             <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
-{% highlight html linenos %}
+{% highlight html %}
 <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   simple collapsible
 </button>
@@ -6207,7 +6207,7 @@ $('.nav-tabs').button()
 
             <h3>Via JavaScript</h3>
             <p>Enable manually with:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $(".collapse").collapse()
 {% endhighlight %}
 
@@ -6243,7 +6243,7 @@ $(".collapse").collapse()
 
             <h4>.collapse(options)</h4>
             <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
-{% highlight js linenos %}
+{% highlight js %}
 $('#myCollapsible').collapse({
   toggle: false
 })
@@ -6288,7 +6288,7 @@ $('#myCollapsible').collapse({
                </tr>
               </tbody>
             </table>
-{% highlight js linenos %}
+{% highlight js %}
 $('#myCollapsible').on('hidden', function () {
   // do something…
 })
@@ -6332,7 +6332,7 @@ $('#myCollapsible').on('hidden', function () {
                 </a>
               </div>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div id="carousel-example-generic" class="carousel slide">
   <!-- Indicators -->
   <ol class="carousel-indicators">
@@ -6406,7 +6406,7 @@ $('#myCollapsible').on('hidden', function () {
                 </a>
               </div>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <div class="item active">
   <img src="..." alt="">
   <div class="carousel-caption">
@@ -6428,7 +6428,7 @@ $('#myCollapsible').on('hidden', function () {
 
             <h3>Via JavaScript</h3>
             <p>Call carousel manually with:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('.carousel').carousel()
 {% endhighlight %}
 
@@ -6463,7 +6463,7 @@ $('.carousel').carousel()
 
             <h4>.carousel(options)</h4>
             <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
-{% highlight html linenos %}
+{% highlight html %}
 $('.carousel').carousel({
   interval: 2000
 })
@@ -6522,7 +6522,7 @@ $('.carousel').carousel({
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
               <input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div><!-- /example -->
-{% highlight html linenos %}
+{% highlight html %}
 <input type="text" data-provide="typeahead">
 {% endhighlight %}
 
@@ -6538,7 +6538,7 @@ $('.carousel').carousel({
 
             <h3>Via JavaScript</h3>
             <p>Call the typeahead manually with:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('.typeahead').typeahead()
 {% endhighlight %}
 
@@ -6623,7 +6623,7 @@ $('.typeahead').typeahead()
             <h3>Via data attributes</h3>
             <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
 
-{% highlight html linenos %}
+{% highlight html %}
 <div data-spy="affix" data-offset-top="200">...</div>
 {% endhighlight %}
 
@@ -6634,14 +6634,14 @@ $('.typeahead').typeahead()
 
             <h3>Via JavaScript</h3>
             <p>Call the affix plugin via JavaScript:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('#navbar').affix()
 {% endhighlight %}
 
             <h3>Methods</h3>
             <h4>.affix('refresh')</h4>
             <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
-{% highlight js linenos %}
+{% highlight js %}
 $('[data-spy="affix"]').each(function () {
   $(this).affix('refresh')
 });
-- 
cgit v1.2.3


From e8b731864608d2f86db37705880ec92136e7347a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 19:07:28 -0700
Subject: no need for zero padding on navbar top/bottom; better comment

---
 docs/assets/css/bootstrap.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index ecf7c7585..12a4d691f 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3487,7 +3487,8 @@ button.close {
 
 .navbar {
   position: relative;
-  padding: 0 15px;
+  padding-top: 15px;
+  padding-bottom: 15px;
   background-color: #eeeeee;
   border-radius: 4px;
 }
-- 
cgit v1.2.3


From 69f5447afab3209cee5f96097447df058084d1c3 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 19:12:48 -0700
Subject: add back bottom margin to navbars

---
 docs/assets/css/bootstrap.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 12a4d691f..3dd8bc5b1 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3489,6 +3489,7 @@ button.close {
   position: relative;
   padding-top: 15px;
   padding-bottom: 15px;
+  margin-bottom: 20px;
   background-color: #eeeeee;
   border-radius: 4px;
 }
-- 
cgit v1.2.3


From 0780faad45d106fbe8bd0de64e1cdfb3d6117d0e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 19:20:41 -0700
Subject: make that left/right padding, not top/bottom on navbar

---
 docs/assets/css/bootstrap.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3dd8bc5b1..7b3575426 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3487,8 +3487,8 @@ button.close {
 
 .navbar {
   position: relative;
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-right: 15px;
+  padding-left: 15px;
   margin-bottom: 20px;
   background-color: #eeeeee;
   border-radius: 4px;
-- 
cgit v1.2.3


From 47155e8aa38856ff928be02b33454ae79d84aa2e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 19:35:52 -0700
Subject: outdent the rows for tablets and above

---
 docs/assets/css/bootstrap.css | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7b3575426..1f338a871 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -992,6 +992,10 @@ pre code {
   .container {
     max-width: 728px;
   }
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
 }
 
 @media screen and (min-width: 992px) {
-- 
cgit v1.2.3


From f8fd524def9b0960403495c5183f0e1c616a82b4 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 30 Apr 2013 19:55:02 -0700
Subject: add the fade class to the default modal docs

---
 docs/docs.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 60711f5da..4292b650c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4934,7 +4934,7 @@ $('#myModal').on('show', function (e) {
     <h3>Static example</h3>
     <p>A rendered modal with header, body, and set of actions in the footer.</p>
     <div class="bs-docs-example bs-docs-example-modal">
-      <div class="modal">
+      <div class="modal fade">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
@@ -4953,7 +4953,7 @@ $('#myModal').on('show', function (e) {
       </div><!-- /.modal -->
     </div><!-- /example -->
 {% highlight html %}
-<div class="modal">
+<div class="modal fade">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-- 
cgit v1.2.3


From 9cd3a92713bb8e2b78ea6496f69ee14ce1e46b3f Mon Sep 17 00:00:00 2001
From: DarDar <dar.quonb@gmail.com>
Date: Wed, 24 Apr 2013 00:41:06 +0200
Subject: Use @font-size-... variables instead of hardcoded font-size in px

---
 docs/assets/css/bootstrap.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1f338a871..2bd9a2119 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3192,9 +3192,9 @@ a.list-group-item.active .list-group-item-text {
 
 .close {
   float: right;
-  font-size: 20px;
+  font-size: 21px;
   font-weight: bold;
-  line-height: 20px;
+  line-height: 1;
   color: #000;
   text-shadow: 0 1px 0 #ffffff;
   opacity: 0.2;
@@ -3382,7 +3382,7 @@ button.close {
 .nav-header {
   display: block;
   padding: 3px 15px;
-  font-size: 11px;
+  font-size: 10.5px;
   font-weight: bold;
   line-height: 20px;
   color: #999999;
@@ -3576,7 +3576,7 @@ button.close {
   padding: 15px;
   margin-right: auto;
   margin-left: auto;
-  font-size: 18px;
+  font-size: 17.5px;
   font-weight: 500;
   line-height: 20px;
   color: #777777;
@@ -4355,7 +4355,7 @@ button.close {
   position: absolute;
   z-index: 1030;
   display: block;
-  font-size: 11px;
+  font-size: 10.5px;
   line-height: 1.4;
   opacity: 0;
   filter: alpha(opacity=0);
@@ -4802,7 +4802,7 @@ a.thumbnail:focus {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: 12px;
+  font-size: 11.9px;
   font-weight: bold;
   line-height: 1;
   color: #fff;
@@ -4902,7 +4902,7 @@ a.list-group-item.active > .badge,
   float: left;
   width: 0;
   height: 100%;
-  font-size: 12px;
+  font-size: 11.9px;
   color: #fff;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -5216,7 +5216,7 @@ a.list-group-item.active > .badge,
     border-radius: 6px;
   }
   .jumbotron h1 {
-    font-size: 60px;
+    font-size: 63px;
   }
 }
 
-- 
cgit v1.2.3


From a62e97091c6c1bd732a8f7e0761e724dfe50e0df Mon Sep 17 00:00:00 2001
From: Seth Lilly <seth@sethlilly.com>
Date: Thu, 2 May 2013 14:03:54 -0300
Subject: Corrected typo in carousel.html

Changed text from "First featurette headling" to "First featurette heading" in the first `h2.featurette-heading` tag.
---
 docs/examples/carousel.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 954375d4b..cd6855aab 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -350,7 +350,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
-    <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
+    <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
-- 
cgit v1.2.3


From 07117f97b6a156d1ddff0292c907599fb33d602a Mon Sep 17 00:00:00 2001
From: Kevin Ingersoll <kingersoll@gmail.com>
Date: Fri, 3 May 2013 15:22:27 +1200
Subject: Use padding instead of #push with box-sizing: border-box

---
 docs/examples/sticky-footer-navbar.html | 7 ++-----
 docs/examples/sticky-footer.html        | 7 ++-----
 2 files changed, 4 insertions(+), 10 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index 429b74f91..fe6681ef6 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -22,14 +22,13 @@ title: Sticky footer with navbar template
     height: 100%;
     /* Negative indent footer by its height */
     margin: 0 auto -60px;
+    /* Pad bottom by footer height */
+    padding: 0 0 60px;
   }
 
   /* Set the fixed height of the footer here */
-  #push,
   #footer {
     height: 60px;
-  }
-  #footer {
     background-color: #f5f5f5;
   }
 
@@ -106,8 +105,6 @@ title: Sticky footer with navbar template
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
     <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
   </div>
-
-  <div id="push"></div>
 </div>
 
 <div id="footer">
diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html
index 62c108812..14fc1edeb 100644
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -22,14 +22,13 @@ title: Sticky footer template
     height: 100%;
     /* Negative indent footer by its height */
     margin: 0 auto -60px;
+    /* Pad bottom by footer height */
+    padding: 0 0 60px;
   }
 
   /* Set the fixed height of the footer here */
-  #push,
   #footer {
     height: 60px;
-  }
-  #footer {
     background-color: #f5f5f5;
   }
 
@@ -71,8 +70,6 @@ title: Sticky footer template
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
     <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
   </div>
-
-  <div id="push"></div>
 </div>
 
 <div id="footer">
-- 
cgit v1.2.3


From 08fea3304ac8393ca5f549082f7e195e1762fb40 Mon Sep 17 00:00:00 2001
From: Kevin Ingersoll <kingersoll@gmail.com>
Date: Fri, 3 May 2013 15:27:10 +1200
Subject: Fix input border flicker in Chrome from @garoevans, closes #7689

---
 docs/assets/css/bootstrap.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1f338a871..281508ac0 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1261,10 +1261,10 @@ input[type="color"] {
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
-          transition: border linear 0.2s, box-shadow linear 0.2s;
+  -webkit-transition: border-color linear 0.2s, box-shadow linear 0.2s;
+     -moz-transition: border-color linear 0.2s, box-shadow linear 0.2s;
+       -o-transition: border-color linear 0.2s, box-shadow linear 0.2s;
+          transition: border-color linear 0.2s, box-shadow linear 0.2s;
 }
 
 input,
-- 
cgit v1.2.3


From a4f2c9e156ed52e24ea779b8ef4a32adfb124444 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 2 May 2013 22:44:43 -0700
Subject: add customizer link to docs homepage

---
 docs/index.html | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'docs')

diff --git a/docs/index.html b/docs/index.html
index 28bd6f6ac..685039dea 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,6 +31,9 @@ title: Bootstrap
     </div>
 
     <ul class="masthead-links">
+      <li>
+        <a href="./customize/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);">Customize</a>
+      </li>
       <li>
         <a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
       </li>
-- 
cgit v1.2.3


From bec8c90fd7a126e23c1d3a66eba9782b32729e48 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 2 May 2013 22:52:32 -0700
Subject: Cleanup .navbar-form styles

* Nuke the commented out navbar forms code that's not currently needed
* Add a few more examples to the .navbar-form docs section
* Remove (for now at least) top padding on checkbox and radios
---
 docs/docs.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 4292b650c..2b922b695 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3476,12 +3476,44 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="navbar-forms">Forms</h3>
     <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
     <div class="bs-docs-example">
+
+      <div class="navbar">
+        <form class="navbar-form pull-left">
+          <input type="text" style="width: 200px;">
+          <button type="submit" class="btn">Submit</button>
+        </form>
+      </div>
+
+      <div class="navbar">
+        <form class="navbar-form pull-left">
+          <select name="" id="" style="width: 200px;">
+            <option value="1">1</option>
+            <option value="1">1</option>
+            <option value="1">1</option>
+            <option value="1">1</option>
+          </select>
+          <button type="submit" class="btn">Submit</button>
+        </form>
+      </div>
+
+      <div class="navbar">
+        <form class="navbar-form pull-left">
+          <input type="text" style="width: 200px;">
+          <input type="checkbox">
+          <button type="submit" class="btn">Submit</button>
+        </form>
+      </div>
+
       <div class="navbar">
         <form class="navbar-form pull-left">
           <input type="text" style="width: 200px;">
+          <label class="checkbox-inline">
+            <input type="checkbox"> Derp
+          </label>
           <button type="submit" class="btn">Submit</button>
         </form>
       </div>
+
     </div><!-- /example -->
 {% highlight html %}
 <form class="navbar-form pull-left">
-- 
cgit v1.2.3


From 94792b9dae3800e739e0036d45a276c3127b103d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 2 May 2013 23:05:09 -0700
Subject: Improve buttons in navbars

* Add top margin, calculated by subtracting height of an input from height of a navbar, and dividing by two
* Uses the same method as .navbar-form
* To use, add .navbar-btn to any button outside a form element
* Also add section to docs detailing buttons in navbars, and add more ids for the other unlinked and unmentioned sections in the side nav
---
 docs/_includes/docs-nav.html |  3 +++
 docs/docs.html               | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index c10bea4d3..ebeb0d828 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -121,6 +121,9 @@
         <li><a href="#navbar-basic">Basic navbar</a></li>
         <li><a href="#navbar-nav">Nav links</a></li>
         <li><a href="#navbar-forms">Forms in navbars</a></li>
+        <li><a href="#navbar-buttons">Buttons in navbars</a></li>
+        <li><a href="#navbar-component-alignment">Component alignment</a></li>
+        <li><a href="#navbar-text">Text in navbars</a></li>
         <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
         <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
         <li><a href="#navbar-static-top">Static top navbar</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index 2b922b695..e4f711381 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3522,13 +3522,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-    <h3>Component alignment</h3>
-    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+    <h3 id="navbar-buttons">Buttons</h3>
+    <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a href="#" class="navbar-brand">Derp</a>
+        <button type="button" class="btn">Submit</button>
+      </div>
+    </div>
 
-    <h3>Using dropdowns</h3>
-    <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
+    <h3 id="navbar-component-alignment">Component alignment</h3>
+    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
-    <h3>Text</h3>
+    <h3 id="navbar-text">Text</h3>
     <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
 
 
-- 
cgit v1.2.3


From e1c67b149f7189f72acc5ca3e25d02f9dcd27e35 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 2 May 2013 23:13:43 -0700
Subject: More navbar CSS and docs cleanup

* Rearrange sections
* Add code snippets for text and links in navbars
* Add .navbar-link back in
* Add mention of .navbar-text, but it still needs to be re-implemented
* Update nav to reflect new order
---
 docs/_includes/docs-nav.html |  3 ++-
 docs/docs.html               | 43 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 37 insertions(+), 9 deletions(-)

(limited to 'docs')

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index ebeb0d828..2c001a3f4 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -122,8 +122,9 @@
         <li><a href="#navbar-nav">Nav links</a></li>
         <li><a href="#navbar-forms">Forms in navbars</a></li>
         <li><a href="#navbar-buttons">Buttons in navbars</a></li>
-        <li><a href="#navbar-component-alignment">Component alignment</a></li>
         <li><a href="#navbar-text">Text in navbars</a></li>
+        <li><a href="#navbar-links">Links in navbars</a></li>
+        <li><a href="#navbar-component-alignment">Component alignment</a></li>
         <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
         <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
         <li><a href="#navbar-static-top">Static top navbar</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index e4f711381..3b092f804 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3488,9 +3488,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <form class="navbar-form pull-left">
           <select name="" id="" style="width: 200px;">
             <option value="1">1</option>
-            <option value="1">1</option>
-            <option value="1">1</option>
-            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
           </select>
           <button type="submit" class="btn">Submit</button>
         </form>
@@ -3508,7 +3508,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <form class="navbar-form pull-left">
           <input type="text" style="width: 200px;">
           <label class="checkbox-inline">
-            <input type="checkbox"> Derp
+            <input type="checkbox"> Remember me
           </label>
           <button type="submit" class="btn">Submit</button>
         </form>
@@ -3526,16 +3526,43 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
     <div class="bs-docs-example">
       <div class="navbar">
-        <a href="#" class="navbar-brand">Derp</a>
+        <a href="#" class="navbar-brand">Brand</a>
         <button type="button" class="btn">Submit</button>
       </div>
     </div>
 
-    <h3 id="navbar-component-alignment">Component alignment</h3>
-    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-
     <h3 id="navbar-text">Text</h3>
     <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a href="#" class="navbar-brand">Brand</a>
+        <p class="navbar-text">Signed in as Mark Otto</p>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="navbar">
+  <a href="#" class="navbar-brand">Brand</a>
+  <p class="navbar-text">Signed in as Mark Otto</p>
+</div>
+{% endhighlight %}
+
+    <h3 id="navbar-links">Links</h3>
+    <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a href="#" class="navbar-brand">Brand</a>
+        <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="navbar">
+  <a href="#" class="navbar-brand">Brand</a>
+  <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+</div>
+{% endhighlight %}
+
+    <h3 id="navbar-component-alignment">Component alignment</h3>
+    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
 
     <h2>Optional display variations</h2>
-- 
cgit v1.2.3


From 1587b8948f3f1e2471c3bf4005a8ba722bffc78d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 10:53:26 -0700
Subject: run make on previous commits

---
 docs/assets/css/bootstrap.css | 75 +++++++++----------------------------------
 1 file changed, 15 insertions(+), 60 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1f338a871..5f867fa2f 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1396,15 +1396,17 @@ textarea::-webkit-input-placeholder {
   margin-top: -5px;
 }
 
+/*
+// Move the options list down to align with labels
 .controls > .radio:first-child,
 .controls > .checkbox:first-child {
-  padding-top: 5px;
+  padding-top: 5px; // has to be padding because margin collaspes
 }
+*/
 
 .radio-inline,
 .checkbox-inline {
   display: inline-block;
-  padding-top: 5px;
   padding-left: 20px;
   margin-bottom: 0;
   font-weight: normal;
@@ -3759,16 +3761,6 @@ button.close {
   .navbar .nav.pull-right {
     float: right;
   }
-  .navbar .nav > .divider {
-    width: 1px;
-    height: 30px;
-    margin: 10px 9px;
-    border-right: 1px solid #fbfbfb;
-    border-bottom: 0;
-  }
-  .navbar-inverse .nav > .divider {
-    border-right-color: #2f2f2f;
-  }
   .navbar-toggle {
     position: relative;
     top: auto;
@@ -3781,62 +3773,25 @@ button.close {
   }
 }
 
-/*
+.navbar-btn {
+  margin-top: 8px;
+}
 
-// Janky solution for now to account for links outside the .nav
-// -------------------------
 .navbar-link {
-  color: @navbar-link-color;
-  &:hover {
-    color: @navbar-link-hover-color;
-  }
+  color: #777777;
 }
 
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
-  .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn {
-  margin-top: 0; // then undo the margin here so we don't accidentally double it
+.navbar-link:hover {
+  color: #333333;
 }
 
-// Navbar forms
-// -------------------------
-.navbar-form {
-  margin-bottom: 0; // remove default bottom margin
-  .clearfix();
-  input,
-  select,
-  .radio,
-  .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
-  }
-  input,
-  select,
-  .btn {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-  input[type="image"],
-  input[type="checkbox"],
-  input[type="radio"] {
-    margin-top: 3px;
-  }
-  .input-append,
-  .input-prepend {
-    margin-top: 5px;
-    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
-    input {
-      margin-top: 0; // remove the margin on top since it's on the parent
-    }
-  }
+.navbar-inverse .navbar-link {
+  color: #999999;
 }
 
-*/
+.navbar-inverse .navbar-link:hover {
+  color: #ffffff;
+}
 
 .btn .caret {
   border-top-color: #ffffff;
-- 
cgit v1.2.3


From b5d68f59c20bbc9bd0290950d0d04db417697843 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 11:56:00 -0700
Subject: Add cursor: pointer; to .checkbox and .radio and their inline
 counterparts

---
 docs/assets/css/bootstrap.css | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5f867fa2f..0216ffc5b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1381,6 +1381,7 @@ textarea::-webkit-input-placeholder {
   display: inline;
   margin-bottom: 0;
   font-weight: normal;
+  cursor: pointer;
 }
 
 .radio input[type="radio"],
@@ -1411,6 +1412,7 @@ textarea::-webkit-input-placeholder {
   margin-bottom: 0;
   font-weight: normal;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 .radio-inline + .radio-inline,
-- 
cgit v1.2.3


From 9d9fd5e0d1b238613728ef27a024b0cc28b5151a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 14:46:09 -0700
Subject: remove .fade from static modal example, but include in code snippet

---
 docs/docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index dd1964c83..cd90b1510 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -5012,7 +5012,7 @@ $('#myModal').on('show', function (e) {
     <h3>Static example</h3>
     <p>A rendered modal with header, body, and set of actions in the footer.</p>
     <div class="bs-docs-example bs-docs-example-modal">
-      <div class="modal fade">
+      <div class="modal">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
-- 
cgit v1.2.3


From e1d947f53e0591f2765290784f9e09f46e002558 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 14:56:57 -0700
Subject: Scope .table-bordered styles to immediate children only

---
 docs/assets/css/bootstrap.css | 78 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a17a47128..9df8dc84e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1073,72 +1073,72 @@ th {
   border-radius: 4px;
 }
 
-.table-bordered thead > tr > th,
-.table-bordered tbody > tr > th,
-.table-bordered thead > tr > td,
-.table-bordered tbody > tr > td {
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td {
   border-left: 1px solid #dddddd;
 }
 
-.table-bordered caption + thead > tr:first-child th,
-.table-bordered caption + tbody > tr:first-child th,
-.table-bordered caption + tbody > tr:first-child td,
-.table-bordered colgroup + thead > tr:first-child th,
-.table-bordered colgroup + tbody > tr:first-child th,
-.table-bordered colgroup + tbody > tr:first-child td,
-.table-bordered thead:first-child > tr:first-child th,
-.table-bordered tbody:first-child > tr:first-child th,
-.table-bordered tbody:first-child > tr:first-child td {
+.table-bordered > caption + thead > tr:first-child th,
+.table-bordered > caption + tbody > tr:first-child th,
+.table-bordered > caption + tbody > tr:first-child td,
+.table-bordered > colgroup + thead > tr:first-child th,
+.table-bordered > colgroup + tbody > tr:first-child th,
+.table-bordered > colgroup + tbody > tr:first-child td,
+.table-bordered > thead:first-child > tr:first-child th,
+.table-bordered > tbody:first-child > tr:first-child th,
+.table-bordered > tbody:first-child > tr:first-child td {
   border-top: 0;
 }
 
-.table-bordered thead:first-child > tr:first-child > th:first-child,
-.table-bordered tbody:first-child > tr:first-child > td:first-child,
-.table-bordered tbody:first-child > tr:first-child > th:first-child {
+.table-bordered > thead:first-child > tr:first-child > th:first-child,
+.table-bordered > tbody:first-child > tr:first-child > td:first-child,
+.table-bordered > tbody:first-child > tr:first-child > th:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered thead:first-child > tr:first-child > th:last-child,
-.table-bordered tbody:first-child > tr:first-child > td:last-child,
-.table-bordered tbody:first-child > tr:first-child > th:last-child {
+.table-bordered > thead:first-child > tr:first-child > th:last-child,
+.table-bordered > tbody:first-child > tr:first-child > td:last-child,
+.table-bordered > tbody:first-child > tr:first-child > th:last-child {
   border-top-right-radius: 4px;
 }
 
-.table-bordered thead:last-child > tr:last-child > th:first-child,
-.table-bordered tbody:last-child > tr:last-child > td:first-child,
-.table-bordered tbody:last-child > tr:last-child > th:first-child,
-.table-bordered tfoot:last-child > tr:last-child > td:first-child,
-.table-bordered tfoot:last-child > tr:last-child > th:first-child {
+.table-bordered > thead:last-child > tr:last-child > th:first-child,
+.table-bordered > tbody:last-child > tr:last-child > td:first-child,
+.table-bordered > tbody:last-child > tr:last-child > th:first-child,
+.table-bordered > tfoot:last-child > tr:last-child > td:first-child,
+.table-bordered > tfoot:last-child > tr:last-child > th:first-child {
   border-bottom-left-radius: 4px;
 }
 
-.table-bordered thead:last-child > tr:last-child > th:last-child,
-.table-bordered tbody:last-child > tr:last-child > td:last-child,
-.table-bordered tbody:last-child > tr:last-child > th:last-child,
-.table-bordered tfoot:last-child > tr:last-child > td:last-child,
-.table-bordered tfoot:last-child > tr:last-child > th:last-child {
+.table-bordered > thead:last-child > tr:last-child > th:last-child,
+.table-bordered > tbody:last-child > tr:last-child > td:last-child,
+.table-bordered > tbody:last-child > tr:last-child > th:last-child,
+.table-bordered > tfoot:last-child > tr:last-child > td:last-child,
+.table-bordered > tfoot:last-child > tr:last-child > th:last-child {
   border-bottom-right-radius: 4px;
 }
 
-.table-bordered tfoot + tbody:last-child > tr:last-child > td:first-child {
+.table-bordered > tfoot + tbody:last-child > tr:last-child > td:first-child {
   border-bottom-left-radius: 0;
 }
 
-.table-bordered tfoot + tbody:last-child > tr:last-child > td:last-child {
+.table-bordered > tfoot + tbody:last-child > tr:last-child > td:last-child {
   border-bottom-right-radius: 0;
 }
 
-.table-bordered caption + thead > tr:first-child > th:first-child,
-.table-bordered caption + tbody > tr:first-child > td:first-child,
-.table-bordered colgroup + thead > tr:first-child > th:first-child,
-.table-bordered colgroup + tbody > tr:first-child > td:first-child {
+.table-bordered > caption + thead > tr:first-child > th:first-child,
+.table-bordered > caption + tbody > tr:first-child > td:first-child,
+.table-bordered > colgroup + thead > tr:first-child > th:first-child,
+.table-bordered > colgroup + tbody > tr:first-child > td:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered caption + thead > tr:first-child > th:last-child,
-.table-bordered caption + tbody > tr:first-child > td:last-child,
-.table-bordered colgroup + thead > tr:first-child > th:last-child,
-.table-bordered colgroup + tbody > tr:first-child > td:last-child {
+.table-bordered > caption + thead > tr:first-child > th:last-child,
+.table-bordered > caption + tbody > tr:first-child > td:last-child,
+.table-bordered > colgroup + thead > tr:first-child > th:last-child,
+.table-bordered > colgroup + tbody > tr:first-child > td:last-child {
   border-top-right-radius: 4px;
 }
 
-- 
cgit v1.2.3


From 4357ed72e0b244a6ccb56626e49fff5ed046573f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 15:18:04 -0700
Subject: Update justified nav CSS for proper selectors

---
 docs/examples/justified-nav.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index a87b3b9d1..fdd706a8f 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -42,7 +42,7 @@ title: Justified nav template
     border-radius: 5px;
     border: 1px solid #ccc;
   }
-  .nav-justified li a {
+  .nav-justified > li > a {
     padding-top: 15px;
     padding-bottom: 15px;
     color: #777;
@@ -60,17 +60,17 @@ title: Justified nav template
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
     background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
   }
-  .nav-justified .active a {
+  .nav-justified > .active > a {
     background-color: #ddd;
     background-image: none;
     box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
   }
-  .nav-justified li:first-child a {
+  .nav-justified > li:first-child > a {
     border-left: 0;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }
-  .nav-justified li:last-child a {
+  .nav-justified > li:last-child > a {
     border-right: 0;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
@@ -86,7 +86,6 @@ title: Justified nav template
       padding-left: 0;
       padding-right: 0;
     }
-    /* Make the nav on the same line */
   }
 
 </style>
-- 
cgit v1.2.3


From a6f7f96a93a650fc7e71337c836f0221433b65f2 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 15:29:10 -0700
Subject: recompile after last justified nav tweaks

---
 docs/assets/css/bootstrap.css | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 58b775060..131b0c6fa 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3332,6 +3332,9 @@ button.close {
   display: table-cell;
   float: none;
   width: 1%;
+}
+
+.nav-tabs.nav-justified > li > a {
   text-align: center;
 }
 
@@ -3380,6 +3383,9 @@ button.close {
   display: table-cell;
   float: none;
   width: 1%;
+}
+
+.nav-justified > li > a {
   text-align: center;
 }
 
-- 
cgit v1.2.3


From ee0789ff8f7ac0c60d8f326894fef5fd9db90adc Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 15:29:32 -0700
Subject: Fixes #7721: change @navbar-text to @navbar-color, along with inverse
 options

---
 docs/customize.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/customize.html b/docs/customize.html
index e445ccab9..710875b72 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -297,7 +297,7 @@ title: Customize and download
                 <input type="text" placeholder="@grayDarker">
                 <label>@navbar-background-highlight</label>
                 <input type="text" placeholder="@grayDark">
-                <label>@navbar-text</label>
+                <label>@navbar-color</label>
                 <input type="text" placeholder="@grayLight">
                 <label>@navbar-brand-color</label>
                 <input type="text" placeholder="@navbar-link-color">
-- 
cgit v1.2.3


From 7d41a387693c49347e06572ceb7ec2207ee30d46 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 3 May 2013 16:16:26 -0700
Subject: Fixes #7511: add support for nested button groups so you can use
 dropdowns in your button groups

---
 docs/assets/css/bootstrap.css | 19 +++++++++++++++++++
 docs/docs.html                | 22 ++++++++++++++++++++++
 2 files changed, 41 insertions(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 131b0c6fa..e1260c7d5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3889,6 +3889,25 @@ button.close {
   border-bottom-right-radius: 6px;
 }
 
+.btn-group > .btn-group {
+  float: left;
+}
+
+.btn-group > .btn-group > .btn {
+  border-radius: 0;
+}
+
+.btn-group > .btn-group:last-child > .btn {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.btn-group > .btn-group:first-child > .btn {
+  margin-left: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
diff --git a/docs/docs.html b/docs/docs.html
index cd90b1510..346725215 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2919,6 +2919,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
+    <h3 id="btn-groups-nested">Nested button groups</h3>
+    <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
+    <div class="bs-docs-example">
+      <div class="btn-group">
+        <button type="button" class="btn">1</button>
+        <button type="button" class="btn">2</button>
+        <button type="button" class="btn">3</button>
+
+        <div class="btn-group">
+          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+           </ul>
+        </div>
+      </div>
+    </div>
+
     <h3 id="btn-groups-vertical">Vertical button groups</h3>
     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     <div class="bs-docs-example">
-- 
cgit v1.2.3


From dcf7cc084d6b2d0522860c4c9be6e914c67ab91a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 4 May 2013 13:11:20 -0700
Subject: Fixes #7783: nuke bottom margin on fixed-bottom-navbar

---
 docs/assets/css/bootstrap.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs')

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e1260c7d5..eba96cb30 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3578,6 +3578,7 @@ button.close {
 
 .navbar-fixed-bottom {
   bottom: 0;
+  margin-bottom: 0;
 }
 
 .navbar-brand {
-- 
cgit v1.2.3


From 716c869b899012db358c8e73456993a8864e9e22 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 4 May 2013 15:00:59 -0700
Subject: correct right nav in navbar examples

---
 docs/examples/navbar-fixed-top.html  |  2 +-
 docs/examples/navbar-static-top.html | 10 +++++-----
 docs/examples/navbar.html            |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs')

diff --git a/docs/examples/navbar-fixed-top.html b/docs/examples/navbar-fixed-top.html
index 906ca32c9..d56cadfac 100644
--- a/docs/examples/navbar-fixed-top.html
+++ b/docs/examples/navbar-fixed-top.html
@@ -44,7 +44,7 @@ title: Fixed navbar template
               </ul>
             </li>
           </ul>
-          <ul class="nav pull-right">
+          <ul class="nav navbar-nav pull-right">
             <li><a href="/examples/navbar/">Default</a></li>
             <li><a href="/examples/navbar-static-top/">Static top</a></li>
             <li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
diff --git a/docs/examples/navbar-static-top.html b/docs/examples/navbar-static-top.html
index d636cbd3b..065d16d5f 100644
--- a/docs/examples/navbar-static-top.html
+++ b/docs/examples/navbar-static-top.html
@@ -40,11 +40,11 @@ title: Static navbar template
           </ul>
         </li>
       </ul>
-    <ul class="nav pull-right">
-      <li><a href="/examples/navbar/">Default</a></li>
-      <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
-      <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
-    </ul>
+      <ul class="nav navbar-nav pull-right">
+        <li><a href="/examples/navbar/">Default</a></li>
+        <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
+        <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
+      </ul>
     </div><!--/.nav-collapse -->
   </div>
 </div>
diff --git a/docs/examples/navbar.html b/docs/examples/navbar.html
index a74f3b356..4c0f9938b 100644
--- a/docs/examples/navbar.html
+++ b/docs/examples/navbar.html
@@ -46,7 +46,7 @@ title: Navbar template
             </ul>
           </li>
         </ul>
-        <ul class="nav pull-right">
+        <ul class="nav navbar-nav pull-right">
           <li class="active"><a href="/examples/navbar/">Default</a></li>
           <li><a href="/examples/navbar-static-top/">Static top</a></li>
           <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
-- 
cgit v1.2.3


From 240305321f3923f2fe127807b57fe9867a86d410 Mon Sep 17 00:00:00 2001
From: Edgar Schnueriger <edgar.schnueriger@ricardo.ch>
Date: Mon, 6 May 2013 09:48:05 +0200
Subject: fixed not working example code for modals

---
 docs/docs.html | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

(limited to 'docs')

diff --git a/docs/docs.html b/docs/docs.html
index 346725215..88ab16d7c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -5119,27 +5119,27 @@ $('#myModal').on('show', function (e) {
       <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
     </div><!-- /example -->
 {% highlight html %}
-<div class="modal">
   <!-- Button trigger modal -->
   <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
 
   <!-- Modal -->
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        ...
-      </div>
-      <div class="modal-footer">
-        <a href="#" class="btn">Close</a>
-        <a href="#" class="btn btn-primary">Save changes</a>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dalog -->
-</div><!-- /.modal -->
+  <div class="modal" id="myModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title">Modal title</h4>
+        </div>
+        <div class="modal-body">
+          ...
+        </div>
+        <div class="modal-footer">
+          <a href="#" class="btn">Close</a>
+          <a href="#" class="btn btn-primary">Save changes</a>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dalog -->
+  </div><!-- /.modal -->
 {% endhighlight %}
 
 
-- 
cgit v1.2.3