Merge branch '3.0.0-wip' into bs3_theme

Conflicts: dist/css/bootstrap.min.css
2024-11-29 11:24:18 +01:00 · 2013-08-06 18:29:54 -07:00 · 2013-08-06 18:29:54 -07:00 · 402dbfb617
commit 402dbfb617
parent 7e19b6b02c 41bdd1a482
54 changed files with 1667 additions and 1033 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -2,4 +2,8 @@ language: node_js
 node_js:
  - 0.8
 before_script:
-  - npm install -g grunt-cli
+  - npm install -g grunt-cli
+env:
+  global:
+  - secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
+  - secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -48,7 +48,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
 - Multiple-line approach (one property and value per line)
 - Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
 - End all lines with a semi-colon
- For multiple, comma-separated selectors, place each selector on it's own line
+- For multiple, comma-separated selectors, place each selector on its own line
 - Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).

 ### JS
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,127 +1,149 @@
 /* jshint node: true */
+
 module.exports = function(grunt) {
-    "use strict";
+  "use strict";

-    // Project configuration.
-    grunt.initConfig({
-        // Metadata.
-        pkg: grunt.file.readJSON('package.json'),
-        banner: '/**\n' +
-                '* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
-                '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
-                '* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
-                '*/\n',
-        jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
-        // Task configuration.
-        clean: {
-            dist: ['dist']
+  // Project configuration.
+  grunt.initConfig({
+
+    // Metadata.
+    pkg: grunt.file.readJSON('package.json'),
+    banner: '/**\n' +
+              '* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
+              '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+              '* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
+              '*/\n',
+    jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
+
+    // Task configuration.
+    clean: {
+      dist: ['dist']
+    },
+
+    jshint: {
+      options: {
+        jshintrc: 'js/.jshintrc'
+      },
+      gruntfile: {
+        src: 'Gruntfile.js'
+      },
+      src: {
+        src: ['js/*.js']
+      },
+      test: {
+        src: ['js/tests/unit/*.js']
+      }
+    },
+    concat: {
+      options: {
+        banner: '<%= banner %><%= jqueryCheck %>',
+        stripBanners: false
+      },
+      bootstrap: {
+        src: [
+          'js/transition.js',
+          'js/alert.js',
+          'js/button.js',
+          'js/carousel.js',
+          'js/collapse.js',
+          'js/dropdown.js',
+          'js/modal.js',
+          'js/tooltip.js',
+          'js/popover.js',
+          'js/scrollspy.js',
+          'js/tab.js',
+          'js/affix.js'
+        ],
+        dest: 'dist/js/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      bootstrap: {
+        src: ['<%= concat.bootstrap.dest %>'],
+        dest: 'dist/js/<%= pkg.name %>.min.js'
+      }
+    },
+
+    recess: {
+      options: {
+        compile: true
+      },
+      bootstrap: {
+        src: ['less/bootstrap.less'],
+        dest: 'dist/css/<%= pkg.name %>.css'
+      },
+      min: {
+        options: {
+          compress: true
        },
-        concat: {
-            options: {
-                banner: '<%= banner %><%= jqueryCheck %>',
-                stripBanners: false
-            },
-            bootstrap: {
-                src: ['js/transition.js', 'js/alert.js', 'js/button.js', 'js/carousel.js', 'js/collapse.js', 'js/dropdown.js', 'js/modal.js', 'js/tooltip.js', 'js/popover.js', 'js/scrollspy.js', 'js/tab.js', 'js/affix.js'],
-                dest: 'dist/js/<%= pkg.name %>.js'
-            }
-        },
-        jshint: {
-            options: {
-                jshintrc: 'js/.jshintrc'
-            },
-            gruntfile: {
-                src: 'Gruntfile.js'
-            },
-            src: {
-                src: ['js/*.js']
-            },
-            test: {
-                src: ['js/tests/unit/*.js']
-            }
-        },
-        recess: {
-            options: {
-                compile: true
-            },
-            bootstrap: {
-                files: {
-                    'dist/css/bootstrap.css': ['less/bootstrap.less']
-                }
-            },
-            min: {
-                options: {
-                    compress: true
-                },
-                files: {
-                    'dist/css/bootstrap.min.css': ['less/bootstrap.less']
-                }
-            }
-        },
-        uglify: {
-            options: {
-                banner: '<%= banner %>'
-            },
-            bootstrap: {
-                files: {
-                    'dist/js/<%= pkg.name %>.min.js': ['<%= concat.bootstrap.dest %>']
-                }
-            }
-        },
-        qunit: {
-            options: {
-                inject: 'js/tests/unit/phantom.js'
-            },
-            files: ['js/tests/*.html']
-        },
-        connect: {
-            server: {
-                options: {
-                    port: 3000,
-                    base: '.'
-                }
-            }
-        },
-        watch: {
-            src: {
-                files: '<%= jshint.src.src %>',
-                tasks: ['jshint:src', 'qunit']
-            },
-            test: {
-                files: '<%= jshint.test.src %>',
-                tasks: ['jshint:test', 'qunit']
-            },
-            recess: {
-                files: 'less/*.less',
-                tasks: ['recess']
-            }
+        src: ['less/bootstrap.less'],
+        dest: 'dist/css/<%= pkg.name %>.min.css'
+      }
+    },
+
+    qunit: {
+      options: {
+        inject: 'js/tests/unit/phantom.js'
+      },
+      files: ['js/tests/*.html']
+    },
+    connect: {
+      server: {
+        options: {
+          port: 3000,
+          base: '.'
        }
-    });
+      }
+    },
+
+    watch: {
+      src: {
+        files: '<%= jshint.src.src %>',
+        tasks: ['jshint:src', 'qunit']
+      },
+      test: {
+        files: '<%= jshint.test.src %>',
+        tasks: ['jshint:test', 'qunit']
+      },
+      recess: {
+        files: 'less/*.less',
+        tasks: ['recess']
+      }
+    }
+  });


-    // These plugins provide necessary tasks.
-    grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-concat');
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-qunit');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-recess');
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-qunit');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('browserstack-runner');


-    // Test task.
-    grunt.registerTask('test', ['jshint', 'qunit']);
+  // Test task.
+  var testSubtasks = ['jshint', 'qunit'];
+  if (process.env.TRAVIS) {
+    testSubtasks.push('browserstack_runner');
+  }
+  grunt.registerTask('test', testSubtasks);

-    // JS distribution task.
-    grunt.registerTask('dist-js', ['concat', 'uglify']);
+  // JS distribution task.
+  grunt.registerTask('dist-js', ['concat', 'uglify']);

-    // CSS distribution task.
-    grunt.registerTask('dist-css', ['recess']);
+  // CSS distribution task.
+  grunt.registerTask('dist-css', ['recess']);

-    // Full distribution task.
-    grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
+  // Full distribution task.
+  grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);

-    // Default task.
-    grunt.registerTask('default', ['test', 'dist']);
+  // Default task.
+  grunt.registerTask('default', ['test', 'dist']);
 };
--- a/README.md
+++ b/README.md
@ -63,13 +63,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
 ### Available Grunt commands

 #### Build - `grunt`
-Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires recess and uglify-js.**
+Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**

 #### Only compile CSS and JavaScript - `grunt dist`
-`grunt dist` creates the `/dist` directory with compiled files. **Requires recess and uglify-js.**
+`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**

 #### Tests - `grunt test`
-Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
+Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**

 #### Watch - `grunt watch`
 This is a convenience method for watching just Less files and automatically building them whenever you save.
--- a/_includes/ads.html
+++ b/_includes/ads.html
@ -1 +1 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -4,7 +4,7 @@
 <script src="{{ page.base_url }}assets/js/jquery.js"></script>
 <script src="{{ page.base_url }}dist/js/bootstrap.js"></script>

-<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+<script src="http://platform.twitter.com/widgets.js"></script>
 <script src="{{ page.base_url }}assets/js/holder.js"></script>

 <script src="{{ page.base_url }}assets/js/application.js"></script>
@ -15,7 +15,6 @@
  var _gauges = _gauges || [];
  (function() {
    var t   = document.createElement('script');
-    t.type  = 'text/javascript';
    t.async = true;
    t.id    = 'gauges-tracker';
    t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
--- a/_includes/header.html
+++ b/_includes/header.html
@ -31,12 +31,12 @@
                <link rel="apple-touch-icon-precomposed" href="{{ page.base_url }}assets/ico/apple-touch-icon-57-precomposed.png">
                               <link rel="shortcut icon" href="{{ page.base_url }}assets/ico/favicon.png">

-<script type="text/javascript">
+<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-146052-10']);
  _gaq.push(['_trackPageview']);
  (function() {
-    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    var ga = document.createElement('script'); ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
--- a/_includes/nav-components.html
+++ b/_includes/nav-components.html
@ -61,6 +61,8 @@
    <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
    <li><a href="#navbar-static-top">Static top navbar</a></li>
    <li><a href="#navbar-responsive">Responsive navbar</a></li>
+    <li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
+    <li><a href="#navbar-inverted">Inverted navbar</a></li>
  </ul>
 </li>
 <li><a href="#breadcrumbs">Breadcrumbs</a></li>
@ -80,12 +82,17 @@
    <li><a href="#type-components-page-header">Page header</a></li>
  </ul>
 </li>
-<li><a href="#thumbnails">Thumbnails</a></li>
+<li>
+  <a href="#thumbnails">Thumbnails</a>
+  <ul class="nav">
+    <li><a href="#thumbnails-default">Default thumbnails</a></li>
+    <li><a href="#thumbnails-custom-content">Custom content</a></li>
+  </ul>
+</li>
 <li>
  <a href="#alerts">Alerts</a>
  <ul class="nav">
    <li><a href="#alerts-default">Default alert</a></li>
-    <li><a href="#alerts-block">Block alerts</a></li>
    <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
    <li><a href="#alerts-links">Links in alerts</a></li>
  </ul>
@ -100,7 +107,13 @@
    <li><a href="#progress-stacked">Stacked</a></li>
  </ul>
 </li>
-<li><a href="#media">Media object</a></li>
+<li>
+  <a href="#media">Media object</a>
+  <ul class="nav">
+    <li><a href="#media-default">Default media</a></li>
+    <li><a href="#media-list">Media list</a></li>
+  </ul>
+</li>
 <li>
  <a href="#list-group">List group</a>
  <ul class="nav">
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@ -56,6 +56,7 @@
    <li><a href="#forms-inline">Inline variation</a></li>
    <li><a href="#forms-horizontal">Horizontal variation</a></li>
    <li><a href="#forms-controls">Supported controls</a></li>
+    <li><a href="#forms-controls-static">Static form control</a></li>
    <li><a href="#forms-control-states">Control states</a></li>
    <li><a href="#forms-control-sizes">Control sizing</a></li>
    <li><a href="#forms-help-text">Help text</a></li>
--- a/_includes/nav-getting-started.html
+++ b/_includes/nav-getting-started.html
@ -14,9 +14,12 @@
 <li>
  <a href="#browsers">Browser support</a>
 </li>
+<li>
+  <a href="#third-parties">Third party support</a>
+</li>
 <li>
  <a href="#license-faqs">License FAQs</a>
 </li>
 <li>
  <a href="#customizing">Customizing Bootstrap</a>
-</li>
+</li>
--- a/_includes/nav-main.html
+++ b/_includes/nav-main.html
@ -1,11 +1,11 @@
 <div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
  <div class="container">
-    <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
+    <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
    <div class="nav-collapse collapse bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@ -123,8 +123,8 @@ body {

 /* Download button */
 .bs-masthead .btn-outline {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 20px;
+  margin-bottom: 20px;
  padding: 18px 24px;
  font-size: 21px;
 }
@ -208,8 +208,8 @@ body {
  position: relative;
 }

-.bs-docs-section + .bs-docs-section {
-  margin-top: 80px;
+.bs-docs-section h1[id] {
+  padding-top: 80px;
 }

 /* Ads in page headers */
@ -833,7 +833,7 @@ input.focused {
  .bs-masthead h1 {
    font-size: 100px;
  }
-  .bs-masthead p {
+  .bs-masthead .lead {
    margin-left: 15%;
    margin-right: 15%;
    font-size: 30px;
@ -878,7 +878,6 @@ input.focused {
    width: 330px !important;
    min-height: 132px;
  }
-
 }

 /* Large desktops and up */
--- a/assets/js/application.js
+++ b/assets/js/application.js
@ -20,14 +20,6 @@
      e.preventDefault()
    })

-    $body.on('click', '.bs-sidenav [href^=#]', function (e) {
-      var $target = $(this.getAttribute('href'))
-
-      e.preventDefault() // prevent browser scroll
-
-      $window.scrollTop($target.offset().top - navHeight + 5)
-    })
-
    // back to top
    setTimeout(function () {
      var $sideBar = $('.bs-sidebar')
--- a/browserstack.json
+++ b/browserstack.json
@ -0,0 +1,37 @@
+{
+  "username": "--secure--",
+  "key": "--secure--",
+  "test_path": "js/tests/index.html",
+  "browsers":  [
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "safari",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "7"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "7"
+    }
+  ]
+}
--- a/components.html
+++ b/components.html
@ -50,7 +50,7 @@ base_url: "../"
 {% endhighlight %}

    <h3 id="dropdowns-headers">Dropdown headers</h3>
-    <p>Add a header to break up label sections of actions in any dropdown menu.</p>
+    <p>Add a header to label sections of actions in any dropdown menu.</p>
    <div class="bs-example">
      <div class="dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
@ -155,12 +155,11 @@ base_url: "../"
 {% endhighlight %}

    <h3 id="btn-groups-nested">Nested button groups</h3>
-    <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
+    <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
    <div class="bs-example">
      <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
-        <button type="button" class="btn btn-default">3</button>

        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@ -170,11 +169,27 @@ base_url: "../"
          <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
-            <li><a href="#">Dropdown link</a></li>
-           </ul>
+          </ul>
        </div>
      </div>
    </div>
+{% highlight html %}
+<div class="btn-group">
+  <button type="button" class="btn btn-default">1</button>
+  <button type="button" class="btn btn-default">2</button>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      Dropdown
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a href="#">Dropdown link</a></li>
+      <li><a href="#">Dropdown link</a></li>
+    </ul>
+  </div>
+</div>
+{% endhighlight %}

    <h3 id="btn-groups-vertical">Vertical button groups</h3>
    <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
@ -231,7 +246,7 @@ base_url: "../"
    </div>

    <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
-    <p>Turn a button into dropdown toggle with some basic markup changes.</p>
+    <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
    <div class="bs-example">
      <div class="btn-toolbar" style="margin-bottom: 10px;">
        <div class="btn-group">
@ -385,7 +400,7 @@ base_url: "../"
    <div class="bs-example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
-          <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
            Large button <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
@ -397,7 +412,7 @@ base_url: "../"
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
-          <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
            Small button <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
@ -408,12 +423,24 @@ base_url: "../"
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+            Extra small button <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
    </div><!-- /example -->
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
@ -423,13 +450,22 @@ base_url: "../"

 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
 </div>
+
+<!-- Extra small button group -->
+<div class="btn-group">
+  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+    Extra small button <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    ...
+  </ul>
 </div>
 {% endhighlight %}

@ -535,8 +571,8 @@ base_url: "../"
    <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
    <form class="bs-example bs-example-form">
      <div class="input-group">
-        <span class="input-group-addon input-large">@</span>
-        <input type="text" class="form-control input-large" placeholder="Username">
+        <span class="input-group-addon input-lg">@</span>
+        <input type="text" class="form-control input-lg" placeholder="Username">
      </div>
      <br>
      <div class="input-group">
@ -545,14 +581,14 @@ base_url: "../"
      </div>
      <br>
      <div class="input-group">
-        <span class="input-group-addon input-small">@</span>
-        <input type="text" class="form-control input-small" placeholder="Username">
+        <span class="input-group-addon input-sm">@</span>
+        <input type="text" class="form-control input-sm" placeholder="Username">
      </div>
    </form>
 {% highlight html %}
 <div class="input-group">
-  <span class="input-group-addon input-large">@</span>
-  <input type="text" class="form-control input-large" placeholder="Username">
+  <span class="input-group-addon input-lg">@</span>
+  <input type="text" class="form-control input-lg" placeholder="Username">
 </div>

 <div class="input-group">
@ -561,8 +597,8 @@ base_url: "../"
 </div>

 <div class="input-group">
-  <span class="input-group-addon input-small">@</span>
-  <input type="text" class="form-control input-small" placeholder="Username">
+  <span class="input-group-addon input-sm">@</span>
+  <input type="text" class="form-control input-sm" placeholder="Username">
 </div>
 {% endhighlight %}

@ -1276,7 +1312,7 @@ body { padding-bottom: 70px; }
    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="navbar-brand" href="#">Title</a>

-    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
+    <!-- Place everything within .nav-collapse to hide it until above 768px -->
    <div class="nav-collapse collapse navbar-responsive-collapse">
      ...
    </div><!-- /.nav-collapse -->
@ -1290,7 +1326,49 @@ body { padding-bottom: 70px; }
    </div>


-    <h2>Inverted variation</h2>
+    <h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
+    <p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
+    <div class="bs-example">
+      <div class="navbar">
+        <div class="container">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Title</a>
+          <div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
+            <ul class="nav navbar-nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+            </ul>
+            <form class="navbar-form pull-left" action="">
+              <input type="text" class="form-control col-lg-8" placeholder="Search">
+            </form>
+          </div><!-- /.nav-collapse -->
+        </div><!-- /.container -->
+      </div><!-- /.navbar -->
+    </div><!-- /example -->
+{% highlight html %}
+<div class="navbar">
+  <div class="container">
+		...
+
+    <div class="collapse nav-collapse nav-collapse-scrollable">
+      ...
+    </div><!-- /.nav-collapse -->
+
+  </div><!-- /.container -->
+</div><!-- /.navbar -->
+{% endhighlight %}
+
+
+    <h2 id="navbar-inverted">Inverted variation</h2>
    <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
    <div class="bs-example">
      <div class="navbar navbar-inverse">
@ -1446,10 +1524,10 @@ body { padding-bottom: 70px; }


    <h3>Sizes</h3>
-    <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code>  for additional sizes.</p>
+    <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
    <div class="bs-example">
      <div>
-        <ul class="pagination pagination-large">
+        <ul class="pagination pagination-lg">
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
@ -1471,7 +1549,7 @@ body { padding-bottom: 70px; }
        </ul>
      </div>
      <div>
-        <ul class="pagination pagination-small">
+        <ul class="pagination pagination-sm">
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
@ -1483,9 +1561,9 @@ body { padding-bottom: 70px; }
      </div>
    </div>
 {% highlight html %}
-<ul class="pagination pagination-large">...</ul>
-<ul class="pagination pagination">...</ul>
-<ul class="pagination pagination-small">...</ul>
+<ul class="pagination pagination-lg">...</ul>
+<ul class="pagination">...</ul>
+<ul class="pagination pagination-sm">...</ul>
 {% endhighlight %}


@ -1551,28 +1629,28 @@ body { padding-bottom: 70px; }

    <h3>Example</h3>
    <div class="bs-example">
-      <h1>Example heading <span class="label">New</span></h1>
-      <h2>Example heading <span class="label">New</span></h2>
-      <h3>Example heading <span class="label">New</span></h3>
-      <h4>Example heading <span class="label">New</span></h4>
-      <h5>Example heading <span class="label">New</span></h5>
-      <h6>Example heading <span class="label">New</span></h6>
+      <h1>Example heading <span class="label label-default">New</span></h1>
+      <h2>Example heading <span class="label label-default">New</span></h2>
+      <h3>Example heading <span class="label label-default">New</span></h3>
+      <h4>Example heading <span class="label label-default">New</span></h4>
+      <h5>Example heading <span class="label label-default">New</span></h5>
+      <h6>Example heading <span class="label label-default">New</span></h6>
    </div>
 {% highlight html %}
-<h3>Example heading <span class="label">New</span></h3>
+<h3>Example heading <span class="label label-default">New</span></h3>
 {% endhighlight %}

    <h3>Available variations</h3>
    <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
    <div class="bs-example">
-      <span class="label">Default</span>
+      <span class="label label-default">Default</span>
      <span class="label label-success">Success</span>
      <span class="label label-warning">Warning</span>
      <span class="label label-danger">Danger</span>
      <span class="label label-info">Info</span>
    </div>
 {% highlight html %}
-<span class="label">Default</span>
+<span class="label label-default">Default</span>
 <span class="label label-success">Success</span>
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
@ -1659,14 +1737,14 @@ body { padding-bottom: 70px; }
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-        <p><a class="btn btn-primary btn-large">Learn more</a></p>
+        <p><a class="btn btn-primary btn-lg">Learn more</a></p>
      </div>
    </div>
 {% highlight html %}
 <div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
-  <p><a class="btn btn-primary btn-large">Learn more</a></p>
+  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
 </div>
 {% endhighlight %}

@ -1694,7 +1772,7 @@ body { padding-bottom: 70px; }
    </div>
    <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>

-    <h3>Default thumbnails</h3>
+    <h3 id="thumbnails-default">Default thumbnails</h3>
    <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
    <div class="bs-example">
      <div class="row">
@ -1731,7 +1809,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}

-    <h3>Custom content thumbnails</h3>
+    <h3 id="thumbnails-custom-content">Custom content thumbnails</h3>
    <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
    <div class="bs-example">
      <div class="row">
@ -1813,23 +1891,6 @@ body { padding-bottom: 70px; }
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
-{% endhighlight %}
-
-    <h3 id="alerts-block">Block alerts</h3>
-    <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
-    <div class="bs-example">
-      <div class="alert alert-block">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <h4>Warning!</h4>
-        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-      </div>
-    </div>
-{% highlight html %}
-<div class="alert alert-block">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <h4>Warning!</h4>
-  <p>...</p>
-</div>
 {% endhighlight %}

    <h3 id="alerts-alternatives">Contextual alternatives</h3>
@ -2016,7 +2077,7 @@ body { padding-bottom: 70px; }
    </div>
    <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>

-    <h3>Default example</h3>
+    <h3 id="media-default">Default media</h3>
    <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
    <div class="bs-example">
      <div class="media">
@ -2059,7 +2120,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}

-    <h3>Media list</h3>
+    <h3 id="media-list">Media list</h3>
    <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
    <div class="bs-example">
      <ul class="media-list">
@ -2367,7 +2428,7 @@ body { padding-bottom: 70px; }
        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        <!-- List group -->
-        <ul class="list-group list-group-flush">
+        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
@ -2383,7 +2444,7 @@ body { padding-bottom: 70px; }
  <p>...</p>

  <!-- List group -->
-  <ul class="list-group list-group-flush">
+  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
@ -2419,20 +2480,20 @@ body { padding-bottom: 70px; }
    <h3>Optional classes</h3>
    <p>Control padding and rounded corners with two optional modifier classes.</p>
    <div class="bs-example">
-      <div class="well well-large">
+      <div class="well well-lg">
        Look, I'm in a well!
      </div>
    </div>
 {% highlight html %}
-<div class="well well-large">...</div>
+<div class="well well-lg">...</div>
 {% endhighlight %}

    <div class="bs-example">
-      <div class="well well-small">
+      <div class="well well-sm">
        Look, I'm in a well!
      </div>
    </div>
 {% highlight html %}
-<div class="well well-small">...</div>
+<div class="well well-sm">...</div>
 {% endhighlight %}
  </div>
--- a/css.html
+++ b/css.html
@ -34,7 +34,7 @@ base_url: "../"
    <h3 id="overview-responsive-images">Responsive images</h3>
    <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
 {% highlight html %}
-<img src="..." class="img-responsive" alt="Reponsive image">
+<img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}

    <h3 id="overview-type-links">Typography and links</h3>
@ -69,7 +69,7 @@ base_url: "../"
    </div>
    <p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
    <p class="lead">
-      <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-large">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
+      <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-lg">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
    </p>
  </div>

@ -91,7 +91,7 @@ base_url: "../"
          <tr>
            <th></th>
            <th>
-              Tiny devices
+              Extra small devices
              <small>Phones (&lt;768px)</small>
            </th>
            <th>
@ -148,8 +148,8 @@ base_url: "../"
          </tr>
          <tr>
            <th>Offsets</th>
-            <td colspan="2" class="text-muted">N/A</td>
-            <td colspan="2">Yes</td>
+            <td colspan="1" class="text-muted">N/A</td>
+            <td colspan="3">Yes</td>
          </tr>
          <tr>
            <th>Column ordering</th>
@ -263,32 +263,32 @@ base_url: "../"
    <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
    <div class="bs-docs-grid">
      <div class="row show-grid">
-        <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
-        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+        <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
      </div>
      <div class="row show-grid">
-        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
-        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
-        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
      </div>
      <div class="row show-grid">
-        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
-        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
+        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
      </div>
    </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
-  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
 </div>
 <div class="row">
-  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
-  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
-  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
 </div>
 <div class="row">
-  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
-  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
+  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
 </div>
 {% endhighlight %}

@ -299,31 +299,31 @@ base_url: "../"
    </div>

    <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
    <div class="bs-docs-grid">
      <div class="row show-grid">
        <div class="col-lg-4">4</div>
-        <div class="col-lg-4 col-offset-4">4 offset 4</div>
+        <div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
      </div><!-- /row -->
      <div class="row show-grid">
-        <div class="col-lg-3 col-offset-3">3 offset 3</div>
-        <div class="col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
      </div><!-- /row -->
      <div class="row show-grid">
-        <div class="col-lg-6 col-offset-3">6 offset 3</div>
+        <div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
      </div><!-- /row -->
    </div>
 {% highlight html %}
 <div class="row">
  <div class="col-lg-4">...</div>
-  <div class="col-lg-4 col-offset-4">...</div>
+  <div class="col-lg-4 col-lg-offset-4">...</div>
 </div>
 <div class="row">
-  <div class="col-lg-3 col-offset-3">3 offset 3</div>
-  <div class="col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
 </div>
 <div class="row">
-  <div class="col-lg-6 col-offset-3">...</div>
+  <div class="col-lg-6 col-lg-offset-3">...</div>
 </div>
 {% endhighlight %}

@ -360,16 +360,16 @@ base_url: "../"
 {% endhighlight %}

    <h3 id="grid-column-ordering">Column ordering</h3>
-    <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
+    <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
    <div class="row show-grid">
-      <div class="col-lg-9 col-push-3">9</div>
-      <div class="col-lg-3 col-pull-9">3</div>
+      <div class="col-lg-9 col-lg-push-3">9</div>
+      <div class="col-lg-3 col-lg-pull-9">3</div>
    </div>

 {% highlight html %}
 <div class="row">
-  <div class="col-lg-9 col-push-3">9</div>
-  <div class="col-lg-3 col-pull-9">3</div>
+  <div class="col-lg-9 col-lg-push-3">9</div>
+  <div class="col-lg-3 col-lg-pull-9">3</div>
 </div>
 {% endhighlight %}

@ -807,7 +807,7 @@ base_url: "../"
 {% endhighlight %}

    <h4>Horizontal description</h4>
-    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
    <div class="bs-example">
      <dl class="dl-horizontal">
        <dt>Description lists</dt>
@ -1257,10 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}


-    <h2>Optional layouts</h2>
-    <p>Included with Bootstrap are optional form layouts for common use cases.</p>
-
-    <h3 id="forms-inline">Inline form</h3>
+    <h3 id="forms-inline">Inline form</h2>
    <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
    <div class="bs-callout bs-callout-danger">
      <h4>Requires custom widths</h4>
@ -1289,7 +1286,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}

-    <h3 id="forms-horizontal">Horizontal form</h3>
+    <h2 id="forms-horizontal">Horizontal form</h2>
    <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
    <form class="bs-example form-horizontal">
      <div class="form-group">
@ -1302,11 +1299,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
        <label for="inputPassword" class="col-lg-2 control-label">Password</label>
        <div class="col-lg-10">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-lg-offset-2 col-lg-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-lg-offset-2 col-lg-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
@ -1323,11 +1328,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    <label for="inputPassword" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-lg-offset-2 col-lg-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
@ -1469,6 +1482,39 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}


+    <h2 id="forms-controls-static">Static text in horizontal forms</h2>
+    <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+    <form class="bs-example form-horizontal">
+      <div class="form-group">
+        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+        <div class="col-lg-10">
+          <p class="form-control-static">email@example.com</p>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+        <div class="col-lg-10">
+          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+        </div>
+      </div>
+    </form>
+{% highlight html %}
+<form class="form-horizontal">
+  <div class="form-group">
+    <label for="inputEmail2" class="col-lg-2 control-label">Email</label>
+    <div class="col-lg-10">
+      <p class="form-control-static">email@example.com</p>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword2" class="col-lg-2 control-label">Password</label>
+    <div class="col-lg-10">
+      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+

    <h2 id="forms-control-states">Form control states</h2>
    <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
@ -1504,12 +1550,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
      <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
    </div>

-    <form class="bs-example form-inline">
+    <form class="bs-example">
      <fieldset disabled>
-        <input type="text" class="form-control" placeholder="Disabled input">
-        <select class="form-control">
-          <option>Disabled select</option>
-        </select>
+        <div class="form-group">
+          <label for="disabledInput">Disabled input</label>
+          <input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
+        </div>
+        <div class="form-group">
+          <label for="disabledInput">Disabled select menu</label>
+          <select id="disabledSelect" class="form-control">
+            <option>Disabled select</option>
+          </select>
+        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Can't check this
@ -1521,10 +1573,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-inline">
  <fieldset disabled>
-    <input type="text" class="form-control" placeholder="Disabled input">
-    <select class="form-control">
-      <option>Disabled select</option>
-    </select>
+    <div class="form-group">
+      <label for="disabledInput">Disabled input</label>
+      <input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
+    </div>
+    <div class="form-group">
+      <label for="disabledInput">Disabled select menu</label>
+      <select id="disabledSelect" class="form-control">
+        <option>Disabled select</option>
+      </select>
+    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
@ -1536,7 +1594,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}

    <h3 id="forms-validation">Validation states</h3>
-    <p>Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
+    <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>

    <form class="bs-example">
      <div class="form-group has-warning">
@ -1569,35 +1627,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.


    <h2 id="forms-control-sizes">Control sizing</h2>
-    <p>Set heights using classes like <code>.input-large</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
+    <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>

    <h3>Height sizing</h3>
    <p>Create larger or smaller form controls that match button sizes.</p>
    <form class="bs-example bs-example-control-sizing">
      <div class="controls docs-input-sizes">
-        <input class="form-control input-large" type="text" placeholder=".input-large">
+        <input class="form-control input-lg" type="text" placeholder=".input-lg">
        <input type="text" class="form-control" placeholder="Default input">
-        <input class="form-control input-small" type="text" placeholder=".input-small">
+        <input class="form-control input-sm" type="text" placeholder=".input-sm">

-        <select class="form-control input-large">
-          <option value="">.input-large</option>
+        <select class="form-control input-lg">
+          <option value="">.input-lg</option>
        </select>
        <select class="form-control">
          <option value="">Default select</option>
        </select>
-        <select class="form-control input-small">
-          <option value="">.input-small</option>
+        <select class="form-control input-sm">
+          <option value="">.input-sm</option>
        </select>
      </div>
    </form>
 {% highlight html %}
-<input class="form-control input-large" type="text" placeholder=".input-large">
+<input class="form-control input-lg" type="text" placeholder=".input-lg">
 <input class="form-control" type="text" placeholder="Default input">
-<input class="form-control input-small" type="text" placeholder=".input-small">
+<input class="form-control input-sm" type="text" placeholder=".input-sm">

-<select class="form-control input-large">...</select>
+<select class="form-control input-lg">...</select>
 <select class="form-control">...</select>
-<select class="form-control input-small">...</select>
+<select class="form-control input-sm">...</select>
 {% endhighlight %}

    <h3>Column sizing</h3>
@ -1633,10 +1691,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    <p>Block level help text for form controls.</p>
    <form class="bs-example">
      <input type="text" class="form-control">
-      <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </form>
 {% highlight html %}
-<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}

  </div>
@ -1685,54 +1743,54 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}

    <h2 id="buttons-sizes">Button sizes</h2>
-    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
+    <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
    <div class="bs-example">
      <p>
-        <button type="button" class="btn btn-primary btn-large">Large button</button>
-        <button type="button" class="btn btn-default btn-large">Large button</button>
+        <button type="button" class="btn btn-primary btn-lg">Large button</button>
+        <button type="button" class="btn btn-default btn-lg">Large button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">Default button</button>
        <button type="button" class="btn btn-default">Default button</button>
      </p>
      <p>
-        <button type="button" class="btn btn-primary btn-small">Small button</button>
-        <button type="button" class="btn btn-default btn-small">Small button</button>
+        <button type="button" class="btn btn-primary btn-sm">Small button</button>
+        <button type="button" class="btn btn-default btn-sm">Small button</button>
      </p>
      <p>
-        <button type="button" class="btn btn-primary btn-mini">Mini button</button>
-        <button type="button" class="btn btn-default btn-mini">Mini button</button>
+        <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
+        <button type="button" class="btn btn-default btn-xs">Extra small button</button>
      </p>
    </div>
 {% highlight html %}
 <p>
-  <button type="button" class="btn btn-primary btn-large">Large button</button>
-  <button type="button" class="btn btn-default btn-large">Large button</button>
+  <button type="button" class="btn btn-primary btn-lg">Large button</button>
+  <button type="button" class="btn btn-default btn-lg">Large button</button>
 </p>
 <p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
 </p>
 <p>
-  <button type="button" class="btn btn-primary btn-small">Small button</button>
-  <button type="button" class="btn btn-default btn-small">Small button</button>
+  <button type="button" class="btn btn-primary btn-sm">Small button</button>
+  <button type="button" class="btn btn-default btn-sm">Small button</button>
 </p>
 <p>
-  <button type="button" class="btn btn-primary btn-mini">Mini button</button>
-  <button type="button" class="btn btn-default btn-mini">Mini button</button>
+  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
+  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
 </p>
 {% endhighlight %}

    <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
    <div class="bs-example">
      <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
-        <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
-        <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+        <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
      </div>
    </div>
 {% highlight html %}
-<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
-<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
 {% endhighlight %}


@ -1742,12 +1800,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    <h3>Button element</h3>
    <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
    <p class="bs-example">
-      <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
-      <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
+      <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
+      <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
    </p>
 {% highlight html %}
-<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
+<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
 {% endhighlight %}

    <div class="bs-callout bs-callout-danger">
@ -1758,12 +1816,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    <h3>Anchor element</h3>
    <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
    <p class="bs-example">
-      <a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
-      <a href="#" class="btn btn-default btn-large disabled">Link</a>
+      <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
+      <a href="#" class="btn btn-default btn-lg disabled">Link</a>
    </p>
 {% highlight html %}
-<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
-<a href="#" class="btn btn-default btn-large disabled">Link</a>
+<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
+<a href="#" class="btn btn-default btn-lg disabled">Link</a>
 {% endhighlight %}
    <p>
      We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
@ -1908,8 +1966,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
          <tr>
            <th>Class</th>
            <th>Small devices <small>Up to 768px</small></th>
-            <th>Medium devices <small>768px to 979px</small></th>
-            <th>Large devices <small>980px and up</small></th>
+            <th>Medium devices <small>768px to 991px</small></th>
+            <th>Large devices <small>992px and up</small></th>
          </tr>
        </thead>
        <tbody>
--- a/customize.html
+++ b/customize.html
@ -486,7 +486,7 @@ base_url: "../"
    <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
    <div class="row">
      <div class="col-lg-6">
-        <label>@screen-tiny</label>
+        <label>@screen-xsmall</label>
        <input type="text" class="form-control" placeholder="480px">
        <label>@screen-small</label>
        <input type="text" class="form-control" placeholder="768px">
@ -660,12 +660,21 @@ base_url: "../"
    </div>

    <h2 id="variables-alerts">Alerts</h2>
-    <p>Define alert colors and border radius.</p>
+    <p>Define alert colors, border radius, and padding.</p>
    <h4>Border radius</h4>
+    <label>@alert-padding</label>
+    <input type="text" class="form-control" placeholder="15px">
    <label>@alert-border-radius</label>
    <input type="text" class="form-control" placeholder="@border-radius-base">
    <div class="row">
      <div class="col-lg-6">
+        <h4>Default (Warning)</h4>
+        <label>@alert-text</label>
+        <input type="text" class="form-control" placeholder="@state-warning-text">
+        <label>@alert-bg</label>
+        <input type="text" class="form-control" placeholder="@state-warning-bg">
+        <label>@alert-border</label>
+        <input type="text" class="form-control" placeholder="@state-warning-border">
        <h4>Success</h4>
        <label>@alert-success-text</label>
        <input type="text" class="form-control" placeholder="@state-success-text">
@ -673,13 +682,6 @@ base_url: "../"
        <input type="text" class="form-control" placeholder="@state-success-bg">
        <label>@alert-success-border</label>
        <input type="text" class="form-control" placeholder="@state-success-border">
-        <h4>Warning</h4>
-        <label>@alert-warning-text</label>
-        <input type="text" class="form-control" placeholder="@state-warning-text">
-        <label>@alert-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@state-warning-bg">
-        <label>@alert-warning-border</label>
-        <input type="text" class="form-control" placeholder="@state-warning-border">
      </div>
      <div class="col-lg-6">
        <h4>Danger</h4>
@ -710,6 +712,8 @@ base_url: "../"
        <input type="text" class="form-control" placeholder="#777">
        <label>@navbar-bg</label>
        <input type="text" class="form-control" placeholder="#eee">
+        <label>@navbar-border-radius</label>
+        <input type="text" class="form-control" placeholder="@border-radius-base">
        <h4>Links</h4>
        <label>@navbar-link-color</label>
        <input type="text" class="form-control" placeholder="#777">
@ -1439,7 +1443,7 @@ base_url: "../"
    </div>
    <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
    <div class="bs-customize-download">
-      <a class="btn btn-block btn-large btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
+      <a class="btn btn-block btn-lg btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
    </div>
    <div class="bs-callout bs-callout-danger">
      <h4>What's included?</h4>
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@ -564,38 +564,35 @@ dd {
  margin-left: 0;
 }

-.dl-horizontal dt {
-  float: left;
-  width: 160px;
-  overflow: hidden;
-  clear: left;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dl-horizontal dd {
-  margin-left: 180px;
-}
-
-.dl-horizontal dd:before,
-.dl-horizontal dd:after {
-  display: table;
-  content: " ";
-}
-
-.dl-horizontal dd:after {
-  clear: both;
-}
-
-.dl-horizontal dd:before,
-.dl-horizontal dd:after {
-  display: table;
-  content: " ";
-}
-
-.dl-horizontal dd:after {
-  clear: both;
+@media (min-width: 768px) {
+  .dl-horizontal dt {
+    float: left;
+    width: 160px;
+    overflow: hidden;
+    clear: left;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-horizontal dd {
+    margin-left: 180px;
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
+    display: table;
+    content: " ";
+  }
+  .dl-horizontal dd:after {
+    clear: both;
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
+    display: table;
+    content: " ";
+  }
+  .dl-horizontal dd:after {
+    clear: both;
+  }
 }

 abbr[title],
@ -636,7 +633,6 @@ blockquote small:before {
 }

 blockquote.pull-right {
-  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
@ -877,7 +873,7 @@ pre code {
  width: 100%;
 }

-@media (min-width: 768px) {
+@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 728px;
  }
@ -931,72 +927,105 @@ pre code {
  .col-sm-12 {
    width: 100%;
  }
-  .col-push-1 {
+  .col-sm-push-1 {
    left: 8.333333333333332%;
  }
-  .col-push-2 {
+  .col-sm-push-2 {
    left: 16.666666666666664%;
  }
-  .col-push-3 {
+  .col-sm-push-3 {
    left: 25%;
  }
-  .col-push-4 {
+  .col-sm-push-4 {
    left: 33.33333333333333%;
  }
-  .col-push-5 {
+  .col-sm-push-5 {
    left: 41.66666666666667%;
  }
-  .col-push-6 {
+  .col-sm-push-6 {
    left: 50%;
  }
-  .col-push-7 {
+  .col-sm-push-7 {
    left: 58.333333333333336%;
  }
-  .col-push-8 {
+  .col-sm-push-8 {
    left: 66.66666666666666%;
  }
-  .col-push-9 {
+  .col-sm-push-9 {
    left: 75%;
  }
-  .col-push-10 {
+  .col-sm-push-10 {
    left: 83.33333333333334%;
  }
-  .col-push-11 {
+  .col-sm-push-11 {
    left: 91.66666666666666%;
  }
-  .col-pull-1 {
+  .col-sm-pull-1 {
    right: 8.333333333333332%;
  }
-  .col-pull-2 {
+  .col-sm-pull-2 {
    right: 16.666666666666664%;
  }
-  .col-pull-3 {
+  .col-sm-pull-3 {
    right: 25%;
  }
-  .col-pull-4 {
+  .col-sm-pull-4 {
    right: 33.33333333333333%;
  }
-  .col-pull-5 {
+  .col-sm-pull-5 {
    right: 41.66666666666667%;
  }
-  .col-pull-6 {
+  .col-sm-pull-6 {
    right: 50%;
  }
-  .col-pull-7 {
+  .col-sm-pull-7 {
    right: 58.333333333333336%;
  }
-  .col-pull-8 {
+  .col-sm-pull-8 {
    right: 66.66666666666666%;
  }
-  .col-pull-9 {
+  .col-sm-pull-9 {
    right: 75%;
  }
-  .col-pull-10 {
+  .col-sm-pull-10 {
    right: 83.33333333333334%;
  }
-  .col-pull-11 {
+  .col-sm-pull-11 {
    right: 91.66666666666666%;
  }
+  .col-sm-offset-1 {
+    margin-left: 8.333333333333332%;
+  }
+  .col-sm-offset-2 {
+    margin-left: 16.666666666666664%;
+  }
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .col-sm-offset-4 {
+    margin-left: 33.33333333333333%;
+  }
+  .col-sm-offset-5 {
+    margin-left: 41.66666666666667%;
+  }
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .col-sm-offset-7 {
+    margin-left: 58.333333333333336%;
+  }
+  .col-sm-offset-8 {
+    margin-left: 66.66666666666666%;
+  }
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .col-sm-offset-10 {
+    margin-left: 83.33333333333334%;
+  }
+  .col-sm-offset-11 {
+    margin-left: 91.66666666666666%;
+  }
 }

@media (min-width: 992px) {
@ -1053,37 +1082,103 @@ pre code {
  .col-lg-12 {
    width: 100%;
  }
-  .col-offset-1 {
+  .col-lg-push-1 {
+    left: 8.333333333333332%;
+  }
+  .col-lg-push-2 {
+    left: 16.666666666666664%;
+  }
+  .col-lg-push-3 {
+    left: 25%;
+  }
+  .col-lg-push-4 {
+    left: 33.33333333333333%;
+  }
+  .col-lg-push-5 {
+    left: 41.66666666666667%;
+  }
+  .col-lg-push-6 {
+    left: 50%;
+  }
+  .col-lg-push-7 {
+    left: 58.333333333333336%;
+  }
+  .col-lg-push-8 {
+    left: 66.66666666666666%;
+  }
+  .col-lg-push-9 {
+    left: 75%;
+  }
+  .col-lg-push-10 {
+    left: 83.33333333333334%;
+  }
+  .col-lg-push-11 {
+    left: 91.66666666666666%;
+  }
+  .col-lg-pull-1 {
+    right: 8.333333333333332%;
+  }
+  .col-lg-pull-2 {
+    right: 16.666666666666664%;
+  }
+  .col-lg-pull-3 {
+    right: 25%;
+  }
+  .col-lg-pull-4 {
+    right: 33.33333333333333%;
+  }
+  .col-lg-pull-5 {
+    right: 41.66666666666667%;
+  }
+  .col-lg-pull-6 {
+    right: 50%;
+  }
+  .col-lg-pull-7 {
+    right: 58.333333333333336%;
+  }
+  .col-lg-pull-8 {
+    right: 66.66666666666666%;
+  }
+  .col-lg-pull-9 {
+    right: 75%;
+  }
+  .col-lg-pull-10 {
+    right: 83.33333333333334%;
+  }
+  .col-lg-pull-11 {
+    right: 91.66666666666666%;
+  }
+  .col-lg-offset-1 {
    margin-left: 8.333333333333332%;
  }
-  .col-offset-2 {
+  .col-lg-offset-2 {
    margin-left: 16.666666666666664%;
  }
-  .col-offset-3 {
+  .col-lg-offset-3 {
    margin-left: 25%;
  }
-  .col-offset-4 {
+  .col-lg-offset-4 {
    margin-left: 33.33333333333333%;
  }
-  .col-offset-5 {
+  .col-lg-offset-5 {
    margin-left: 41.66666666666667%;
  }
-  .col-offset-6 {
+  .col-lg-offset-6 {
    margin-left: 50%;
  }
-  .col-offset-7 {
+  .col-lg-offset-7 {
    margin-left: 58.333333333333336%;
  }
-  .col-offset-8 {
+  .col-lg-offset-8 {
    margin-left: 66.66666666666666%;
  }
-  .col-offset-9 {
+  .col-lg-offset-9 {
    margin-left: 75%;
  }
-  .col-offset-10 {
+  .col-lg-offset-10 {
    margin-left: 83.33333333333334%;
  }
-  .col-offset-11 {
+  .col-lg-offset-11 {
    margin-left: 91.66666666666666%;
  }
 }
@ -1354,8 +1449,8 @@ input[type="number"]::-webkit-inner-spin-button {
 .form-control {
  display: block;
  width: 100%;
-  height: 38px;
-  padding: 8px 12px;
+  height: 34px;
+  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
@ -1370,10 +1465,10 @@ input[type="number"]::-webkit-inner-spin-button {
 }

 .form-control:focus {
-  border-color: rgba(82, 168, 236, 0.8);
+  border-color: #66afe9;
  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }

 .form-control[disabled],
@ -1438,32 +1533,34 @@ textarea.form-control {
  margin-left: 10px;
 }

-.input-large {
-  height: 56px;
-  padding: 14px 16px;
+.input-lg {
+  height: 45px;
+  padding: 10px 16px;
  font-size: 18px;
+  line-height: 1.33;
  border-radius: 6px;
 }

-.input-small {
+.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
+  line-height: 1.5;
  border-radius: 3px;
 }

-select.input-large {
-  height: 56px;
-  line-height: 56px;
+select.input-lg {
+  height: 45px;
+  line-height: 45px;
 }

-select.input-small {
+select.input-sm {
  height: 30px;
  line-height: 30px;
 }

-textarea.input-large,
-textarea.input-small {
+textarea.input-lg,
+textarea.input-sm {
  height: auto;
 }

@ -1473,7 +1570,6 @@ textarea.input-small {
 }

 .has-warning .form-control {
-  padding-right: 32px;
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -1497,7 +1593,6 @@ textarea.input-small {
 }

 .has-error .form-control {
-  padding-right: 32px;
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -1521,7 +1616,6 @@ textarea.input-small {
 }

 .has-success .form-control {
-  padding-right: 32px;
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -1539,6 +1633,11 @@ textarea.input-small {
  border-color: #468847;
 }

+.form-control-static {
+  padding-top: 6px;
+  margin-bottom: 0;
+}
+
 .help-block {
  display: block;
  margin-top: 5px;
@ -1546,12 +1645,75 @@ textarea.input-small {
  color: #737373;
 }

+.form-inline .form-control,
+.form-inline .radio,
+.form-inline .checkbox {
+  display: inline-block;
+}
+
+.form-inline .radio,
+.form-inline .checkbox {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  float: none;
+  margin-left: 0;
+}
+
+.form-horizontal .control-label,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: 6px;
+}
+
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .form-group {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+.form-horizontal .form-group .row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .control-label {
+    text-align: right;
+  }
+}
+
 .btn {
  display: inline-block;
-  padding: 8px 12px;
+  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
-  font-weight: 500;
+  font-weight: bold;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
@ -1574,7 +1736,7 @@ textarea.input-small {

 .btn:hover,
 .btn:focus {
-  color: #ffffff;
+  color: #333333;
  text-decoration: none;
 }

@ -1597,17 +1759,18 @@ fieldset[disabled] .btn {
 }

 .btn-default {
-  color: #ffffff;
-  background-color: #474949;
-  border-color: #474949;
+  color: #333333;
+  background-color: #ffffff;
+  border-color: #cccccc;
 }

 .btn-default:hover,
 .btn-default:focus,
 .btn-default:active,
 .btn-default.active {
-  background-color: #3a3c3c;
-  border-color: #2e2f2f;
+  color: #333333;
+  background-color: #ebebeb;
+  border-color: #adadad;
 }

 .btn-default.disabled,
@ -1625,22 +1788,23 @@ fieldset[disabled] .btn-default:active,
 .btn-default.disabled.active,
 .btn-default[disabled].active,
 fieldset[disabled] .btn-default.active {
-  background-color: #474949;
-  border-color: #474949;
+  background-color: #ffffff;
+  border-color: #cccccc;
 }

 .btn-primary {
  color: #ffffff;
  background-color: #428bca;
-  border-color: #428bca;
+  border-color: #357ebd;
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active {
-  background-color: #357ebd;
-  border-color: #3071a9;
+  color: #ffffff;
+  background-color: #3276b1;
+  border-color: #285e8e;
 }

 .btn-primary.disabled,
@ -1659,21 +1823,22 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
-  border-color: #428bca;
+  border-color: #357ebd;
 }

 .btn-warning {
  color: #ffffff;
  background-color: #f0ad4e;
-  border-color: #f0ad4e;
+  border-color: #eea236;
 }

 .btn-warning:hover,
 .btn-warning:focus,
 .btn-warning:active,
 .btn-warning.active {
-  background-color: #eea236;
-  border-color: #ec971f;
+  color: #ffffff;
+  background-color: #ed9c28;
+  border-color: #d58512;
 }

 .btn-warning.disabled,
@ -1692,21 +1857,22 @@ fieldset[disabled] .btn-warning:active,
 .btn-warning[disabled].active,
 fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
-  border-color: #f0ad4e;
+  border-color: #eea236;
 }

 .btn-danger {
  color: #ffffff;
  background-color: #d9534f;
-  border-color: #d9534f;
+  border-color: #d43f3a;
 }

 .btn-danger:hover,
 .btn-danger:focus,
 .btn-danger:active,
 .btn-danger.active {
-  background-color: #d43f3a;
-  border-color: #c9302c;
+  color: #ffffff;
+  background-color: #d2322d;
+  border-color: #ac2925;
 }

 .btn-danger.disabled,
@ -1725,21 +1891,22 @@ fieldset[disabled] .btn-danger:active,
 .btn-danger[disabled].active,
 fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
-  border-color: #d9534f;
+  border-color: #d43f3a;
 }

 .btn-success {
  color: #ffffff;
  background-color: #5cb85c;
-  border-color: #5cb85c;
+  border-color: #4cae4c;
 }

 .btn-success:hover,
 .btn-success:focus,
 .btn-success:active,
 .btn-success.active {
-  background-color: #4cae4c;
-  border-color: #449d44;
+  color: #ffffff;
+  background-color: #47a447;
+  border-color: #398439;
 }

 .btn-success.disabled,
@ -1758,21 +1925,22 @@ fieldset[disabled] .btn-success:active,
 .btn-success[disabled].active,
 fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
-  border-color: #5cb85c;
+  border-color: #4cae4c;
 }

 .btn-info {
  color: #ffffff;
  background-color: #5bc0de;
-  border-color: #5bc0de;
+  border-color: #46b8da;
 }

 .btn-info:hover,
 .btn-info:focus,
 .btn-info:active,
 .btn-info.active {
-  background-color: #46b8da;
-  border-color: #31b0d5;
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
 }

 .btn-info.disabled,
@ -1791,7 +1959,7 @@ fieldset[disabled] .btn-info:active,
 .btn-info[disabled].active,
 fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
-  border-color: #5bc0de;
+  border-color: #46b8da;
 }

 .btn-link {
@ -1828,25 +1996,26 @@ fieldset[disabled] .btn-link {
 fieldset[disabled] .btn-link:hover,
 .btn-link[disabled]:focus,
 fieldset[disabled] .btn-link:focus {
-  color: #333333;
+  color: #999999;
  text-decoration: none;
 }

-.btn-large {
-  padding: 14px 16px;
+.btn-lg {
+  padding: 10px 16px;
  font-size: 18px;
+  line-height: 1.33;
  border-radius: 6px;
 }

-.btn-small,
-.btn-mini {
+.btn-sm,
+.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
 }

-.btn-mini {
+.btn-xs {
  padding: 3px 5px;
 }

@ -1894,6 +2063,7 @@ input[type="button"].btn-block {
 }

 .input-group {
+  position: relative;
  display: table;
  border-collapse: separate;
 }
@ -1929,27 +2099,24 @@ input[type="button"].btn-block {
 }

 .input-group-addon {
-  padding: 8px 12px;
+  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
-  line-height: 1.428571429;
+  line-height: 1;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
 }

-.input-group-addon.input-small {
+.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
 }

-.input-group-addon.input-large {
-  padding: 14px 16px;
+.input-group-addon.input-lg {
+  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
 }
@ -2003,60 +2170,6 @@ input[type="button"].btn-block {
  z-index: 2;
 }

-.form-inline .form-control,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-}
-
-.form-inline .radio,
-.form-inline .checkbox {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.form-horizontal .control-label {
-  padding-top: 9px;
-}
-
-.form-horizontal .form-group:before,
-.form-horizontal .form-group:after {
-  display: table;
-  content: " ";
-}
-
-.form-horizontal .form-group:after {
-  clear: both;
-}
-
-.form-horizontal .form-group:before,
-.form-horizontal .form-group:after {
-  display: table;
-  content: " ";
-}
-
-.form-horizontal .form-group:after {
-  clear: both;
-}
-
-@media (min-width: 768px) {
-  .form-horizontal .form-group {
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-}
-
-.form-horizontal .form-group .row {
-  margin-right: -15px;
-  margin-left: -15px;
-}
-
-@media (min-width: 768px) {
-  .form-horizontal .control-label {
-    text-align: right;
-  }
-}
-
 .caret {
  display: inline-block;
  width: 0;
@ -2069,6 +2182,10 @@ input[type="button"].btn-block {
  content: "";
 }

+.dropdown {
+  position: relative;
+}
+
 .dropdown-menu {
  position: absolute;
  top: 100%;
@ -2228,6 +2345,10 @@ input[type="button"].btn-block {
  margin-right: -15px;
 }

+.list-group-item > .badge + .badge {
+  margin-right: 0;
+}
+
 .list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
@ -2277,6 +2398,23 @@ a.list-group-item.active .list-group-item-text {
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }

+.panel .list-group {
+  margin: 15px -15px -15px;
+}
+
+.panel .list-group .list-group-item {
+  border-width: 1px 0;
+}
+
+.panel .list-group .list-group-item:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.panel .list-group .list-group-item:last-child {
+  border-bottom: 0;
+}
+
 .panel-heading {
  padding: 10px 15px;
  margin: -15px -15px 15px;
@ -2293,6 +2431,10 @@ a.list-group-item.active .list-group-item-text {
  font-weight: 500;
 }

+.panel-title > a {
+  color: inherit;
+}
+
 .panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
@ -2352,23 +2494,6 @@ a.list-group-item.active .list-group-item-text {
  border-color: #bce8f1;
 }

-.list-group-flush {
-  margin: 15px -15px -15px;
-}
-
-.list-group-flush .list-group-item {
-  border-width: 1px 0;
-}
-
-.list-group-flush .list-group-item:first-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.list-group-flush .list-group-item:last-child {
-  border-bottom: 0;
-}
-
 .well {
  min-height: 20px;
  padding: 19px;
@ -2385,12 +2510,12 @@ a.list-group-item.active .list-group-item-text {
  border-color: rgba(0, 0, 0, 0.15);
 }

-.well-large {
+.well-lg {
  padding: 24px;
  border-radius: 6px;
 }

-.well-small {
+.well-sm {
  padding: 9px;
  border-radius: 3px;
 }
@ -2493,10 +2618,6 @@ button.close {
  border-bottom-color: #ffffff;
 }

-.nav > .pull-right {
-  float: right;
-}
-
 .nav .nav-divider {
  height: 1px;
  margin: 9px 0;
@ -2504,33 +2625,6 @@ button.close {
  background-color: #e5e5e5;
 }

-.nav-justified {
-  width: 100%;
-}
-
-.nav-justified > li {
-  display: table-cell;
-  float: none;
-  width: 1%;
-}
-
-.nav-justified > li > a {
-  text-align: center;
-}
-
-.nav-tabs-justified {
-  border-bottom: 0;
-}
-
-.nav-tabs-justified > li > a {
-  margin-right: 0;
-  border-bottom: 1px solid #dddddd;
-}
-
-.nav-tabs-justified > .active > a {
-  border-bottom-color: #ffffff;
-}
-
 .nav-tabs {
  border-bottom: 1px solid #dddddd;
 }
@ -2613,6 +2707,33 @@ button.close {
  margin-left: 0;
 }

+.nav-justified {
+  width: 100%;
+}
+
+.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+}
+
+.nav-justified > li > a {
+  text-align: center;
+}
+
+.nav-tabs-justified {
+  border-bottom: 0;
+}
+
+.nav-tabs-justified > li > a {
+  margin-right: 0;
+  border-bottom: 1px solid #dddddd;
+}
+
+.nav-tabs-justified > .active > a {
+  border-bottom-color: #ffffff;
+}
+
 .tabbable:before,
 .tabbable:after {
  display: table;
@ -2690,7 +2811,6 @@ button.close {
 }

 .navbar-nav {
-  margin-top: 10px;
  margin-bottom: 15px;
 }

@ -2748,6 +2868,44 @@ button.close {
  margin-bottom: 0;
 }

+.nav-collapse {
+  padding-bottom: 15px;
+}
+
+.nav-collapse:before,
+.nav-collapse:after {
+  display: table;
+  content: " ";
+}
+
+.nav-collapse:after {
+  clear: both;
+}
+
+.nav-collapse:before,
+.nav-collapse:after {
+  display: table;
+  content: " ";
+}
+
+.nav-collapse:after {
+  clear: both;
+}
+
+.navbar-toggle + .nav-collapse {
+  width: 100%;
+  margin-top: 50px;
+}
+
+@media (max-width: 768px) {
+  .nav-collapse-scrollable {
+    max-height: 360px;
+    margin-bottom: 15px;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 .navbar-brand {
  display: block;
  max-width: 200px;
@ -2769,12 +2927,13 @@ button.close {
 }

 .navbar-toggle {
-  position: absolute;
-  top: 9px;
-  right: 10px;
+  position: relative;
+  float: right;
  width: 48px;
-  height: 32px;
-  padding: 8px 12px;
+  height: 34px;
+  padding: 6px 12px;
+  margin-top: 8px;
+  margin-bottom: 8px;
  background-color: transparent;
  border: 1px solid #dddddd;
  border-radius: 4px;
@ -2798,8 +2957,8 @@ button.close {
 }

 .navbar-form {
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }

 .navbar-form .form-control,
@ -2810,10 +2969,17 @@ button.close {

 .navbar-form .radio,
 .navbar-form .checkbox {
+  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
 }

+.navbar-form .radio input[type="radio"],
+.navbar-form .checkbox input[type="checkbox"] {
+  float: none;
+  margin-left: 0;
+}
+
 .navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
@ -2938,6 +3104,7 @@ button.close {
@media screen and (min-width: 768px) {
  .navbar-brand {
    float: left;
+    max-width: none;
    margin-right: 5px;
    margin-left: -15px;
  }
@ -2953,7 +3120,6 @@ button.close {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
-    float: right;
    width: auto;
  }
  .navbar-toggle {
@ -2965,15 +3131,18 @@ button.close {
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
+    padding-bottom: 0;
    overflow: visible !important;
  }
 }

 .navbar-btn {
-  margin-top: 6px;
+  margin-top: 8px;
 }

 .navbar-text {
+  float: left;
+  padding: 0 15px;
  margin-top: 15px;
  margin-bottom: 15px;
 }
@ -2994,12 +3163,28 @@ button.close {
  color: #ffffff;
 }

-.btn .caret {
-  border-top-color: #ffffff;
+.btn-default .caret {
+  border-top-color: #333333;
 }

-.dropup .btn .caret {
-  border-bottom-color: #ffffff;
+.btn-primary .caret,
+.btn-success .caret,
+.btn-warning .caret,
+.btn-danger .caret,
+.btn-info .caret {
+  border-top-color: #fff;
+}
+
+.btn-default .dropup .caret {
+  border-bottom-color: #333333;
+}
+
+.btn-primary .dropup .caret,
+.btn-success .dropup .caret,
+.btn-warning .dropup .caret,
+.btn-danger .dropup .caret,
+.btn-info .dropup .caret {
+  border-bottom-color: #fff;
 }

 .btn-group,
@ -3020,10 +3205,17 @@ button.close {
 .btn-group > .btn:focus,
 .btn-group-vertical > .btn:focus,
 .btn-group > .btn:active,
-.btn-group-vertical > .btn:active {
+.btn-group-vertical > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn.active {
  z-index: 2;
 }

+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus {
+  outline: none;
+}
+
 .btn-group .btn + .btn {
  margin-left: -1px;
 }
@ -3107,7 +3299,7 @@ button.close {
  padding-left: 8px;
 }

-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
 }
@ -3121,11 +3313,11 @@ button.close {
  margin-left: 0;
 }

-.btn-large .caret {
+.btn-lg .caret {
  border-width: 5px;
 }

-.dropup .btn-large .caret {
+.dropup .btn-lg .caret {
  border-bottom-width: 5px;
 }

@ -3144,12 +3336,12 @@ button.close {
  border-radius: 0;
 }

-.btn-group-vertical .btn:first-child {
+.btn-group-vertical .btn:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
 }

-.btn-group-vertical .btn:last-child {
+.btn-group-vertical .btn:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
 }
@ -3157,6 +3349,7 @@ button.close {
 .btn-group-justified {
  display: table;
  width: 100%;
+  table-layout: fixed;
 }

 .btn-group-justified .btn {
@ -3206,7 +3399,7 @@ button.close {
 .pagination > li > a,
 .pagination > li > span {
  float: left;
-  padding: 4px 12px;
+  padding: 6px 12px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
@ -3249,38 +3442,38 @@ button.close {
  background-color: #ffffff;
 }

-.pagination-large > li > a,
-.pagination-large > li > span {
-  padding: 14px 16px;
+.pagination-lg > li > a,
+.pagination-lg > li > span {
+  padding: 10px 16px;
  font-size: 18px;
 }

-.pagination-large > li:first-child > a,
-.pagination-large > li:first-child > span {
+.pagination-lg > li:first-child > a,
+.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
 }

-.pagination-large > li:last-child > a,
-.pagination-large > li:last-child > span {
+.pagination-lg > li:last-child > a,
+.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
 }

-.pagination-small > li > a,
-.pagination-small > li > span {
+.pagination-sm > li > a,
+.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
 }

-.pagination-small > li:first-child > a,
-.pagination-small > li:first-child > span {
+.pagination-sm > li:first-child > a,
+.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
 }

-.pagination-small > li:last-child > a,
-.pagination-small > li:last-child > span {
+.pagination-sm > li:last-child > a,
+.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
 }
@ -3376,7 +3569,7 @@ button.close {
          transition: transform 0.3s ease-out;
 }

-.modal.fade.in .modal-dialog {
+.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
@ -3417,7 +3610,7 @@ button.close {
  filter: alpha(opacity=0);
 }

-.modal-backdrop.fade.in {
+.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
 }
@ -3508,8 +3701,8 @@ button.close {
 }

 .tooltip.in {
-  opacity: 1;
-  filter: alpha(opacity=100);
+  opacity: 0.9;
+  filter: alpha(opacity=90);
 }

 .tooltip.top {
@ -3538,7 +3731,7 @@ button.close {
  color: #ffffff;
  text-align: center;
  text-decoration: none;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: #000000;
  border-radius: 4px;
 }

@ -3554,21 +3747,21 @@ button.close {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
-  border-top-color: rgba(0, 0, 0, 0.9);
+  border-top-color: #000000;
  border-width: 5px 5px 0;
 }

 .tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
-  border-top-color: rgba(0, 0, 0, 0.9);
+  border-top-color: #000000;
  border-width: 5px 5px 0;
 }

 .tooltip.top-right .tooltip-arrow {
  right: 5px;
  bottom: 0;
-  border-top-color: rgba(0, 0, 0, 0.9);
+  border-top-color: #000000;
  border-width: 5px 5px 0;
 }

@ -3576,7 +3769,7 @@ button.close {
  top: 50%;
  left: 0;
  margin-top: -5px;
-  border-right-color: rgba(0, 0, 0, 0.9);
+  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
 }

@ -3584,7 +3777,7 @@ button.close {
  top: 50%;
  right: 0;
  margin-top: -5px;
-  border-left-color: rgba(0, 0, 0, 0.9);
+  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
 }

@ -3592,21 +3785,21 @@ button.close {
  top: 0;
  left: 50%;
  margin-left: -5px;
-  border-bottom-color: rgba(0, 0, 0, 0.9);
+  border-bottom-color: #000000;
  border-width: 0 5px 5px;
 }

 .tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
-  border-bottom-color: rgba(0, 0, 0, 0.9);
+  border-bottom-color: #000000;
  border-width: 0 5px 5px;
 }

 .tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
-  border-bottom-color: rgba(0, 0, 0, 0.9);
+  border-bottom-color: #000000;
  border-width: 0 5px 5px;
 }

@ -3750,7 +3943,7 @@ button.close {
 }

 .alert {
-  padding: 10px 35px 10px 15px;
+  padding: 15px 35px 15px 15px;
  margin-bottom: 20px;
  color: #c09853;
  background-color: #fcf8e3;
@ -3768,7 +3961,7 @@ button.close {
 }

 .alert .alert-link {
-  font-weight: 500;
+  font-weight: bold;
  color: #a47e3c;
 }

@ -3779,6 +3972,15 @@ button.close {
  color: inherit;
 }

+.alert > p,
+.alert > ul {
+  margin-bottom: 0;
+}
+
+.alert > p + p {
+  margin-top: 5px;
+}
+
 .alert-success {
  color: #468847;
  background-color: #dff0d8;
@ -3821,20 +4023,6 @@ button.close {
  color: #2d6987;
 }

-.alert-block {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.alert-block > p,
-.alert-block > ul {
-  margin-bottom: 0;
-}
-
-.alert-block p + p {
-  margin-top: 5px;
-}
-
 .thumbnail,
 .img-thumbnail {
  padding: 4px;
@ -3918,7 +4106,6 @@ a.thumbnail:focus {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
-  background-color: #999999;
  border-radius: .25em;
 }

@ -3927,6 +4114,14 @@ a.thumbnail:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
+}
+
+.label-default {
+  background-color: #999999;
+}
+
+.label-default[href]:hover,
+.label-default[href]:focus {
  background-color: #808080;
 }

@ -4025,15 +4220,6 @@ a.list-group-item.active > .badge,
  }
 }

-@-ms-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
@ -4077,7 +4263,6 @@ a.list-group-item.active > .badge,
 }

 .progress-striped .progress-bar {
-  background-color: #428bca;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4098,7 +4283,6 @@ a.list-group-item.active > .badge,
 }

 .progress-striped .progress-bar-danger {
-  background-color: #d9534f;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4110,7 +4294,6 @@ a.list-group-item.active > .badge,
 }

 .progress-striped .progress-bar-success {
-  background-color: #5cb85c;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4122,7 +4305,6 @@ a.list-group-item.active > .badge,
 }

 .progress-striped .progress-bar-warning {
-  background-color: #f0ad4e;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4134,7 +4316,6 @@ a.list-group-item.active > .badge,
 }

 .progress-striped .progress-bar-info {
-  background-color: #5bc0de;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4244,8 +4425,6 @@ a.list-group-item.active > .badge,
 }

 .carousel-control.left {
-  background-color: rgba(0, 0, 0, 0.0001);
-  background-color: transparent;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
@ -4257,8 +4436,6 @@ a.list-group-item.active > .badge,
 .carousel-control.right {
  right: 0;
  left: auto;
-  background-color: rgba(0, 0, 0, 0.5);
-  background-color: transparent;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
@ -4303,9 +4480,9 @@ a.list-group-item.active > .badge,
  bottom: 10px;
  left: 50%;
  z-index: 15;
-  width: 120px;
+  width: 60%;
  padding-left: 0;
-  margin-left: -60px;
+  margin-left: -30%;
  text-align: center;
  list-style: none;
 }
@ -4405,11 +4582,11 @@ a.list-group-item.active > .badge,
 }

 .pull-right {
-  float: right;
+  float: right !important;
 }

 .pull-left {
-  float: left;
+  float: left !important;
 }

 .hide {
@ -4698,29 +4875,27 @@ td.visible-print {

 .btn-default {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #2e2f2f;
-  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#474949), to(#2e2f2f));
-  background-image: -webkit-linear-gradient(top, #474949, 0%, #2e2f2f, 100%);
-  background-image: -moz-linear-gradient(top, #474949 0%, #2e2f2f 100%);
-  background-image: linear-gradient(to bottom, #474949 0%, #2e2f2f 100%);
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%);
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
  background-repeat: repeat-x;
-  border-color: #292a2a;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff474949', endColorstr='#ff2e2f2f', GradientType=0);
+  border-color: #e0e0e0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
 }

 .btn-default:active,
 .btn-default.active {
-  background-color: #2e2f2f;
-  border-color: #292a2a;
+  background-color: #e6e6e6;
+  border-color: #e0e0e0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }

 .btn-primary {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #3071a9;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
  background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
  background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
@ -4742,7 +4917,6 @@ td.visible-print {

 .btn-success {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #449d44;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44));
  background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%);
  background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%);
@ -4764,7 +4938,6 @@ td.visible-print {

 .btn-warning {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #ec971f;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f));
  background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%);
  background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
@ -4786,7 +4959,6 @@ td.visible-print {

 .btn-danger {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #c9302c;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c));
  background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%);
  background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
@ -4808,7 +4980,6 @@ td.visible-print {

 .btn-info {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #31b0d5;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5));
  background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%);
  background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
@ -4829,7 +5000,6 @@ td.visible-print {
 }

 .navbar {
-  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #ffffff, 0%, #eeeeee, 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
@ -4839,7 +5009,6 @@ td.visible-print {
 }

 .navbar-inverse {
-  background-color: #222222;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3c3c3c), to(#222222));
  background-image: -webkit-linear-gradient(top, #3c3c3c, 0%, #222222, 100%);
  background-image: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/dist/js/bootstrap.js
+++ b/dist/js/bootstrap.js
@ -219,7 +219,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
-      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
    }

@ -533,7 +535,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return

-    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')

    if (actives && actives.length) {
      var hasData = actives.data('bs.collapse')
@ -1243,12 +1245,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
          .addClass(placement)
      }

-      var tp = placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
-            /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+      var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)

-      this.applyPlacement(tp, placement)
+      this.applyPlacement(calculatedOffset, placement)
      this.$element.trigger('shown.bs.' + this.type)
    }
  }
@ -1260,25 +1259,33 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    var height = $tip[0].offsetHeight

    // manually read margins because getBoundingClientRect includes difference
-    offset.top  = offset.top  + parseInt($tip.css('margin-top'), 10)
-    offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft

    $tip
      .offset(offset)
      .addClass('in')

+    // check to see if placing tip in new offset caused the tip to resize itself
    var actualWidth  = $tip[0].offsetWidth
    var actualHeight = $tip[0].offsetHeight

    if (placement == 'top' && actualHeight != height) {
      replace = true
-      offset.top  = offset.top + height - actualHeight
+      offset.top = offset.top + height - actualHeight
    }

-    if (placement == 'bottom' || placement == 'top') {
+    if (/bottom|top/.test(placement)) {
      var delta = 0

-      if (offset.left < 0){
+      if (offset.left < 0) {
        delta       = offset.left * -2
        offset.left = 0

@ -1313,6 +1320,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    var $tip = this.tip()
    var e    = $.Event('hide.bs.' + this.type)

+    function complete() { $tip.detach() }
+
    this.$element.trigger(e)

    if (e.isDefaultPrevented()) return
@ -1321,9 +1330,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }

    $.support.transition && this.$tip.hasClass('fade') ?
      $tip
-        .one($.support.transition.end, $tip.detach)
+        .one($.support.transition.end, complete)
        .emulateTransitionEnd(150) :
-      $tip.detach()
+      complete()

    this.$element.trigger('hidden.bs.' + this.type)

@ -1349,6 +1358,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    }, this.$element.offset())
  }

+  Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
  Tooltip.prototype.getTitle = function () {
    var title
    var $e = this.$element
@ -1364,8 +1380,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    return this.$tip = this.$tip || $(this.options.template)
  }

-  Tooltip.prototype.arrow =function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
  }

  Tooltip.prototype.validate = function () {
@ -1487,7 +1503,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }

    $tip.removeClass('fade top bottom left right in')

-    $tip.find('.popover-title:empty').hide()
+    // Hide empty titles
+    //
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if ($tip.find('.popover-title').html() === '') {
+      $tip.find('.popover-title').hide();
+    }
  }

  Popover.prototype.hasContent = function () {
@ -1504,6 +1526,10 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
            o.content)
  }

+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
+  }
+
  Popover.prototype.tip = function () {
    if (!this.$tip) this.$tip = $(this.options.template)
    return this.$tip
--- a/dist/js/bootstrap.min.js
+++ b/dist/js/bootstrap.min.js
--- a/getting-started.html
+++ b/getting-started.html
@ -17,9 +17,7 @@ base_url: "../"

    <h3>Download compiled CSS and JS</h3>
    <p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
-    <p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-
-    <hr>
+    <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>

    <h3 id="download-options">More download options</h3>
    <div class="bs-docs-dl-options">
@ -38,8 +36,6 @@ base_url: "../"
      {% highlight bash %}$ bower install bootstrap{% endhighlight %}
    </div>

-    <hr>
-
    <h3 id="download-cdn">Use the Bootstrap CDN</h3>
    <p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
 {% highlight html linenos %}
@ -77,7 +73,7 @@ bootstrap/
 │   ├── bootstrap.min.js
 {% endhighlight %}

-    <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+    <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>).</p>
    <div class="bs-callout bs-callout-danger">
      <h4>jQuery required</h4>
      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
@ -112,7 +108,7 @@ bootstrap/
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

-    <!-- Optionally enable responsive features in IE8 -->
+    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="js/respond.js"></script>
  </body>
 </html>
@ -124,11 +120,11 @@ bootstrap/



-  <!-- Browser compatibility
+  <!-- Browser support
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
-      <h1 id="browsers">Browser compatibility</h1>
+      <h1 id="browsers">Browser support</h1>
    </div>
    <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>

@ -153,10 +149,64 @@ bootstrap/
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
    <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
+
+    <h3>Windows Phone 8 and Internet Explorer 10</h3>
+    <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+{% highlight css %}
+@-webkit-viewport   { width: device-width; }
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@viewport           { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+  var msViewportStyle = document.createElement("style");
+  msViewportStyle.appendChild(
+    document.createTextNode(
+      "@-ms-viewport{width:auto!important}"
+    )
+  );
+  document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
+}
+{% endhighlight %}
+    <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
  </div>



+  <!-- Third party support
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="third-parties">Third party support</h1>
+    </div>
+    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.</p>
+
+    <h3>Google Maps</h3>
+    <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% highlight css %}
+/* Fix Google Maps canvas
+ *
+ * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
+ * global `box-sizing` changes. You may optionally need to reset the `max-width`
+ * on images in case you've applied that anywhere else. (That shouldn't be as
+ * necessary with Bootstrap 3 though as that behavior is relegated to the
+ * `.img-responsive` class.)
+ */
+
+.google-map-canvas,
+.google-map-canvas * { .box-sizing(content-box); }
+
+/* Optional responsive image override */
+img { max-width: none; }
+{% endhighlight %}
+  </div>
+
+
+
+
  <!-- License FAQs
  ================================================== -->
  <div class="bs-docs-section">
--- a/index.html
+++ b/index.html
@ -9,7 +9,8 @@ base_url: "./"
    <h1>Bootstrap 3</h1>
    <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
    <p>
-      <a href="{{ site.download_dist }}" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
+      <a href="{{ site.download }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download latest BS3</a>
    </p>
+    <p><strong>Heads up!</strong> Downloads are pulled directly from the latest commited code on GitHub, and as a result our docs may at times be out of sync.</p>
  </div>
 </div>
--- a/javascript.html
+++ b/javascript.html
@ -15,7 +15,7 @@ base_url: "../"
    </div>

    <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (using bootstrap's individual <code>*.js</code> files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
+    <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>

    <div class="bs-callout bs-callout-danger">
      <h4>Do not attempt to include both.</h4>
@ -24,11 +24,11 @@ base_url: "../"

    <div class="bs-callout bs-callout-danger">
      <h4>Plugin dependencies</h4>
-      <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p>
+      <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</p>
    </div>

    <h3 id="js-data-attrs">Data attributes</h3>
-    <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
+    <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>

    <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
 {% highlight js %}
@ -59,12 +59,12 @@ $("#myModal").modal('show')                // initializes and invokes show immed
    <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
 {% highlight js %}
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
 {% endhighlight %}

    <h3 id="js-events">Events</h3>
    <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-    <p>As of 3.0.0, all bootstrap events are namespaced.</p>
+    <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
    <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
 {% highlight js %}
 $('#myModal').on('show.bs.modal', function (e) {
@ -89,7 +89,7 @@ $('#myModal').on('show.bs.modal', function (e) {
    <h3>About transitions</h3>
    <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
    <h3>What's inside</h3>
-    <p>Transition.js is a basic helper for transitionEnd events as well as a css transition emulator. It's used by the other plugins to check for css transition support and to catch hanging transitions.</p>
+    <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
  </div>


@ -189,11 +189,11 @@ $('#myModal').on('show.bs.modal', function (e) {
    </div><!-- /.modal -->

    <div class="bs-example" style="padding-bottom: 24px;">
-      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
    </div><!-- /example -->
 {% highlight html %}
  <!-- Button trigger modal -->
-  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal">
@ -207,8 +207,8 @@ $('#myModal').on('show.bs.modal', function (e) {
          ...
        </div>
        <div class="modal-footer">
-          <a href="#" class="btn">Close</a>
-          <a href="#" class="btn btn-primary">Save changes</a>
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
@ -262,7 +262,7 @@ $('#myModal').on('show.bs.modal', function (e) {
           <td>remote</td>
           <td>path</td>
           <td>false</td>
-           <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
+           <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
 {% highlight html %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
 {% endhighlight %}
@ -397,7 +397,7 @@ $('#myModal').on('hidden.bs.modal', function () {
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Regular link</a></li>
        <li class="dropdown">
-          <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+          <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
          <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -407,7 +407,7 @@ $('#myModal').on('hidden.bs.modal', function () {
          </ul>
        </li>
        <li class="dropdown">
-          <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+          <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
          <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -417,7 +417,7 @@ $('#myModal').on('hidden.bs.modal', function () {
          </ul>
        </li>
        <li class="dropdown">
-          <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+          <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
          <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -436,7 +436,7 @@ $('#myModal').on('hidden.bs.modal', function () {
    <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
+  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
@ -445,7 +445,7 @@ $('#myModal').on('hidden.bs.modal', function () {
          <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@ -465,7 +465,7 @@ $('.dropdown-toggle').dropdown()

    <h3>Methods</h3>
    <h4>$().dropdown('toggle')</h4>
-    <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
+    <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
  </div>


@ -531,7 +531,7 @@ $('.dropdown-toggle').dropdown()
    <h3>Via JavaScript</h3>
    <p>Call the scrollspy via JavaScript:</p>
 {% highlight js %}
-$('#navbar-example').scrollspy(options)
+$('body').scrollspy({ target: '#navbar-example' })
 {% endhighlight %}

    <div class="bs-callout bs-callout-danger">
@ -802,7 +802,7 @@ $('#example').tooltip(options)
           <td>title</td>
           <td>string | function</td>
           <td>''</td>
-           <td>default title value if <code>title</code> tag isn't present</td>
+           <td>default title value if <code>title</code> attribute isn't present</td>
         </tr>
         <tr>
           <td>trigger</td>
@ -957,22 +957,22 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {

    <h3>Live demo</h3>
    <div class="bs-example" style="padding-bottom: 24px;">
-      <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+      <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
    </div>

    <h4>Four directions</h4>
    <div class="bs-example tooltip-demo">
      <div class="bs-example-tooltips">
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
          Popover on left
        </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
          Popover on top
        </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
          Popover on bottom
        </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
          Popover on right
        </button>
      </div>
@ -1480,7 +1480,7 @@ $(".collapse").collapse()
           <td>parent</td>
           <td>selector</td>
           <td>false</td>
-           <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
+           <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>accordion-group</code> class)</td>
         </tr>
         <tr>
           <td>toggle</td>
@ -1794,7 +1794,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
      <h4>Requires independent styling ;)</h4>
      <p>
        Affix toggles between three states/classes: <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin).
-        The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with js relative to the <code>offset: { bottom: number }</code> option you've provided.
+        The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided.
      </p>
    </div>

--- a/js/button.js
+++ b/js/button.js
@ -56,7 +56,9 @@
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
-      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
    }

--- a/js/collapse.js
+++ b/js/collapse.js
@ -48,7 +48,7 @@
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return

-    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')

    if (actives && actives.length) {
      var hasData = actives.data('bs.collapse')
--- a/js/popover.js
+++ b/js/popover.js
@ -58,7 +58,13 @@

    $tip.removeClass('fade top bottom left right in')

-    $tip.find('.popover-title:empty').hide()
+    // Hide empty titles
+    //
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if ($tip.find('.popover-title').html() === '') {
+      $tip.find('.popover-title').hide();
+    }
  }

  Popover.prototype.hasContent = function () {
@ -75,6 +81,10 @@
            o.content)
  }

+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
+  }
+
  Popover.prototype.tip = function () {
    if (!this.$tip) this.$tip = $(this.options.template)
    return this.$tip
--- a/js/tooltip.js
+++ b/js/tooltip.js
@ -179,12 +179,9 @@
          .addClass(placement)
      }

-      var tp = placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
-            /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+      var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)

-      this.applyPlacement(tp, placement)
+      this.applyPlacement(calculatedOffset, placement)
      this.$element.trigger('shown.bs.' + this.type)
    }
  }
@ -196,25 +193,33 @@
    var height = $tip[0].offsetHeight

    // manually read margins because getBoundingClientRect includes difference
-    offset.top  = offset.top  + parseInt($tip.css('margin-top'), 10)
-    offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft

    $tip
      .offset(offset)
      .addClass('in')

+    // check to see if placing tip in new offset caused the tip to resize itself
    var actualWidth  = $tip[0].offsetWidth
    var actualHeight = $tip[0].offsetHeight

    if (placement == 'top' && actualHeight != height) {
      replace = true
-      offset.top  = offset.top + height - actualHeight
+      offset.top = offset.top + height - actualHeight
    }

-    if (placement == 'bottom' || placement == 'top') {
+    if (/bottom|top/.test(placement)) {
      var delta = 0

-      if (offset.left < 0){
+      if (offset.left < 0) {
        delta       = offset.left * -2
        offset.left = 0

@ -249,6 +254,8 @@
    var $tip = this.tip()
    var e    = $.Event('hide.bs.' + this.type)

+    function complete() { $tip.detach() }
+
    this.$element.trigger(e)

    if (e.isDefaultPrevented()) return
@ -257,9 +264,9 @@

    $.support.transition && this.$tip.hasClass('fade') ?
      $tip
-        .one($.support.transition.end, $tip.detach)
+        .one($.support.transition.end, complete)
        .emulateTransitionEnd(150) :
-      $tip.detach()
+      complete()

    this.$element.trigger('hidden.bs.' + this.type)

@ -285,6 +292,13 @@
    }, this.$element.offset())
  }

+  Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
  Tooltip.prototype.getTitle = function () {
    var title
    var $e = this.$element
@ -300,8 +314,8 @@
    return this.$tip = this.$tip || $(this.options.template)
  }

-  Tooltip.prototype.arrow =function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
  }

  Tooltip.prototype.validate = function () {
--- a/less/alerts.less
+++ b/less/alerts.less
@ -7,7 +7,7 @@
 // -------------------------

 .alert {
-  padding: 10px 35px 10px 15px;
+  padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
  margin-bottom: @line-height-computed;
  color: @alert-text;
  background-color: @alert-bg;
@ -26,7 +26,7 @@
  }
  // Provide class for links that match alerts
  .alert-link {
-    font-weight: 500;
+    font-weight: @alert-link-font-weight;
    color: darken(@alert-text, 10%);
  }

@ -37,33 +37,26 @@
    right: -21px;
    color: inherit;
  }
+
+  // Improve alignment and spacing of inner content
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+  > p + p {
+    margin-top: 5px;
+  }
 }

 // Alternate styles
 // -------------------------

 .alert-success {
-  .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
 }
 .alert-danger {
-  .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
+  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
 }
 .alert-info {
-  .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
-}
-
-// Block alerts
-// -------------------------
-
-.alert-block {
-  padding-top: 15px;
-  padding-bottom: 15px;
-
-  > p,
-  > ul {
-    margin-bottom: 0;
-  }
-  p + p {
-    margin-top: 5px;
-  }
+  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
 }
--- a/less/badges.less
+++ b/less/badges.less
@ -9,14 +9,14 @@
  min-width: 10px;
  padding: 3px 7px;
  font-size: @font-size-small;
-  font-weight: bold;
+  font-weight: @badge-font-weight;
  color: @badge-color;
-  line-height: 1;
+  line-height: @badge-line-height;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: @badge-bg;
-  border-radius: 10px;
+  border-radius: @badge-border-radius;

  // Empty labels/badges collapse
  &:empty {
--- a/less/button-groups.less
+++ b/less/button-groups.less
@ -3,11 +3,32 @@
 // --------------------------------------------------

 // Button carets
-.btn .caret {
-  border-top-color: @btn-default-color;
+//
+// Match the button text color to the arrow/caret for indicating dropdown-ness.
+
+.caret {
+  .btn-default & {
+    border-top-color: @btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-top-color: #fff;
+  }
 }
-.dropup .btn .caret {
-  border-bottom-color: @btn-default-color;
+.dropup .caret {
+  .btn-default & {
+    border-bottom-color: @btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-bottom-color: #fff;
+  }
 }

 // Make the div behave like a button
@ -22,9 +43,14 @@
    // Bring the "active" button to the front
    &:hover,
    &:focus,
-    &:active {
+    &:active,
+    &.active {
      z-index: 2;
    }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
  }
 }

@ -100,7 +126,7 @@
  padding-left: 8px;
  padding-right: 8px;
 }
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
 }
@ -117,12 +143,12 @@
  margin-left: 0;
 }
 // Carets in other button sizes
-.btn-large .caret {
-  border-width: 5px;
+.btn-lg .caret {
+  border-width: @caret-width-large;
 }
 // Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
+.dropup .btn-lg .caret {
+  border-bottom-width: @caret-width-large;
 }


@ -142,10 +168,10 @@
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
-  &:first-child {
+  &:first-child:not(:last-child) {
    .border-bottom-radius(0);
  }
-  &:last-child {
+  &:last-child:not(:first-child) {
    .border-top-radius(0);
  }
 }
@ -157,6 +183,7 @@
 .btn-group-justified {
  display: table;
  width: 100%;
+  table-layout: fixed;
  .btn {
    float: none;
    display: table-cell;
--- a/less/buttons.less
+++ b/less/buttons.less
@ -12,7 +12,7 @@
  padding: @padding-base-vertical @padding-base-horizontal;
  margin-bottom: 0; // For input.btn
  font-size: @font-size-base;
-  font-weight: 500;
+  font-weight: @btn-font-weight;
  line-height: @line-height-base;
  text-align: center;
  vertical-align: middle;
@ -28,7 +28,7 @@

  &:hover,
  &:focus {
-    color: @btn-hover-color;
+    color: @btn-default-color;
    text-decoration: none;
  }

@ -54,26 +54,26 @@
 // --------------------------------------------------

 .btn-default {
-  .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
+  .btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
+  .btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
+  .btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
+  .btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
+  .btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
+  .btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
 }


@ -110,7 +110,7 @@
  fieldset[disabled] & {
    &:hover,
    &:focus {
-      color: @gray-dark;
+      color: @btn-link-disabled-color;
      text-decoration: none;
    }
  }
@ -120,19 +120,20 @@
 // Button Sizes
 // --------------------------------------------------

-.btn-large {
+.btn-lg {
  padding: @padding-large-vertical @padding-large-horizontal;
  font-size: @font-size-large;
+  line-height: @line-height-large; // ensure even-numbered height of button next to large input
  border-radius: @border-radius-large;
 }
-.btn-small,
-.btn-mini {
+.btn-sm,
+.btn-xs {
  padding: @padding-small-vertical @padding-small-horizontal;
  font-size: @font-size-small;
-  line-height: 1.5; // ensure proper height of button next to small input
+  line-height: @line-height-small; // ensure proper height of button next to small input
  border-radius: @border-radius-small;
 }
-.btn-mini {
+.btn-xs {
  padding: 3px 5px;
 }

--- a/less/carousel.less
+++ b/less/carousel.less
@ -69,9 +69,9 @@
  top: 0;
  left: 0;
  bottom: 0;
-  width: 15%;
-  .opacity(.5);
-  font-size: 20px;
+  width: @carousel-control-width;
+  .opacity(@carousel-control-opacity);
+  font-size: @carousel-control-font-size;
  color: @carousel-control-color;
  text-align: center;
  text-shadow: @carousel-text-shadow;
@ -81,13 +81,11 @@
  // Set gradients for backgrounds
  &.left {
    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
-    background-color: transparent;
  }
  &.right {
    left: auto;
    right: 0;
    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
-    background-color: transparent;
  }

  // Hover/focus state
@ -127,14 +125,17 @@
 }

 // Optional indicator pips
-// -----------------------------
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
 .carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
-  width: 120px;
-  margin-left: -60px;
+  width: 60%;
+  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
--- a/less/close.less
+++ b/less/close.less
@ -6,7 +6,7 @@
 .close {
  float: right;
  font-size: (@font-size-base * 1.5);
-  font-weight: bold;
+  font-weight: @close-font-weight;
  line-height: 1;
  color: @close-color;
  text-shadow: @close-text-shadow;
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@ -11,12 +11,18 @@
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
-  border-top:   4px solid @dropdown-caret-color;
-  border-right: 4px solid transparent;
-  border-left:  4px solid transparent;
+  border-top:   @caret-width-base solid @dropdown-caret-color;
+  border-right: @caret-width-base solid transparent;
+  border-left:  @caret-width-base solid transparent;
  content: "";
 }

+// The dropdown wrapper (div)
+// --------------------------
+.dropdown {
+  position: relative;
+}
+
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {
@ -68,6 +74,7 @@
    text-decoration: none;
    color: @dropdown-link-hover-color;
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+    background-color: darken(@dropdown-link-hover-bg, 5%);
  }
 }

@ -81,6 +88,7 @@
    text-decoration: none;
    outline: 0;
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+    background-color: darken(@dropdown-link-active-bg, 5%);
  }
 }

--- a/less/forms.less
+++ b/less/forms.less
@ -129,11 +129,8 @@ input[type="number"] {
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();

  // Disabled and read-only inputs
  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
@ -218,32 +215,34 @@ input[type="number"] {
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!

-.input-large {
+.input-lg {
  height: @input-height-large;
  padding: @padding-large-vertical @padding-large-horizontal;
  font-size: @font-size-large;
+  line-height: @line-height-large;
  border-radius: @border-radius-large;
 }
-.input-small {
+.input-sm {
  height: @input-height-small;
  padding: @padding-small-vertical @padding-small-horizontal;
  font-size: @font-size-small;
+  line-height: @line-height-small;
  border-radius: @border-radius-small;
 }

 select {
-  &.input-large {
+  &.input-lg {
    height: @input-height-large;
    line-height: @input-height-large;
  }
-  &.input-small {
+  &.input-sm {
    height: @input-height-small;
    line-height: @input-height-small;
  }
 }
 textarea {
-  &.input-large,
-  &.input-small {
+  &.input-lg,
+  &.input-sm {
    height: auto;
  }
 }
@ -255,15 +254,26 @@ textarea {

 // Warning
 .has-warning {
-  .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
+  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
 // Error
 .has-error {
-  .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
+  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 // Success
 .has-success {
-  .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  margin-bottom: 0; // Remove default margin from `p`
+  padding-top: @padding-base-vertical;
 }


@ -278,3 +288,57 @@ textarea {
  margin-bottom: 10px;
  color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
+
+
+
+// Inline forms
+//
+// Make forms appear inline(-block).
+
+.form-inline {
+  .form-control,
+  .radio,
+  .checkbox {
+    display: inline-block;
+  }
+
+  // Remove default margin on radios/checkboxes that were used for stacking, and
+  // then undo the floating of radios and checkboxes to match (which also avoids
+  // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
+  .radio,
+  .checkbox {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+  .radio input[type="radio"],
+  .checkbox input[type="checkbox"] {
+    float: none;
+    margin-left: 0;
+  }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal .control-label,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: @padding-base-vertical;
+}
+
+.form-horizontal {
+  .form-group {
+    .make-row();
+  }
+}
+
+// Only right align form labels here when the columns stop stacking
+@media (min-width: @screen-tablet) {
+  .form-horizontal .control-label {
+    text-align: right;
+  }
+}
--- a/less/grid.less
+++ b/less/grid.less
@ -63,7 +63,7 @@
 // Container and grid column sizing
 //

-// Tiny device columns (smartphones)
+// Extra small device columns (smartphones)
 .col-1,
 .col-2,
 .col-3,
@ -92,7 +92,7 @@
 .col-12 { width: 100%; }

 // Small device columns (phones to tablets)
-@media (min-width: @screen-tablet) {
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  .container {
    max-width: @container-tablet;
  }
@ -125,29 +125,42 @@
  .col-sm-12 { width: 100%; }

  // Push and pull columns for source order changes
-  .col-push-1  { left: percentage((1 / @grid-columns)); }
-  .col-push-2  { left: percentage((2 / @grid-columns)); }
-  .col-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-push-11 { left: percentage((11/ @grid-columns)); }
+  .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ @grid-columns)); }

-  .col-pull-1  { right: percentage((1 / @grid-columns)); }
-  .col-pull-2  { right: percentage((2 / @grid-columns)); }
-  .col-pull-3  { right: percentage((3 / @grid-columns)); }
-  .col-pull-4  { right: percentage((4 / @grid-columns)); }
-  .col-pull-5  { right: percentage((5 / @grid-columns)); }
-  .col-pull-6  { right: percentage((6 / @grid-columns)); }
-  .col-pull-7  { right: percentage((7 / @grid-columns)); }
-  .col-pull-8  { right: percentage((8 / @grid-columns)); }
-  .col-pull-9  { right: percentage((9 / @grid-columns)); }
-  .col-pull-10 { right: percentage((10/ @grid-columns)); }
-  .col-pull-11 { right: percentage((11/ @grid-columns)); }
+  .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }

 // Medium and large device columns (desktop and up)
@ -182,18 +195,43 @@
  .col-lg-11 { width: percentage((11/ @grid-columns)); }
  .col-lg-12 { width: 100%; }

+  // Push and pull columns for source order changes
+  .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
+
  // Offsets
-  .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-  .col-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-  .col-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-  .col-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-  .col-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-  .col-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-  .col-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-  .col-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-  .col-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-  .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-  .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+  .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }

 // Large desktops and up
--- a/less/input-groups.less
+++ b/less/input-groups.less
@ -5,6 +5,7 @@
 // Base styles
 // -------------------------
 .input-group {
+  position: relative; // For dropdowns
  display: table;
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

@ -43,23 +44,22 @@
 // Text input groups
 // -------------------------
 .input-group-addon {
-  .box-sizing(border-box);
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  font-weight: normal;
-  line-height: @line-height-base;
+  line-height: 1;
  text-align: center;
  background-color: @gray-lighter;
  border: 1px solid @input-group-addon-border-color;
  border-radius: @border-radius-base;

  // Sizing
-  &.input-small {
+  &.input-sm {
    padding: @padding-small-vertical @padding-small-horizontal;
    font-size: @font-size-small;
    border-radius: @border-radius-small;
  }
-  &.input-large {
+  &.input-lg {
    padding: @padding-large-vertical @padding-large-horizontal;
    font-size: @font-size-large;
    border-radius: @border-radius-large;
@ -112,42 +112,3 @@
    z-index: 2;
  }
 }
-
-
-// Inline forms
-// --------------------------------------------------
-
-.form-inline {
-  .form-control,
-  .radio,
-  .checkbox {
-    display: inline-block;
-  }
-  .radio,
-  .checkbox {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-
-// Horizontal forms
-// --------------------------------------------------
-// Horizontal forms are built on grid classes.
-
-.form-horizontal .control-label {
-  padding-top: 9px;
-}
-
-.form-horizontal {
-  .form-group {
-    .make-row();
-  }
-}
-
-// Only right align form labels here when the columns stop stacking
-@media (min-width: @screen-tablet) {
-  .form-horizontal .control-label {
-    text-align: right;
-  }
-}
--- a/less/labels.less
+++ b/less/labels.less
@ -12,7 +12,6 @@
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
-  background-color: @gray-light;
  border-radius: .25em;

  // Add hover effects, but only for links
@ -22,13 +21,17 @@
      color: @label-link-hover-color;
      text-decoration: none;
      cursor: pointer;
-      background-color: darken(@gray-light, 10%);
    }
  }
 }

 // Colors
 // Contextual variations (linked labels get darker on :hover)
+
+.label-default {
+  .label-variant(@label-default-bg);
+}
+
 .label-danger {
  .label-variant(@label-danger-bg);
 }
--- a/less/list-group.less
+++ b/less/list-group.less
@ -37,6 +37,9 @@
    float: right;
    margin-right: -15px;
  }
+  > .badge + .badge {
+    margin-right: 0;
+  }
 }

 // Custom content options
--- a/less/mixins.less
+++ b/less/mixins.less
@ -44,12 +44,12 @@
 }

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

 // Placeholder text
@ -130,25 +130,25 @@
 // Transformations
 .rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees); // IE9+
          transform: rotate(@degrees);
 }
 .scale(@ratio) {
  -webkit-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
+      -ms-transform: scale(@ratio); // IE9+
          transform: scale(@ratio);
 }
-.translate(@x, @y) {
+.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
 }
-.skew(@x, @y) {
+.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
 }
-.translate3d(@x, @y, @z) {
+.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
 }
@ -165,12 +165,12 @@

 // Background clipping
 .background-clip(@clip) {
-          background-clip: @clip;
+  background-clip: @clip;
 }

 // Background sizing
 .background-size(@size) {
-          background-size: @size;
+  background-size: @size;
 }

 // Box sizing
@ -185,7 +185,7 @@
 .user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
-      -ms-user-select: @select;
+      -ms-user-select: @select; // IE10+
       -o-user-select: @select;
          user-select: @select;
 }
@ -197,7 +197,7 @@
 }

 // CSS3 Content Columns
-.content-columns(@column-count, @column-gap: @grid-gutter-width) {
+.content-columns(@column-count; @column-gap: @grid-gutter-width) {
  -webkit-column-count: @column-count;
     -moz-column-count: @column-count;
          column-count: @column-count;
@ -211,7 +211,7 @@
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
-      -ms-hyphens: @mode;
+      -ms-hyphens: @mode; // IE10+
       -o-hyphens: @mode;
          hyphens: @mode;
 }
@ -235,8 +235,7 @@
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
-  .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-color: @end-color;
+  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@ -249,8 +248,7 @@
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
-  .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-color: @end-color;
+  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@ -259,15 +257,13 @@
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
  }

-  .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
-    background-color: @end-color;
+  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
    background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
  }
-  .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
-    background-color: mix(@mid-color, @end-color, 80%);
+  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
    background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
    background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
@ -275,9 +271,7 @@
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }
-
-  .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
-    background-color: mix(@mid-color, @end-color, 80%);
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
    background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
@ -285,16 +279,14 @@
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }
-  .radial(@inner-color: #555, @outer-color: #333) {
-    background-color: @outer-color;
+  .radial(@inner-color: #555; @outer-color: #333) {
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
    background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
    background-image: radial-gradient(circle, @inner-color, @outer-color);
    background-repeat: no-repeat;
  }
-  .striped(@color: #555, @angle: 45deg) {
-    background-color: @color;
+  .striped(@color: #555; @angle: 45deg) {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@ -316,7 +308,7 @@
 // --------------------------------------------------

 // Short retina mixin for setting background-image and -size
-.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
+.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
@ -347,7 +339,7 @@

 // Alerts
 // -------------------------
-.alert-variant(@background, @border, @text-color) {
+.alert-variant(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;
@ -363,7 +355,7 @@
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@color, @background, @border) {
+.btn-pseudo-states(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
@ -372,8 +364,9 @@
  &:focus,
  &:active,
  &.active {
-    background-color: darken(@background, 5%);
-        border-color: darken(@border, 10%);
+    color: @color;
+    background-color: darken(@background, 8%);
+        border-color: darken(@border, 12%);
  }

  &.disabled,
@ -405,7 +398,7 @@
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 .navbar-vertical-align(@element-height) {
  margin-top: ((@navbar-height - @element-height) / 2);
  margin-bottom: ((@navbar-height - @element-height) / 2);
@ -520,7 +513,7 @@
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.

-.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
  // Color the label and help text
  .help-block,
  .control-label {
@ -528,7 +521,6 @@
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
-    padding-right: 32px; // to account for the feedback icon
    border-color: @border-color;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
@ -544,3 +536,25 @@
    background-color: @background-color;
  }
 }
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-focus-border` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}
--- a/less/modals.less
+++ b/less/modals.less
@ -29,7 +29,7 @@
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
-  &.fade.in  .modal-dialog { .translate(0, 0)}
+  &.in .modal-dialog { .translate(0, 0)}
 }

 // Shell div to position the modal with bottom padding
@ -65,7 +65,7 @@
  background-color: @modal-backdrop-bg;
  // Fade for backdrop
  &.fade { .opacity(0); }
-  &.fade.in { .opacity(.5); }
+  &.in { .opacity(.5); }
 }

 // Modal header
--- a/less/navbar.less
+++ b/less/navbar.less
@ -10,7 +10,7 @@
  padding-left: @navbar-padding-horizontal;
  padding-right: @navbar-padding-horizontal;
  background-color: @navbar-bg;
-  border-radius: @border-radius-base;
+  border-radius: @navbar-border-radius;

  // Prevent floats from breaking the navbar
  .clearfix();
@ -20,15 +20,13 @@
 // -------------------------

 .navbar-nav {
-  // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
-  margin-top: 10px;
  margin-bottom: 15px;

  > li > a {
    padding-top: ((@navbar-height - @line-height-computed) / 2);
    padding-bottom: ((@navbar-height - @line-height-computed) / 2);
    color: @navbar-link-color;
-    line-height: 20px;
+    line-height: @line-height-computed;
    border-radius: @border-radius-base;
    &:hover,
    &:focus {
@ -88,6 +86,39 @@
  margin-bottom: 0; // override .navbar defaults
 }

+.nav-collapse {
+  // Space out collapsed contents within the mobile navbar
+  padding-bottom: @navbar-padding-vertical;
+  // Clear floated elements and prevent collapsing of padding
+  .clearfix();
+
+  // When there is no `.navbar-brand` present (which normally sits between the
+  // navbar brand and toggle), prevent the nav from overlapping the toggle.
+  .navbar-toggle + & {
+    width: 100%;
+    margin-top: @navbar-height;
+  }
+}
+
+
+// Scrollable navbar navigation
+//
+// Sometimes you might have too many links in your fixed navbar and you need to
+// maintain access to all that content. To help, add `.nav-collapse-scrollable`
+// to your `.nav-collapse` to prevent the the content from flowing past the max-
+// height of your browser.
+//
+// This is not automatically added to the `.navbar-fixed-top` because it causes
+// z-index bugs in iOS7 (possibly earlier).
+
+@media (max-width: @screen-small) {
+  .nav-collapse-scrollable {
+    margin-bottom: @navbar-padding-vertical;
+    max-height: 360px;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+}


 //
@ -116,12 +147,12 @@

 // Collapsible navbar toggle
 .navbar-toggle {
-  position: absolute;
-  top: floor((@navbar-height - 32) / 2);
-  right: 10px;
+  position: relative;
+  float: right;
+  height: 34px;
  width: 48px;
-  height: 32px;
-  padding: 8px 12px;
+  .navbar-vertical-align(34px);
+  padding: @padding-base-vertical @padding-base-horizontal;
  background-color: transparent;
  border: 1px solid @navbar-toggle-border-color;
  border-radius: @border-radius-base;
@ -302,6 +333,7 @@
    float: left;
    margin-left: -(@navbar-padding-horizontal);
    margin-right: 5px;
+    max-width: none; // Disables the default mobile setting
  }
  .navbar-nav {
    float: left;
@ -317,7 +349,6 @@
    }

    &.pull-right {
-      float: right;
      width: auto;
    }
  }
@ -332,6 +363,7 @@
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
+    padding-bottom: 0; // Override default setting
    overflow: visible !important;
  }

@ -354,6 +386,8 @@
 // Add a class to make any element properly align itself vertically within the navbars.

 .navbar-text {
+  float: left;
+  padding: 0 @navbar-padding-horizontal;
  .navbar-vertical-align(@line-height-computed);
 }

--- a/less/navs.less
+++ b/less/navs.less
@ -56,12 +56,6 @@
    }
  }

-  // Redeclare pull classes because of specificity
-  // Todo: consider making these utilities !important to avoid this bullshit
-  > .pull-right {
-    float: right;
-  }
-
  // Dividers (basically an hr) within the dropdown
  .nav-divider {
    .nav-divider();
@ -69,40 +63,6 @@
 }


-
-// Nav variations
-// --------------------------------------------------
-
-// Justified nav links
-// -------------------------
-
-.nav-justified {
-  width: 100%;
-  > li {
-    float: none;
-    display: table-cell;
-    width: 1%;
-    > a {
-      text-align: center;
-    }
-  }
-}
-
-// Move borders to anchors instead of bottom of list
-.nav-tabs-justified {
-  border-bottom: 0;
-  > li > a {
-    border-bottom: 1px solid @nav-tabs-justified-link-border-color;
-
-    // Override margin from .nav-tabs
-    margin-right: 0;
-  }
-  > .active > a {
-    border-bottom-color: @nav-tabs-justified-active-link-border-color;
-  }
-
-}
-
 // Tabs
 // -------------------------

@ -185,6 +145,39 @@
 }


+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  width: 100%;
+  > li {
+    float: none;
+    display: table-cell;
+    width: 1%;
+    > a {
+      text-align: center;
+    }
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+.nav-tabs-justified {
+  border-bottom: 0;
+  > li > a {
+    border-bottom: 1px solid @nav-tabs-justified-link-border-color;
+
+    // Override margin from .nav-tabs
+    margin-right: 0;
+  }
+  > .active > a {
+    border-bottom-color: @nav-tabs-justified-active-link-border-color;
+  }
+}
+
+
 // Tabbable tabs
 // -------------------------

--- a/less/pagination.less
+++ b/less/pagination.less
@ -12,7 +12,7 @@
    > a,
    > span {
      float: left; // Collapse white-space
-      padding: 4px 12px;
+      padding: @padding-base-vertical @padding-base-horizontal;
      line-height: @line-height-base;
      text-decoration: none;
      background-color: @pagination-bg;
@ -62,7 +62,7 @@
 // --------------------------------------------------

 // Large
-.pagination-large {
+.pagination-lg {
  > li {
    > a,
    > span {
@ -85,7 +85,7 @@
 }

 // Small
-.pagination-small {
+.pagination-sm {
  > li {
    > a,
    > span {
--- a/less/panels.less
+++ b/less/panels.less
@ -11,6 +11,24 @@
  border: 1px solid @panel-border;
  border-radius: @panel-border-radius;
  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+
+  // List groups in panels
+  .list-group {
+    margin: 15px -15px -15px;
+
+    .list-group-item {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child {
+        .border-top-radius(0);
+      }
+      // But keep it for the last one
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
 }

 // Optional heading
@ -29,6 +47,9 @@
  margin-bottom: 0;
  font-size: (@font-size-base * 1.25);
  font-weight: 500;
+  > a {
+    color: inherit;
+  }
 }

 // Optional footer (stays gray in every modifier class)
@ -82,21 +103,3 @@
    border-color: @panel-info-border;
  }
 }
-
-// List groups in panels
-.list-group-flush {
-  margin: 15px -15px -15px;
-
-  .list-group-item {
-    border-width: 1px 0;
-
-    // Remove border radius for top one
-    &:first-child {
-      .border-top-radius(0);
-    }
-    // But keep it for the last one
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-}
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@ -18,19 +18,13 @@
  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
+// Spec and IE10+
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
--- a/less/tables.less
+++ b/less/tables.less
@ -162,7 +162,7 @@ table {
  > th.active,
  &.active > td,
  &.active > th  {
-    background-color: @table-bg-hover;
+    background-color: @table-bg-active;
  }
  > td.success,
  > th.success,
--- a/less/tooltip.less
+++ b/less/tooltip.less
@ -13,7 +13,7 @@
  line-height: 1.4;
  .opacity(0);

-  &.in     { .opacity(1); }
+  &.in     { .opacity(.9); }
  &.top    { margin-top:  -3px; padding: 5px 0; }
  &.right  { margin-left:  3px; padding: 0 5px; }
  &.bottom { margin-top:   3px; padding: 5px 0; }
--- a/less/type.less
+++ b/less/type.less
@ -141,18 +141,25 @@ dt {
 dd {
  margin-left: 0; // Undo browser default
 }
-// Horizontal layout (like forms)
-.dl-horizontal {
-  dt {
-    float: left;
-    width: (@component-offset-horizontal - 20);
-    clear: left;
-    text-align: right;
-    .text-overflow();
-  }
-  dd {
-    .clearfix(); // Clear the floated `dt` if an empty `dd` is present
-    margin-left: @component-offset-horizontal;
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+@media (min-width: @grid-float-breakpoint) {
+  .dl-horizontal {
+    dt {
+      float: left;
+      width: (@component-offset-horizontal - 20);
+      clear: left;
+      text-align: right;
+      .text-overflow();
+    }
+    dd {
+      margin-left: @component-offset-horizontal;
+      .clearfix(); // Clear the floated `dt` if an empty `dd` is present
+    }
  }
 }

@ -195,7 +202,6 @@ blockquote {

  // Float right with text-align: right
  &.pull-right {
-    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid @blockquote-border-color;
--- a/less/utilities.less
+++ b/less/utilities.less
@ -10,10 +10,10 @@
  .clearfix();
 }
 .pull-right {
-  float: right;
+  float: right !important;
 }
 .pull-left {
-  float: left;
+  float: left !important;
 }


--- a/less/variables.less
+++ b/less/variables.less
@ -60,21 +60,26 @@
 // -------------------------
 // Based on 14px font-size and 1.428 line-height (~20px to start)

-@padding-base-vertical:          8px;
+@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

-@padding-large-vertical:         14px;
+@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-bg:            @brand-primary;

+@caret-width-base:               4px;
+@caret-width-large:              5px;

 // Tables
 // -------------------------
@ -93,31 +98,33 @@
 // Buttons
 // -------------------------

-@btn-default-color:              #fff;
-@btn-default-bg:                 #474949;
-@btn-default-border:             @btn-default-bg;
+@btn-font-weight:                bold;

-@btn-primary-color:              @btn-default-color;
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
+
+@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             @btn-primary-bg;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);

-@btn-success-color:              @btn-default-color;
+@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
-@btn-success-border:             @btn-success-bg;
+@btn-success-border:             darken(@btn-success-bg, 5%);

-@btn-warning-color:              @btn-default-color;
+@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             @btn-warning-bg;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);

-@btn-danger-color:               @btn-default-color;
+@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              @btn-danger-bg;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);

-@btn-info-color:                 @btn-default-color;
+@btn-info-color:                 #fff;
@btn-info-bg:                    @brand-info;
-@btn-info-border:                @btn-info-bg;
+@btn-info-border:                darken(@btn-info-bg, 5%);

-@btn-hover-color:                @btn-default-color;
+@btn-link-disabled-color:        @gray-light;


 // Forms
@ -128,12 +135,13 @@

@input-border:                   #ccc;
@input-border-radius:            @border-radius-base;
+@input-border-focus:             #66afe9;

@input-color-placeholder:        @gray-light;

@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-@input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
-@input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
+@input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);

@legend-border-color:            #e5e5e5;

@ -177,9 +185,9 @@
 // Media queries breakpoints
 // --------------------------------------------------

-// Tiny screen / phone
-@screen-tiny:                480px;
-@screen-phone:               @screen-tiny;
+// Extra small screen / phone
+@screen-xsmall:              480px;
+@screen-phone:               @screen-xsmall;

 // Small screen / tablet
@screen-small:               768px;
@ -189,14 +197,16 @@
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

-// So media queries don't overlap when required, provide a maximum
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          @screen-small-max;
-
 // Large screen / wide desktop
@screen-large:               1200px;
@screen-large-desktop:       @screen-large;

+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          (@screen-desktop - 1);
+@screen-desktop-max:         (@screen-large-desktop - 1);
+
+
 // Grid system
 // --------------------------------------------------

@ -215,6 +225,7 @@
@navbar-height:                    50px;
@navbar-color:                     #777;
@navbar-bg:                        #eee;
+@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

@ -347,7 +358,7 @@
 // -------------------------
@tooltip-max-width:           200px;
@tooltip-color:               #fff;
-@tooltip-bg:                  rgba(0,0,0,.9);
+@tooltip-bg:                  #000;

@tooltip-arrow-width:         5px;
@tooltip-arrow-color:         @tooltip-bg;
@ -372,6 +383,8 @@

 // Labels
 // -------------------------
+
+@label-default-bg:            @gray-light;
@label-success-bg:            @brand-success;
@label-info-bg:               @brand-info;
@label-warning-bg:            @brand-warning;
@ -399,10 +412,13 @@

 // Alerts
 // -------------------------
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
@alert-bg:                    @state-warning-bg;
@alert-text:                  @state-warning-text;
@alert-border:                @state-warning-border;
-@alert-border-radius:         @border-radius-base;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text;
@ -495,11 +511,15 @@
 // -------------------------
@badge-color:                 #fff;
@badge-link-hover-color:      #fff;
-
@badge-bg:                    @gray-light;
+
@badge-active-color:          @link-color;
@badge-active-bg:             #fff;

+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+

 // Breadcrumbs
 // -------------------------
@ -510,12 +530,16 @@

 // Carousel
 // ------------------------
+
@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);

@carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;

-@carousel-indicator-border-color:             #fff;
@carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;

@carousel-caption-color:                      #fff;

@ -523,6 +547,7 @@
 // Close
 // ------------------------
@close-color:                 #000;
+@close-font-weight:           bold;
@close-text-shadow:           0 1px 0 #fff;


--- a/less/wells.less
+++ b/less/wells.less
@ -19,11 +19,11 @@
 }

 // Sizes
-.well-large {
+.well-lg {
  padding: 24px;
  border-radius: @border-radius-large;
 }
-.well-small {
+.well-sm {
  padding: 9px;
  border-radius: @border-radius-small;
 }
--- a/package.json
+++ b/package.json
@ -26,5 +26,6 @@
    , "grunt-contrib-qunit": "~0.2.2"
    , "grunt-contrib-watch": "~0.5.1"
    , "grunt-recess": "~0.3.3"
+    , "browserstack-runner": "~0.0.11"
  }
 }