fix regression in resetting collapse to auto on collapse open. (+ add spec and rebuild)

heading
officially drop support for offset on thumbnails since it breaks BC
2012-04-24 18:06:41 -07:00 · 2012-04-24 06:53:48 -07:00 · 2012-04-24 06:52:57 -07:00 · 2012-04-24 06:45:21 -07:00 · 2012-04-24 06:39:14 -07:00 · 2012-04-24 02:21:45 -07:00
111 changed files with 8085 additions and 2591 deletions
@@ -6,6 +6,7 @@
 *.rej
 *.swo
 *.swp
+*.zip
 *.vi
 *~
 *.sass-cache
@@ -31,4 +32,5 @@ nbproject
 .hg
 .svn
 .CVS
-.idea
+.idea
+node_modules
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.6
@@ -1,13 +1,176 @@
-Copyright 2012 Twitter, Inc.
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/

-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

-http://www.apache.org/licenses/LICENSE-2.0
+   1. Definitions.

-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
@@ -2,27 +2,57 @@ BOOTSTRAP = ./docs/assets/css/bootstrap.css
 BOOTSTRAP_LESS = ./less/bootstrap.less
 BOOTSTRAP_RESPONSIVE = ./docs/assets/css/bootstrap-responsive.css
 BOOTSTRAP_RESPONSIVE_LESS = ./less/responsive.less
-LESS_COMPRESSOR ?= `which lessc`
-WATCHR ?= `which watchr`
+DATE=$(shell date +%I:%M%p)
+CHECK=\033[32m✔\033[39m
+HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#
+

 #
 # BUILD DOCS
 #

-docs: bootstrap
-	rm docs/assets/bootstrap.zip
-	zip -r docs/assets/bootstrap.zip bootstrap
-	rm -r bootstrap
-	lessc ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
-	lessc ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE}
-	node docs/build
-	cp img/* docs/assets/img/
-	cp js/*.js docs/assets/js/
-	cp js/tests/vendor/jquery.js docs/assets/js/
+build:
+	@echo "\n${HR}"
+	@echo "Building Bootstrap..."
+	@echo "${HR}\n"
+	@jshint js/*.js --config js/.jshintrc
+	@jshint js/tests/unit/*.js --config js/.jshintrc
+	@echo "Running JSHint on javascript...             ${CHECK} Done"
+	@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
+	@recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE}
+	@echo "Compiling LESS with Recess...               ${CHECK} Done"
+	@node docs/build
+	@cp img/* docs/assets/img/
+	@cp js/*.js docs/assets/js/
+	@cp js/tests/vendor/jquery.js docs/assets/js/
+	@echo "Compiling documentation...                  ${CHECK} Done"
+	@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js
+	@uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
+	@echo "/**\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
+	@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
+	@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
+	@echo "Compiling and minifying javascript...       ${CHECK} Done"
+	@echo "\n${HR}"
+	@echo "Bootstrap successfully built at ${DATE}."
+	@echo "${HR}\n"
+	@echo "Thanks for using Bootstrap,"
+	@echo "<3 @mdo and @fat\n"
+
+#
+# RUN JSHINT & QUNIT TESTS IN PHANTOMJS
+#
+
+test:
+	jshint js/*.js --config js/.jshintrc
+	jshint js/tests/unit/*.js --config js/.jshintrc
+	node js/tests/server.js &
+	phantomjs js/tests/phantom.js "http://localhost:3000/js/tests"
+	kill -9 `cat js/tests/pid.txt`
+	rm js/tests/pid.txt

 #
 # BUILD SIMPLE BOOTSTRAP DIRECTORY
-# lessc & uglifyjs are required
+# recess & uglifyjs are required
 #

 bootstrap:
@@ -30,13 +60,13 @@ bootstrap:
 	mkdir -p bootstrap/css
 	mkdir -p bootstrap/js
 	cp img/* bootstrap/img/
-	lessc ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
-	lessc --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
-	lessc ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
-	lessc --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
+	recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
+	recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
+	recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
+	recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
 	cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
 	uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
-	echo "/**\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
+	echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
 	cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
 	rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

@@ -44,7 +74,10 @@ bootstrap:
 # MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O  )
 #

-gh-pages: docs
+gh-pages: bootstrap docs
+	rm -f docs/assets/bootstrap.zip
+	zip -r docs/assets/bootstrap.zip bootstrap
+	rm -r bootstrap
 	rm -f ../bootstrap-gh-pages/assets/bootstrap.zip
 	node docs/build production
 	cp -r docs/* ../bootstrap-gh-pages
@@ -58,4 +91,4 @@ watch:
 	watchr -e "watch('less/.*\.less') { system 'make' }"


-.PHONY: docs watch gh-pages
+.PHONY: docs watch gh-pages
@@ -1,4 +1,4 @@
-[Twitter Bootstrap](http://twitter.github.com/bootstrap)
+[Twitter Bootstrap](http://twitter.github.com/bootstrap) [![Build Status](https://secure.travis-ci.org/twitter/bootstrap.png)](http://travis-ci.org/twitter/bootstrap)
 =================

 Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it's a front-end toolkit for faster, more beautiful web development. It's created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat) at Twitter.
@@ -25,9 +25,9 @@ Releases will be numbered with the follow format:

 And constructed with the following guidelines:

-* Breaking backward compatibility bumps the major
-* New additions without breaking backward compatibility bumps the minor
-* Bug fixes and misc changes bump the patch
+* Breaking backward compatibility bumps the major (and resets the minor and patch)
+* New additions without breaking backward compatibility bumps the minor (and resets the patch)
+* Bug fixes and misc changes bumps the patch

 For more information on SemVer, please visit http://semver.org/.

@@ -49,6 +49,13 @@ Keep up to date on announcements and more by following Bootstrap on Twitter, [@T



+Blog
+----
+
+Read more detailed announcements, discussions, and more on [The Official Twitter Bootstrap Blog](http://blog.getbootstrap.com).
+
+
+
 Mailing list
 ------------

@@ -74,8 +81,18 @@ Developers

 We have included a makefile with convenience methods for working with the Bootstrap library.

+ **dependencies**
+Our makefile depends on you having recess, uglify.js, and jshint installed. To install, just run the following command in npm:
+
+```
+$ npm install recess uglify-js jshint -g
+```
+
 + **build** - `make`
-Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+
+ **test** - `make test`
+Runs jshint and qunit tests headlessly in phantom js (used for ci). Depends on having phatomjs installed.

 + **watch** - `make watch`
 This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.2
+ * Bootstrap Responsive v2.0.3
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
@@ -7,85 +7,86 @@
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
+
 .clearfix {
  *zoom: 1;
 }
+
 .clearfix:before,
 .clearfix:after {
  display: table;
  content: "";
 }
+
 .clearfix:after {
  clear: both;
 }
+
 .hide-text {
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
 }
+
 .input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;
-  /* Make inputs at least the height of their button counterpart */
-
-  /* Makes inputs behave like true block-level elements */
-
  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+     -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+          box-sizing: border-box;
 }
+
 .hidden {
  display: none;
  visibility: hidden;
 }
+
 .visible-phone {
-  display: none;
+  display: none !important;
 }
+
 .visible-tablet {
-  display: none;
-}
-.visible-desktop {
-  display: block;
-}
-.hidden-phone {
-  display: block;
-}
-.hidden-tablet {
-  display: block;
+  display: none !important;
 }
+
 .hidden-desktop {
-  display: none;
+  display: none !important;
 }
+
@media (max-width: 767px) {
  .visible-phone {
-    display: block;
+    display: inherit !important;
  }
  .hidden-phone {
-    display: none;
+    display: none !important;
  }
  .hidden-desktop {
-    display: block;
+    display: inherit !important;
  }
  .visible-desktop {
-    display: none;
+    display: none !important;
  }
 }
+
@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
-    display: block;
+    display: inherit !important;
  }
  .hidden-tablet {
-    display: none;
+    display: none !important;
  }
  .hidden-desktop {
-    display: block;
+    display: inherit !important;
  }
  .visible-desktop {
-    display: none;
+    display: none !important ;
  }
 }
+
@media (max-width: 480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0);
@@ -111,14 +112,14 @@
    padding-top: 0;
  }
  .form-horizontal .form-actions {
-    padding-left: 10px;
    padding-right: 10px;
+    padding-left: 10px;
  }
  .modal {
    position: absolute;
    top: 10px;
-    left: 10px;
    right: 10px;
+    left: 10px;
    width: auto;
    margin: 0;
  }
@@ -133,14 +134,28 @@
    position: static;
  }
 }
+
@media (max-width: 767px) {
  body {
-    padding-left: 20px;
    padding-right: 20px;
+    padding-left: 20px;
  }
-  .navbar-fixed-top {
-    margin-left: -20px;
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
    margin-right: -20px;
+    margin-left: -20px;
+  }
+  .container-fluid {
+    padding: 0;
+  }
+  .dl-horizontal dt {
+    float: none;
+    width: auto;
+    clear: none;
+    text-align: left;
+  }
+  .dl-horizontal dd {
+    margin-left: 0;
  }
  .container {
    width: auto;
@@ -148,19 +163,20 @@
  .row-fluid {
    width: 100%;
  }
-  .row {
+  .row,
+  .thumbnails {
    margin-left: 0;
  }
-  .row > [class*="span"],
-  .row-fluid > [class*="span"] {
-    float: none;
+  [class*="span"],
+  .row-fluid [class*="span"] {
    display: block;
+    float: none;
    width: auto;
-    margin: 0;
-  }
-  .thumbnails [class*="span"] {
-    width: auto;
+    margin-left: 0;
  }
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
@@ -168,20 +184,20 @@
    display: block;
    width: 100%;
    min-height: 28px;
-    /* Make inputs at least the height of their button counterpart */
-
-    /* Makes inputs behave like true block-level elements */
-
    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
  }
+  .input-prepend input,
+  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
+    display: inline-block;
    width: auto;
  }
 }
+
@media (min-width: 768px) and (max-width: 979px) {
  .row {
    margin-left: -20px;
@@ -288,205 +304,136 @@
  .row-fluid:after {
    clear: both;
  }
-  .row-fluid > [class*="span"] {
+  .row-fluid [class*="span"] {
+    display: block;
    float: left;
+    width: 100%;
+    min-height: 28px;
    margin-left: 2.762430939%;
+    *margin-left: 2.709239449638298%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
  }
-  .row-fluid > [class*="span"]:first-child {
+  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
-  .row-fluid > .span12 {
+  .row-fluid .span12 {
    width: 99.999999993%;
+    *width: 99.9468085036383%;
  }
-  .row-fluid > .span11 {
+  .row-fluid .span11 {
    width: 91.436464082%;
+    *width: 91.38327259263829%;
  }
-  .row-fluid > .span10 {
+  .row-fluid .span10 {
    width: 82.87292817100001%;
+    *width: 82.8197366816383%;
  }
-  .row-fluid > .span9 {
+  .row-fluid .span9 {
    width: 74.30939226%;
+    *width: 74.25620077063829%;
  }
-  .row-fluid > .span8 {
+  .row-fluid .span8 {
    width: 65.74585634900001%;
+    *width: 65.6926648596383%;
  }
-  .row-fluid > .span7 {
+  .row-fluid .span7 {
    width: 57.182320438000005%;
+    *width: 57.129128948638304%;
  }
-  .row-fluid > .span6 {
+  .row-fluid .span6 {
    width: 48.618784527%;
+    *width: 48.5655930376383%;
  }
-  .row-fluid > .span5 {
+  .row-fluid .span5 {
    width: 40.055248616%;
+    *width: 40.0020571266383%;
  }
-  .row-fluid > .span4 {
+  .row-fluid .span4 {
    width: 31.491712705%;
+    *width: 31.4385212156383%;
  }
-  .row-fluid > .span3 {
+  .row-fluid .span3 {
    width: 22.928176794%;
+    *width: 22.874985304638297%;
  }
-  .row-fluid > .span2 {
+  .row-fluid .span2 {
    width: 14.364640883%;
+    *width: 14.311449393638298%;
  }
-  .row-fluid > .span1 {
+  .row-fluid .span1 {
    width: 5.801104972%;
+    *width: 5.747913482638298%;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
-  input.span12, textarea.span12, .uneditable-input.span12 {
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
    width: 714px;
  }
-  input.span11, textarea.span11, .uneditable-input.span11 {
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
    width: 652px;
  }
-  input.span10, textarea.span10, .uneditable-input.span10 {
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
    width: 590px;
  }
-  input.span9, textarea.span9, .uneditable-input.span9 {
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
    width: 528px;
  }
-  input.span8, textarea.span8, .uneditable-input.span8 {
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
    width: 466px;
  }
-  input.span7, textarea.span7, .uneditable-input.span7 {
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
    width: 404px;
  }
-  input.span6, textarea.span6, .uneditable-input.span6 {
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
    width: 342px;
  }
-  input.span5, textarea.span5, .uneditable-input.span5 {
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
    width: 280px;
  }
-  input.span4, textarea.span4, .uneditable-input.span4 {
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
    width: 218px;
  }
-  input.span3, textarea.span3, .uneditable-input.span3 {
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
    width: 156px;
  }
-  input.span2, textarea.span2, .uneditable-input.span2 {
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
    width: 94px;
  }
-  input.span1, textarea.span1, .uneditable-input.span1 {
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
    width: 32px;
  }
 }
-@media (max-width: 979px) {
-  body {
-    padding-top: 0;
-  }
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: 18px;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  .navbar .nav {
-    float: none;
-    margin: 0 0 9px;
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav .nav-header {
-    color: #999999;
-    text-shadow: none;
-  }
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: #999999;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover {
-    background-color: #222222;
-  }
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-  }
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  .navbar-form,
-  .navbar-search {
-    float: none;
-    padding: 9px 15px;
-    margin: 9px 0;
-    border-top: 1px solid #222222;
-    border-bottom: 1px solid #222222;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  }
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  .navbar-static .navbar-inner {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .btn-navbar {
-    display: block;
-  }
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
+
@media (min-width: 1200px) {
  .row {
    margin-left: -30px;
@@ -593,88 +540,132 @@
  .row-fluid:after {
    clear: both;
  }
-  .row-fluid > [class*="span"] {
+  .row-fluid [class*="span"] {
+    display: block;
    float: left;
+    width: 100%;
+    min-height: 28px;
    margin-left: 2.564102564%;
+    *margin-left: 2.510911074638298%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
  }
-  .row-fluid > [class*="span"]:first-child {
+  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
-  .row-fluid > .span12 {
+  .row-fluid .span12 {
    width: 100%;
+    *width: 99.94680851063829%;
  }
-  .row-fluid > .span11 {
+  .row-fluid .span11 {
    width: 91.45299145300001%;
+    *width: 91.3997999636383%;
  }
-  .row-fluid > .span10 {
+  .row-fluid .span10 {
    width: 82.905982906%;
+    *width: 82.8527914166383%;
  }
-  .row-fluid > .span9 {
+  .row-fluid .span9 {
    width: 74.358974359%;
+    *width: 74.30578286963829%;
  }
-  .row-fluid > .span8 {
+  .row-fluid .span8 {
    width: 65.81196581200001%;
+    *width: 65.7587743226383%;
  }
-  .row-fluid > .span7 {
+  .row-fluid .span7 {
    width: 57.264957265%;
+    *width: 57.2117657756383%;
  }
-  .row-fluid > .span6 {
+  .row-fluid .span6 {
    width: 48.717948718%;
+    *width: 48.6647572286383%;
  }
-  .row-fluid > .span5 {
+  .row-fluid .span5 {
    width: 40.170940171000005%;
+    *width: 40.117748681638304%;
  }
-  .row-fluid > .span4 {
+  .row-fluid .span4 {
    width: 31.623931624%;
+    *width: 31.5707401346383%;
  }
-  .row-fluid > .span3 {
+  .row-fluid .span3 {
    width: 23.076923077%;
+    *width: 23.0237315876383%;
  }
-  .row-fluid > .span2 {
+  .row-fluid .span2 {
    width: 14.529914530000001%;
+    *width: 14.4767230406383%;
  }
-  .row-fluid > .span1 {
+  .row-fluid .span1 {
    width: 5.982905983%;
+    *width: 5.929714493638298%;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
-  input.span12, textarea.span12, .uneditable-input.span12 {
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
    width: 1160px;
  }
-  input.span11, textarea.span11, .uneditable-input.span11 {
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
    width: 1060px;
  }
-  input.span10, textarea.span10, .uneditable-input.span10 {
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
    width: 960px;
  }
-  input.span9, textarea.span9, .uneditable-input.span9 {
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
    width: 860px;
  }
-  input.span8, textarea.span8, .uneditable-input.span8 {
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
    width: 760px;
  }
-  input.span7, textarea.span7, .uneditable-input.span7 {
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
    width: 660px;
  }
-  input.span6, textarea.span6, .uneditable-input.span6 {
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
    width: 560px;
  }
-  input.span5, textarea.span5, .uneditable-input.span5 {
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
    width: 460px;
  }
-  input.span4, textarea.span4, .uneditable-input.span4 {
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
    width: 360px;
  }
-  input.span3, textarea.span3, .uneditable-input.span3 {
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
    width: 260px;
  }
-  input.span2, textarea.span2, .uneditable-input.span2 {
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
    width: 160px;
  }
-  input.span1, textarea.span1, .uneditable-input.span1 {
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
    width: 60px;
  }
  .thumbnails {
@@ -683,4 +674,135 @@
  .thumbnails > li {
    margin-left: 30px;
  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 979px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: 18px;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  .navbar .brand {
+    padding-right: 10px;
+    padding-left: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .nav-collapse {
+    clear: both;
+  }
+  .nav-collapse .nav {
+    float: none;
+    margin: 0 0 9px;
+  }
+  .nav-collapse .nav > li {
+    float: none;
+  }
+  .nav-collapse .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > .divider-vertical {
+    display: none;
+  }
+  .nav-collapse .nav .nav-header {
+    color: #999999;
+    text-shadow: none;
+  }
+  .nav-collapse .nav > li > a,
+  .nav-collapse .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+  }
+  .nav-collapse .btn {
+    padding: 4px 10px 4px;
+    font-weight: normal;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+  }
+  .nav-collapse .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > li > a:hover,
+  .nav-collapse .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .nav-collapse.in .btn-group {
+    padding: 0;
+    margin-top: 5px;
+  }
+  .nav-collapse .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    display: block;
+    float: none;
+    max-width: none;
+    padding: 0;
+    margin: 0 15px;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+    -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+            box-shadow: none;
+  }
+  .nav-collapse .dropdown-menu:before,
+  .nav-collapse .dropdown-menu:after {
+    display: none;
+  }
+  .nav-collapse .dropdown-menu .divider {
+    display: none;
+  }
+  .nav-collapse .navbar-form,
+  .nav-collapse .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav-collapse .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .nav-collapse,
+  .nav-collapse.collapse {
+    height: 0;
+    overflow: hidden;
+  }
+  .navbar .btn-navbar {
+    display: block;
+  }
+  .navbar-static .navbar-inner {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+}
+
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
 }
@@ -228,7 +228,7 @@ hr.soften {
 }
 .quick-links li {
  display: inline;
-  margin: 0 5px;
+  margin: 0 8px;
  color: #999;
 }
 .quick-links .github-btn,
@@ -492,10 +492,6 @@ hr.soften {
 /* Misc
 -------------------------------------------------- */

-img {
-  max-width: 100%;
-}
-
 /* Make tables spaced out a bit more */
 h2 + table,
 h3 + table,
@@ -51,6 +51,11 @@

    processScroll()

+    // hack sad times - holdover until rewrite for 2.1
+    $nav.on('click', function () {
+      if (!isFixed) setTimeout(function () {  $win.scrollTop($win.scrollTop() - 47) }, 10)
+    })
+
    $win.on('scroll', processScroll)

    function processScroll() {
@@ -132,7 +137,7 @@

      $.ajax({
        type: 'POST'
-      , url: 'http://bootstrap.herokuapp.com'
+      , url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com'
      , dataType: 'jsonpi'
      , params: {
          js: js
@@ -142,7 +147,6 @@
      }
      })
    })
-
  })

 // Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-alert.js v2.0.2
+ * bootstrap-alert.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#alerts
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,61 +18,57 @@
 * ========================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* ALERT CLASS DEFINITION
  * ====================== */

  var dismiss = '[data-dismiss="alert"]'
-    , Alert = function ( el ) {
+    , Alert = function (el) {
        $(el).on('click', dismiss, this.close)
      }

-  Alert.prototype = {
+  Alert.prototype.close = function (e) {
+    var $this = $(this)
+      , selector = $this.attr('data-target')
+      , $parent

-    constructor: Alert
-
-  , close: function ( e ) {
-      var $this = $(this)
-        , selector = $this.attr('data-target')
-        , $parent
-
-      if (!selector) {
-        selector = $this.attr('href')
-        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
-      }
-
-      $parent = $(selector)
-      $parent.trigger('close')
-
-      e && e.preventDefault()
-
-      $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
-
-      $parent
-        .trigger('close')
-        .removeClass('in')
-
-      function removeElement() {
-        $parent
-          .trigger('closed')
-          .remove()
-      }
-
-      $.support.transition && $parent.hasClass('fade') ?
-        $parent.on($.support.transition.end, removeElement) :
-        removeElement()
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

+    $parent = $(selector)
+
+    e && e.preventDefault()
+
+    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
+
+    $parent.trigger(e = $.Event('close'))
+
+    if (e.isDefaultPrevented()) return
+
+    $parent.removeClass('in')
+
+    function removeElement() {
+      $parent
+        .trigger('closed')
+        .remove()
+    }
+
+    $.support.transition && $parent.hasClass('fade') ?
+      $parent.on($.support.transition.end, removeElement) :
+      removeElement()
  }


 /* ALERT PLUGIN DEFINITION
  * ======================= */

-  $.fn.alert = function ( option ) {
+  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
@@ -91,4 +87,4 @@
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-button.js v2.0.2
+ * bootstrap-button.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#buttons
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,58 +17,54 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

 /* BUTTON PUBLIC CLASS DEFINITION
  * ============================== */

-  var Button = function ( element, options ) {
+  var Button = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.button.defaults, options)
  }

-  Button.prototype = {
+  Button.prototype.setState = function (state) {
+    var d = 'disabled'
+      , $el = this.$element
+      , data = $el.data()
+      , val = $el.is('input') ? 'val' : 'html'

-      constructor: Button
+    state = state + 'Text'
+    data.resetText || $el.data('resetText', $el[val]())

-    , setState: function ( state ) {
-        var d = 'disabled'
-          , $el = this.$element
-          , data = $el.data()
-          , val = $el.is('input') ? 'val' : 'html'
+    $el[val](data[state] || this.options[state])

-        state = state + 'Text'
-        data.resetText || $el.data('resetText', $el[val]())
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d)
+    }, 0)
+  }

-        $el[val](data[state] || this.options[state])
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

-        // push to event loop to allow forms to submit
-        setTimeout(function () {
-          state == 'loadingText' ?
-            $el.addClass(d).attr(d, d) :
-            $el.removeClass(d).removeAttr(d)
-        }, 0)
-      }
-
-    , toggle: function () {
-        var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
-
-        $parent && $parent
-          .find('.active')
-          .removeClass('active')
-
-        this.$element.toggleClass('active')
-      }
+    $parent && $parent
+      .find('.active')
+      .removeClass('active')

+    this.$element.toggleClass('active')
  }


 /* BUTTON PLUGIN DEFINITION
  * ======================== */

-  $.fn.button = function ( option ) {
+  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('button')
@@ -97,4 +93,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-carousel.js v2.0.2
+ * bootstrap-carousel.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,16 +18,17 @@
 * ========================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* CAROUSEL CLASS DEFINITION
  * ========================= */

  var Carousel = function (element, options) {
    this.$element = $(element)
-    this.options = $.extend({}, $.fn.carousel.defaults, options)
+    this.options = options
    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
@@ -36,8 +37,11 @@

  Carousel.prototype = {

-    cycle: function () {
-      this.interval = setInterval($.proxy(this.next, this), this.options.interval)
+    cycle: function (e) {
+      if (!e) this.paused = false
+      this.options.interval
+        && !this.paused
+        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
      return this
    }

@@ -62,7 +66,8 @@
      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
    }

-  , pause: function () {
+  , pause: function (e) {
+      if (!e) this.paused = true
      clearInterval(this.interval)
      this.interval = null
      return this
@@ -85,6 +90,7 @@
        , direction = type == 'next' ? 'left' : 'right'
        , fallback  = type == 'next' ? 'first' : 'last'
        , that = this
+        , e = $.Event('slide')

      this.sliding = true

@@ -94,24 +100,26 @@

      if ($next.hasClass('active')) return

-      if (!$.support.transition && this.$element.hasClass('slide')) {
-        this.$element.trigger('slide')
-        $active.removeClass('active')
-        $next.addClass('active')
-        this.sliding = false
-        this.$element.trigger('slid')
-      } else {
+      if ($.support.transition && this.$element.hasClass('slide')) {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
        $next.addClass(type)
        $next[0].offsetWidth // force reflow
        $active.addClass(direction)
        $next.addClass(direction)
-        this.$element.trigger('slide')
        this.$element.one($.support.transition.end, function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () { that.$element.trigger('slid') }, 0)
        })
+      } else {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $active.removeClass('active')
+        $next.addClass('active')
+        this.sliding = false
+        this.$element.trigger('slid')
      }

      isCycling && this.cycle()
@@ -125,15 +133,15 @@
 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */

-  $.fn.carousel = function ( option ) {
+  $.fn.carousel = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('carousel')
-        , options = typeof option == 'object' && option
+        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
      if (typeof option == 'number') data.to(option)
      else if (typeof option == 'string' || (option = options.slide)) data[option]()
-      else data.cycle()
+      else if (options.interval) data.cycle()
    })
  }

@@ -158,4 +166,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-collapse.js v2.0.2
+ * bootstrap-collapse.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#collapse
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,16 +17,21 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function ($) {

-  var Collapse = function ( element, options ) {
-  	this.$element = $(element)
+  "use strict"; // jshint ;_;
+
+
+ /* COLLAPSE PUBLIC CLASS DEFINITION
+  * ================================ */
+
+  var Collapse = function (element, options) {
+    this.$element = $(element)
    this.options = $.extend({}, $.fn.collapse.defaults, options)

-    if (this.options["parent"]) {
-      this.$parent = $(this.options["parent"])
+    if (this.options.parent) {
+      this.$parent = $(this.options.parent)
    }

    this.options.toggle && this.toggle()
@@ -42,31 +47,39 @@
    }

  , show: function () {
-      var dimension = this.dimension()
-        , scroll = $.camelCase(['scroll', dimension].join('-'))
-        , actives = this.$parent && this.$parent.find('.in')
+      var dimension
+        , scroll
+        , actives
        , hasData

+      if (this.transitioning) return
+
+      dimension = this.dimension()
+      scroll = $.camelCase(['scroll', dimension].join('-'))
+      actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+
      if (actives && actives.length) {
        hasData = actives.data('collapse')
+        if (hasData && hasData.transitioning) return
        actives.collapse('hide')
        hasData || actives.data('collapse', null)
      }

      this.$element[dimension](0)
-      this.transition('addClass', 'show', 'shown')
+      this.transition('addClass', $.Event('show'), 'shown')
      this.$element[dimension](this.$element[0][scroll])
-
    }

  , hide: function () {
-      var dimension = this.dimension()
+      var dimension
+      if (this.transitioning) return
+      dimension = this.dimension()
      this.reset(this.$element[dimension]())
-      this.transition('removeClass', 'hide', 'hidden')
+      this.transition('removeClass', $.Event('hide'), 'hidden')
      this.$element[dimension](0)
    }

-  , reset: function ( size ) {
+  , reset: function (size) {
      var dimension = this.dimension()

      this.$element
@@ -74,37 +87,43 @@
        [dimension](size || 'auto')
        [0].offsetWidth

-      this.$element[size ? 'addClass' : 'removeClass']('collapse')
+      this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

      return this
    }

-  , transition: function ( method, startEvent, completeEvent ) {
+  , transition: function (method, startEvent, completeEvent) {
      var that = this
        , complete = function () {
-            if (startEvent == 'show') that.reset()
+            if (startEvent.type == 'show') that.reset()
+            that.transitioning = 0
            that.$element.trigger(completeEvent)
          }

-      this.$element
-        .trigger(startEvent)
-        [method]('in')
+      this.$element.trigger(startEvent)
+
+      if (startEvent.isDefaultPrevented()) return
+
+      this.transitioning = 1
+
+      this.$element[method]('in')

      $.support.transition && this.$element.hasClass('collapse') ?
        this.$element.one($.support.transition.end, complete) :
        complete()
-  	}
+    }

  , toggle: function () {
      this[this.$element.hasClass('in') ? 'hide' : 'show']()
-  	}
+    }

  }

-  /* COLLAPSIBLE PLUGIN DEFINITION
+
+ /* COLLAPSIBLE PLUGIN DEFINITION
  * ============================== */

-  $.fn.collapse = function ( option ) {
+  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('collapse')
@@ -135,4 +154,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-dropdown.js v2.0.2
+ * bootstrap-dropdown.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,15 +18,16 @@
 * ============================================================ */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* DROPDOWN CLASS DEFINITION
  * ========================= */

  var toggle = '[data-toggle="dropdown"]'
-    , Dropdown = function ( element ) {
+    , Dropdown = function (element) {
        var $el = $(element).on('click.dropdown.data-api', this.toggle)
        $('html').on('click.dropdown.data-api', function () {
          $el.parent().removeClass('open')
@@ -37,12 +38,16 @@

    constructor: Dropdown

-  , toggle: function ( e ) {
+  , toggle: function (e) {
      var $this = $(this)
-        , selector = $this.attr('data-target')
        , $parent
+        , selector
        , isActive

+      if ($this.is('.disabled, :disabled')) return
+
+      selector = $this.attr('data-target')
+
      if (!selector) {
        selector = $this.attr('href')
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
@@ -54,7 +59,8 @@
      isActive = $parent.hasClass('open')

      clearMenus()
-      !isActive && $parent.toggleClass('open')
+
+      if (!isActive) $parent.toggleClass('open')

      return false
    }
@@ -69,7 +75,7 @@
  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

-  $.fn.dropdown = function ( option ) {
+  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('dropdown')
@@ -86,7 +92,9 @@

  $(function () {
    $('html').on('click.dropdown.data-api', clearMenus)
-    $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+    $('body')
+      .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
+      .on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =========================================================
- * bootstrap-modal.js v2.0.2
+ * bootstrap-modal.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,14 +18,15 @@
 * ========================================================= */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* MODAL CLASS DEFINITION
  * ====================== */

-  var Modal = function ( content, options ) {
+  var Modal = function (content, options) {
    this.options = options
    this.$element = $(content)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
@@ -41,19 +42,23 @@

    , show: function () {
        var that = this
+          , e = $.Event('show')

-        if (this.isShown) return
+        this.$element.trigger(e)
+
+        if (this.isShown || e.isDefaultPrevented()) return

        $('body').addClass('modal-open')

        this.isShown = true
-        this.$element.trigger('show')

        escape.call(this)
        backdrop.call(this, function () {
          var transition = $.support.transition && that.$element.hasClass('fade')

-          !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position
+          if (!that.$element.parent().length) {
+            that.$element.appendTo(document.body) //don't move modals dom position
+          }

          that.$element
            .show()
@@ -71,21 +76,24 @@
        })
      }

-    , hide: function ( e ) {
+    , hide: function (e) {
        e && e.preventDefault()

-        if (!this.isShown) return
-
        var that = this
+
+        e = $.Event('hide')
+
+        this.$element.trigger(e)
+
+        if (!this.isShown || e.isDefaultPrevented()) return
+
        this.isShown = false

        $('body').removeClass('modal-open')

        escape.call(this)

-        this.$element
-          .trigger('hide')
-          .removeClass('in')
+        this.$element.removeClass('in')

        $.support.transition && this.$element.hasClass('fade') ?
          hideWithTransition.call(this) :
@@ -111,7 +119,7 @@
    })
  }

-  function hideModal( that ) {
+  function hideModal(that) {
    this.$element
      .hide()
      .trigger('hidden')
@@ -119,7 +127,7 @@
    backdrop.call(this)
  }

-  function backdrop( callback ) {
+  function backdrop(callback) {
    var that = this
      , animate = this.$element.hasClass('fade') ? 'fade' : ''

@@ -173,7 +181,7 @@
 /* MODAL PLUGIN DEFINITION
  * ======================= */

-  $.fn.modal = function ( option ) {
+  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
@@ -207,4 +215,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-popover.js v2.0.2
+ * bootstrap-popover.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#popovers
 * ===========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,14 +18,19 @@
 * =========================================================== */


-!function( $ ) {
+!function ($) {

- "use strict"
+  "use strict"; // jshint ;_;
+
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+  * =============================== */

  var Popover = function ( element, options ) {
    this.init('popover', element, options)
  }

+
  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
     ========================================== */

@@ -38,8 +43,8 @@
        , title = this.getTitle()
        , content = this.getContent()

-      $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
-      $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
+      $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
+      $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)

      $tip.removeClass('fade top bottom left right in')
    }
@@ -56,12 +61,10 @@
      content = $e.attr('data-content')
        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)

-      content = content.toString().replace(/(^\s*|\s*$)/, "")
-
      return content
    }

-  , tip: function() {
+  , tip: function () {
      if (!this.$tip) {
        this.$tip = $(this.options.template)
      }
@@ -74,7 +77,7 @@
 /* POPOVER PLUGIN DEFINITION
  * ======================= */

-  $.fn.popover = function ( option ) {
+  $.fn.popover = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('popover')
@@ -92,4 +95,4 @@
  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-scrollspy.js v2.0.2
+ * bootstrap-scrollspy.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#scrollspy
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,9 +17,11 @@
 * limitations under the License.
 * ============================================================== */

-!function ( $ ) {

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

  /* SCROLLSPY CLASS DEFINITION
   * ========================== */
@@ -43,25 +45,43 @@
      constructor: ScrollSpy

    , refresh: function () {
-        this.targets = this.$body
+        var self = this
+          , $targets
+
+        this.offsets = $([])
+        this.targets = $([])
+
+        $targets = this.$body
          .find(this.selector)
          .map(function () {
-            var href = $(this).attr('href')
-            return /^#\w/.test(href) && $(href).length ? href : null
+            var $el = $(this)
+              , href = $el.data('target') || $el.attr('href')
+              , $href = /^#\w/.test(href) && $(href)
+            return ( $href
+              && href.length
+              && [[ $href.position().top, href ]] ) || null
+          })
+          .sort(function (a, b) { return a[0] - b[0] })
+          .each(function () {
+            self.offsets.push(this[0])
+            self.targets.push(this[1])
          })
-
-        this.offsets = $.map(this.targets, function (id) {
-          return $(id).position().top
-        })
      }

    , process: function () {
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
+          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+          , maxScroll = scrollHeight - this.$scrollElement.height()
          , offsets = this.offsets
          , targets = this.targets
          , activeTarget = this.activeTarget
          , i

+        if (scrollTop >= maxScroll) {
+          return activeTarget != (i = targets.last()[0])
+            && this.activate ( i )
+        }
+
        for (i = offsets.length; i--;) {
          activeTarget != targets[i]
            && scrollTop >= offsets[i]
@@ -72,21 +92,27 @@

    , activate: function (target) {
        var active
+          , selector

        this.activeTarget = target

-        this.$body
-          .find(this.selector).parent('.active')
+        $(this.selector)
+          .parent('.active')
          .removeClass('active')

-        active = this.$body
-          .find(this.selector + '[href="' + target + '"]')
+        selector = this.selector
+          + '[data-target="' + target + '"],'
+          + this.selector + '[href="' + target + '"]'
+
+        active = $(selector)
          .parent('li')
          .addClass('active')

-        if ( active.parent('.dropdown-menu') )  {
-          active.closest('li.dropdown').addClass('active')
+        if (active.parent('.dropdown-menu'))  {
+          active = active.closest('li.dropdown').addClass('active')
        }
+
+        active.trigger('activate')
      }

  }
@@ -122,4 +148,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ========================================================
- * bootstrap-tab.js v2.0.2
+ * bootstrap-tab.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#tabs
 * ========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,9 +18,10 @@
 * ======================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* TAB CLASS DEFINITION
  * ==================== */
@@ -39,6 +40,7 @@
        , selector = $this.attr('data-target')
        , previous
        , $target
+        , e

      if (!selector) {
        selector = $this.attr('href')
@@ -49,11 +51,14 @@

      previous = $ul.find('.active a').last()[0]

-      $this.trigger({
-        type: 'show'
-      , relatedTarget: previous
+      e = $.Event('show', {
+        relatedTarget: previous
      })

+      $this.trigger(e)
+
+      if (e.isDefaultPrevented()) return
+
      $target = $(selector)

      this.activate($this.parent('li'), $ul)
@@ -127,4 +132,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-tooltip.js v2.0.2
+ * bootstrap-tooltip.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ===========================================================
@@ -18,14 +18,16 @@
 * limitations under the License.
 * ========================================================== */

-!function( $ ) {

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

 /* TOOLTIP PUBLIC CLASS DEFINITION
  * =============================== */

-  var Tooltip = function ( element, options ) {
+  var Tooltip = function (element, options) {
    this.init('tooltip', element, options)
  }

@@ -33,7 +35,7 @@

    constructor: Tooltip

-  , init: function ( type, element, options ) {
+  , init: function (type, element, options) {
      var eventIn
        , eventOut

@@ -54,7 +56,7 @@
        this.fixTitle()
    }

-  , getOptions: function ( options ) {
+  , getOptions: function (options) {
      options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())

      if (options.delay && typeof options.delay == 'number') {
@@ -67,34 +69,28 @@
      return options
    }

-  , enter: function ( e ) {
+  , enter: function (e) {
      var self = $(e.currentTarget)[this.type](this._options).data(this.type)

-      if (!self.options.delay || !self.options.delay.show) {
-        self.show()
-      } else {
-        self.hoverState = 'in'
-        setTimeout(function() {
-          if (self.hoverState == 'in') {
-            self.show()
-          }
-        }, self.options.delay.show)
-      }
+      if (!self.options.delay || !self.options.delay.show) return self.show()
+
+      clearTimeout(this.timeout)
+      self.hoverState = 'in'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'in') self.show()
+      }, self.options.delay.show)
    }

-  , leave: function ( e ) {
+  , leave: function (e) {
      var self = $(e.currentTarget)[this.type](this._options).data(this.type)

-      if (!self.options.delay || !self.options.delay.hide) {
-        self.hide()
-      } else {
-        self.hoverState = 'out'
-        setTimeout(function() {
-          if (self.hoverState == 'out') {
-            self.hide()
-          }
-        }, self.options.delay.hide)
-      }
+      if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+      clearTimeout(this.timeout)
+      self.hoverState = 'out'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'out') self.hide()
+      }, self.options.delay.hide)
    }

  , show: function () {
@@ -152,9 +148,20 @@
      }
    }

+  , isHTML: function(text) {
+      // html string detection logic adapted from jQuery
+      return typeof text != 'string'
+        || ( text.charAt(0) === "<"
+          && text.charAt( text.length - 1 ) === ">"
+          && text.length >= 3
+        ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
+    }
+
  , setContent: function () {
      var $tip = this.tip()
-      $tip.find('.tooltip-inner').html(this.getTitle())
+        , title = this.getTitle()
+
+      $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
      $tip.removeClass('fade in top bottom left right')
    }

@@ -206,8 +213,6 @@
      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

-      title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
-
      return title
    }

@@ -259,12 +264,12 @@

  $.fn.tooltip.defaults = {
    animation: true
-  , delay: 0
-  , selector: false
  , placement: 'top'
+  , selector: false
+  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  , trigger: 'hover'
  , title: ''
-  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+  , delay: 0
  }

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.0.2
+ * bootstrap-transition.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#transitions
 * ===================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,35 +17,45 @@
 * limitations under the License.
 * ========================================================== */

-!function( $ ) {
+
+!function ($) {

  $(function () {

-    "use strict"
+    "use strict"; // jshint ;_;

-    /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+
+    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
     * ======================================================= */

    $.support.transition = (function () {
-      var thisBody = document.body || document.documentElement
-        , thisStyle = thisBody.style
-        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined

-      return support && {
-        end: (function () {
-          var transitionEnd = "TransitionEnd"
-          if ( $.browser.webkit ) {
-          	transitionEnd = "webkitTransitionEnd"
-          } else if ( $.browser.mozilla ) {
-          	transitionEnd = "transitionend"
-          } else if ( $.browser.opera ) {
-          	transitionEnd = "oTransitionEnd"
+      var transitionEnd = (function () {
+
+        var el = document.createElement('bootstrap')
+          , transEndEventNames = {
+               'WebkitTransition' : 'webkitTransitionEnd'
+            ,  'MozTransition'    : 'transitionend'
+            ,  'OTransition'      : 'oTransitionEnd'
+            ,  'msTransition'     : 'MSTransitionEnd'
+            ,  'transition'       : 'transitionend'
+            }
+          , name
+
+        for (name in transEndEventNames){
+          if (el.style[name] !== undefined) {
+            return transEndEventNames[name]
          }
-          return transitionEnd
-        }())
+        }
+
+      }())
+
+      return transitionEnd && {
+        end: transitionEnd
      }
+
    })()

  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-typeahead.js v2.0.2
+ * bootstrap-typeahead.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#typeahead
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,16 +17,22 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function($){

-  var Typeahead = function ( element, options ) {
+  "use strict"; // jshint ;_;
+
+
+ /* TYPEAHEAD PUBLIC CLASS DEFINITION
+  * ================================= */
+
+  var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    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.$menu = $(this.options.menu).appendTo('body')
    this.source = this.options.source
    this.shown = false
@@ -39,13 +45,18 @@

  , select: function () {
      var val = this.$menu.find('.active').attr('data-value')
-      this.$element.val(val)
-      this.$element.change();
+      this.$element
+        .val(this.updater(val))
+        .change()
      return this.hide()
    }

+  , updater: function (item) {
+      return item
+    }
+
  , show: function () {
-      var pos = $.extend({}, this.$element.offset(), {
+      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

@@ -77,7 +88,7 @@
      }

      items = $.grep(this.source, function (item) {
-        if (that.matcher(item)) return item
+        return that.matcher(item)
      })

      items = this.sorter(items)
@@ -109,7 +120,8 @@
    }

  , highlighter: function (item) {
-      return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
+      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
+      return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }
@@ -201,11 +213,13 @@
          break

        case 38: // up arrow
+          if (e.type != 'keydown') break
          e.preventDefault()
          this.prev()
          break

        case 40: // down arrow
+          if (e.type != 'keydown') break
          e.preventDefault()
          this.next()
          break
@@ -236,7 +250,7 @@
  /* TYPEAHEAD PLUGIN DEFINITION
   * =========================== */

-  $.fn.typeahead = function ( option ) {
+  $.fn.typeahead = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('typeahead')
@@ -268,4 +282,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -370,7 +371,14 @@
        <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>
+      <hr>
+      <p>
+        <span class="label label-info">Heads up!</span>
+        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>
  </div><!-- /row -->
 </section>
@@ -874,14 +882,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.

  <h2>Example forms <small>using just form controls, no extra markup</small></h2>
  <div class="row">
-    <div class="span3">
+    <div class="span6">
      <h3>Basic form</h3>
-      <p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
-    </div>
-    <div class="span9">
+      <p>Smart and lightweight defaults without extra markup.</p>
      <form class="well">
        <label>Label name</label>
-        <input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>
+        <input type="text" class="span3" placeholder="Type something…">
        <p class="help-block">Example block-level help text here.</p>
        <label class="checkbox">
          <input type="checkbox"> Check me out
@@ -892,39 +898,30 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;form class="well"&gt;
  &lt;label&gt;Label name&lt;/label&gt;
  &lt;input type="text" class="span3" placeholder="Type something…"&gt;
-  &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
-      <h3>Search form</h3>
-      <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
-    </div>
-    <div class="span9">
-      <form class="well form-search">
-        <input type="text" class="input-medium search-query">
-        <button type="submit" class="btn">Search</button>
-      </form>
+  </div>
+  <div class="span6">
+    <h3>Search form</h3>
+    <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
+    <form class="well form-search">
+      <input type="text" class="input-medium search-query">
+      <button type="submit" class="btn">Search</button>
+    </form>
 <pre class="prettyprint linenums">
 &lt;form class="well form-search"&gt;
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
+
      <h3>Inline form</h3>
-      <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
-    </div>
-    <div class="span9">
+      <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
      <form class="well form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
@@ -943,17 +940,29 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+    </div><!-- /.span -->
  </div><!-- /row -->

  <br>

  <h2>Horizontal forms</h2>
  <div class="row">
+    <div class="span4">
+      <p></p>
+      <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
+      <ul>
+        <li>text inputs (text, password, email, etc)</li>
+        <li>checkbox</li>
+        <li>radio</li>
+        <li>select</li>
+        <li>multiple select</li>
+        <li>file input</li>
+        <li>textarea</li>
+      </ul>
+    </div><!-- /.span -->
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
@@ -1029,31 +1038,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/form&gt;
 </pre>
    </div>
-    <div class="span4">
-      <h3>What's included</h3>
-      <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
-      <ul>
-        <li>text inputs (text, password, email, etc)</li>
-        <li>checkbox</li>
-        <li>radio</li>
-        <li>select</li>
-        <li>multiple select</li>
-        <li>file input</li>
-        <li>textarea</li>
-      </ul>
-      <hr>
-      <h3>New defaults with v2.0</h3>
-      <p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
-    </div>
  </div>

  <br>

+  <h2>Form control states</h2>
  <div class="row">
+    <div class="span4">
+      <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+      <hr>
+      <h3>Form validation</h3>
+      <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
+<pre class="prettyprint linenums">
+&lt;fieldset
+  class="control-group error"&gt;
+  …
+&lt;/fieldset&gt;
+</pre>
+    </div>
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>Form control states</legend>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Focused input</label>
            <div class="controls">
@@ -1122,28 +1127,29 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        </fieldset>
      </form>
    </div>
-    <div class="span4">
-      <h3>Redesigned browser states</h3>
-      <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-      <hr>
-      <h3>Form validation</h3>
-      <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
-<pre class="prettyprint linenums">
-&lt;fieldset
-  class="control-group error"&gt;
-  …
-&lt;/fieldset&gt;
-</pre>
-    </div>
  </div>

  <br>

+  <h2>Extending form controls</h2>
  <div class="row">
+    <div class="span4">
+      <h3>Prepend &amp; append inputs</h3>
+      <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
+      <hr>
+      <h3>Checkboxes and radios</h3>
+      <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
+      <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
+      <hr>
+      <h4>Inline forms and append/prepend</h4>
+      <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
+      <hr>
+      <h4>Form help text</h4>
+      <p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
+    </div>
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>Extending form controls</legend>
          <div class="control-group">
            <label class="control-label">Form grid sizes</label>
            <div class="controls docs-input-sizes">
@@ -1210,10 +1216,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
            </div>
          </div>
          <div class="control-group">
-            <label class="control-label" for="appendedPrependedInput">Append with button</label>
+            <label class="control-label" for="appendedInputButton">Append with button</label>
            <div class="controls">
              <div class="input-append">
-                <input class="span2" id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Go!</button>
+                <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+              </div>
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="appendedInputButtons">Two-button append</label>
+            <div class="controls">
+              <div class="input-append">
+                <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
              </div>
            </div>
          </div>
@@ -1269,20 +1283,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        </fieldset>
      </form>
    </div>
-    <div class="span4">
-      <h3>Prepend &amp; append inputs</h3>
-      <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
-      <hr>
-      <h3>Checkboxes and radios</h3>
-      <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
-      <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
-      <hr>
-      <h4>Inline forms and append/prepend</h4>
-      <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
-      <hr>
-      <h4>Form help text</h4>
-      <p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
-    </div>
  </div><!-- /row -->
 </section>

@@ -1316,7 +1316,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
      <tr>
        <td><button class="btn btn-info" href="#">Info</button></td>
        <td><code>btn btn-info</code></td>
-        <td>Used as an alternate to the default styles</td>
+        <td>Used as an alternative to the default styles</td>
      </tr>
      <tr>
        <td><button class="btn btn-success" href="#">Success</button></td>
@@ -1445,15 +1445,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-inbox"></i> icon-inbox</li>
        <li><i class="icon-play-circle"></i> icon-play-circle</li>
        <li><i class="icon-repeat"></i> icon-repeat</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-refresh"></i> icon-refresh</li>
        <li><i class="icon-list-alt"></i> icon-list-alt</li>
        <li><i class="icon-lock"></i> icon-lock</li>
        <li><i class="icon-flag"></i> icon-flag</li>
        <li><i class="icon-headphones"></i> icon-headphones</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-volume-off"></i> icon-volume-off</li>
        <li><i class="icon-volume-down"></i> icon-volume-down</li>
        <li><i class="icon-volume-up"></i> icon-volume-up</li>
@@ -1479,10 +1479,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-indent-right"></i> icon-indent-right</li>
        <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
        <li><i class="icon-picture"></i> icon-picture</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-pencil"></i> icon-pencil</li>
        <li><i class="icon-map-marker"></i> icon-map-marker</li>
        <li><i class="icon-adjust"></i> icon-adjust</li>
@@ -1493,6 +1489,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-move"></i> icon-move</li>
        <li><i class="icon-step-backward"></i> icon-step-backward</li>
        <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-backward"></i> icon-backward</li>
        <li><i class="icon-play"></i> icon-play</li>
        <li><i class="icon-pause"></i> icon-pause</li>
@@ -1513,10 +1513,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
        <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
        <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
        <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
        <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
@@ -1532,6 +1528,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-leaf"></i> icon-leaf</li>
        <li><i class="icon-fire"></i> icon-fire</li>
        <li><i class="icon-eye-open"></i> icon-eye-open</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-eye-close"></i> icon-eye-close</li>
        <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
        <li><i class="icon-plane"></i> icon-plane</li>
@@ -1547,6 +1547,26 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
        <li><i class="icon-folder-open"></i> icon-folder-open</li>
        <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
        <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+        <li><i class="icon-hdd"></i> icon-hdd</li>
+        <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
+        <li><i class="icon-bell"></i> icon-bell</li>
+        <li><i class="icon-certificate"></i> icon-certificate</li>
+        <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
+        <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
+        <li><i class="icon-hand-right"></i> icon-hand-right</li>
+        <li><i class="icon-hand-left"></i> icon-hand-left</li>
+        <li><i class="icon-hand-up"></i> icon-hand-up</li>
+        <li><i class="icon-hand-down"></i> icon-hand-down</li>
+        <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
+        <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
+        <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
+        <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
+        <li><i class="icon-globe"></i> icon-globe</li>
+        <li><i class="icon-wrench"></i> icon-wrench</li>
+        <li><i class="icon-tasks"></i> icon-tasks</li>
+        <li><i class="icon-filter"></i> icon-filter</li>
+        <li><i class="icon-briefcase"></i> icon-briefcase</li>
+        <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
      </ul>
    </div>
  </div>
@@ -1639,8 +1659,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
          <label class="control-label" for="inputIcon">Email address</label>
          <div class="controls">
            <div class="input-prepend">
-              <span class="add-on"><i class="icon-envelope"></i></span>
-              <input class="span2" id="inputIcon" type="text">
+              <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
            </div>
          </div>
        </div>
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -421,7 +422,7 @@
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
      <h3>Sizes</h3>
-      <p>Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
+      <p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-large">Large action</button>
@@ -639,16 +640,6 @@
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up 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>
-        </li>
      </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -681,16 +672,6 @@
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up 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>
-        </li>
      </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
@@ -798,54 +779,58 @@
      <h3>What's included</h3>
      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
      <p>Changing between them is easy and only requires changing very little markup.</p>
+      <hr>
+      <h4>Fade in tabs</h4>
+      <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
+      <hr>
+      <h4>Requires jQuery plugin</h4>
+      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
+      <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
    </div>
-    <div class="span4">
+    <div class="span8">
      <h3>Tabbable example</h3>
-      <p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p>
-      <div class="tabbable" style="margin-bottom: 9px;">
+      <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
+      <div class="tabbable" style="margin-bottom: 18px;">
        <ul class="nav nav-tabs">
-          <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
-          <li><a href="#2" data-toggle="tab">Section 2</a></li>
-          <li><a href="#3" data-toggle="tab">Section 3</a></li>
+          <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+          <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+          <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
        </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="1">
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1">
            <p>I'm in Section 1.</p>
          </div>
-          <div class="tab-pane" id="2">
+          <div class="tab-pane" id="tab2">
            <p>Howdy, I'm in Section 2.</p>
          </div>
-          <div class="tab-pane" id="3">
+          <div class="tab-pane" id="tab3">
            <p>What up girl, this is Section 3.</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
-    </div>
-    <div class="span4">
-      <h3>Custom jQuery plugin</h3>
-      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
-      <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
-    </div>
-  </div>
+      <p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p>

-  <h3>Straightforward markup</h3>
-  <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
+      <h3>Straightforward markup</h3>
+      <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 <pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt;
+&lt;div class="tabbable"&gt; &lt;-- Only required for left/right tabs --&gt;
  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="1"&gt;
+    &lt;div class="tab-pane active" id="tab1"&gt;
      &lt;p&gt;I'm in Section 1.&lt;/p&gt;
    &lt;/div&gt;
-    &lt;div class="tab-pane" id="2"&gt;
+    &lt;div class="tab-pane" id="tab2"&gt;
      &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+    </div>
+  </div>
+

  <h3>Tabbable in any direction</h3>
  <div class="row">
@@ -1040,7 +1025,7 @@
 </pre>
        </div><!--/span-->
      </div><!--/row-->
-      <p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding 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>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
      <h3>Brand name</h3>
      <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 <pre class="prettyprint linenums">
@@ -1055,7 +1040,7 @@
  &lt;input type="text" class="span2"&gt;
 &lt;/form&gt;
 </pre>
-      <p>For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.</p>
+      <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
  &lt;input type="text" class="search-query" placeholder="Search"&gt;
@@ -1088,7 +1073,7 @@
 &lt;/div&gt;
 </pre>
      <div class="alert alert-info">
-        <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+        <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><!-- /.span -->
@@ -1115,7 +1100,7 @@
      <h3>Component alignment</h3>
      <p>To align a nav, 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>Adding dropdown menus</h3>
-      <p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
+      <p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
  &lt;li class="dropdown"&gt;
@@ -1134,7 +1119,7 @@
      <p><a class="btn" href="./javascript.html#dropdowns">Get the javascript &rarr;</a></p>
      <hr>
      <h3>Text in the navbar</h3>
-      <p>Wrap strings of text in a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+      <p>Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
    </div><!-- /.span -->
  </div><!-- /.row -->

@@ -1231,11 +1216,11 @@
      </div>
      <div class="pagination">
        <ul>
-          <li><a href="#">&larr;</a></li>
+          <li><a href="#">&laquo;</a></li>
          <li class="active"><a href="#">10</a></li>
          <li class="disabled"><a href="#">...</a></li>
          <li><a href="#">20</a></li>
-          <li><a href="#">&rarr;</a></li>
+          <li><a href="#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination pagination-centered">
@@ -1442,13 +1427,13 @@
          </tr>
          <tr>
            <td>
-              Error
+              Important
            </td>
            <td>
-              <span class="badge badge-error">6</span>
+              <span class="badge badge-important">6</span>
            </td>
            <td>
-              <code>&lt;span class="badge badge-error"&gt;6&lt;/span&gt;</code>
+              <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
@@ -1516,7 +1501,7 @@
  <h2>Page header</h2>
  <div class="row">
    <div class="span4">
-      <p>A simple shell for an <code>h1</code> to appropratiely 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 most other components (with additional styles).</p>
    </div>
    <div class="span8">
      <div class="page-header">
@@ -1703,24 +1688,25 @@
      <h3>Example alerts</h3>
      <p>Wrap your message and an optional close icon in a div with simple class.</p>
      <div class="alert">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
      </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
 &lt;/div&gt;
 </pre>
+      <p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.</p>
      <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
      <div class="alert alert-block">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <h4 class="alert-heading">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>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
  &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
  Best check yo self, you're not...
 &lt;/div&gt;
@@ -1733,7 +1719,7 @@
    <div class="span4">
      <h3>Error or danger</h3>
      <div class="alert alert-error">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
      </div>
 <pre class="prettyprint linenums">
@@ -1745,7 +1731,7 @@
    <div class="span4">
      <h3>Success</h3>
      <div class="alert alert-success">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
 <pre class="prettyprint linenums">
@@ -1757,7 +1743,7 @@
    <div class="span4">
      <h3>Information</h3>
      <div class="alert alert-info">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
      </div>
 <pre class="prettyprint linenums">
@@ -1897,8 +1883,10 @@
    <div class="span4">
      <h2>Close icon</h2>
      <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-      <p><a class="close" style="float: none;">&times;</a></p>
-<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
+      <p><button class="close" style="float: none;">&times;</button></p>
+<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
+      <p>iOS devices require an href="#" for click events if you rather use an anchor.</p>
+<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
    </div><!--/span-->
  </div><!--/row-->
 </section>
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -107,8 +108,7 @@
      <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.less"> Labels</label>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> Badges</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>
@@ -143,7 +143,11 @@
      <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.less"> Responsive layouts</label>
+      <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>
@@ -276,14 +280,20 @@
      <input type="text" class="span3" placeholder="2.127659574%">

      <h3>Typography</h3>
+      <label>@sansFontFamily</label>
+      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <label>@serifFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+      <label>@monoFontFamily</label>
+      <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
      <label>@baseFontSize</label>
      <input type="text" class="span3" placeholder="13px">
      <label>@baseFontFamily</label>
-      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <input type="text" class="span3" placeholder="@sansFontFamily">
      <label>@baseLineHeight</label>
      <input type="text" class="span3" placeholder="18px">
      <label>@altFontFamily</label>
-      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <input type="text" class="span3" placeholder="@serifFontFamily">
      <label>@headingsFontFamily</label>
      <input type="text" class="span3" placeholder="inherit">
      <label>@headingsFontWeight</label>
@@ -317,6 +327,8 @@
      <input type="text" class="span3" placeholder="@grayDark">
      <label>@navbarText</label>
      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarBrandColor</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColor">
      <label>@navbarLinkColor</label>
      <input type="text" class="span3" placeholder="@grayLight">
      <label>@navbarLinkColorHover</label>
@@ -356,8 +368,12 @@
      <input type="text" class="span3" placeholder="@white">
      <label>@inputBorder</label>
      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputBorderRadius</label>
+      <input type="text" class="span3" placeholder="3px">
      <label>@inputDisabledBackground</label>
      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@formActionsBackground</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">

      <label>@btnPrimaryBackground</label>
      <input type="text" class="span3" placeholder="@linkColor">
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -27,6 +27,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
@@ -43,13 +44,23 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
+          <div class="btn-group pull-right">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+              <i class="icon-user"></i> Username
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Profile</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Sign Out</a></li>
+            </ul>
+          </div>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
-            <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
          </div><!--/.nav-collapse -->
        </div>
      </div>
@@ -24,6 +24,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
@@ -23,6 +23,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="./index.html">Overview</a>
@@ -82,7 +83,7 @@
    <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
    <p class="download-info">
      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
-      <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.2)</small></a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.3)</small></a>
    </p>
  </div>

@@ -90,6 +91,7 @@
    <ul class="quick-links">
      <li><a href="./upgrading.html">Upgrading from 1.4</a></li>
      <li><a href="https://github.com/twitter/bootstrap/zipball/master">Download with docs</a></li>
+      <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
      <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
      <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
    </ul>
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -205,9 +206,9 @@
          <h2>Static example</h2>
          <p>Below is a statically rendered modal.</p>
          <div class="well modal-example" style="background-color: #888; border: none;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
              <div class="modal-header">
-                <a href="#" class="close" data-dismiss="modal">&times;</a>
+                <button class="close" data-dismiss="modal">&times;</button>
                <h3>Modal header</h3>
              </div>
              <div class="modal-body">
@@ -225,7 +226,7 @@
          <!-- sample modal content -->
          <div id="myModal" class="modal hide fade">
            <div class="modal-header">
-              <a class="close" data-dismiss="modal" >&times;</a>
+              <button class="close" data-dismiss="modal">&times;</button>
              <h3>Modal Heading</h3>
            </div>
            <div class="modal-body">
@@ -302,7 +303,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="modal" id="myModal"&gt;
  &lt;div class="modal-header"&gt;
-    &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
+    &lt;button class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
    &lt;h3&gt;Modal header&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
@@ -492,6 +493,20 @@ $('#myModal').on('hidden', function () {
  &lt;/li&gt;
  ...
 &lt;/ul&gt;</pre>
+          <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      Dropdown
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
          <h3>Methods</h3>
          <h4>$().dropdown()</h4>
          <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
@@ -570,6 +585,14 @@ $('#myModal').on('hidden', function () {
            <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>
+<pre class="prettyprint linenums">
+$('[data-spy="scroll"]').each(function () {
+  var $spy = $(this).scrollspy('refresh')
+});
+</pre>
          <h3>Options</h3>
          <table class="table table-bordered table-striped">
            <thead>
@@ -589,6 +612,21 @@ $('#myModal').on('hidden', function () {
             </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>
        </div>
      </div>
    </section>
@@ -609,7 +647,7 @@ $('#myModal').on('hidden', function () {
        <div class="span9 columns">
          <h2>Example tabs</h2>
          <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
-          <ul id="tab" class="nav nav-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">
@@ -636,10 +674,21 @@ $('#myModal').on('hidden', function () {
          </div>
          <hr>
          <h2>Using bootstrap-tab.js</h2>
-          <p>Enable tabbable tabs via javascript:</p>
-          <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
+          <p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
+          <pre class="prettyprint linenums">
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})</pre>
+          <p>You can activate individual tabs in several ways:</p>
+<pre class="prettyprint linenums">
+$('#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)
+</pre>
          <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.</p>
+          <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>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
  &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
@@ -650,10 +699,10 @@ $('#myModal').on('hidden', function () {
          <h3>Methods</h3>
          <h4>$().tab</h4>
          <p>
-            Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
+            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>
 <pre class="prettyprint linenums">
-&lt;ul class="nav nav-tabs"&gt;
+&lt;ul class="nav nav-tabs" id="myTab"&gt;
  &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
@@ -669,7 +718,7 @@ $('#myModal').on('hidden', function () {

 &lt;script&gt;
  $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show');
  })
 &lt;/script&gt;</pre>
          <h3>Events</h3>
@@ -718,7 +767,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          <h2>Example use of Tooltips</h2>
          <p>Hover over the links below to see tooltips:</p>
          <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first 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="#" rel="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 <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first 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="#" rel="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="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
            </p>
          </div>
          <hr>
@@ -771,7 +820,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <td>number | object</td>
               <td>0</td>
               <td>
-                <p>delay showing and hiding the tooltip (ms)</p>
+                <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>
@@ -880,7 +929,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <td>number | object</td>
               <td>0</td>
               <td>
-                <p>delay showing and hiding the popover (ms)</p>
+                <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>
@@ -893,7 +942,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          </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 the selector option.
+          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>
@@ -929,11 +978,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          <h2>Example alerts</h2>
          <p>The alerts plugin works on regular alert messages, and block messages.</p>
          <div class="alert fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
          </div>
          <div class="alert alert-block alert-error fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <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>
@@ -1039,7 +1088,7 @@ $('#my-alert').bind('closed', function () {
          <hr>
          <h2>Using bootstrap-button.js</h2>
          <p>Enable buttons via javascript:</p>
-          <pre class="prettyprint linenums">$('.tabs').button()</pre>
+          <pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
            <h3>Markup</h3>
          <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
 <pre class="prettyprint linenums">
@@ -1101,7 +1150,8 @@ $('#my-alert').bind('closed', function () {
          <h3>About</h3>
          <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
          <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
-        </div>
+          <p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
+       </div>
        <div class="span9 columns">
          <h2>Example accordion</h2>
          <p>Using the collapse plugin, we built a simple accordion style widget:</p>
@@ -1308,7 +1358,7 @@ $('#myCollapsible').on('hidden', function () {
               <td>interval</td>
               <td>number</td>
               <td>5000</td>
-               <td>The amount of time to delay between automatically cycling an item.</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>
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -139,12 +140,24 @@

  <div class="row">
    <div class="span6">
-      <h3>Hyperlinks</h3>
+      <h3>Scaffolding and links</h3>
      <table class="table table-bordered table-striped">
        <tbody>
          <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>Page background color</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>Default text color for entire body, headings, and more</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
            <td>Default link text color</td>
            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
          </tr>
@@ -184,17 +197,70 @@
      <h3>Typography</h3>
      <table class="table table-bordered table-striped">
        <tbody>
+          <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
          <tr>
            <td class="span2"><code>@baseFontSize</code></td>
            <td>13px</td>
+            <td><em class="muted">Must be pixels</em></td>
          </tr>
          <tr>
            <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td colspan="2"><code>@sansFontFamily</code></td>
          </tr>
          <tr>
            <td><code>@baseLineHeight</code></td>
            <td>18px</td>
+            <td><em class="muted">Must be pixels</em></td>
+          </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td colspan="2"><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td colspan="2"><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Tables</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
          </tr>
        </tbody>
      </table>
@@ -290,10 +356,86 @@
      <table class="table table-bordered table-striped">
        <tbody>
          <tr>
-            <td class="span3"><code>@primaryButtonBackground</code></td>
+            <td class="span3"><code>@btnBackground</code></td>
+            <td><code>@white</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBackgroundHighlight</code></td>
+            <td><code>darken(@white, 10%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBorder</code></td>
+            <td><code>darken(@white, 20%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackground</code></td>
            <td><code>@linkColor</code></td>
            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
          </tr>
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackgroundHighlight</code></td>
+            <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInfoBackground</code></td>
+            <td><code>#5bc0de</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInfoBackgroundHighlight</code></td>
+            <td><code>#2f96b4</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnSuccessBackground</code></td>
+            <td><code>#62c462</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnSuccessBackgroundHighlight</code></td>
+            <td><code>51a351</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnWarningBackground</code></td>
+            <td><code>lighten(@orange, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnWarningBackgroundHighlight</code></td>
+            <td><code>@orange</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnDangerBackground</code></td>
+            <td><code>#ee5f5b</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnDangerBackgroundHighlight</code></td>
+            <td><code>#bd362f</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInverseBackground</code></td>
+            <td><code>@gray</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInverseBackgroundHighlight</code></td>
+            <td><code>@grayDarker</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
        </tbody>
      </table>
      <h4>Forms</h4>
@@ -302,47 +444,29 @@
          <tr>
            <td class="span3"><code>@placeholderText</code></td>
            <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>Navbar</h4>
-      <table class="table table-bordered table-striped">
-        <tbody>
-          <tr>
-            <td class="span3"><code>@navbarHeight</code></td>
-            <td>40px</td>
-            <td class="swatch-col"></td>
          </tr>
          <tr>
-            <td><code>@navbarBackground</code></td>
-            <td><code>@grayDarker</code></td>
-            <td><span class="swatch" style="background-color: #222;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarBackgroundHighlight</code></td>
-            <td><code>@grayDark</code></td>
-            <td><span class="swatch" style="background-color: #333;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarText</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColor</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@inputBackground</code></td>
            <td><code>@white</code></td>
-            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorderRadius</code></td>
+            <td><code>3px</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
+          </tr>
+          <tr>
+            <td><code>@formActionsBackground</code></td>
+            <td><code>#f5f5f5</code></td>
          </tr>
        </tbody>
      </table>
-    </div>
-    <div class="span6">
      <h4>Form states and alerts</h4>
      <table class="table table-bordered table-striped">
        <tbody>
@@ -389,6 +513,130 @@
        </tbody>
      </table>
    </div>
+    <div class="span6">
+      <h4>Navbar</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@navbarHeight</code></td>
+            <td>40px</td>
+            <td class="swatch-col"></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackground</code></td>
+            <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackgroundHighlight</code></td>
+            <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarText</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColor</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>Dropdowns</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>Hero unit</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+          </tr>
+          <tr>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
  </div><!-- /row -->

 </section>
@@ -460,17 +708,17 @@
      </tr>
      <tr>
        <td><code>.size()</code></td>
-        <td><code>@height: 5px, @width: 5px</code></td>
+        <td><code>@height @width</code></td>
        <td>Quickly set the height and width on one line</td>
      </tr>
      <tr>
        <td><code>.square()</code></td>
-        <td><code>@size: 5px</code></td>
+        <td><code>@size</code></td>
        <td>Builds on <code>.size()</code> to set the width and height as same value</td>
      </tr>
      <tr>
        <td><code>.opacity()</code></td>
-        <td><code>@opacity: 100</code></td>
+        <td><code>@opacity</code></td>
        <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
      </tr>
    </tbody>
@@ -564,6 +812,16 @@
        <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
        <td>Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
      </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>Turn any <code>div</code> into a grid column without the <code>.span*</code> classes</td>
+      </tr>
    </tbody>
  </table>
  <h3>CSS3 properties</h3>
@@ -578,12 +836,12 @@
    <tbody>
      <tr>
        <td><code>.border-radius()</code></td>
-        <td><code>@radius: 5px</code></td>
+        <td><code>@radius</code></td>
        <td>Round the corners of an element. Can be a single value or four space-separated values</td>
      </tr>
      <tr>
        <td><code>.box-shadow()</code></td>
-        <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
+        <td><code>@shadow</code></td>
        <td>Add a drop shadow to an element</td>
      </tr>
      <tr>
@@ -603,7 +861,7 @@
      </tr>
      <tr>
        <td><code>.translate()</code></td>
-        <td><code>@x: 0, @y: 0</code></td>
+        <td><code>@x, @y</code></td>
        <td>Move an element on the x and y planes</td>
      </tr>
      <tr>
@@ -626,6 +884,11 @@
        <td><code>@select</code></td>
        <td>Control cursor selection of text on a page</td>
      </tr>
+      <tr>
+        <td><code>.backface-visibility()</code></td>
+        <td><code>@visibility: visible</code></td>
+        <td>Prevent flickering of content when using CSS 3D transforms</td>
+      </tr>
      <tr>
        <td><code>.resizable()</code></td>
        <td><code>@direction: both</code></td>
@@ -633,7 +896,7 @@
      </tr>
      <tr>
        <td><code>.content-columns()</code></td>
-        <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
+        <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
        <td>Make the content of any element use CSS3 columns</td>
      </tr>
    </tbody>
@@ -720,7 +983,7 @@
    <div class="span4">
      <h3>Command line</h3>
      <p>Install the LESS command line tool via Node and run the following command:</p>
-        <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
+        <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
      <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
    </div><!-- /span4 -->
    <div class="span4">
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -172,7 +173,7 @@
  <div class="row">
    <div class="span4">
      <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
-      <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
+      <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.</p>
    </div><!-- /.span -->
    <div class="span4">
 <pre class="prettyprint linenums">
@@ -183,7 +184,7 @@
 </pre>
    </div><!-- /.span -->
    <div class="span4">
-      <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+      <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
    </div><!-- /.span -->
  </div><!-- /.row -->

@@ -374,11 +375,6 @@
        <td>20px</td>
        <td>Negative space between columns</td>
      </tr>
-      <tr>
-        <td><code>@siteWidth</code></td>
-        <td><em>Computed sum of all columns and gutters</em></td>
-        <td>Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin</td>
-      </tr>
    </tbody>
  </table>
  <div class="row">
@@ -537,13 +533,13 @@
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
-  @media (max-width: 768px) { ... }
+  @media (max-width: 767px) { ... }

  // Portrait tablet to landscape and desktop
-  @media (min-width: 768px) and (max-width: 980px) { ... }
+  @media (min-width: 768px) and (max-width: 979px) { ... }

  // Large desktop
-  @media (min-width: 1200px) { .. }
+  @media (min-width: 1200px) { ... }
 </pre>
    </div><!-- /.span -->
  </div><!-- /.row -->
@@ -554,7 +550,7 @@
  <div class="row">
    <div class="span4">
      <h3>What are they</h2>
-      <p>For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.</p>
+      <p>For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.</p>
      <h3>When to use</h2>
      <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.</p>
      <p>For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.</p>
@@ -611,14 +607,16 @@
        </tbody>
      </table>
      <h3>Test case</h3>
-      <p>Resize your browser or load on different devices to test the above clases.</p>
+      <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>
@@ -627,7 +625,7 @@
    </div><!-- /.span -->
  </div><!-- /.row -->

-      
+
  <div class="row">
    <div class="span4">
    </div><!-- /.span -->
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="{{index}}">
                <a href="./index.html">{{_i}}Overview{{/i}}</a>
@@ -294,7 +294,14 @@
        <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>
+      <hr>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}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.{{/i}}
+      </p>
    </div>
  </div><!-- /row -->
 </section>
@@ -798,14 +805,12 @@

  <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
  <div class="row">
-    <div class="span3">
+    <div class="span6">
      <h3>{{_i}}Basic form{{/i}}</h3>
-      <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
-    </div>
-    <div class="span9">
+      <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
      <form class="well">
        <label>{{_i}}Label name{{/i}}</label>
-        <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-inline">Associated help text!</span>
+        <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
        <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
        <label class="checkbox">
          <input type="checkbox"> {{_i}}Check me out{{/i}}
@@ -816,39 +821,30 @@
 &lt;form class="well"&gt;
  &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
  &lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt;
-  &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
-      <h3>{{_i}}Search form{{/i}}</h3>
-      <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
-    </div>
-    <div class="span9">
-      <form class="well form-search">
-        <input type="text" class="input-medium search-query">
-        <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
-      </form>
+  </div>
+  <div class="span6">
+    <h3>{{_i}}Search form{{/i}}</h3>
+    <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
+    <form class="well form-search">
+      <input type="text" class="input-medium search-query">
+      <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+    </form>
 <pre class="prettyprint linenums">
 &lt;form class="well form-search"&gt;
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
+
      <h3>{{_i}}Inline form{{/i}}</h3>
-      <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
-    </div>
-    <div class="span9">
+      <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
      <form class="well form-inline">
        <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
        <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
@@ -867,17 +863,29 @@
  &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+    </div><!-- /.span -->
  </div><!-- /row -->

  <br>

  <h2>{{_i}}Horizontal forms{{/i}}</h2>
  <div class="row">
+    <div class="span4">
+      <p>{{_i}}{{/i}}</p>
+      <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
+      <ul>
+        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
+        <li>{{_i}}checkbox{{/i}}</li>
+        <li>{{_i}}radio{{/i}}</li>
+        <li>{{_i}}select{{/i}}</li>
+        <li>{{_i}}multiple select{{/i}}</li>
+        <li>{{_i}}file input{{/i}}</li>
+        <li>{{_i}}textarea{{/i}}</li>
+      </ul>
+    </div><!-- /.span -->
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
          <div class="control-group">
            <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
            <div class="controls">
@@ -953,31 +961,27 @@
 &lt;/form&gt;
 </pre>
    </div>
-    <div class="span4">
-      <h3>{{_i}}What's included{{/i}}</h3>
-      <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
-      <ul>
-        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
-        <li>{{_i}}checkbox{{/i}}</li>
-        <li>{{_i}}radio{{/i}}</li>
-        <li>{{_i}}select{{/i}}</li>
-        <li>{{_i}}multiple select{{/i}}</li>
-        <li>{{_i}}file input{{/i}}</li>
-        <li>{{_i}}textarea{{/i}}</li>
-      </ul>
-      <hr>
-      <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
-      <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
-    </div>
  </div>

  <br>

+  <h2>{{_i}}Form control states{{/i}}</h2>
  <div class="row">
+    <div class="span4">
+      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Form validation{{/i}}</h3>
+      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;fieldset
+  class="control-group error"&gt;
+  …
+&lt;/fieldset&gt;
+</pre>
+    </div>
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>{{_i}}Form control states{{/i}}</legend>
          <div class="control-group">
            <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
            <div class="controls">
@@ -1046,28 +1050,29 @@
        </fieldset>
      </form>
    </div>
-    <div class="span4">
-      <h3>{{_i}}Redesigned browser states{{/i}}</h3>
-      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
-      <hr>
-      <h3>{{_i}}Form validation{{/i}}</h3>
-      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;fieldset
-  class="control-group error"&gt;
-  …
-&lt;/fieldset&gt;
-</pre>
-    </div>
  </div>

  <br>

+  <h2>{{_i}}Extending form controls{{/i}}</h2>
  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
+      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
+      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
+      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Form help text{{/i}}</h4>
+      <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
+    </div>
    <div class="span8">
      <form class="form-horizontal">
        <fieldset>
-          <legend>{{_i}}Extending form controls{{/i}}</legend>
          <div class="control-group">
            <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
            <div class="controls docs-input-sizes">
@@ -1134,10 +1139,18 @@
            </div>
          </div>
          <div class="control-group">
-            <label class="control-label" for="appendedPrependedInput">{{_i}}Append with button{{/i}}</label>
+            <label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label>
            <div class="controls">
              <div class="input-append">
-                <input class="span2" id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Go!</button>
+                <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+              </div>
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label>
+            <div class="controls">
+              <div class="input-append">
+                <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
              </div>
            </div>
          </div>
@@ -1193,20 +1206,6 @@
        </fieldset>
      </form>
    </div>
-    <div class="span4">
-      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
-      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
-      <hr>
-      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
-      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
-      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
-      <hr>
-      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
-      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
-      <hr>
-      <h4>{{_i}}Form help text{{/i}}</h4>
-      <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
-    </div>
  </div><!-- /row -->
 </section>

@@ -1240,7 +1239,7 @@
      <tr>
        <td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
        <td><code>btn btn-info</code></td>
-        <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
+        <td>{{_i}}Used as an alternative to the default styles{{/i}}</td>
      </tr>
      <tr>
        <td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
@@ -1369,15 +1368,15 @@
        <li><i class="icon-inbox"></i> icon-inbox</li>
        <li><i class="icon-play-circle"></i> icon-play-circle</li>
        <li><i class="icon-repeat"></i> icon-repeat</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-refresh"></i> icon-refresh</li>
        <li><i class="icon-list-alt"></i> icon-list-alt</li>
        <li><i class="icon-lock"></i> icon-lock</li>
        <li><i class="icon-flag"></i> icon-flag</li>
        <li><i class="icon-headphones"></i> icon-headphones</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-volume-off"></i> icon-volume-off</li>
        <li><i class="icon-volume-down"></i> icon-volume-down</li>
        <li><i class="icon-volume-up"></i> icon-volume-up</li>
@@ -1403,10 +1402,6 @@
        <li><i class="icon-indent-right"></i> icon-indent-right</li>
        <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
        <li><i class="icon-picture"></i> icon-picture</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-pencil"></i> icon-pencil</li>
        <li><i class="icon-map-marker"></i> icon-map-marker</li>
        <li><i class="icon-adjust"></i> icon-adjust</li>
@@ -1417,6 +1412,10 @@
        <li><i class="icon-move"></i> icon-move</li>
        <li><i class="icon-step-backward"></i> icon-step-backward</li>
        <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-backward"></i> icon-backward</li>
        <li><i class="icon-play"></i> icon-play</li>
        <li><i class="icon-pause"></i> icon-pause</li>
@@ -1437,10 +1436,6 @@
        <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
        <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
        <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
        <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
        <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
        <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
@@ -1456,6 +1451,10 @@
        <li><i class="icon-leaf"></i> icon-leaf</li>
        <li><i class="icon-fire"></i> icon-fire</li>
        <li><i class="icon-eye-open"></i> icon-eye-open</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
        <li><i class="icon-eye-close"></i> icon-eye-close</li>
        <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
        <li><i class="icon-plane"></i> icon-plane</li>
@@ -1471,6 +1470,26 @@
        <li><i class="icon-folder-open"></i> icon-folder-open</li>
        <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
        <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+        <li><i class="icon-hdd"></i> icon-hdd</li>
+        <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
+        <li><i class="icon-bell"></i> icon-bell</li>
+        <li><i class="icon-certificate"></i> icon-certificate</li>
+        <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
+        <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
+        <li><i class="icon-hand-right"></i> icon-hand-right</li>
+        <li><i class="icon-hand-left"></i> icon-hand-left</li>
+        <li><i class="icon-hand-up"></i> icon-hand-up</li>
+        <li><i class="icon-hand-down"></i> icon-hand-down</li>
+        <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
+        <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
+        <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
+        <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
+        <li><i class="icon-globe"></i> icon-globe</li>
+        <li><i class="icon-wrench"></i> icon-wrench</li>
+        <li><i class="icon-tasks"></i> icon-tasks</li>
+        <li><i class="icon-filter"></i> icon-filter</li>
+        <li><i class="icon-briefcase"></i> icon-briefcase</li>
+        <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
      </ul>
    </div>
  </div>
@@ -1563,8 +1582,7 @@
          <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
          <div class="controls">
            <div class="input-prepend">
-              <span class="add-on"><i class="icon-envelope"></i></span>
-              <input class="span2" id="inputIcon" type="text">
+              <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
            </div>
          </div>
        </div>
@@ -345,7 +345,7 @@
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
      <h3>{{_i}}Sizes{{/i}}</h3>
-      <p>{{_i}}Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
+      <p>{{_i}}Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-large">{{_i}}Large action{{/i}}</button>
@@ -563,16 +563,6 @@
            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
          </ul>
        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
      </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -605,16 +595,6 @@
            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
          </ul>
        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
      </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
@@ -722,54 +702,58 @@
      <h3>{{_i}}What's included{{/i}}</h3>
      <p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
      <p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Fade in tabs{{/i}}</h4>
+      <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
+      <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
+      <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
    </div>
-    <div class="span4">
+    <div class="span8">
      <h3>{{_i}}Tabbable example{{/i}}</h3>
-      <p>{{_i}}To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.{{/i}}</p>
-      <div class="tabbable" style="margin-bottom: 9px;">
+      <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
+      <div class="tabbable" style="margin-bottom: 18px;">
        <ul class="nav nav-tabs">
-          <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-          <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-          <li><a href="#3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+          <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+          <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+          <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
        </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="1">
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1">
            <p>{{_i}}I'm in Section 1.{{/i}}</p>
          </div>
-          <div class="tab-pane" id="2">
+          <div class="tab-pane" id="tab2">
            <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
          </div>
-          <div class="tab-pane" id="3">
+          <div class="tab-pane" id="tab3">
            <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
-    </div>
-    <div class="span4">
-      <h3>{{_i}}Custom jQuery plugin{{/i}}</h3>
-      <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p>
-      <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
-  </div>
+      <p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p>

-  <h3>{{_i}}Straightforward markup{{/i}}</h3>
-  <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
+      <h3>{{_i}}Straightforward markup{{/i}}</h3>
+      <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt;
+&lt;div class="tabbable"&gt; &lt;-- Only required for left/right tabs --&gt;
  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="1"&gt;
+    &lt;div class="tab-pane active" id="tab1"&gt;
      &lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
    &lt;/div&gt;
-    &lt;div class="tab-pane" id="2"&gt;
+    &lt;div class="tab-pane" id="tab2"&gt;
      &lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+    </div>
+  </div>
+

  <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
  <div class="row">
@@ -964,7 +948,7 @@
 </pre>
        </div><!--/span-->
      </div><!--/row-->
-      <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
+      <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
      <h3>{{_i}}Brand name{{/i}}</h3>
      <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -979,7 +963,7 @@
  &lt;input type="text" class="span2"&gt;
 &lt;/form&gt;
 </pre>
-      <p>{{_i}}For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.{{/i}}</p>
+      <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
  &lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;
@@ -1012,7 +996,7 @@
 &lt;/div&gt;
 </pre>
      <div class="alert alert-info">
-        <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+        <strong>{{_i}}Heads up!{{/i}}</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><!-- /.span -->
@@ -1039,7 +1023,7 @@
      <h3>{{_i}}Component alignment{{/i}}</h3>
      <p>{{_i}}To align a nav, 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.{{/i}}</p>
      <h3>{{_i}}Adding dropdown menus{{/i}}</h3>
-      <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
+      <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
  &lt;li class="dropdown"&gt;
@@ -1058,7 +1042,7 @@
      <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
      <hr>
      <h3>{{_i}}Text in the navbar{{/i}}</h3>
-      <p>{{_i}}Wrap strings of text in a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
+      <p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
    </div><!-- /.span -->
  </div><!-- /.row -->

@@ -1155,11 +1139,11 @@
      </div>
      <div class="pagination">
        <ul>
-          <li><a href="#">&larr;</a></li>
+          <li><a href="#">&laquo;</a></li>
          <li class="active"><a href="#">10</a></li>
          <li class="disabled"><a href="#">...</a></li>
          <li><a href="#">20</a></li>
-          <li><a href="#">&rarr;</a></li>
+          <li><a href="#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination pagination-centered">
@@ -1366,13 +1350,13 @@
          </tr>
          <tr>
            <td>
-              {{_i}}Error{{/i}}
+              {{_i}}Important{{/i}}
            </td>
            <td>
-              <span class="badge badge-error">6</span>
+              <span class="badge badge-important">6</span>
            </td>
            <td>
-              <code>&lt;span class="badge badge-error"&gt;6&lt;/span&gt;</code>
+              <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
@@ -1440,7 +1424,7 @@
  <h2>{{_i}}Page header{{/i}}</h2>
  <div class="row">
    <div class="span4">
-      <p>{{_i}}A simple shell for an <code>h1</code> to appropratiely 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).{{/i}}</p>
+      <p>{{_i}}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).{{/i}}</p>
    </div>
    <div class="span8">
      <div class="page-header">
@@ -1627,24 +1611,25 @@
      <h3>{{_i}}Example alerts{{/i}}</h3>
      <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
      <div class="alert">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
      </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
  &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
 &lt;/div&gt;
 </pre>
+      <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.{{/i}}</p>
      <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
      <div class="alert alert-block">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
        <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
      </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
  &lt;h4 class="alert-heading"&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
  {{_i}}Best check yo self, you're not...{{/i}}
 &lt;/div&gt;
@@ -1657,7 +1642,7 @@
    <div class="span4">
      <h3>{{_i}}Error or danger{{/i}}</h3>
      <div class="alert alert-error">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
      </div>
 <pre class="prettyprint linenums">
@@ -1669,7 +1654,7 @@
    <div class="span4">
      <h3>{{_i}}Success{{/i}}</h3>
      <div class="alert alert-success">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
      </div>
 <pre class="prettyprint linenums">
@@ -1681,7 +1666,7 @@
    <div class="span4">
      <h3>{{_i}}Information{{/i}}</h3>
      <div class="alert alert-info">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
        <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
      </div>
 <pre class="prettyprint linenums">
@@ -1821,8 +1806,10 @@
    <div class="span4">
      <h2>{{_i}}Close icon{{/i}}</h2>
      <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
-      <p><a class="close" style="float: none;">&times;</a></p>
-<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
+      <p><button class="close" style="float: none;">&times;</button></p>
+<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
+      <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
+<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
    </div><!--/span-->
  </div><!--/row-->
 </section>
@@ -31,8 +31,7 @@
      <h3>{{_i}}Base CSS{{/i}}</h3>
      <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
      <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> {{_i}}Labels and badges{{/i}}</label>
      <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
      <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
      <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
@@ -67,7 +66,11 @@
      <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
      <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
      <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> {{_i}}Responsive navbar{{/i}}</label>
    </div><!-- /span -->
  </div><!-- /row -->
 </section>
@@ -200,14 +203,20 @@
      <input type="text" class="span3" placeholder="2.127659574%">

      <h3>{{_i}}Typography{{/i}}</h3>
+      <label>@sansFontFamily</label>
+      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <label>@serifFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+      <label>@monoFontFamily</label>
+      <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
      <label>@baseFontSize</label>
      <input type="text" class="span3" placeholder="13px">
      <label>@baseFontFamily</label>
-      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <input type="text" class="span3" placeholder="@sansFontFamily">
      <label>@baseLineHeight</label>
      <input type="text" class="span3" placeholder="18px">
      <label>@altFontFamily</label>
-      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <input type="text" class="span3" placeholder="@serifFontFamily">
      <label>@headingsFontFamily</label>
      <input type="text" class="span3" placeholder="inherit">
      <label>@headingsFontWeight</label>
@@ -241,6 +250,8 @@
      <input type="text" class="span3" placeholder="@grayDark">
      <label>@navbarText</label>
      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarBrandColor</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColor">
      <label>@navbarLinkColor</label>
      <input type="text" class="span3" placeholder="@grayLight">
      <label>@navbarLinkColorHover</label>
@@ -280,8 +291,12 @@
      <input type="text" class="span3" placeholder="@white">
      <label>@inputBorder</label>
      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputBorderRadius</label>
+      <input type="text" class="span3" placeholder="3px">
      <label>@inputDisabledBackground</label>
      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@formActionsBackground</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">

      <label>@btnPrimaryBackground</label>
      <input type="text" class="span3" placeholder="@linkColor">
@@ -6,7 +6,7 @@
    <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
    <p class="download-info">
      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
-      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.2)</small>{{/i}}</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.3)</small>{{/i}}</a>
    </p>
  </div>

@@ -14,6 +14,7 @@
    <ul class="quick-links">
      <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li>
+      <li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
    </ul>
@@ -129,9 +129,9 @@
          <h2>{{_i}}Static example{{/i}}</h2>
          <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
          <div class="well modal-example" style="background-color: #888; border: none;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
              <div class="modal-header">
-                <a href="#" class="close" data-dismiss="modal">&times;</a>
+                <button class="close" data-dismiss="modal">&times;</button>
                <h3>{{_i}}Modal header{{/i}}</h3>
              </div>
              <div class="modal-body">
@@ -149,7 +149,7 @@
          <!-- sample modal content -->
          <div id="myModal" class="modal hide fade">
            <div class="modal-header">
-              <a class="close" data-dismiss="modal" >&times;</a>
+              <button class="close" data-dismiss="modal">&times;</button>
              <h3>{{_i}}Modal Heading{{/i}}</h3>
            </div>
            <div class="modal-body">
@@ -226,7 +226,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="modal" id="myModal"&gt;
  &lt;div class="modal-header"&gt;
-    &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
+    &lt;button class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
    &lt;h3&gt;Modal header&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
  &lt;/li&gt;
  ...
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      {{_i}}Dropdown{{/i}}
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
          <h3>{{_i}}Methods{{/i}}</h3>
          <h4>$().dropdown()</h4>
          <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
@@ -494,6 +508,14 @@ $('#myModal').on('hidden', function () {
            <strong>{{_i}}Heads up!{{/i}}</strong>
            {{_i}}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>.{{/i}}
          </div>
+          <h3>{{_i}}Methods{{/i}}</h3>
+          <h4>.scrollspy('refresh')</h4>
+          <p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('[data-spy="scroll"]').each(function () {
+  var $spy = $(this).scrollspy('refresh')
+});
+</pre>
          <h3>{{_i}}Options{{/i}}</h3>
          <table class="table table-bordered table-striped">
            <thead>
@@ -513,6 +535,21 @@ $('#myModal').on('hidden', function () {
             </tr>
            </tbody>
          </table>
+           <h3>{{_i}}Events{{/i}}</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+               <th>{{_i}}Description{{/i}}</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>{{_i}}activate{{/i}}</td>
+               <td>{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}</td>
+            </tr>
+            </tbody>
+          </table>
        </div>
      </div>
    </section>
@@ -533,7 +570,7 @@ $('#myModal').on('hidden', function () {
        <div class="span9 columns">
          <h2>{{_i}}Example tabs{{/i}}</h2>
          <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
-          <ul id="tab" class="nav nav-tabs">
+          <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
            <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
            <li class="dropdown">
@@ -560,10 +597,21 @@ $('#myModal').on('hidden', function () {
          </div>
          <hr>
          <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
-          <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
+          <p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
+          <pre class="prettyprint linenums">
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})</pre>
+          <p>{{_i}}You can activate individual tabs in several ways:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('#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)
+</pre>
          <h3>{{_i}}Markup{{/i}}</h3>
-          <p>{{_i}}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.{{/i}}</p>
+          <p>{{_i}}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.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
  &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -574,10 +622,10 @@ $('#myModal').on('hidden', function () {
          <h3>{{_i}}Methods{{/i}}</h3>
          <h4>$().tab</h4>
          <p>
-            {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
+            {{_i}}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.{{/i}}
          </p>
 <pre class="prettyprint linenums">
-&lt;ul class="nav nav-tabs"&gt;
+&lt;ul class="nav nav-tabs" id="myTab"&gt;
  &lt;li class="active"&gt;&lt;a href="#home"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#profile"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#messages"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -593,7 +641,7 @@ $('#myModal').on('hidden', function () {

 &lt;script&gt;
  $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show');
  })
 &lt;/script&gt;</pre>
          <h3>{{_i}}Events{{/i}}</h3>
@@ -642,7 +690,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          <h2>{{_i}}Example use of Tooltips{{/i}}</h2>
          <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
          <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first 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="#" rel="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 <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
+            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first 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="#" rel="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="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
            </p>
          </div>
          <hr>
@@ -695,7 +743,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <td>{{_i}}number | object{{/i}}</td>
               <td>0</td>
               <td>
-                <p>{{_i}}delay showing and hiding the tooltip (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}</p>
                <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
               </td>
@@ -804,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <td>{{_i}}number | object{{/i}}</td>
               <td>0</td>
               <td>
-                <p>{{_i}}delay showing and hiding the popover (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
                <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
               </td>
@@ -817,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          </div>
          <h3>{{_i}}Markup{{/i}}</h3>
          <p>
-          {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
+          {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
          </p>
          <h3>{{_i}}Methods{{/i}}</h3>
          <h4>$().popover({{_i}}options{{/i}})</h4>
@@ -853,11 +901,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
          <h2>{{_i}}Example alerts{{/i}}</h2>
          <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
          <div class="alert fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
            <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
          </div>
          <div class="alert alert-block alert-error fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
            <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
            <p>{{_i}}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.{{/i}}</p>
            <p>
@@ -963,7 +1011,7 @@ $('#my-alert').bind('closed', function () {
          <hr>
          <h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
          <p>{{_i}}Enable buttons via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('.tabs').button()</pre>
+          <pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
            <h3>{{_i}}Markup{{/i}}</h3>
          <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -1025,7 +1073,8 @@ $('#my-alert').bind('closed', function () {
          <h3>{{_i}}About{{/i}}</h3>
          <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
          <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
-        </div>
+          <p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p>
+       </div>
        <div class="span9 columns">
          <h2>{{_i}}Example accordion{{/i}}</h2>
          <p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
@@ -1232,7 +1281,7 @@ $('#myCollapsible').on('hidden', function () {
               <td>{{_i}}interval{{/i}}</td>
               <td>{{_i}}number{{/i}}</td>
               <td>5000</td>
-               <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td>
+               <td>{{_i}}The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.{{/i}}</td>
             </tr>
             <tr>
               <td>{{_i}}pause{{/i}}</td>
@@ -63,12 +63,24 @@

  <div class="row">
    <div class="span6">
-      <h3>{{_i}}Hyperlinks{{/i}}</h3>
+      <h3>{{_i}}Scaffolding and links{{/i}}</h3>
      <table class="table table-bordered table-striped">
        <tbody>
          <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>{{_i}}Page background color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
            <td>{{_i}}Default link text color{{/i}}</td>
            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
          </tr>
@@ -108,17 +120,70 @@
      <h3>{{_i}}Typography{{/i}}</h3>
      <table class="table table-bordered table-striped">
        <tbody>
+          <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
          <tr>
            <td class="span2"><code>@baseFontSize</code></td>
            <td>13px</td>
+            <td><em class="muted">Must be pixels</em></td>
          </tr>
          <tr>
            <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td colspan="2"><code>@sansFontFamily</code></td>
          </tr>
          <tr>
            <td><code>@baseLineHeight</code></td>
            <td>18px</td>
+            <td><em class="muted">Must be pixels</em></td>
+          </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td colspan="2"><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td colspan="2"><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
          </tr>
        </tbody>
      </table>
@@ -214,10 +279,86 @@
      <table class="table table-bordered table-striped">
        <tbody>
          <tr>
-            <td class="span3"><code>@primaryButtonBackground</code></td>
+            <td class="span3"><code>@btnBackground</code></td>
+            <td><code>@white</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBackgroundHighlight</code></td>
+            <td><code>darken(@white, 10%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBorder</code></td>
+            <td><code>darken(@white, 20%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackground</code></td>
            <td><code>@linkColor</code></td>
            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
          </tr>
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackgroundHighlight</code></td>
+            <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInfoBackground</code></td>
+            <td><code>#5bc0de</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInfoBackgroundHighlight</code></td>
+            <td><code>#2f96b4</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnSuccessBackground</code></td>
+            <td><code>#62c462</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnSuccessBackgroundHighlight</code></td>
+            <td><code>51a351</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnWarningBackground</code></td>
+            <td><code>lighten(@orange, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnWarningBackgroundHighlight</code></td>
+            <td><code>@orange</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnDangerBackground</code></td>
+            <td><code>#ee5f5b</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnDangerBackgroundHighlight</code></td>
+            <td><code>#bd362f</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInverseBackground</code></td>
+            <td><code>@gray</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInverseBackgroundHighlight</code></td>
+            <td><code>@grayDarker</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
        </tbody>
      </table>
      <h4>{{_i}}Forms{{/i}}</h4>
@@ -226,47 +367,29 @@
          <tr>
            <td class="span3"><code>@placeholderText</code></td>
            <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>{{_i}}Navbar{{/i}}</h4>
-      <table class="table table-bordered table-striped">
-        <tbody>
-          <tr>
-            <td class="span3"><code>@navbarHeight</code></td>
-            <td>40px</td>
-            <td class="swatch-col"></td>
          </tr>
          <tr>
-            <td><code>@navbarBackground</code></td>
-            <td><code>@grayDarker</code></td>
-            <td><span class="swatch" style="background-color: #222;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarBackgroundHighlight</code></td>
-            <td><code>@grayDark</code></td>
-            <td><span class="swatch" style="background-color: #333;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarText</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColor</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@inputBackground</code></td>
            <td><code>@white</code></td>
-            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorderRadius</code></td>
+            <td><code>3px</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
+          </tr>
+          <tr>
+            <td><code>@formActionsBackground</code></td>
+            <td><code>#f5f5f5</code></td>
          </tr>
        </tbody>
      </table>
-    </div>
-    <div class="span6">
      <h4>{{_i}}Form states and alerts{{/i}}</h4>
      <table class="table table-bordered table-striped">
        <tbody>
@@ -313,6 +436,130 @@
        </tbody>
      </table>
    </div>
+    <div class="span6">
+      <h4>{{_i}}Navbar{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@navbarHeight</code></td>
+            <td>40px</td>
+            <td class="swatch-col"></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackground</code></td>
+            <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackgroundHighlight</code></td>
+            <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarText</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColor</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Dropdowns{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Hero unit{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+          </tr>
+          <tr>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
  </div><!-- /row -->

 </section>
@@ -384,17 +631,17 @@
      </tr>
      <tr>
        <td><code>.size()</code></td>
-        <td><code>@height: 5px, @width: 5px</code></td>
+        <td><code>@height @width</code></td>
        <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
      </tr>
      <tr>
        <td><code>.square()</code></td>
-        <td><code>@size: 5px</code></td>
+        <td><code>@size</code></td>
        <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
      </tr>
      <tr>
        <td><code>.opacity()</code></td>
-        <td><code>@opacity: 100</code></td>
+        <td><code>@opacity</code></td>
        <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
      </tr>
    </tbody>
@@ -488,6 +735,16 @@
        <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
        <td>{{_i}}Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
      </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>{{_i}}Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>{{_i}}Turn any <code>div</code> into a grid column without the <code>.span*</code> classes{{/i}}</td>
+      </tr>
    </tbody>
  </table>
  <h3>{{_i}}CSS3 properties{{/i}}</h3>
@@ -502,12 +759,12 @@
    <tbody>
      <tr>
        <td><code>.border-radius()</code></td>
-        <td><code>@radius: 5px</code></td>
+        <td><code>@radius</code></td>
        <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
      </tr>
      <tr>
        <td><code>.box-shadow()</code></td>
-        <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
+        <td><code>@shadow</code></td>
        <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
      </tr>
      <tr>
@@ -527,7 +784,7 @@
      </tr>
      <tr>
        <td><code>.translate()</code></td>
-        <td><code>@x: 0, @y: 0</code></td>
+        <td><code>@x, @y</code></td>
        <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
      </tr>
      <tr>
@@ -550,6 +807,11 @@
        <td><code>@select</code></td>
        <td>{{_i}}Control cursor selection of text on a page{{/i}}</td>
      </tr>
+      <tr>
+        <td><code>.backface-visibility()</code></td>
+        <td><code>@visibility: visible</code></td>
+        <td>{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}}</td>
+      </tr>
      <tr>
        <td><code>.resizable()</code></td>
        <td><code>@direction: both</code></td>
@@ -557,7 +819,7 @@
      </tr>
      <tr>
        <td><code>.content-columns()</code></td>
-        <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
+        <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
        <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
      </tr>
    </tbody>
@@ -644,7 +906,7 @@
    <div class="span4">
      <h3>{{_i}}Command line{{/i}}</h3>
      <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
-        <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
+        <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
      <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
    </div><!-- /span4 -->
    <div class="span4">
@@ -96,7 +96,7 @@
  <div class="row">
    <div class="span4">
      <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
-      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}</p>
+      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.{{/i}}</p>
    </div><!-- /.span -->
    <div class="span4">
 <pre class="prettyprint linenums">
@@ -107,7 +107,7 @@
 </pre>
    </div><!-- /.span -->
    <div class="span4">
-      <p>{{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
+      <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
    </div><!-- /.span -->
  </div><!-- /.row -->

@@ -298,11 +298,6 @@
        <td>20px</td>
        <td>{{_i}}Negative space between columns{{/i}}</td>
      </tr>
-      <tr>
-        <td><code>@siteWidth</code></td>
-        <td><em>{{_i}}Computed sum of all columns and gutters{{/i}}</em></td>
-        <td>{{_i}}Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin{{/i}}</td>
-      </tr>
    </tbody>
  </table>
  <div class="row">
@@ -461,13 +456,13 @@
  @media (max-width: 480px) { ... }

  // {{_i}}Landscape phone to portrait tablet{{/i}}
-  @media (max-width: 768px) { ... }
+  @media (max-width: 767px) { ... }

  // {{_i}}Portrait tablet to landscape and desktop{{/i}}
-  @media (min-width: 768px) and (max-width: 980px) { ... }
+  @media (min-width: 768px) and (max-width: 979px) { ... }

  // {{_i}}Large desktop{{/i}}
-  @media (min-width: 1200px) { .. }
+  @media (min-width: 1200px) { ... }
 </pre>
    </div><!-- /.span -->
  </div><!-- /.row -->
@@ -478,7 +473,7 @@
  <div class="row">
    <div class="span4">
      <h3>{{_i}}What are they{{/i}}</h2>
-      <p>{{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.{{/i}}</p>
+      <p>{{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.{{/i}}</p>
      <h3>{{_i}}When to use{{/i}}</h2>
      <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}</p>
      <p>{{_i}}For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.{{/i}}</p>
@@ -535,23 +530,25 @@
        </tbody>
      </table>
      <h3>{{_i}}Test case{{/i}}</h3>
-      <p>{{_i}}Resize your browser or load on different devices to test the above clases.{{/i}}</p>
+      <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
      <h4>{{_i}}Visible on...{{/i}}</h4>
+      <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</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>
+        <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
      </ul>
      <h4>{{_i}}Hidden on...{{/i}}</h4>
+      <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</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>
+        <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
      </ul>
    </div><!-- /.span -->
  </div><!-- /.row -->

-      
+
  <div class="row">
    <div class="span4">
    </div><!-- /.span -->
@@ -20,6 +20,7 @@

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
@@ -0,0 +1,10 @@
+{
+    "validthis": true,
+    "laxcomma" : true,
+    "laxbreak" : true,
+    "browser"  : true,
+    "debug"    : true,
+    "boss"     : true,
+    "expr"     : true,
+    "asi"      : true
+}
@@ -5,7 +5,7 @@ These are the high-level design rules which guide the development of Bootstrap's

 ### DATA-ATTRIBUTE API

-We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
+We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. This is bootstraps first class api.

 We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:

@@ -29,7 +29,7 @@ All methods should accept an optional options object, a string which targets a p

    $("#myModal").modal() // initialized with defaults
    $("#myModal").modal({ keyboard: false }) // initialized with no keyboard
-    $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
+    $("#myModal").modal('show') // initializes and invokes show immediately

 ---

@@ -60,6 +60,12 @@ All events should have an infinitive and past participle form. The infinitive is
    show | shown
    hide | hidden

+All infinitive events should provide preventDefault functionality. This provides the abililty to stop the execution of an action.
+
+    $('#myModal').on('show', function (e) {
+        if (!data) return e.preventDefault() // stops modal from being shown
+    })
+
 ---

 ### CONSTRUCTORS
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-alert.js v2.0.2
+ * bootstrap-alert.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#alerts
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,61 +18,57 @@
 * ========================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* ALERT CLASS DEFINITION
  * ====================== */

  var dismiss = '[data-dismiss="alert"]'
-    , Alert = function ( el ) {
+    , Alert = function (el) {
        $(el).on('click', dismiss, this.close)
      }

-  Alert.prototype = {
+  Alert.prototype.close = function (e) {
+    var $this = $(this)
+      , selector = $this.attr('data-target')
+      , $parent

-    constructor: Alert
-
-  , close: function ( e ) {
-      var $this = $(this)
-        , selector = $this.attr('data-target')
-        , $parent
-
-      if (!selector) {
-        selector = $this.attr('href')
-        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
-      }
-
-      $parent = $(selector)
-      $parent.trigger('close')
-
-      e && e.preventDefault()
-
-      $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
-
-      $parent
-        .trigger('close')
-        .removeClass('in')
-
-      function removeElement() {
-        $parent
-          .trigger('closed')
-          .remove()
-      }
-
-      $.support.transition && $parent.hasClass('fade') ?
-        $parent.on($.support.transition.end, removeElement) :
-        removeElement()
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

+    $parent = $(selector)
+
+    e && e.preventDefault()
+
+    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
+
+    $parent.trigger(e = $.Event('close'))
+
+    if (e.isDefaultPrevented()) return
+
+    $parent.removeClass('in')
+
+    function removeElement() {
+      $parent
+        .trigger('closed')
+        .remove()
+    }
+
+    $.support.transition && $parent.hasClass('fade') ?
+      $parent.on($.support.transition.end, removeElement) :
+      removeElement()
  }


 /* ALERT PLUGIN DEFINITION
  * ======================= */

-  $.fn.alert = function ( option ) {
+  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
@@ -91,4 +87,4 @@
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-button.js v2.0.2
+ * bootstrap-button.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#buttons
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,58 +17,54 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

 /* BUTTON PUBLIC CLASS DEFINITION
  * ============================== */

-  var Button = function ( element, options ) {
+  var Button = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.button.defaults, options)
  }

-  Button.prototype = {
+  Button.prototype.setState = function (state) {
+    var d = 'disabled'
+      , $el = this.$element
+      , data = $el.data()
+      , val = $el.is('input') ? 'val' : 'html'

-      constructor: Button
+    state = state + 'Text'
+    data.resetText || $el.data('resetText', $el[val]())

-    , setState: function ( state ) {
-        var d = 'disabled'
-          , $el = this.$element
-          , data = $el.data()
-          , val = $el.is('input') ? 'val' : 'html'
+    $el[val](data[state] || this.options[state])

-        state = state + 'Text'
-        data.resetText || $el.data('resetText', $el[val]())
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d)
+    }, 0)
+  }

-        $el[val](data[state] || this.options[state])
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

-        // push to event loop to allow forms to submit
-        setTimeout(function () {
-          state == 'loadingText' ?
-            $el.addClass(d).attr(d, d) :
-            $el.removeClass(d).removeAttr(d)
-        }, 0)
-      }
-
-    , toggle: function () {
-        var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
-
-        $parent && $parent
-          .find('.active')
-          .removeClass('active')
-
-        this.$element.toggleClass('active')
-      }
+    $parent && $parent
+      .find('.active')
+      .removeClass('active')

+    this.$element.toggleClass('active')
  }


 /* BUTTON PLUGIN DEFINITION
  * ======================== */

-  $.fn.button = function ( option ) {
+  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('button')
@@ -97,4 +93,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-carousel.js v2.0.2
+ * bootstrap-carousel.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,16 +18,17 @@
 * ========================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* CAROUSEL CLASS DEFINITION
  * ========================= */

  var Carousel = function (element, options) {
    this.$element = $(element)
-    this.options = $.extend({}, $.fn.carousel.defaults, options)
+    this.options = options
    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
@@ -36,8 +37,11 @@

  Carousel.prototype = {

-    cycle: function () {
-      this.interval = setInterval($.proxy(this.next, this), this.options.interval)
+    cycle: function (e) {
+      if (!e) this.paused = false
+      this.options.interval
+        && !this.paused
+        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
      return this
    }

@@ -62,7 +66,8 @@
      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
    }

-  , pause: function () {
+  , pause: function (e) {
+      if (!e) this.paused = true
      clearInterval(this.interval)
      this.interval = null
      return this
@@ -85,6 +90,7 @@
        , direction = type == 'next' ? 'left' : 'right'
        , fallback  = type == 'next' ? 'first' : 'last'
        , that = this
+        , e = $.Event('slide')

      this.sliding = true

@@ -94,24 +100,26 @@

      if ($next.hasClass('active')) return

-      if (!$.support.transition && this.$element.hasClass('slide')) {
-        this.$element.trigger('slide')
-        $active.removeClass('active')
-        $next.addClass('active')
-        this.sliding = false
-        this.$element.trigger('slid')
-      } else {
+      if ($.support.transition && this.$element.hasClass('slide')) {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
        $next.addClass(type)
        $next[0].offsetWidth // force reflow
        $active.addClass(direction)
        $next.addClass(direction)
-        this.$element.trigger('slide')
        this.$element.one($.support.transition.end, function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () { that.$element.trigger('slid') }, 0)
        })
+      } else {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $active.removeClass('active')
+        $next.addClass('active')
+        this.sliding = false
+        this.$element.trigger('slid')
      }

      isCycling && this.cycle()
@@ -125,15 +133,15 @@
 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */

-  $.fn.carousel = function ( option ) {
+  $.fn.carousel = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('carousel')
-        , options = typeof option == 'object' && option
+        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
      if (typeof option == 'number') data.to(option)
      else if (typeof option == 'string' || (option = options.slide)) data[option]()
-      else data.cycle()
+      else if (options.interval) data.cycle()
    })
  }

@@ -158,4 +166,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-collapse.js v2.0.2
+ * bootstrap-collapse.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#collapse
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,16 +17,21 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function ($) {

-  var Collapse = function ( element, options ) {
-  	this.$element = $(element)
+  "use strict"; // jshint ;_;
+
+
+ /* COLLAPSE PUBLIC CLASS DEFINITION
+  * ================================ */
+
+  var Collapse = function (element, options) {
+    this.$element = $(element)
    this.options = $.extend({}, $.fn.collapse.defaults, options)

-    if (this.options["parent"]) {
-      this.$parent = $(this.options["parent"])
+    if (this.options.parent) {
+      this.$parent = $(this.options.parent)
    }

    this.options.toggle && this.toggle()
@@ -42,31 +47,39 @@
    }

  , show: function () {
-      var dimension = this.dimension()
-        , scroll = $.camelCase(['scroll', dimension].join('-'))
-        , actives = this.$parent && this.$parent.find('.in')
+      var dimension
+        , scroll
+        , actives
        , hasData

+      if (this.transitioning) return
+
+      dimension = this.dimension()
+      scroll = $.camelCase(['scroll', dimension].join('-'))
+      actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+
      if (actives && actives.length) {
        hasData = actives.data('collapse')
+        if (hasData && hasData.transitioning) return
        actives.collapse('hide')
        hasData || actives.data('collapse', null)
      }

      this.$element[dimension](0)
-      this.transition('addClass', 'show', 'shown')
+      this.transition('addClass', $.Event('show'), 'shown')
      this.$element[dimension](this.$element[0][scroll])
-
    }

  , hide: function () {
-      var dimension = this.dimension()
+      var dimension
+      if (this.transitioning) return
+      dimension = this.dimension()
      this.reset(this.$element[dimension]())
-      this.transition('removeClass', 'hide', 'hidden')
+      this.transition('removeClass', $.Event('hide'), 'hidden')
      this.$element[dimension](0)
    }

-  , reset: function ( size ) {
+  , reset: function (size) {
      var dimension = this.dimension()

      this.$element
@@ -74,37 +87,43 @@
        [dimension](size || 'auto')
        [0].offsetWidth

-      this.$element[size ? 'addClass' : 'removeClass']('collapse')
+      this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

      return this
    }

-  , transition: function ( method, startEvent, completeEvent ) {
+  , transition: function (method, startEvent, completeEvent) {
      var that = this
        , complete = function () {
-            if (startEvent == 'show') that.reset()
+            if (startEvent.type == 'show') that.reset()
+            that.transitioning = 0
            that.$element.trigger(completeEvent)
          }

-      this.$element
-        .trigger(startEvent)
-        [method]('in')
+      this.$element.trigger(startEvent)
+
+      if (startEvent.isDefaultPrevented()) return
+
+      this.transitioning = 1
+
+      this.$element[method]('in')

      $.support.transition && this.$element.hasClass('collapse') ?
        this.$element.one($.support.transition.end, complete) :
        complete()
-  	}
+    }

  , toggle: function () {
      this[this.$element.hasClass('in') ? 'hide' : 'show']()
-  	}
+    }

  }

-  /* COLLAPSIBLE PLUGIN DEFINITION
+
+ /* COLLAPSIBLE PLUGIN DEFINITION
  * ============================== */

-  $.fn.collapse = function ( option ) {
+  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('collapse')
@@ -135,4 +154,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-dropdown.js v2.0.2
+ * bootstrap-dropdown.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,15 +18,16 @@
 * ============================================================ */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* DROPDOWN CLASS DEFINITION
  * ========================= */

  var toggle = '[data-toggle="dropdown"]'
-    , Dropdown = function ( element ) {
+    , Dropdown = function (element) {
        var $el = $(element).on('click.dropdown.data-api', this.toggle)
        $('html').on('click.dropdown.data-api', function () {
          $el.parent().removeClass('open')
@@ -37,12 +38,16 @@

    constructor: Dropdown

-  , toggle: function ( e ) {
+  , toggle: function (e) {
      var $this = $(this)
-        , selector = $this.attr('data-target')
        , $parent
+        , selector
        , isActive

+      if ($this.is('.disabled, :disabled')) return
+
+      selector = $this.attr('data-target')
+
      if (!selector) {
        selector = $this.attr('href')
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
@@ -54,7 +59,8 @@
      isActive = $parent.hasClass('open')

      clearMenus()
-      !isActive && $parent.toggleClass('open')
+
+      if (!isActive) $parent.toggleClass('open')

      return false
    }
@@ -69,7 +75,7 @@
  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

-  $.fn.dropdown = function ( option ) {
+  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('dropdown')
@@ -86,7 +92,9 @@

  $(function () {
    $('html').on('click.dropdown.data-api', clearMenus)
-    $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+    $('body')
+      .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
+      .on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =========================================================
- * bootstrap-modal.js v2.0.2
+ * bootstrap-modal.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,14 +18,15 @@
 * ========================================================= */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* MODAL CLASS DEFINITION
  * ====================== */

-  var Modal = function ( content, options ) {
+  var Modal = function (content, options) {
    this.options = options
    this.$element = $(content)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
@@ -41,19 +42,23 @@

    , show: function () {
        var that = this
+          , e = $.Event('show')

-        if (this.isShown) return
+        this.$element.trigger(e)
+
+        if (this.isShown || e.isDefaultPrevented()) return

        $('body').addClass('modal-open')

        this.isShown = true
-        this.$element.trigger('show')

        escape.call(this)
        backdrop.call(this, function () {
          var transition = $.support.transition && that.$element.hasClass('fade')

-          !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position
+          if (!that.$element.parent().length) {
+            that.$element.appendTo(document.body) //don't move modals dom position
+          }

          that.$element
            .show()
@@ -71,21 +76,24 @@
        })
      }

-    , hide: function ( e ) {
+    , hide: function (e) {
        e && e.preventDefault()

-        if (!this.isShown) return
-
        var that = this
+
+        e = $.Event('hide')
+
+        this.$element.trigger(e)
+
+        if (!this.isShown || e.isDefaultPrevented()) return
+
        this.isShown = false

        $('body').removeClass('modal-open')

        escape.call(this)

-        this.$element
-          .trigger('hide')
-          .removeClass('in')
+        this.$element.removeClass('in')

        $.support.transition && this.$element.hasClass('fade') ?
          hideWithTransition.call(this) :
@@ -111,7 +119,7 @@
    })
  }

-  function hideModal( that ) {
+  function hideModal(that) {
    this.$element
      .hide()
      .trigger('hidden')
@@ -119,7 +127,7 @@
    backdrop.call(this)
  }

-  function backdrop( callback ) {
+  function backdrop(callback) {
    var that = this
      , animate = this.$element.hasClass('fade') ? 'fade' : ''

@@ -173,7 +181,7 @@
 /* MODAL PLUGIN DEFINITION
  * ======================= */

-  $.fn.modal = function ( option ) {
+  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
@@ -207,4 +215,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-popover.js v2.0.2
+ * bootstrap-popover.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#popovers
 * ===========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,14 +18,19 @@
 * =========================================================== */


-!function( $ ) {
+!function ($) {

- "use strict"
+  "use strict"; // jshint ;_;
+
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+  * =============================== */

  var Popover = function ( element, options ) {
    this.init('popover', element, options)
  }

+
  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
     ========================================== */

@@ -38,8 +43,8 @@
        , title = this.getTitle()
        , content = this.getContent()

-      $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
-      $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
+      $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
+      $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)

      $tip.removeClass('fade top bottom left right in')
    }
@@ -56,12 +61,10 @@
      content = $e.attr('data-content')
        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)

-      content = content.toString().replace(/(^\s*|\s*$)/, "")
-
      return content
    }

-  , tip: function() {
+  , tip: function () {
      if (!this.$tip) {
        this.$tip = $(this.options.template)
      }
@@ -74,7 +77,7 @@
 /* POPOVER PLUGIN DEFINITION
  * ======================= */

-  $.fn.popover = function ( option ) {
+  $.fn.popover = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('popover')
@@ -92,4 +95,4 @@
  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-scrollspy.js v2.0.2
+ * bootstrap-scrollspy.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#scrollspy
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,9 +17,11 @@
 * limitations under the License.
 * ============================================================== */

-!function ( $ ) {

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

  /* SCROLLSPY CLASS DEFINITION
   * ========================== */
@@ -43,25 +45,43 @@
      constructor: ScrollSpy

    , refresh: function () {
-        this.targets = this.$body
+        var self = this
+          , $targets
+
+        this.offsets = $([])
+        this.targets = $([])
+
+        $targets = this.$body
          .find(this.selector)
          .map(function () {
-            var href = $(this).attr('href')
-            return /^#\w/.test(href) && $(href).length ? href : null
+            var $el = $(this)
+              , href = $el.data('target') || $el.attr('href')
+              , $href = /^#\w/.test(href) && $(href)
+            return ( $href
+              && href.length
+              && [[ $href.position().top, href ]] ) || null
+          })
+          .sort(function (a, b) { return a[0] - b[0] })
+          .each(function () {
+            self.offsets.push(this[0])
+            self.targets.push(this[1])
          })
-
-        this.offsets = $.map(this.targets, function (id) {
-          return $(id).position().top
-        })
      }

    , process: function () {
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
+          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+          , maxScroll = scrollHeight - this.$scrollElement.height()
          , offsets = this.offsets
          , targets = this.targets
          , activeTarget = this.activeTarget
          , i

+        if (scrollTop >= maxScroll) {
+          return activeTarget != (i = targets.last()[0])
+            && this.activate ( i )
+        }
+
        for (i = offsets.length; i--;) {
          activeTarget != targets[i]
            && scrollTop >= offsets[i]
@@ -72,21 +92,27 @@

    , activate: function (target) {
        var active
+          , selector

        this.activeTarget = target

-        this.$body
-          .find(this.selector).parent('.active')
+        $(this.selector)
+          .parent('.active')
          .removeClass('active')

-        active = this.$body
-          .find(this.selector + '[href="' + target + '"]')
+        selector = this.selector
+          + '[data-target="' + target + '"],'
+          + this.selector + '[href="' + target + '"]'
+
+        active = $(selector)
          .parent('li')
          .addClass('active')

-        if ( active.parent('.dropdown-menu') )  {
-          active.closest('li.dropdown').addClass('active')
+        if (active.parent('.dropdown-menu'))  {
+          active = active.closest('li.dropdown').addClass('active')
        }
+
+        active.trigger('activate')
      }

  }
@@ -122,4 +148,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ========================================================
- * bootstrap-tab.js v2.0.2
+ * bootstrap-tab.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#tabs
 * ========================================================
 * Copyright 2012 Twitter, Inc.
@@ -18,9 +18,10 @@
 * ======================================================== */


-!function( $ ){
+!function ($) {
+
+  "use strict"; // jshint ;_;

-  "use strict"

 /* TAB CLASS DEFINITION
  * ==================== */
@@ -39,6 +40,7 @@
        , selector = $this.attr('data-target')
        , previous
        , $target
+        , e

      if (!selector) {
        selector = $this.attr('href')
@@ -49,11 +51,14 @@

      previous = $ul.find('.active a').last()[0]

-      $this.trigger({
-        type: 'show'
-      , relatedTarget: previous
+      e = $.Event('show', {
+        relatedTarget: previous
      })

+      $this.trigger(e)
+
+      if (e.isDefaultPrevented()) return
+
      $target = $(selector)

      this.activate($this.parent('li'), $ul)
@@ -127,4 +132,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-tooltip.js v2.0.2
+ * bootstrap-tooltip.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ===========================================================
@@ -18,14 +18,16 @@
 * limitations under the License.
 * ========================================================== */

-!function( $ ) {

-  "use strict"
+!function ($) {
+
+  "use strict"; // jshint ;_;
+

 /* TOOLTIP PUBLIC CLASS DEFINITION
  * =============================== */

-  var Tooltip = function ( element, options ) {
+  var Tooltip = function (element, options) {
    this.init('tooltip', element, options)
  }

@@ -33,7 +35,7 @@

    constructor: Tooltip

-  , init: function ( type, element, options ) {
+  , init: function (type, element, options) {
      var eventIn
        , eventOut

@@ -54,7 +56,7 @@
        this.fixTitle()
    }

-  , getOptions: function ( options ) {
+  , getOptions: function (options) {
      options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())

      if (options.delay && typeof options.delay == 'number') {
@@ -67,34 +69,28 @@
      return options
    }

-  , enter: function ( e ) {
+  , enter: function (e) {
      var self = $(e.currentTarget)[this.type](this._options).data(this.type)

-      if (!self.options.delay || !self.options.delay.show) {
-        self.show()
-      } else {
-        self.hoverState = 'in'
-        setTimeout(function() {
-          if (self.hoverState == 'in') {
-            self.show()
-          }
-        }, self.options.delay.show)
-      }
+      if (!self.options.delay || !self.options.delay.show) return self.show()
+
+      clearTimeout(this.timeout)
+      self.hoverState = 'in'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'in') self.show()
+      }, self.options.delay.show)
    }

-  , leave: function ( e ) {
+  , leave: function (e) {
      var self = $(e.currentTarget)[this.type](this._options).data(this.type)

-      if (!self.options.delay || !self.options.delay.hide) {
-        self.hide()
-      } else {
-        self.hoverState = 'out'
-        setTimeout(function() {
-          if (self.hoverState == 'out') {
-            self.hide()
-          }
-        }, self.options.delay.hide)
-      }
+      if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+      clearTimeout(this.timeout)
+      self.hoverState = 'out'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'out') self.hide()
+      }, self.options.delay.hide)
    }

  , show: function () {
@@ -152,9 +148,20 @@
      }
    }

+  , isHTML: function(text) {
+      // html string detection logic adapted from jQuery
+      return typeof text != 'string'
+        || ( text.charAt(0) === "<"
+          && text.charAt( text.length - 1 ) === ">"
+          && text.length >= 3
+        ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
+    }
+
  , setContent: function () {
      var $tip = this.tip()
-      $tip.find('.tooltip-inner').html(this.getTitle())
+        , title = this.getTitle()
+
+      $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
      $tip.removeClass('fade in top bottom left right')
    }

@@ -206,8 +213,6 @@
      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

-      title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
-
      return title
    }

@@ -259,12 +264,12 @@

  $.fn.tooltip.defaults = {
    animation: true
-  , delay: 0
-  , selector: false
  , placement: 'top'
+  , selector: false
+  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  , trigger: 'hover'
  , title: ''
-  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+  , delay: 0
  }

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.0.2
+ * bootstrap-transition.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#transitions
 * ===================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,35 +17,45 @@
 * limitations under the License.
 * ========================================================== */

-!function( $ ) {
+
+!function ($) {

  $(function () {

-    "use strict"
+    "use strict"; // jshint ;_;

-    /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+
+    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
     * ======================================================= */

    $.support.transition = (function () {
-      var thisBody = document.body || document.documentElement
-        , thisStyle = thisBody.style
-        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined

-      return support && {
-        end: (function () {
-          var transitionEnd = "TransitionEnd"
-          if ( $.browser.webkit ) {
-          	transitionEnd = "webkitTransitionEnd"
-          } else if ( $.browser.mozilla ) {
-          	transitionEnd = "transitionend"
-          } else if ( $.browser.opera ) {
-          	transitionEnd = "oTransitionEnd"
+      var transitionEnd = (function () {
+
+        var el = document.createElement('bootstrap')
+          , transEndEventNames = {
+               'WebkitTransition' : 'webkitTransitionEnd'
+            ,  'MozTransition'    : 'transitionend'
+            ,  'OTransition'      : 'oTransitionEnd'
+            ,  'msTransition'     : 'MSTransitionEnd'
+            ,  'transition'       : 'transitionend'
+            }
+          , name
+
+        for (name in transEndEventNames){
+          if (el.style[name] !== undefined) {
+            return transEndEventNames[name]
          }
-          return transitionEnd
-        }())
+        }
+
+      }())
+
+      return transitionEnd && {
+        end: transitionEnd
      }
+
    })()

  })

-}( window.jQuery );
+}(window.jQuery);
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-typeahead.js v2.0.2
+ * bootstrap-typeahead.js v2.0.3
 * http://twitter.github.com/bootstrap/javascript.html#typeahead
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -17,16 +17,22 @@
 * limitations under the License.
 * ============================================================ */

-!function( $ ){

-  "use strict"
+!function($){

-  var Typeahead = function ( element, options ) {
+  "use strict"; // jshint ;_;
+
+
+ /* TYPEAHEAD PUBLIC CLASS DEFINITION
+  * ================================= */
+
+  var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    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.$menu = $(this.options.menu).appendTo('body')
    this.source = this.options.source
    this.shown = false
@@ -39,13 +45,18 @@

  , select: function () {
      var val = this.$menu.find('.active').attr('data-value')
-      this.$element.val(val)
-      this.$element.change();
+      this.$element
+        .val(this.updater(val))
+        .change()
      return this.hide()
    }

+  , updater: function (item) {
+      return item
+    }
+
  , show: function () {
-      var pos = $.extend({}, this.$element.offset(), {
+      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

@@ -77,7 +88,7 @@
      }

      items = $.grep(this.source, function (item) {
-        if (that.matcher(item)) return item
+        return that.matcher(item)
      })

      items = this.sorter(items)
@@ -109,7 +120,8 @@
    }

  , highlighter: function (item) {
-      return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
+      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
+      return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }
@@ -201,11 +213,13 @@
          break

        case 38: // up arrow
+          if (e.type != 'keydown') break
          e.preventDefault()
          this.prev()
          break

        case 40: // down arrow
+          if (e.type != 'keydown') break
          e.preventDefault()
          this.next()
          break
@@ -236,7 +250,7 @@
  /* TYPEAHEAD PLUGIN DEFINITION
   * =========================== */

-  $.fn.typeahead = function ( option ) {
+  $.fn.typeahead = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('typeahead')
@@ -268,4 +282,4 @@
    })
  })

-}( window.jQuery );
+}(window.jQuery);
@@ -11,10 +11,14 @@
  <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
  <script src="vendor/qunit.js"></script>

+  <!-- phantomjs logging script-->
+  <script src="unit/bootstrap-phantom.js"></script>
+
  <!--  plugin sources -->
  <script src="../../js/bootstrap-transition.js"></script>
  <script src="../../js/bootstrap-alert.js"></script>
  <script src="../../js/bootstrap-button.js"></script>
+  <script src="../../js/bootstrap-carousel.js"></script>
  <script src="../../js/bootstrap-collapse.js"></script>
  <script src="../../js/bootstrap-dropdown.js"></script>
  <script src="../../js/bootstrap-modal.js"></script>
@@ -28,6 +32,7 @@
  <script src="unit/bootstrap-transition.js"></script>
  <script src="unit/bootstrap-alert.js"></script>
  <script src="unit/bootstrap-button.js"></script>
+  <script src="unit/bootstrap-carousel.js"></script>
  <script src="unit/bootstrap-collapse.js"></script>
  <script src="unit/bootstrap-dropdown.js"></script>
  <script src="unit/bootstrap-modal.js"></script>
@@ -36,7 +41,7 @@
  <script src="unit/bootstrap-tooltip.js"></script>
  <script src="unit/bootstrap-popover.js"></script>
  <script src="unit/bootstrap-typeahead.js"></script>
-
+</head>
 <body>
  <div>
    <h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
@@ -0,0 +1,63 @@
+// Simple phantom.js integration script
+// Adapted from Modernizr
+
+function waitFor(testFx, onReady, timeOutMillis) {
+  var maxtimeOutMillis = timeOutMillis ? timeOutMillis :  5001 //< Default Max Timout is 5s
+    , start = new Date().getTime()
+    , condition = false
+    , interval = setInterval(function () {
+        if ((new Date().getTime() - start < maxtimeOutMillis) && !condition) {
+          // If not time-out yet and condition not yet fulfilled
+          condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()) //< defensive code
+        } else {
+          if (!condition) {
+            // If condition still not fulfilled (timeout but condition is 'false')
+            console.log("'waitFor()' timeout")
+            phantom.exit(1)
+          } else {
+            // Condition fulfilled (timeout and/or condition is 'true')
+            typeof(onReady) === "string" ? eval(onReady) : onReady() //< Do what it's supposed to do once the condition is fulfilled
+            clearInterval(interval) //< Stop this interval
+          }
+        }
+    }, 100) //< repeat check every 100ms
+}
+
+
+if (phantom.args.length === 0 || phantom.args.length > 2) {
+  console.log('Usage: phantom.js URL')
+  phantom.exit()
+}
+
+var page = new WebPage()
+
+// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
+page.onConsoleMessage = function(msg) {
+  console.log(msg)
+};
+
+page.open(phantom.args[0], function(status){
+  if (status !== "success") {
+    console.log("Unable to access network")
+    phantom.exit()
+  } else {
+    waitFor(function(){
+      return page.evaluate(function(){
+        var el = document.getElementById('qunit-testresult')
+        if (el && el.innerText.match('completed')) {
+          return true
+        }
+        return false
+      })
+    }, function(){
+      var failedNum = page.evaluate(function(){
+        var el = document.getElementById('qunit-testresult')
+        try {
+          return el.getElementsByClassName('failed')[0].innerHTML
+        } catch (e) { }
+        return 10000
+      });
+      phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0)
+    })
+  }
+})
@@ -0,0 +1,14 @@
+/*
+ * Simple connect server for phantom.js
+ * Adapted from Modernizr
+ */
+
+var connect = require('connect')
+  , http = require('http')
+  , fs   = require('fs')
+  , app = connect()
+      .use(connect.static(__dirname + '/../../'));
+
+http.createServer(app).listen(3000);
+
+fs.writeFileSync(__dirname + '/pid.txt', process.pid, 'utf-8')
@@ -38,4 +38,19 @@ $(function () {
        ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
      })

+      test("should not fire closed when close is prevented", function () {
+        $.support.transition = false
+        stop();
+        $('<div class="alert"/>')
+          .bind('close', function (e) {
+            e.preventDefault();
+            ok(true);
+            start();
+          })
+          .bind('closed', function () {
+            ok(false);
+          })
+          .alert('close')
+      })
+
 })
@@ -0,0 +1,28 @@
+$(function () {
+
+    module("bootstrap-carousel")
+
+      test("should be defined on jquery object", function () {
+        ok($(document.body).carousel, 'carousel method is defined')
+      })
+
+      test("should return element", function () {
+        ok($(document.body).carousel()[0] == document.body, 'document.body returned')
+      })
+
+      test("should not fire sliden when slide is prevented", function () {
+        $.support.transition = false
+        stop();
+        $('<div class="carousel"/>')
+          .bind('slide', function (e) {
+            e.preventDefault();
+            ok(true);
+            start();
+          })
+          .bind('slid', function () {
+            ok(false);
+          })
+          .carousel('next')
+      })
+
+})
@@ -22,4 +22,33 @@ $(function () {
        ok(/height/.test(el.attr('style')), 'has height set')
      })

+      test("should not fire shown when show is prevented", function () {
+        $.support.transition = false
+        stop();
+        $('<div class="collapse"/>')
+          .bind('show', function (e) {
+            e.preventDefault();
+            ok(true);
+            start();
+          })
+          .bind('shown', function () {
+            ok(false);
+          })
+          .collapse('show')
+      })
+
+      test("should reset style to auto after finishing opening collapse", function () {
+        $.support.transition = false
+        stop();
+        $('<div class="collapse" style="height: 0px"/>')
+          .bind('show', function () {
+            ok(this.style.height == '0px')
+          })
+          .bind('shown', function () {
+            ok(this.style.height == 'auto')
+            start()
+          })
+          .collapse('show')
+      })
+
 })
@@ -10,6 +10,40 @@ $(function () {
        ok($(document.body).dropdown()[0] == document.body, 'document.body returned')
      })

+      test("should not open dropdown if target is disabled", function () {
+        var dropdownHTML = '<ul class="tabs">'
+          + '<li class="dropdown">'
+          + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
+          + '<ul class="dropdown-menu">'
+          + '<li><a href="#">Secondary link</a></li>'
+          + '<li><a href="#">Something else here</a></li>'
+          + '<li class="divider"></li>'
+          + '<li><a href="#">Another link</a></li>'
+          + '</ul>'
+          + '</li>'
+          + '</ul>'
+          , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
+
+        ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
+      })
+
+      test("should not open dropdown if target is disabled", function () {
+        var dropdownHTML = '<ul class="tabs">'
+          + '<li class="dropdown">'
+          + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
+          + '<ul class="dropdown-menu">'
+          + '<li><a href="#">Secondary link</a></li>'
+          + '<li><a href="#">Something else here</a></li>'
+          + '<li class="divider"></li>'
+          + '<li><a href="#">Another link</a></li>'
+          + '</ul>'
+          + '</li>'
+          + '</ul>'
+          , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
+
+        ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
+      })
+
      test("should add class open to menu if clicked", function () {
        var dropdownHTML = '<ul class="tabs">'
          + '<li class="dropdown">'
@@ -29,6 +29,35 @@ $(function () {
          .modal("show")
      })

+      test("should fire show event", function () {
+        stop()
+        $.support.transition = false
+        $("<div id='modal-test'></div>")
+          .bind("show", function () {
+            ok(true, "show was called")
+          })
+          .bind("shown", function () {
+            $(this).remove()
+            start()
+          })
+          .modal("show")
+      })
+
+      test("should not fire shown when default prevented", function () {
+        stop()
+        $.support.transition = false
+        $("<div id='modal-test'></div>")
+          .bind("show", function (e) {
+            e.preventDefault()
+            ok(true, "show was called")
+            start()
+          })
+          .bind("shown", function () {
+            ok(false, "shown was called")
+          })
+          .modal("show")
+      })
+
      test("should hide modal when hide is called", function () {
        stop()
        $.support.transition = false
@@ -0,0 +1,21 @@
+// Logging setup for phantom integration
+// adapted from Modernizr
+
+QUnit.begin = function () {
+  console.log("Starting test suite")
+  console.log("================================================\n")
+}
+
+QUnit.moduleDone = function (opts) {
+  if (opts.failed === 0) {
+    console.log("\u2714 All tests passed in '" + opts.name + "' module")
+  } else {
+    console.log("\u2716 " + opts.failed + " tests failed in '" + opts.name + "' module")
+  }
+}
+
+QUnit.done = function (opts) {
+  console.log("\n================================================")
+  console.log("Tests completed in " + opts.runtime + " milliseconds")
+  console.log(opts.passed + " tests of " + opts.total + " passed, " + opts.failed + " failed.")
+}
@@ -42,4 +42,20 @@ $(function () {
        equals($("#qunit-fixture").find('.active').attr('id'), "home")
      })

+
+      test("should not fire closed when close is prevented", function () {
+        $.support.transition = false
+        stop();
+        $('<div class="tab"/>')
+          .bind('show', function (e) {
+            e.preventDefault();
+            ok(true);
+            start();
+          })
+          .bind('shown', function () {
+            ok(false);
+          })
+          .tab('show')
+      })
+
 })
@@ -59,4 +59,78 @@ $(function () {
        ok(!$(".tooltip").length, 'tooltip removed')
      })

+      test("should not show tooltip if leave event occurs before delay expires", function () {
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
+          .appendTo('#qunit-fixture')
+          .tooltip({ delay: 200 })
+
+        stop()
+
+        tooltip.trigger('mouseenter')
+
+        setTimeout(function () {
+          ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+          tooltip.trigger('mouseout')
+          setTimeout(function () {
+            ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+            start()
+          }, 200)
+        }, 100)
+      })
+
+      test("should not show tooltip if leave event occurs before delay expires", function () {
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
+          .appendTo('#qunit-fixture')
+          .tooltip({ delay: 100 })
+        stop()
+        tooltip.trigger('mouseenter')
+        setTimeout(function () {
+          ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+          tooltip.trigger('mouseout')
+          setTimeout(function () {
+            ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+            start()
+          }, 100)
+        }, 50)
+      })
+
+      test("should show tooltip if leave event hasn't occured before delay expires", function () {
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
+          .appendTo('#qunit-fixture')
+          .tooltip({ delay: 200 })
+        stop()
+        tooltip.trigger('mouseenter')
+        setTimeout(function () {
+          ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+          setTimeout(function () {
+            ok(!$(".tooltip").hasClass('fade in'), 'tooltip has faded in')
+            start()
+          }, 200)
+        }, 100)
+      })
+
+      test("should detect if title string is html or text: foo", function () {
+        ok(!$.fn.tooltip.Constructor.prototype.isHTML('foo'), 'correctly detected html')
+      })
+
+      test("should detect if title string is html or text: &amp;lt;foo&amp;gt;", function () {
+        ok(!$.fn.tooltip.Constructor.prototype.isHTML('&lt;foo&gt;'), 'correctly detected html')
+      })
+
+      test("should detect if title string is html or text: &lt;div>foo&lt;/div>", function () {
+        ok($.fn.tooltip.Constructor.prototype.isHTML('<div>foo</div>'), 'correctly detected html')
+      })
+
+      test("should detect if title string is html or text: asdfa&lt;div>foo&lt;/div>asdfasdf", function () {
+        ok($.fn.tooltip.Constructor.prototype.isHTML('asdfa<div>foo</div>asdfasdf'), 'correctly detected html')
+      })
+
+      test("should detect if title string is html or text: document.createElement('div')", function () {
+        ok($.fn.tooltip.Constructor.prototype.isHTML(document.createElement('div')), 'correctly detected html')
+      })
+
+      test("should detect if title string is html or text: $('&lt;div />)", function () {
+        ok($.fn.tooltip.Constructor.prototype.isHTML($('<div></div>')), 'correctly detected html')
+      })
+
 })
@@ -3,7 +3,7 @@ $(function () {
    module("bootstrap-transition")

      test("should be defined on jquery support object", function () {
-        ok($.support.transition != undefined, 'transition object is defined')
+        ok($.support.transition !== undefined, 'transition object is defined')
      })

      test("should provide an end object", function () {
@@ -52,6 +52,22 @@ $(function () {
        typeahead.$menu.remove()
      })

+      test("should not explode when regex chars are entered", function () {
+        var $input = $('<input />').typeahead({
+              source: ['aa', 'ab', 'ac', 'mdo*', 'fat+']
+            })
+          , typeahead = $input.data('typeahead')
+
+        $input.val('+')
+        typeahead.lookup()
+
+        ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
+        equals(typeahead.$menu.find('li').length, 1, 'has 1 item in menu')
+        equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
+
+        typeahead.$menu.remove()
+      })
+
      test("should hide menu when query entered", function () {
        stop()
        var $input = $('<input />').typeahead({
@@ -91,7 +107,7 @@ $(function () {
        ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active")

        $input.trigger({
-          type: 'keypress'
+          type: 'keydown'
        , keyCode: 40
        })

@@ -99,7 +115,7 @@ $(function () {


        $input.trigger({
-          type: 'keypress'
+          type: 'keydown'
        , keyCode: 38
        })

@@ -21,6 +21,11 @@
  padding: 8px 15px;
 }

+// General toggle styles
+.accordion-toggle {
+  cursor: pointer;
+}
+
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
  padding: 9px 15px;
@@ -1,36 +0,0 @@
-// BADGES
-// ------
-
-// Base
-.badge {
-  padding: 1px 9px 2px;
-  font-size: @baseFontSize * .925;
-  font-weight: bold;
-  white-space: nowrap;
-  color: @white;
-  background-color: @grayLight;
-  .border-radius(9px);
-}
-
-// Hover state
-.badge:hover {
-  color: @white;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Colors
-.badge-error            { background-color: @errorText; }
-.badge-error:hover      { background-color: darken(@errorText, 10%); }
-
-.badge-warning          { background-color: @orange; }
-.badge-warning:hover    { background-color: darken(@orange, 10%); }
-
-.badge-success          { background-color: @successText; }
-.badge-success:hover    { background-color: darken(@successText, 10%); }
-
-.badge-info             { background-color: @infoText; }
-.badge-info:hover       { background-color: darken(@infoText, 10%); }
-
-.badge-inverse          { background-color: @grayDark; }
-.badge-inverse:hover    { background-color: darken(@grayDark, 10%); }
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.2
+ * Bootstrap v2.0.3
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
@@ -52,8 +52,7 @@

 // Components: Misc
@import "thumbnails.less";
-@import "labels.less";
-@import "badges.less";
+@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@@ -25,14 +25,14 @@
 }

 // Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
+.btn-group > .btn {
  position: relative;
  float: left;
  margin-left: -1px;
  .border-radius(0);
 }
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group .btn:first-child {
+.btn-group > .btn:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
@@ -41,8 +41,9 @@
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;
 }
-.btn-group .btn:last-child,
-.btn-group .dropdown-toggle {
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
@@ -51,7 +52,7 @@
          border-bottom-right-radius: 4px;
 }
 // Reset corners for large buttons
-.btn-group .btn.large:first-child {
+.btn-group > .btn.large:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 6px;
         -moz-border-radius-topleft: 6px;
@@ -60,8 +61,8 @@
      -moz-border-radius-bottomleft: 6px;
          border-bottom-left-radius: 6px;
 }
-.btn-group .btn.large:last-child,
-.btn-group .large.dropdown-toggle {
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
     -webkit-border-top-right-radius: 6px;
         -moz-border-radius-topright: 6px;
             border-top-right-radius: 6px;
@@ -71,10 +72,10 @@
 }

 // On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active,
-.btn-group .btn.active {
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
  z-index: 2;
 }

@@ -90,48 +91,60 @@
 // ----------------------

 // Give the line between buttons some depth
-.btn-group .dropdown-toggle {
+.btn-group > .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
-  @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-  *padding-top: 3px;
-  *padding-bottom: 3px;
-}
-.btn-group .btn-mini.dropdown-toggle {
-  padding-left: 5px;
-  padding-right: 5px;
-  *padding-top: 1px;
-  *padding-bottom: 1px;
-}
-.btn-group .btn-small.dropdown-toggle {
+  .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  *padding-top: 4px;
  *padding-bottom: 4px;
 }
-.btn-group .btn-large.dropdown-toggle {
+.btn-group > .btn-mini.dropdown-toggle {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.btn-group > .btn-small.dropdown-toggle {
+  *padding-top: 4px;
+  *padding-bottom: 4px;
+}
+.btn-group > .btn-large.dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
 }

 .btn-group.open {
-  // IE7's z-index only goes to the nearest positioned ancestor, which would
-  // make the menu appear below buttons that appeared later on the page
-  *z-index: @zindexDropdown;
-
-  // Reposition menu on open and round all corners
-  .dropdown-menu {
-    display: block;
-    margin-top: 1px;
-    .border-radius(5px);
-  }

+  // The clickable button for toggling the menu
+  // Remove the gradient and set the same inset shadow as the :active state
  .dropdown-toggle {
    background-image: none;
-    @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
+    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+  }
+
+  // Keep the hover's background when dropdown is open
+  .btn.dropdown-toggle {
+    background-color: @btnBackgroundHighlight;
+  }
+  .btn-primary.dropdown-toggle {
+    background-color: @btnPrimaryBackgroundHighlight;
+  }
+  .btn-warning.dropdown-toggle {
+    background-color: @btnWarningBackgroundHighlight;
+  }
+  .btn-danger.dropdown-toggle {
+    background-color: @btnDangerBackgroundHighlight;
+  }
+  .btn-success.dropdown-toggle {
+    background-color: @btnSuccessBackgroundHighlight;
+  }
+  .btn-info.dropdown-toggle {
+    background-color: @btnInfoBackgroundHighlight;
+  }
+  .btn-inverse.dropdown-toggle {
+    background-color: @btnInverseBackgroundHighlight;
  }
 }

+
 // Reposition the caret
 .btn .caret {
  margin-top: 7px;
@@ -150,10 +163,16 @@
 }
 .btn-large .caret {
  margin-top: 6px;
-  border-left:  5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top:   5px solid @black;
+  border-left-width:  5px;
+  border-right-width: 5px;
+  border-top-width:   5px;
 }
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+  border-bottom: 5px solid @black;
+  border-top: 0;
+}
+


 // Account for other colors
@@ -13,20 +13,19 @@
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
+  *line-height: 20px;
  color: @grayDark;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
  vertical-align: middle;
+  cursor: pointer;
  .buttonBackground(@btnBackground, @btnBackgroundHighlight);
  border: 1px solid @btnBorder;
+  *border: 0; // Remove the border to prevent IE7's black border on input:focus
  border-bottom-color: darken(@btnBorder, 10%);
  .border-radius(4px);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-  cursor: pointer;
-
-  // Give IE7 some love
-  .ie7-restore-left-whitespace();
+  .ie7-restore-left-whitespace(); // Give IE7 some love
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 }

 // Hover state
@@ -34,6 +33,7 @@
  color: @grayDark;
  text-decoration: none;
  background-color: darken(@white, 10%);
+  *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
  background-position: 0 -15px;

  // transition is only when going to hover, otherwise the background
@@ -49,20 +49,19 @@
 // Active state
 .btn.active,
 .btn:active {
-  background-image: none;
-  @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
  background-color: darken(@white, 10%);
  background-color: darken(@white, 15%) e("\9");
+  background-image: none;
  outline: 0;
+  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
 }

 // Disabled state
 .btn.disabled,
 .btn[disabled] {
  cursor: default;
-  background-image: none;
  background-color: darken(@white, 10%);
+  background-image: none;
  .opacity(65);
  .box-shadow(none);
 }
@@ -117,8 +116,8 @@
 .btn-info:hover,
 .btn-inverse,
 .btn-inverse:hover {
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  color: @white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
@@ -132,6 +131,11 @@

 // Set the backgrounds
 // -------------------------
+.btn {
+  // reset here as of 2.0.3 due to Recess property order
+  border-color: #ccc;
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+}
 .btn-primary {
  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
 }
@@ -12,7 +12,18 @@
  &:hover {
    color: @black;
    text-decoration: none;
-    .opacity(40);
    cursor: pointer;
+    .opacity(40);
  }
 }
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
@@ -27,14 +27,14 @@ pre {
  margin: 0 0 @baseLineHeight / 2;
  font-size: @baseFontSize * .925; // 13px to 12px
  line-height: @baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc; // fallback for IE7-8
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(4px);
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-  word-wrap: break-word;

  // Make prettyprint styles more spaced out for readability
  &.prettyprint {
@@ -2,18 +2,18 @@
 // --------------------

 .fade {
+  .opacity(0);
  .transition(opacity .15s linear);
-  opacity: 0;
  &.in {
-    opacity: 1;
+    .opacity(100);
  }
 }

 .collapse {
-  .transition(height .35s ease);
-  position:relative;
-  overflow:hidden;
+  position: relative;
  height: 0;
+  overflow: hidden;
+  .transition(height .35s ease);
  &.in {
    height: auto;
  }
@@ -2,6 +2,7 @@
 // --------------

 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
 .dropdown {
  position: relative;
 }
@@ -21,11 +22,11 @@
  width: 0;
  height: 0;
  vertical-align: top;
-  border-left:  4px solid transparent;
-  border-right: 4px solid transparent;
  border-top:   4px solid @black;
-  .opacity(30);
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
  content: "";
+  .opacity(30);
 }

 // Place the caret
@@ -34,7 +35,7 @@
  margin-left: 2px;
 }
 .dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
  .opacity(100);
 }

@@ -45,24 +46,22 @@
  top: 100%;
  left: 0;
  z-index: @zindexDropdown;
-  float: left;
  display: none; // none by default, but block on "open" of the menu
+  float: left;
  min-width: 160px;
  padding: 4px 0;
-  margin: 0; // override default ul
+  margin: 1px 0 0; // override default ul
  list-style: none;
  background-color: @dropdownBackground;
-  border-color: #ccc;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 1px;
-  .border-radius(0 0 5px 5px);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  .border-radius(5px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;

  // Aligns the dropdown menu to right
  &.pull-right {
@@ -99,25 +98,21 @@

 // Open state for the dropdown
 // ---------------------------
-.dropdown.open {
+.open {
  // IE7's z-index only goes to the nearest positioned ancestor, which would
  // make the menu appear below buttons that appeared later on the page
  *z-index: @zindexDropdown;

-  .dropdown-toggle {
-    color: @white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
  .dropdown-menu {
    display: block;
  }
 }

 // Right aligned dropdowns
+// ---------------------------
 .pull-right .dropdown-menu {
-  left: auto;
  right: 0;
+  left: auto;
 }

 // Allow for dropdowns to go bottom up (aka, dropup-menu)
@@ -71,8 +71,9 @@ select,
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @gray;
+  background-color: @inputBackground;
  border: 1px solid @inputBorder;
-  .border-radius(3px);
+  .border-radius(@inputBorderRadius);
 }
 .uneditable-textarea {
  width: auto;
@@ -97,8 +98,9 @@ input[type="radio"] {
  *margin-top: 0; /* IE7 */
  line-height: normal;
  cursor: pointer;
-  .border-radius(0);
+  background-color: transparent;
  border: 0 \9; /* IE9 and down */
+  .border-radius(0);
 }
 input[type="image"] {
  border: 0;
@@ -109,9 +111,9 @@ input[type="file"] {
  width: auto;
  padding: initial;
  line-height: initial;
-  border: initial;
  background-color: @inputBackground;
  background-color: initial;
+  border: initial;
  .box-shadow(none);
 }

@@ -171,6 +173,7 @@ input[type="hidden"] {
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
+  min-height: 18px; // clear the floating input if there is no label text
  padding-left: 18px;
 }
 .radio input[type="radio"],
@@ -213,17 +216,16 @@ textarea {
 input:focus,
 textarea:focus {
  border-color: rgba(82,168,236,.8);
-  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  .box-shadow(@shadow);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
+  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
 }
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
-  .box-shadow(none); // override for file inputs
  .tab-focus();
+  .box-shadow(none); // override for file inputs
 }


@@ -243,7 +245,12 @@ select:focus {
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input {
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
  float: none;
  margin-left: 0;
 }
@@ -268,9 +275,16 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
+  cursor: not-allowed;
  background-color: @inputDisabledBackground;
  border-color: #ddd;
-  cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
 }


@@ -314,18 +328,19 @@ select:focus:required:invalid {
  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
  margin-top: @baseLineHeight;
  margin-bottom: @baseLineHeight;
-  background-color: @grayLighter;
+  background-color: @formActionsBackground;
  border-top: 1px solid #ddd;
  .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }

 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  display: block;
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap;
+  cursor: not-allowed;
  background-color: @inputBackground;
  border-color: #eee;
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
 }

 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -365,10 +380,13 @@ select:focus:required:invalid {
  input,
  select,
  .uneditable-input {
+    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
    *margin-left: 0;
-    .border-radius(0 3px 3px 0);
+    vertical-align: middle;
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
+    // Make input on top when focused so blue border and shadow always show
    &:focus {
-      position: relative;
      z-index: 2;
    }
  }
@@ -378,8 +396,8 @@ select:focus:required:invalid {
  .add-on {
    display: inline-block;
    width: auto;
-    min-width: 16px;
    height: @baseLineHeight;
+    min-width: 16px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: @baseLineHeight;
@@ -391,7 +409,8 @@ select:focus:required:invalid {
  }
  .add-on,
  .btn {
-    .border-radius(3px 0 0 3px);
+    margin-left: -1px;
+    .border-radius(0);
  }
  .active {
    background-color: lighten(@green, 30);
@@ -403,21 +422,24 @@ select:focus:required:invalid {
  .btn {
    margin-right: -1px;
  }
+  .add-on:first-child,
+  .btn:first-child {
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+  }
 }
 .input-append {
  input,
-  select
+  select,
  .uneditable-input {
-    .border-radius(3px 0 0 3px);
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
  .uneditable-input {
-    border-left-color: #eee;
    border-right-color: #ccc;
+    border-left-color: #eee;
  }
-  .add-on,
-  .btn {
-    margin-left: -1px;
-    .border-radius(0 3px 3px 0);
+  .add-on:last-child,
+  .btn:last-child {
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
 }
 // Remove all border-radius for inputs with both prepend and append
@@ -430,12 +452,12 @@ select:focus:required:invalid {
  .add-on:first-child,
  .btn:first-child {
    margin-right: -1px;
-    .border-radius(3px 0 0 3px);
+    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
  .add-on:last-child,
  .btn:last-child {
    margin-left: -1px;
-    .border-radius(0 3px 3px 0);
+    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
 }

@@ -445,8 +467,10 @@ select:focus:required:invalid {
 // -----------

 .search-query {
-  padding-left: 14px;
  padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0; // remove the default margin on all inputs
  .border-radius(14px);
 }
@@ -470,6 +494,7 @@ select:focus:required:invalid {
  .input-prepend,
  .input-append {
    display: inline-block;
+    .ie7-inline-block();
    margin-bottom: 0;
  }
  // Re-hide hidden elements due to specifity
@@ -503,8 +528,8 @@ select:focus:required:invalid {
 .form-inline .radio input[type="radio"],
 .form-inline .checkbox input[type="checkbox"] {
  float: left;
-  margin-left: 0;
  margin-right: 3px;
+  margin-left: 0;
 }


@@ -537,11 +562,15 @@ legend + .control-group {
  }
  // Move over all input controls and content
  .controls {
-    margin-left: 160px;
-    /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+    // don't inherit the margin of the parent, in this case .controls
    *display: inline-block;
-    *margin-left: 0;
    *padding-left: 20px;
+    margin-left: 160px;
+    *margin-left: 0;
+    &:first-child {
+      *padding-left: 160px;
+    }
  }
  // Remove bottom margin on block level help text since that's accounted for on .control-group
  .help-block {
@@ -0,0 +1,55 @@
+// LABELS & BADGES
+// ---------------
+
+// Base classes
+.label,
+.badge {
+  font-size: @baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: @white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: @grayLight;
+}
+// Set unique padding and border-radii
+.label {
+  padding: 1px 4px 2px;
+  .border-radius(3px);
+}
+.badge {
+  padding: 1px 9px 2px;
+  .border-radius(9px);
+}
+
+// Hover state, but only for links
+a {
+  &.label:hover,
+  &.badge:hover {
+    color: @white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  &-important         { background-color: @errorText; }
+  &-important[href]   { background-color: darken(@errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @orange; }
+  &-warning[href]     { background-color: darken(@orange, 10%); }
+  // Success (green)
+  &-success           { background-color: @successText; }
+  &-success[href]     { background-color: darken(@successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @infoText; }
+  &-info[href]        { background-color: darken(@infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: @grayDark; }
+  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
+}
@@ -1,38 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label {
-  padding: 1px 4px 2px;
-  font-size: @baseFontSize * .846;
-  font-weight: bold;
-  line-height: 13px; // ensure proper line-height if floated
-  color: @white;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @grayLight;
-  .border-radius(3px);
-}
-
-// Hover state
-.label:hover {
-  color: @white;
-  text-decoration: none;
-}
-
-// Colors
-.label-important        { background-color: @errorText; }
-.label-important:hover  { background-color: darken(@errorText, 10%); }
-
-.label-warning          { background-color: @orange; }
-.label-warning:hover    { background-color: darken(@orange, 10%); }
-
-.label-success          { background-color: @successText; }
-.label-success:hover    { background-color: darken(@successText, 10%); }
-
-.label-info             { background-color: @infoText; }
-.label-info:hover       { background-color: darken(@infoText, 10%); }
-
-.label-inverse             { background-color: @grayDark; }
-.label-inverse:hover       { background-color: darken(@grayDark, 10%); }
@@ -11,7 +11,7 @@

 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
-  padding-left: @gridGutterWidth;
  padding-right: @gridGutterWidth;
+  padding-left: @gridGutterWidth;
  .clearfix();
 }
@@ -70,11 +70,11 @@

 // Sizing shortcuts
 // -------------------------
-.size(@height: 5px, @width: 5px) {
+.size(@height, @width) {
  width: @width;
  height: @height;
 }
-.square(@size: 5px) {
+.square(@size) {
  .size(@size, @size);
 }

@@ -98,13 +98,15 @@
  white-space: nowrap;
 }

-// New image replacement
+// CSS image replacement
 // -------------------------
-// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 .hide-text {
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
 }


@@ -114,13 +116,13 @@
 #font {
  #family {
    .serif() {
-      font-family: Georgia, "Times New Roman", Times, serif;
+      font-family: @serifFontFamily;
    }
    .sans-serif() {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: @sansFontFamily;
    }
    .monospace() {
-      font-family: Menlo, Monaco, "Courier New", monospace;
+      font-family: @monoFontFamily;
    }
  }
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
@@ -150,9 +152,8 @@
 .input-block-level {
  display: block;
  width: 100%;
-  min-height: 28px; /* Make inputs at least the height of their button counterpart */
-  /* Makes inputs behave like true block-level elements */
-  .box-sizing(border-box);
+  min-height: 28px;        // Make inputs at least the height of their button counterpart
+  .box-sizing(border-box); // Makes inputs behave like true block-level elements
 }


@@ -190,14 +191,14 @@
 // --------------------------------------------------

 // Border Radius
-.border-radius(@radius: 5px) {
+.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
 }

 // Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
@@ -227,21 +228,21 @@
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
 }
-.translate(@x: 0, @y: 0) {
+.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
 }
-.skew(@x: 0, @y: 0) {
+.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skew(@x, @y);
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
 }
-.translate3d(@x: 0, @y: 0, @z: 0) {
+.translate3d(@x, @y, @z) {
  -webkit-transform: translate(@x, @y, @z);
     -moz-transform: translate(@x, @y, @z);
      -ms-transform: translate(@x, @y, @z);
@@ -249,6 +250,17 @@
          transform: translate(@x, @y, @z);
 }

+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+.backface-visibility(@visibility){
+	-webkit-backface-visibility: @visibility;
+	   -moz-backface-visibility: @visibility;
+	    -ms-backface-visibility: @visibility;
+	        backface-visibility: @visibility;
+}
+
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 .background-clip(@clip) {
@@ -279,18 +291,19 @@
 .user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
+      -ms-user-select: @select;
       -o-user-select: @select;
          user-select: @select;
 }

 // Resize anything
-.resizable(@direction: both) {
+.resizable(@direction) {
  resize: @direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
 }

 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
+.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
  -webkit-column-count: @columnCount;
     -moz-column-count: @columnCount;
          column-count: @columnCount;
@@ -300,9 +313,9 @@
 }

 // Opacity
-.opacity(@opacity: 100) {
+.opacity(@opacity) {
  opacity: @opacity / 100;
-   filter: ~"alpha(opacity=@{opacity})";
+  filter: ~"alpha(opacity=@{opacity})";
 }


@@ -393,7 +406,7 @@
 }
 // Reset filters for IE
 .reset-filter() {
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }


@@ -405,18 +418,17 @@
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider() {
-  height: 1px;
-  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid @white;
-
  // IE7 needs a set width since we gave a height. Restricting just
  // to IE7 to keep the 1px left/right space in other browsers.
  // It is unclear where IE is getting the extra space that we need
  // to negative-margin away, but so it goes.
  *width: 100%;
+  height: 1px;
+  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid @white;
 }

 // Button backgrounds
@@ -424,11 +436,13 @@
 .buttonBackground(@startColor, @endColor) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor);
+  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  .reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    background-color: @endColor;
+    *background-color: darken(@endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -489,8 +503,8 @@

 // Centered container element
 .container-fixed() {
-  margin-left: auto;
  margin-right: auto;
+  margin-left: auto;
  .clearfix();
 }

@@ -507,9 +521,9 @@
  margin-left: @gridGutterWidth * -1;
  .clearfix();
 }
-.makeColumn(@columns: 1) {
+.makeColumn(@columns: 1, @offset: 0) {
  float: left;
-  margin-left: @gridGutterWidth;
+  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }

@@ -531,7 +545,7 @@
    .offsetX (0) {}

    .offset (@columns) {
-      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
@@ -562,23 +576,26 @@
  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

    .spanX (@index) when (@index > 0) {
-      (~"> .span@{index}") { .span(@index); }
+      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .row-fluid {
      width: 100%;
      .clearfix();
-      > [class*="span"] {
+      [class*="span"] {
+        .input-block-level();
        float: left;
        margin-left: @fluidGridGutterWidth;
+        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
      }
-      > [class*="span"]:first-child {
+      [class*="span"]:first-child {
        margin-left: 0;
      }

@@ -56,7 +56,7 @@
  .close { margin-top: 2px; }
 }

-// Body (where all modal content resises)
+// Body (where all modal content resides)
 .modal-body {
  overflow-y: auto;
  max-height: 400px;
@@ -16,12 +16,12 @@

 // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
+  min-height: @navbarHeight;
  padding-left:  20px;
  padding-right: 20px;
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  .border-radius(4px);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
+  .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
 }

 // Set width to auto for default container
@@ -30,28 +30,6 @@
  width: auto;
 }

-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-  .box-shadow(@shadow);
-}
-.btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  .border-radius(1px);
-  .box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}
 // Override the default collapsed state
 .nav-collapse.collapse {
  height: auto;
@@ -69,25 +47,34 @@
  .brand {
    float: left;
    display: block;
-    padding: 8px 20px 12px;
+    // Vertically center the text given @navbarHeight
+    @elementHeight: 20px;
+    padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
    margin-left: -20px; // negative indent to left-align the text down the page
    font-size: 20px;
    font-weight: 200;
    line-height: 1;
-    color: @white;
+    color: @navbarBrandColor;
  }
  // Plain text in topbar
  .navbar-text {
    margin-bottom: 0;
    line-height: @navbarHeight;
  }
+  // Janky solution for now to account for links outside the .nav
+  .navbar-link {
+    color: @navbarLinkColor;
+    &:hover {
+      color: @navbarLinkColorHover;
+    }
+  }
  // Buttons in navbar
  .btn,
  .btn-group {
    .navbarVerticalAlign(30px); // Vertically center in navbar
  }
  .btn-group .btn {
-    margin-top: 0; // then undo the margin here so we don't accidentally double it
+    margin: 0; // then undo the margin here so we don't accidentally double it
  }
 }

@@ -133,8 +120,7 @@
    color: @white;
    background-color: @navbarSearchBackground;
    border: 1px solid @navbarSearchBorder;
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
-    .box-shadow(@shadow);
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)");
    .transition(none);

    // Placeholder text gets special styles; can't be a grouped selector
@@ -218,12 +204,29 @@
 // Links
 .navbar .nav > li > a {
  float: none;
-  padding: 10px 10px 11px;
+  // Vertically center the text given @navbarHeight
+  @elementHeight: 20px;
+  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
  color: @navbarLinkColor;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
+// Buttons
+.navbar .btn {
+  display: inline-block;
+  padding: 4px 10px 4px;
+  // Vertically center the button given @navbarHeight
+  @elementHeight: 28px;
+  margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
+  line-height: @baseLineHeight;
+}
+.navbar .btn-group {
+  margin: 0;
+  // Vertically center the button given @navbarHeight
+  @elementHeight: 28px;
+  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
+}
 // Hover
 .navbar .nav > li > a:hover {
  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -255,6 +258,28 @@
  margin-right: 0;
 }

+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+}
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  .border-radius(1px);
+  .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}


 // Dropdown menus
@@ -262,8 +287,6 @@

 // Menu position and menu carets
 .navbar .dropdown-menu {
-  margin-top: 1px;
-  .border-radius(4px);
  &:before {
    content: '';
    display: inline-block;
@@ -303,31 +326,31 @@
  }
 }
 // Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
  border-top-color: @white;
  border-bottom-color: @white;
 }
-.navbar .nav .active .caret {
+.navbar .nav li.dropdown.active .caret {
  .opacity(100);
 }

 // Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .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 {
  background-color: transparent;
 }

 // Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
  color: @white;
 }

 // Right aligned menus need alt position
 // TODO: rejigger this at some point to simplify the selectors
-.navbar .nav.pull-right .dropdown-menu,
-.navbar .nav .dropdown-menu.pull-right {
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
  left: auto;
  right: 0;
  &:before {
@@ -21,6 +21,11 @@
  background-color: @grayLighter;
 }

+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
 // Nav headers (for dropdowns and lists)
 .nav .nav-header {
  display: block;
@@ -98,12 +103,10 @@
 .nav-tabs {
  border-bottom: 1px solid #ddd;
 }
-
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
  margin-bottom: -1px;
 }
-
 // Actual tabs (as links)
 .nav-tabs > li > a {
  padding-top: 8px;
@@ -125,6 +128,7 @@
  cursor: default;
 }

+
 // PILLS
 // -----

@@ -189,14 +193,11 @@
 // DROPDOWNS
 // ---------

-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  .border-radius(4px);
+  .border-radius(4px); // make rounded corners match the pills
 }

 // Default dropdown links
@@ -233,14 +234,14 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover {
  color: @white;
  background-color: @grayLight;
  border-color: @grayLight;
 }
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
  border-top-color: @white;
  border-bottom-color: @white;
  .opacity(100);
@@ -265,14 +266,13 @@
  .clearfix();
 }
 .tab-content {
-  display: table; // prevent content from running below tabs
-  width: 100%;
+  overflow: auto; // prevent content from running below tabs
 }

 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
  border-bottom: 0;
 }

@@ -290,22 +290,22 @@
 // BOTTOM
 // ------

-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
  .border-radius(0 0 4px 4px);
  &:hover {
    border-bottom-color: transparent;
    border-top-color: #ddd;
  }
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
  border-color: transparent #ddd #ddd #ddd;
 }

@@ -313,51 +313,51 @@
 // ------------

 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
  float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
 }

 // Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  .border-radius(4px 0 0 4px);
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
  border-color: @grayLighter #ddd @grayLighter @grayLighter;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: @white;
 }

 // Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  .border-radius(0 4px 4px 0);
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
  border-color: @grayLighter @grayLighter @grayLighter #ddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: @white;
 }
@@ -7,26 +7,32 @@

 // Webkit
@-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }

 // Firefox
@-moz-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }

 // IE9
@-ms-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
  from  { background-position: 0 0; }
  to    { background-position: 40px 0; }
 }

 // Spec
@keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }


@@ -68,6 +74,8 @@
 .progress.active .bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
 }

@@ -75,10 +75,10 @@ sub {
 // -------------------------

 img {
-  height: auto;
+  max-width: 100%; // Make images inherently responsive
+  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
-  vertical-align: middle;
 }

 // Forms
@@ -111,10 +111,10 @@ input[type="submit"] {
  -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
-  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
+  -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
@@ -0,0 +1,26 @@
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  #grid > .core(70px, 30px);
+
+  // Fluid grid
+  #grid > .fluid(5.982905983%, 2.564102564%);
+
+  // Input grid
+  #grid > .input(70px, 30px);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}
@@ -0,0 +1,149 @@
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: @baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  // Modals
+  .modal {
+    position: absolute;
+    top:   10px;
+    left:  10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
+
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 767px) {
+
+  // Padding to set content in a bit
+  body {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  // Negative indent the now static "fixed" navbar
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+  // Remove padding on container given explicit padding set on body
+  .container-fluid {
+    padding: 0;
+  }
+
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin-left: 0;
+  }
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    .input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+
+}
@@ -0,0 +1,17 @@
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  #grid > .core(42px, 20px);
+
+  // Fluid grid
+  #grid > .fluid(5.801104972%, 2.762430939%);
+
+  // Input grid
+  #grid > .input(42px, 20px);
+
+  // No need to reset .thumbnails here since it's the same @gridGutterWidth
+
+}
--- a/Show More
+++ b/Show More