diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..c97e8b81 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,75 @@ +# Contributing to Bootstrap + +Looking to contribute something to Bootstrap? **Here's how you can help.** + + + +## Reporting issues + +We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue. + +1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available. +2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test cases](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report. +3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases. +4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug. + + + +## Key branches + +- `master` is the latest, deployed version. +- `gh-pages` is the hosted docs (not to be used for pull requests). +- `*-wip` is the official work in progress branch for the next release. + + + +## Notes on the repo + +As of v2.0.0, Bootstrap's documentation is powered by Mustache templates and built via `make` before each commit and release. This was done to enable internationalization (translation) in a future release by uploading our strings to the [Twitter Translation Center](http://translate.twttr.com/). Any edits to the docs should be first done in the Mustache files and then recompiled into the HTML. + + + +## Pull requests + +- Try to submit pull requests against the latest `*-wip` branch for easier merging +- Any changes to the docs must be made to the Mustache templates, not just the compiled HTML pages +- CSS changes must be done in .less files first, never just the compiled files +- If modifying the .less files, always recompile and commit the compiled files bootstrap.css and bootstrap.min.css +- Try not to pollute your pull request with unintended changes--keep them simple and small +- Try to share which browsers your code has been tested in before submitting a pull request + + + +## Coding standards: HTML + +- Two spaces for indentation, never tabs +- Double quotes only, never single quotes +- Always use proper indentation +- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags) + + + +## Coding standards: CSS + +- Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/) +- 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 +- 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). + + + +## Coding standards: JS + +- No semicolons +- Comma first +- 2 spaces (no tabs) +- strict mode +- "Attractive" + + + +## License + +By contributing your code, you agree to license your contribution under the terms of the APLv2: https://github.com/twitter/bootstrap/blob/master/LICENSE diff --git a/Makefile b/Makefile index 9a791a3e..9e458194 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,10 @@ DATE=$(shell DATE) -BOOTSTRAP = ../css/bootstrap-2.0.1.css -BOOTSTRAP_MIN = ../css/bootstrap-2.0.1.min.css +BOOTSTRAP = ../css/bootstrap-2.2.2.css +BOOTSTRAP_MIN = ../css/bootstrap-2.2.2.min.css BOOTSTRAP_STYL = ./bootstrap.styl STYLUS_PROCESSOR ?= `which stylus` -build: +bootstrap: @@if test ! -z ${STYLUS_PROCESSOR}; then \ cd ./styl; \ stylus < ${BOOTSTRAP_STYL} > ${BOOTSTRAP}; \ @@ -14,3 +14,45 @@ build: echo "You must have the STYLUS compiler installed in order to build Bootstrap."; \ echo "You can install it by running: npm install stylus -g"; \ fi + +# +# RUN JSHINT & QUNIT TESTS IN PHANTOMJS +# + +test: + jshint js/*.js --config js/.jshintrc + jshint js/tests/unit/*.js --config js/.jshintrc + node js/tests/server.js & + phantomjs js/tests/phantom.js "http://localhost:3000/js/tests" + kill -9 `cat js/tests/pid.txt` + rm js/tests/pid.txt + +# +# CLEANS THE ROOT DIRECTORY OF PRIOR BUILDS +# + +clean: + rm -r bootstrap + +# +# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O ) +# + +gh-pages: bootstrap docs + rm -f docs/assets/bootstrap.zip + zip -r docs/assets/bootstrap.zip bootstrap + rm -r bootstrap + rm -f ../bootstrap-gh-pages/assets/bootstrap.zip + node docs/build production + cp -r docs/* ../bootstrap-gh-pages + +# +# WATCH LESS FILES +# + +watch: + echo "Watching less files..."; \ + watchr -e "watch('less/.*\.less') { system 'make' }" + + +.PHONY: docs watch gh-pages diff --git a/README.md b/README.md index 767cf03b..8f7d09c5 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,11 @@ +# bootstrap.stylus (v2.2.2) -# bootstrap.stylus (v2.0.1) - - Twitter's [Bootstrap](https://github.com/twitter/bootstrap) for [Stylus](https://github.com/learnboost/stylus). +Twitter's [Bootstrap](https://github.com/twitter/bootstrap) for [Stylus](https://github.com/learnboost/stylus). ## Installation - Bootstrap uses [nib](https://github.com/visionmedia/nib) for transparent CSS3 support and helpful mixins, but you simply need to `.use()` `bootstrap`, which in turn exposes `@import "bootstrap"`. +Bootstrap uses [nib](https://github.com/visionmedia/nib) for transparent CSS3 support and helpful mixins, but you simply need to `.use()` `bootstrap`, which in turn exposes `@import "bootstrap"`. ```js var stylus = require('stylus') @@ -27,6 +26,40 @@ var css = stylus(styl) Then you can __@import__ all or portions of the library: +## Versioning + +For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. + +Releases will be numbered with the following format: + +`..` + +And constructed with the following guidelines: + +* Breaking backward compatibility bumps the major (and resets the minor and patch) +* New additions without breaking backward compatibility bumps the minor (and resets the patch) +* Bug fixes and misc changes bumps the patch + +For more information on SemVer, please visit http://semver.org/. + +## Developers + +We have included a makefile with convenience methods for working with the Bootstrap library. + ++ **dependencies** +Our makefile depends on you having recess, connect, uglify.js, and jshint installed. To install, just run the following command in npm: + +``` +$ npm install recess connect uglify-js jshint -g +``` + ++ **build** - `make` +Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js. Read more in our docs » + ++ **watch** - `make watch` +This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem. + + ```css // everything @import 'bootstrap' @@ -35,6 +68,22 @@ Then you can __@import__ all or portions of the library: @import 'bootstrap/config' @import 'bootstrap/forms' ``` +## Contributing + +Please submit all pull requests against `*-wip` branches. If your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo). + +Thanks! + + + +## Authors + +**Mark Otto** + ++ http://twitter.com/mdo ++ http://github.com/mdo + +**Jacob Thornton** ## Configuration diff --git a/component.json b/component.json new file mode 100644 index 00000000..eda7edee --- /dev/null +++ b/component.json @@ -0,0 +1,8 @@ +{ + "name": "bootstrap", + "version": "2.2.2", + "main": ["./docs/assets/js/bootstrap.js", "./docs/assets/css/bootstrap.css"], + "dependencies": { + "jquery": "~1.8.0" + } +} \ No newline at end of file diff --git a/composer.json b/composer.json new file mode 100644 index 00000000..5ddf1363 --- /dev/null +++ b/composer.json @@ -0,0 +1,10 @@ +{ + "name": "twitter/bootstrap" + , "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development." + , "keywords": ["bootstrap", "css"] + , "homepage": "http://twitter.github.com/bootstrap/" + , "author": "Twitter Inc." + , "license": "Apache-2.0" + , "target-dir": "twitter/bootstrap" + +} diff --git a/css/bootstrap-2.0.1.css b/css/bootstrap-2.0.1.css deleted file mode 100644 index 390e641d..00000000 --- a/css/bootstrap-2.0.1.css +++ /dev/null @@ -1,3679 +0,0 @@ -/* - * Bootstrap v2.0.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world $twitter by $mdo and $fat. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} -audio:not([controls]) { - display: none; -} -html { - font-size: 100%; -} -html -webkit-text-size-adjust: 100% { - -ms-text-size-adjust: 100%; -} -a:hover, -a:active { - outline: 0; -} -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} -img { - max-width: 100%; - height: auto; - border: 0; - -ms-interpolation-mode: bicubic; -} -button, -input, -select, -textarea { - margin: 0; - font-size: 100%; - vertical-align: middle; -} -button, -input { - *overflow: visible; - line-height: normal; -} -button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; -} -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; -} -input[type="search"] { - -webkit-appearance: textfield; -} -input[type="search"] -webkit-box-sizing: content-box -moz-box-sizing: content-box { - box-sizing: content-box; -} -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -textarea { - overflow: auto; - vertical-align: top; -} -body { - margin: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; - color: #333; - background-color: #fff; -} -a { - color: #08c; - text-decoration: none; -} -a:hover { - color: #0074ad; - text-decoration: underline; -} -.row { - margin-left: -20px; - *zoom: 1; -} -.row:before, -.row:after { - display: table; - content: ""; -} -.row:after { - clear: both; -} -[class*="span"] { - float: left; - margin-left: 20px; -} -.span1 { - width: 60px; -} -.span2 { - width: 140px; -} -.span3 { - width: 220px; -} -.span4 { - width: 300px; -} -.span5 { - width: 380px; -} -.span6 { - width: 460px; -} -.span7 { - width: 540px; -} -.span8 { - width: 620px; -} -.span9 { - width: 700px; -} -.span10 { - width: 780px; -} -.span11 { - width: 860px; -} -.span12, -.container { - width: 940px; -} -.offset1 { - margin-left: 100px; -} -.offset2 { - margin-left: 180px; -} -.offset3 { - margin-left: 260px; -} -.offset4 { - margin-left: 340px; -} -.offset5 { - margin-left: 420px; -} -.offset6 { - margin-left: 500px; -} -.offset7 { - margin-left: 580px; -} -.offset8 { - margin-left: 660px; -} -.offset9 { - margin-left: 740px; -} -.offset10 { - margin-left: 820px; -} -.offset11 { - margin-left: 900px; -} -.row-fluid { - width: 100%; - *zoom: 1; -} -.row-fluid:before, -.row-fluid:after { - display: table; - content: ""; -} -.row-fluid:after { - clear: both; -} -.row-fluid > [class*="span"] { - float: left; - margin-left: 2.127659574%; -} -.row-fluid > [class*="span"]:first-child { - margin-left: 0; -} -.row-fluid > .span1 { - width: 6.382978723%; -} -.row-fluid > .span2 { - width: 14.89361702%; -} -.row-fluid > .span3 { - width: 23.404255317%; -} -.row-fluid > .span4 { - width: 31.914893614%; -} -.row-fluid > .span5 { - width: 40.425531911%; -} -.row-fluid > .span6 { - width: 48.93617020799999%; -} -.row-fluid > .span7 { - width: 57.446808505%; -} -.row-fluid > .span8 { - width: 65.95744680199999%; -} -.row-fluid > .span9 { - width: 74.468085099%; -} -.row-fluid > .span10 { - width: 82.97872339599999%; -} -.row-fluid > .span11 { - width: 91.489361693%; -} -.row-fluid > .span12 { - width: 99.99999998999999%; -} -.container { - width: 940px; - margin-left: auto; - margin-right: auto; - *zoom: 1; -} -.container:before, -.container:after { - display: table; - content: ""; -} -.container:after { - clear: both; -} -.container-fluid { - padding-left: 20px; - padding-right: 20px; - *zoom: 1; -} -.container-fluid:before, -.container-fluid:after { - display: table; - content: ""; -} -.container-fluid:after { - clear: both; -} -p { - margin: 0 0 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; -} -p small { - font-size: 11px; - color: #999; -} -.lead { - margin-bottom: 18px; - font-size: 20px; - font-weight: 200; - line-height: 27px; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - font-weight: bold; - color: #333; - text-rendering: optimizelegibility; -} -h1 small, -h2 small, -h3 small, -h4 small, -h5 small, -h6 small { - font-weight: normal; - color: #999; -} -h1 { - font-size: 30px; - line-height: 36px; -} -h1 small { - font-size: 18px; -} -h2 { - font-size: 24px; - line-height: 36px; -} -h2 small { - font-size: 18px; -} -h3 { - line-height: 27px; - font-size: 18px; -} -h3 small { - font-size: 14px; -} -h4, -h5, -h6 { - line-height: 18px; -} -h4 { - font-size: 14px; -} -h4 small { - font-size: 12px; -} -h5 { - font-size: 12px; -} -h6 { - font-size: 11px; - color: #999; - text-transform: uppercase; -} -.page-header { - padding-bottom: 17px; - margin: 18px 0; - border-bottom: 1px solid #eee; -} -.page-header h1 { - line-height: 1; -} -ul, -ol { - padding: 0; - margin: 0 0 9px 25px; -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} -ul { - list-style: disc; -} -ol { - list-style: decimal; -} -li { - line-height: 18px; -} -ul.unstyled, -ol.unstyled { - margin-left: 0; - list-style: none; -} -dl { - margin-bottom: 18px; -} -dt, -dd { - line-height: 18px; -} -dt { - font-weight: bold; -} -dd { - margin-left: 9px; -} -hr { - margin: 18px 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; -} -strong { - font-weight: bold; -} -em { - font-style: italic; -} -.muted { - color: #999; -} -abbr { - font-size: 90%; - text-transform: uppercase; - border-bottom: 1px dotted #ddd; - cursor: help; -} -blockquote { - padding: 0 0 0 15px; - margin: 0 0 18px; - border-left: 5px solid #eee; -} -blockquote p { - margin-bottom: 0; - font-size: 16px; - font-weight: 300; - line-height: 22.5px; -} -blockquote small { - display: block; - line-height: 18px; - color: #999; -} -blockquote small:before { - content: '\2014 \00A0'; -} -blockquote.pull-right { - float: right; - padding-left: 0; - padding-right: 15px; - border-left: 0; - border-right: 5px solid #eee; -} -blockquote.pull-right p, -blockquote.pull-right small { - text-align: right; -} -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} -address { - display: block; - margin-bottom: 18px; - line-height: 18px; - font-style: normal; -} -small { - font-size: 100%; -} -cite { - font-style: normal; -} -code, -pre { - padding: 0 3px 2px; - font-family: Menlo, Monaco, "Courier New", monospace; - font-size: 12px; - color: #333; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -code { - padding: 3px 4px; - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; -} -pre { - display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12px; - line-height: 18px; - background-color: #f5f5f5; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,0.15); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; -} -pre.prettyprint { - margin-bottom: 18px; -} -pre code { - padding: 0; - color: inherit; - background-color: transparent; - border: 0; -} -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -} -form { - margin: 0 0 18px; -} -fieldset { - padding: 0; - margin: 0; - border: 0; -} -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 27px; - font-size: 19.5px; - line-height: 36px; - color: #333; - border: 0; - border-bottom: 1px solid #eee; -} -legend small { - font-size: 13.5px; - color: #999; -} -label, -input, -button, -select, -textarea { - font-size: 13px; - font-weight: normal; - line-height: 18px; -} -input, -button, -select, -textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} -label { - display: block; - margin-bottom: 5px; - color: #333; -} -input, -textarea, -select, -.uneditable-input { - display: inline-block; - width: 210px; - height: 18px; - padding: 4px; - margin-bottom: 9px; - font-size: 13px; - line-height: 18px; - color: #555; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.uneditable-textarea { - width: auto; - height: auto; -} -label input, -label textarea, -label select { - display: block; -} -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; -/* IE7 */ - line-height: normal; - cursor: pointer; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - border: 0 9; -/* IE9 and down */ -} -input[type="image"] { - border: 0; -} -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - border: initial; - background-color: #fff; - background-color: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -input[type="button"], -input[type="reset"], -input[type="submit"] { - width: auto; - height: auto; -} -select, -input[type="file"] { - height: 28px; -/* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; -/* For IE7, add top margin to align select with labels */ - line-height: 28px; -} -input[type="file"] { - line-height: 18px 9; -} -select { - width: 220px; - background-color: #fff; -} -select[multiple], -select[size] { - height: auto; -} -input[type="image"] { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -textarea { - height: auto; -} -input[type="hidden"] { - display: none; -} -.radio, -.checkbox { - padding-left: 18px; -} -.radio input[type="radio"], -.checkbox input[type="checkbox"] { - float: left; - margin-left: -18px; -} -.controls > .radio:first-child, -.controls > .checkbox:first-child { - padding-top: 5px; -} -.radio.inline, -.checkbox.inline { - display: inline-block; - padding-top: 5px; - margin-bottom: 0; - vertical-align: middle; -} -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { - margin-left: 10px; -} -input, -textarea { - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.07); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.07); - box-shadow: inset 0 1px 1px rgba(0,0,0,0.07); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; -} -input:focus, -textarea:focus { - border-color: rgba(82,168,236,0.80); - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.07), 0 0 8px rgba(82,168,236,0.60); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.07), 0 0 8px rgba(82,168,236,0.60); - box-shadow: inset 0 1px 1px rgba(0,0,0,0.07), 0 0 8px rgba(82,168,236,0.60); - outline: 0; - outline: thin dotted 9; -/* IE6-9 */ -} -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} -.input-mini { - width: 60px; -} -.input-small { - width: 90px; -} -.input-medium { - width: 150px; -} -.input-large { - width: 210px; -} -.input-xlarge { - width: 270px; -} -.input-xxlarge { - width: 530px; -} -input[class*="span"], -select[class*="span"], -textarea[class*="span"], -.uneditable-input { - float: none; - margin-left: 0; -} -input.span1, -textarea.span1, -.uneditable-input.span1 { - width: 50px; -} -input.span2, -textarea.span2, -.uneditable-input.span2 { - width: 130px; -} -input.span3, -textarea.span3, -.uneditable-input.span3 { - width: 210px; -} -input.span4, -textarea.span4, -.uneditable-input.span4 { - width: 290px; -} -input.span5, -textarea.span5, -.uneditable-input.span5 { - width: 370px; -} -input.span6, -textarea.span6, -.uneditable-input.span6 { - width: 450px; -} -input.span7, -textarea.span7, -.uneditable-input.span7 { - width: 530px; -} -input.span8, -textarea.span8, -.uneditable-input.span8 { - width: 610px; -} -input.span9, -textarea.span9, -.uneditable-input.span9 { - width: 690px; -} -input.span10, -textarea.span10, -.uneditable-input.span10 { - width: 770px; -} -input.span11, -textarea.span11, -.uneditable-input.span11 { - width: 850px; -} -input.span12, -textarea.span12, -.uneditable-input.span12 { - width: 930px; -} -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - background-color: #f5f5f5; - border-color: #ddd; - cursor: not-allowed; -} -.control-group.warning > label, -.control-group.warning .help-block, -.control-group.warning .help-inline { - color: #c09853; -} -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { - color: #c09853; - border-color: #c09853; -} -.control-group.warning input:focus, -.control-group.warning select:focus, -.control-group.warning textarea:focus { - border-color: #b58b42; - -webkit-box-shadow: 0 0 6px #cdad75; - -moz-box-shadow: 0 0 6px #cdad75; - box-shadow: 0 0 6px #cdad75; -} -.control-group.warning .input-prepend .add-on, -.control-group.warning .input-append .add-on { - color: #c09853; - background-color: #fcf8e3; - border-color: #c09853; -} -.control-group.error > label, -.control-group.error .help-block, -.control-group.error .help-inline { - color: #b94a48; -} -.control-group.error input, -.control-group.error select, -.control-group.error textarea { - color: #b94a48; - border-color: #b94a48; -} -.control-group.error input:focus, -.control-group.error select:focus, -.control-group.error textarea:focus { - border-color: #a74240; - -webkit-box-shadow: 0 0 6px #c76e6d; - -moz-box-shadow: 0 0 6px #c76e6d; - box-shadow: 0 0 6px #c76e6d; -} -.control-group.error .input-prepend .add-on, -.control-group.error .input-append .add-on { - color: #b94a48; - background-color: #f2dede; - border-color: #b94a48; -} -.control-group.success > label, -.control-group.success .help-block, -.control-group.success .help-inline { - color: #468847; -} -.control-group.success input, -.control-group.success select, -.control-group.success textarea { - color: #468847; - border-color: #468847; -} -.control-group.success input:focus, -.control-group.success select:focus, -.control-group.success textarea:focus { - border-color: #3f7a40; - -webkit-box-shadow: 0 0 6px #5eac60; - -moz-box-shadow: 0 0 6px #5eac60; - box-shadow: 0 0 6px #5eac60; -} -.control-group.success .input-prepend .add-on, -.control-group.success .input-append .add-on { - color: #468847; - background-color: #dff0d8; - border-color: #468847; -} -input:focus:required:invalid, -textarea:focus:required:invalid, -select:focus:required:invalid { - color: #b94a48; - border-color: #ee5f5b; -} -input:focus:required:invalid:focus, -textarea:focus:required:invalid:focus, -select:focus:required:invalid:focus { - border-color: #eb423d; - -webkit-box-shadow: 0 0 6px #f17f7c; - -moz-box-shadow: 0 0 6px #f17f7c; - box-shadow: 0 0 6px #f17f7c; -} -.form-actions { - padding: 17px 20px 18px; - margin-top: 18px; - margin-bottom: 18px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; -} -.uneditable-input { - display: block; - background-color: #fff; - border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); - -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); - cursor: not-allowed; -} -:-moz-placeholder { - color: #999; -} -::-webkit-input-placeholder { - color: #999; -} -.help-block { - display: block; - margin-top: 5px; - margin-bottom: 0; - color: #999; -} -.help-inline { - display: inline-block; - *display: inline; -/* IE7 inline-block hack */ - *zoom: 1; - margin-bottom: 9px; - vertical-align: middle; - padding-left: 5px; -} -.input-prepend, -.input-append { - margin-bottom: 5px; - *zoom: 1; -} -.input-prepend:before, -.input-append:before, -.input-prepend:after, -.input-append:after { - display: table; - content: ""; -} -.input-prepend:after, -.input-append:after { - clear: both; -} -.input-prepend input, -.input-append input, -.input-prepend .uneditable-input, -.input-append .uneditable-input { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; -} -.input-prepend input:focus, -.input-append input:focus, -.input-prepend .uneditable-input:focus, -.input-append .uneditable-input:focus { - position: relative; - z-index: 2; -} -.input-prepend .uneditable-input, -.input-append .uneditable-input { - border-left-color: #ccc; -} -.input-prepend .add-on, -.input-append .add-on { - float: left; - display: block; - width: auto; - min-width: 16px; - height: 18px; - margin-right: -1px; - padding: 4px 5px; - font-weight: normal; - line-height: 18px; - color: #999; - text-align: center; - text-shadow: 0 1px 0 #fff; - background-color: #f5f5f5; - border: 1px solid #ccc; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} -.input-prepend .active, -.input-append .active { - background-color: #a9dba9; - border-color: #46a546; -} -.input-prepend .add-on { - *margin-top: 1px; -/* IE6-7 */ -} -.input-append input, -.input-append .uneditable-input { - float: left; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} -.input-append .uneditable-input { - border-left-color: #eee; - border-right-color: #ccc; -} -.input-append .add-on { - margin-right: 0; - margin-left: -1px; - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; -} -.input-append input:first-child { - *margin-left: -160px; -} -.input-append input:first-child+.add-on { - *margin-left: -21px; -} -.search-query { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; - -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; -} -.form-search input, -.form-inline input, -.form-horizontal input, -.form-search textarea, -.form-inline textarea, -.form-horizontal textarea, -.form-search select, -.form-inline select, -.form-horizontal select, -.form-search .help-inline, -.form-inline .help-inline, -.form-horizontal .help-inline, -.form-search .uneditable-input, -.form-inline .uneditable-input, -.form-horizontal .uneditable-input { - display: inline-block; - margin-bottom: 0; -} -.form-search .hide, -.form-inline .hide, -.form-horizontal .hide { - display: none; -} -.form-search label, -.form-inline label, -.form-search .input-append, -.form-inline .input-append, -.form-search .input-prepend, -.form-inline .input-prepend { - display: inline-block; -} -.form-search .input-append .add-on, -.form-inline .input-prepend .add-on, -.form-search .input-append .add-on, -.form-inline .input-prepend .add-on { - vertical-align: middle; -} -.form-search .radio, -.form-inline .radio, -.form-search .checkbox, -.form-inline .checkbox { - margin-bottom: 0; - vertical-align: middle; -} -.control-group { - margin-bottom: 9px; -} -legend + .control-group { - margin-top: 18px; - -webkit-margin-top-collapse: separate; -} -.form-horizontal .control-group { - margin-bottom: 18px; - *zoom: 1; -} -.form-horizontal .control-group:before, -.form-horizontal .control-group:after { - display: table; - content: ""; -} -.form-horizontal .control-group:after { - clear: both; -} -.form-horizontal .control-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; -} -.form-horizontal .controls { - margin-left: 160px; -} -.form-horizontal .form-actions { - padding-left: 160px; -} -table { - max-width: 100%; - border-collapse: collapse; - border-spacing: 0; -} -.table { - width: 100%; - margin-bottom: 18px; -} -.table th, -.table td { - padding: 8px; - line-height: 18px; - text-align: left; - vertical-align: top; - border-top: 1px solid #ddd; -} -.table th { - font-weight: bold; -} -.table thead th { - vertical-align: bottom; -} -.table thead:first-child tr th, -.table thead:first-child tr td { - border-top: 0; -} -.table tbody + tbody { - border-top: 2px solid #ddd; -} -.table-condensed th, -.table-condensed td { - padding: 4px 5px; -} -.table-bordered { - border: 1px solid #ddd; - border-collapse: separate; - *border-collapse: collapsed; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.table-bordered th + th, -.table-bordered td + td, -.table-bordered th + td, -.table-bordered td + th { - border-left: 1px solid #ddd; -} -.table-bordered thead:first-child tr:first-child th, -.table-bordered tbody:first-child tr:first-child th, -.table-bordered tbody:first-child tr:first-child td { - border-top: 0; -} -.table-bordered thead:first-child tr:first-child th:first-child, -.table-bordered tbody:first-child tr:first-child td:first-child { - -webkit-border-radius: 4px 0 0 0; - -moz-border-radius: 4px 0 0 0; - border-radius: 4px 0 0 0; -} -.table-bordered thead:first-child tr:first-child th:last-child, -.table-bordered tbody:first-child tr:first-child td:last-child { - -webkit-border-radius: 0 4px 0 0; - -moz-border-radius: 0 4px 0 0; - border-radius: 0 4px 0 0; -} -.table-bordered thead:last-child tr:last-child th:first-child, -.table-bordered tbody:last-child tr:last-child td:first-child { - -webkit-border-radius: 0 0 0 4px; - -moz-border-radius: 0 0 0 4px; - border-radius: 0 0 0 4px; -} -.table-bordered thead:last-child tr:last-child th:last-child, -.table-bordered tbody:last-child tr:last-child td:last-child { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; -} -.table-striped tbody tr:nth-child(odd) td, -.table-striped tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} -.table tbody tr:hover td, -.table tbody tr:hover th { - background-color: #f5f5f5; -} -table .span1 { - float: none; - width: 44px; - margin-left: 0; -} -table .span2 { - float: none; - width: 124px; - margin-left: 0; -} -table .span3 { - float: none; - width: 204px; - margin-left: 0; -} -table .span4 { - float: none; - width: 284px; - margin-left: 0; -} -table .span5 { - float: none; - width: 364px; - margin-left: 0; -} -table .span6 { - float: none; - width: 444px; - margin-left: 0; -} -table .span7 { - float: none; - width: 524px; - margin-left: 0; -} -table .span8 { - float: none; - width: 604px; - margin-left: 0; -} -table .span9 { - float: none; - width: 684px; - margin-left: 0; -} -table .span10 { - float: none; - width: 764px; - margin-left: 0; -} -table .span11 { - float: none; - width: 844px; - margin-left: 0; -} -table .span12 { - float: none; - width: 924px; - margin-left: 0; -} -[class^="icon-"], -[class*=" icon-"] { - display: inline-block; - width: 14px; - height: 14px; - line-height: 14px; - vertical-align: text-top; - background-image: url("../img/glyphicons-halflings.png"); - background-position: 14px 14px; - background-repeat: no-repeat; - *margin-right: 0.3em; -} -[class^="icon-"]:last-child, -[class*=" icon-"]:last-child { - *margin-left: 0; -} -.icon-white { - background-image: url("../img/glyphicons-halflings-white.png"); -} -.icon-glass { - background-position: 0 0; -} -.icon-music { - background-position: -24px 0; -} -.icon-search { - background-position: -48px 0; -} -.icon-envelope { - background-position: -72px 0; -} -.icon-heart { - background-position: -96px 0; -} -.icon-star { - background-position: -120px 0; -} -.icon-star-empty { - background-position: -144px 0; -} -.icon-user { - background-position: -168px 0; -} -.icon-film { - background-position: -192px 0; -} -.icon-th-large { - background-position: -216px 0; -} -.icon-th { - background-position: -240px 0; -} -.icon-th-list { - background-position: -264px 0; -} -.icon-ok { - background-position: -288px 0; -} -.icon-remove { - background-position: -312px 0; -} -.icon-zoom-in { - background-position: -336px 0; -} -.icon-zoom-out { - background-position: -360px 0; -} -.icon-off { - background-position: -384px 0; -} -.icon-signal { - background-position: -408px 0; -} -.icon-cog { - background-position: -432px 0; -} -.icon-trash { - background-position: -456px 0; -} -.icon-home { - background-position: 0 -24px; -} -.icon-file { - background-position: -24px -24px; -} -.icon-time { - background-position: -48px -24px; -} -.icon-road { - background-position: -72px -24px; -} -.icon-download-alt { - background-position: -96px -24px; -} -.icon-download { - background-position: -120px -24px; -} -.icon-upload { - background-position: -144px -24px; -} -.icon-inbox { - background-position: -168px -24px; -} -.icon-play-circle { - background-position: -192px -24px; -} -.icon-repeat { - background-position: -216px -24px; -} -.icon-refresh { - background-position: -240px -24px; -} -.icon-list-alt { - background-position: -264px -24px; -} -.icon-lock { - background-position: -287px -24px; -} -.icon-flag { - background-position: -312px -24px; -} -.icon-headphones { - background-position: -336px -24px; -} -.icon-volume-off { - background-position: -360px -24px; -} -.icon-volume-down { - background-position: -384px -24px; -} -.icon-volume-up { - background-position: -408px -24px; -} -.icon-qrcode { - background-position: -432px -24px; -} -.icon-barcode { - background-position: -456px -24px; -} -.icon-tag { - background-position: 0 -48px; -} -.icon-tags { - background-position: -25px -48px; -} -.icon-book { - background-position: -48px -48px; -} -.icon-bookmark { - background-position: -72px -48px; -} -.icon-print { - background-position: -96px -48px; -} -.icon-camera { - background-position: -120px -48px; -} -.icon-font { - background-position: -144px -48px; -} -.icon-bold { - background-position: -167px -48px; -} -.icon-italic { - background-position: -192px -48px; -} -.icon-text-height { - background-position: -216px -48px; -} -.icon-text-width { - background-position: -240px -48px; -} -.icon-align-left { - background-position: -264px -48px; -} -.icon-align-center { - background-position: -288px -48px; -} -.icon-align-right { - background-position: -312px -48px; -} -.icon-align-justify { - background-position: -336px -48px; -} -.icon-list { - background-position: -360px -48px; -} -.icon-indent-left { - background-position: -384px -48px; -} -.icon-indent-right { - background-position: -408px -48px; -} -.icon-facetime-video { - background-position: -432px -48px; -} -.icon-picture { - background-position: -456px -48px; -} -.icon-pencil { - background-position: 0 -72px; -} -.icon-map-marker { - background-position: -24px -72px; -} -.icon-adjust { - background-position: -48px -72px; -} -.icon-tint { - background-position: -72px -72px; -} -.icon-edit { - background-position: -96px -72px; -} -.icon-share { - background-position: -120px -72px; -} -.icon-check { - background-position: -144px -72px; -} -.icon-move { - background-position: -168px -72px; -} -.icon-step-backward { - background-position: -192px -72px; -} -.icon-fast-backward { - background-position: -216px -72px; -} -.icon-backward { - background-position: -240px -72px; -} -.icon-play { - background-position: -264px -72px; -} -.icon-pause { - background-position: -288px -72px; -} -.icon-stop { - background-position: -312px -72px; -} -.icon-forward { - background-position: -336px -72px; -} -.icon-fast-forward { - background-position: -360px -72px; -} -.icon-step-forward { - background-position: -384px -72px; -} -.icon-eject { - background-position: -408px -72px; -} -.icon-chevron-left { - background-position: -432px -72px; -} -.icon-chevron-right { - background-position: -456px -72px; -} -.icon-plus-sign { - background-position: 0 -96px; -} -.icon-minus-sign { - background-position: -24px -96px; -} -.icon-remove-sign { - background-position: -48px -96px; -} -.icon-ok-sign { - background-position: -72px -96px; -} -.icon-question-sign { - background-position: -96px -96px; -} -.icon-info-sign { - background-position: -120px -96px; -} -.icon-screenshot { - background-position: -144px -96px; -} -.icon-remove-circle { - background-position: -168px -96px; -} -.icon-ok-circle { - background-position: -192px -96px; -} -.icon-ban-circle { - background-position: -216px -96px; -} -.icon-arrow-left { - background-position: -240px -96px; -} -.icon-arrow-right { - background-position: -264px -96px; -} -.icon-arrow-up { - background-position: -289px -96px; -} -.icon-arrow-down { - background-position: -312px -96px; -} -.icon-share-alt { - background-position: -336px -96px; -} -.icon-resize-full { - background-position: -360px -96px; -} -.icon-resize-small { - background-position: -384px -96px; -} -.icon-plus { - background-position: -408px -96px; -} -.icon-minus { - background-position: -433px -96px; -} -.icon-asterisk { - background-position: -456px -96px; -} -.icon-exclamation-sign { - background-position: 0 -120px; -} -.icon-gift { - background-position: -24px -120px; -} -.icon-leaf { - background-position: -48px -120px; -} -.icon-fire { - background-position: -72px -120px; -} -.icon-eye-open { - background-position: -96px -120px; -} -.icon-eye-close { - background-position: -120px -120px; -} -.icon-warning-sign { - background-position: -144px -120px; -} -.icon-plane { - background-position: -168px -120px; -} -.icon-calendar { - background-position: -192px -120px; -} -.icon-random { - background-position: -216px -120px; -} -.icon-comment { - background-position: -240px -120px; -} -.icon-magnet { - background-position: -264px -120px; -} -.icon-chevron-up { - background-position: -288px -120px; -} -.icon-chevron-down { - background-position: -313px -119px; -} -.icon-retweet { - background-position: -336px -120px; -} -.icon-shopping-cart { - background-position: -360px -120px; -} -.icon-folder-close { - background-position: -384px -120px; -} -.icon-folder-open { - background-position: -408px -120px; -} -.icon-resize-vertical { - background-position: -432px -119px; -} -.icon-resize-horizontal { - background-position: -456px -118px; -} -.dropdown { - position: relative; -} -.dropdown-toggle { - *margin-bottom: -3px; -} -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} -.caret { - display: inline-block; - width: 0; - height: 0; - text-indent: -99999px; - *text-indent: 0; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - opacity: 0.3; - filter: "alpha(opacity=$op)"; - content: "\2193"; -} -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} -.dropdown:hover .caret, -.open.dropdown .caret { - opacity: 1; - filter: "alpha(opacity=$op)"; -} -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - float: left; - display: none; - min-width: 160px; - _width: 160px; - padding: 4px 0; - margin: 0; - list-style: none; - background-color: #fff; - border-color: #ccc; - border-color: rgba(0,0,0,0.20); - border-style: solid; - border-width: 1px; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.20); - -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.20); - box-shadow: 0 5px 10px rgba(0,0,0,0.20); - *border-right-width: 2px; - *border-bottom-width: 2px; -} -.dropdown-menu -webkit-background-clip: padding-box -moz-background-clip: padding { - background-clip: padding-box; -} -.dropdown-menu.bottom-up { - top: auto; - bottom: 100%; - margin-bottom: 2px; -} -.dropdown-menu .divider { - height: 1px; - margin: 5px 1px; - overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid #fff; - *width: 100%; - *margin: -5px 0 5px; -} -.dropdown-menu a { - display: block; - padding: 3px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: #555; - white-space: nowrap; -} -.dropdown-menu li > a:hover, -.dropdown-menu .active > a, -.dropdown-menu .active > a:hover { - color: #fff; - text-decoration: none; - background-color: #08c; -} -.dropdown.open { - *z-index: 1000; -} -.dropdown.open .dropdown-toggle { - color: #fff; - background: #ccc; - background: rgba(0,0,0,0.30); -} -.dropdown.open .dropdown-menu { - display: block; -} -.typeahead { - margin-top: 2px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,0.05); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); - box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); -} -.well blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,0.15); -} -.fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.fade.in { - opacity: 1; -} -.collapse { - -webkit-transition: height 0.35s ease; - -moz-transition: height 0.35s ease; - -ms-transition: height 0.35s ease; - -o-transition: height 0.35s ease; - transition: height 0.35s ease; - position: relative; - overflow: hidden; - height: 0; -} -.collapse.in { - height: auto; -} -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: 18px; - color: #000; - text-shadow: 0 1px 0 #fff; - opacity: 0.2; - filter: "alpha(opacity=$op)"; -} -.close:hover { - color: #000; - text-decoration: none; - opacity: 0.4; - filter: "alpha(opacity=$op)"; - cursor: pointer; -} -.btn { - display: inline-block; - padding: 4px 10px 4px; - margin-bottom: 0; - font-size: 13px; - line-height: 18px; - color: #333; - text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,0.75); - vertical-align: middle; - background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #fff, #e6e6e6); - background-image: -ms-linear-gradient(top, #fff, #e6e6e6); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); - background-image: -o-linear-gradient(top, #fff, #e6e6e6); - background-image: linear-gradient(top, #fff, #e6e6e6); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #e6e6e6 #e6e6e6 #c4c4c4; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - cursor: pointer; - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; - *margin-left: 0.3em; -} -.btn:hover, -.btn:active, -.btn.active, -.btn.disabled, -.btn[disabled] { - background-color: #e6e6e6; -} -.btn:active, -.btn.active { - background-color: #cfcfcf e("\9"); -} -.btn:first-child { - *margin-left: 0; -} -.btn:hover { - color: #333; - text-decoration: none; - background-color: #e6e6e6; - background-position: 0 -15px; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; -} -.btn:focus { - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} -.btn.active, -.btn:active { - background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); - box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); - background-color: #e6e6e6; - background-color: #d9d9d9 e("\9"); - outline: 0; -} -.btn.disabled, -.btn[disabled] { - cursor: default; - background-image: none; - background-color: #e6e6e6; - opacity: 0.65; - filter: "alpha(opacity=$op)"; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.btn-large { - padding: 9px 14px; - font-size: 15px; - line-height: normal; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.btn-large [class^="icon-"] { - margin-top: 1px; -} -.btn-small { - padding: 5px 9px; - font-size: 11px; - line-height: 16px; -} -.btn-small [class^="icon-"] { - margin-top: -1px; -} -.btn-mini { - padding: 2px 6px; - font-size: 11px; - line-height: 14px; -} -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - text-shadow: 0 -1px 0 rgba(0,0,0,0.25); - color: #fff; -} -.btn-primary.active, -.btn-warning.active, -.btn-danger.active, -.btn-success.active, -.btn-info.active, -.btn-dark.active { - color: rgba(255,255,255,0.75); -} -.btn-primary { - background-color: #006ccc; - background-image: -moz-linear-gradient(top, #08c, #04c); - background-image: -ms-linear-gradient(top, #08c, #04c); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c)); - background-image: -webkit-linear-gradient(top, #08c, #04c); - background-image: -o-linear-gradient(top, #08c, #04c); - background-image: linear-gradient(top, #08c, #04c); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #04c #04c #003aad; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-primary:hover, -.btn-primary:active, -.btn-primary.active, -.btn-primary.disabled, -.btn-primary[disabled] { - background-color: #04c; -} -.btn-primary:active, -.btn-primary.active { - background-color: #003db8 e("\9"); -} -.btn-warning { - background-color: #f99d1c; - background-image: -moz-linear-gradient(top, #faa42b, #f89406); - background-image: -ms-linear-gradient(top, #faa42b, #f89406); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#faa42b), to(#f89406)); - background-image: -webkit-linear-gradient(top, #faa42b, #f89406); - background-image: -o-linear-gradient(top, #faa42b, #f89406); - background-image: linear-gradient(top, #faa42b, #f89406); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #f89406 #f89406 #d37e05; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-warning:hover, -.btn-warning:active, -.btn-warning.active, -.btn-warning.disabled, -.btn-warning[disabled] { - background-color: #f89406; -} -.btn-warning:active, -.btn-warning.active { - background-color: #df8505 e("\9"); -} -.btn-danger { - background-color: #da4e49; - background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); - background-image: linear-gradient(top, #ee5f5b, #bd362f); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #bd362f #bd362f #a12e28; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-danger:hover, -.btn-danger:active, -.btn-danger.active, -.btn-danger.disabled, -.btn-danger[disabled] { - background-color: #bd362f; -} -.btn-danger:active, -.btn-danger.active { - background-color: #aa312a e("\9"); -} -.btn-success { - background-color: #5bb65b; - background-image: -moz-linear-gradient(top, #62c462, #51a351); - background-image: -ms-linear-gradient(top, #62c462, #51a351); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); - background-image: -webkit-linear-gradient(top, #62c462, #51a351); - background-image: -o-linear-gradient(top, #62c462, #51a351); - background-image: linear-gradient(top, #62c462, #51a351); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #51a351 #51a351 #458b45; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-success:hover, -.btn-success:active, -.btn-success.active, -.btn-success.disabled, -.btn-success[disabled] { - background-color: #51a351; -} -.btn-success:active, -.btn-success.active { - background-color: #499349 e("\9"); -} -.btn-info { - background-color: #49afcd; - background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); - background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); - background-image: linear-gradient(top, #5bc0de, #2f96b4); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #2f96b4 #2f96b4 #287f99; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-info:hover, -.btn-info:active, -.btn-info.active, -.btn-info.disabled, -.btn-info[disabled] { - background-color: #2f96b4; -} -.btn-info:active, -.btn-info.active { - background-color: #2a87a2 e("\9"); -} -.btn-inverse { - background-color: #383838; - background-image: -moz-linear-gradient(top, #454545, #262626); - background-image: -ms-linear-gradient(top, #454545, #262626); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626)); - background-image: -webkit-linear-gradient(top, #454545, #262626); - background-image: -o-linear-gradient(top, #454545, #262626); - background-image: linear-gradient(top, #454545, #262626); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #262626 #262626 #202020; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; -} -.btn-inverse:hover, -.btn-inverse:active, -.btn-inverse.active, -.btn-inverse.disabled, -.btn-inverse[disabled] { - background-color: #262626; -} -.btn-inverse:active, -.btn-inverse.active { - background-color: #222 e("\9"); -} -button.btn, -input[type="submit"].btn { - *padding-top: 2px; - *padding-bottom: 2px; -} -button.btn::-moz-focus-inner, -input[type="submit"].btn::-moz-focus-inner { - padding: 0; - border: 0; -} -button.btn.large, -input[type="submit"].btn.large { - *padding-top: 7px; - *padding-bottom: 7px; -} -button.btn.small, -input[type="submit"].btn.small { - *padding-top: 3px; - *padding-bottom: 3px; -} -.btn-group { - position: relative; - *zoom: 1; - *margin-left: 0.3em; -} -.btn-group:before, -.btn-group:after { - display: table; - content: ""; -} -.btn-group:after { - clear: both; -} -.btn-group:first-child { - *margin-left: 0; -} -.btn-group + .btn-group { - margin-left: 5px; -} -.btn-toolbar { - margin-top: 9px; - margin-bottom: 9px; -} -.btn-toolbar .btn-group { - display: inline-block; - *display: inline; -/* IE7 inline-block hack */ - *zoom: 1; -} -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -.btn-group .btn:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; -} -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; -} -.btn-group .btn.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; -} -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; -} -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { - z-index: 2; -} -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} -.btn-group .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; - -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.13), inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.13), inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - box-shadow: inset 1px 0 0 rgba(255,255,255,0.13), inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.05); - *padding-top: 5px; - *padding-bottom: 5px; -} -.btn-group.open { - *z-index: 1000; -} -.btn-group.open .dropdown-menu { - display: block; - margin-top: 1px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.btn-group.open .dropdown-toggle { - background-image: none; - -webkit-box-shadow: inset 0 1px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); - -moz-box-shadow: inset 0 1px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); - box-shadow: inset 0 1px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05); -} -.btn .caret { - margin-top: 7px; - margin-left: 0; -} -.btn:hover .caret, -.open.btn-group .caret { - opacity: 1; - filter: "alpha(opacity=$op)"; -} -.btn-primary .caret, -.btn-danger .caret, -.btn-info .caret, -.btn-success .caret, -.btn-inverse .caret { - border-top-color: #fff; - opacity: 0.75; - filter: "alpha(opacity=$op)"; -} -.btn-small .caret { - margin-top: 4px; -} -.alert { - padding: 8px 35px 8px 14px; - margin-bottom: 18px; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); - background-color: #fcf8e3; - border: 1px solid #fbefd6; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.alert, -.alert-heading { - color: #c09853; -} -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: 18px; -} -.alert-success { - background-color: #dff0d8; - border-color: #d7eac8; -} -.alert-success, -.alert-success .alert-heading { - color: #468847; -} -.alert-danger, -.alert-error { - background-color: #f2dede; - border-color: #eed4d8; -} -.alert-danger, -.alert-error, -.alert-danger .alert-heading, -.alert-error .alert-heading { - color: #b94a48; -} -.alert-info { - background-color: #d9edf7; - border-color: #bee9f1; -} -.alert-info, -.alert-info .alert-heading { - color: #3a87ad; -} -.alert-block { - padding-top: 14px; - padding-bottom: 14px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; -} -.nav { - margin-left: 0; - margin-bottom: 18px; - list-style: none; -} -.nav > li > a { - display: block; -} -.nav > li > a:hover { - text-decoration: none; - background-color: #eee; -} -.nav .nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: 18px; - color: #999; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); - text-transform: uppercase; -} -.nav li + .nav-header { - margin-top: 9px; -} -.nav-list { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list .active > a, -.nav-list .active > a:hover { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background-color: #08c; -} -.nav-list [class^="icon-"] { - margin-right: 2px; -} -.nav-tabs, -.nav-pills { - *zoom: 1; -} -.nav-tabs:before, -.nav-pills:before, -.nav-tabs:after, -.nav-pills:after { - display: table; - content: ""; -} -.nav-tabs:after, -.nav-pills:after { - clear: both; -} -.nav-tabs > li, -.nav-pills > li { - float: left; -} -.nav-tabs > li > a, -.nav-pills > li > a { - padding-right: 12px; - padding-left: 12px; - margin-right: 2px; - line-height: 14px; -} -.nav-tabs { - border-bottom: 1px solid #ddd; -} -.nav-tabs > li { - margin-bottom: -1px; -} -.nav-tabs > li > a { - padding-top: 9px; - padding-bottom: 9px; - border: 1px solid transparent; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -.nav-tabs > li > a:hover { - border-color: #eee #eee #ddd; -} -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover { - color: #555; - background-color: #fff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -.nav-pills > li > a { - padding-top: 8px; - padding-bottom: 8px; - margin-top: 2px; - margin-bottom: 2px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.nav-pills .active > a, -.nav-pills .active > a:hover { - color: #fff; - background-color: #08c; -} -.nav-stacked > li { - float: none; -} -.nav-stacked > li > a { - margin-right: 0; -} -.nav-tabs.nav-stacked { - border-bottom: 0; -} -.nav-tabs.nav-stacked > li > a { - border: 1px solid #ddd; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -.nav-tabs.nav-stacked > li:first-child > a { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -.nav-tabs.nav-stacked > li:last-child > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} -.nav-tabs.nav-stacked > li > a:hover { - border-color: #ddd; - z-index: 2; -} -.nav-pills.nav-stacked > li > a { - margin-bottom: 3px; -} -.nav-pills.nav-stacked > li:last-child > a { - margin-bottom: 1px; -} -.nav-tabs .dropdown-menu, -.nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; -} -.nav-pills .dropdown-menu { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.nav-tabs .dropdown-toggle .caret, -.nav-pills .dropdown-toggle .caret { - border-top-color: #08c; - margin-top: 6px; -} -.nav-tabs .dropdown-toggle:hover .caret, -.nav-pills .dropdown-toggle:hover .caret { - border-top-color: #0074ad; -} -.nav-tabs .active .dropdown-toggle .caret, -.nav-pills .active .dropdown-toggle .caret { - border-top-color: #333; -} -.nav > .dropdown.active > a:hover { - color: #000; - cursor: pointer; -} -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > .open.active > a:hover { - color: #fff; - background-color: #999; - border-color: #999; -} -.nav .open .caret, -.nav .open.active .caret, -.nav .open a:hover .caret { - border-top-color: #fff; - opacity: 1; - filter: "alpha(opacity=$op)"; -} -.tabs-stacked .open > a:hover { - border-color: #999; -} -.tabbable { - *zoom: 1; -} -.tabbable:before, -.tabbable:after { - display: table; - content: ""; -} -.tabbable:after { - clear: both; -} -.tab-content { - overflow: hidden; -} -.tabs-below .nav-tabs, -.tabs-right .nav-tabs, -.tabs-left .nav-tabs { - border-bottom: 0; -} -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} -.tabs-below .nav-tabs { - border-top: 1px solid #ddd; -} -.tabs-below .nav-tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabs-below .nav-tabs > li > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} -.tabs-below .nav-tabs > li > a:hover { - border-bottom-color: transparent; - border-top-color: #ddd; -} -.tabs-below .nav-tabs .active > a, -.tabs-below .nav-tabs .active > a:hover { - border-color: transparent #ddd #ddd #ddd; -} -.tabs-left .nav-tabs > li, -.tabs-right .nav-tabs > li { - float: none; -} -.tabs-left .nav-tabs > li > a, -.tabs-right .nav-tabs > li > a { - min-width: 74px; - margin-right: 0; - margin-bottom: 3px; -} -.tabs-left .nav-tabs { - float: left; - margin-right: 19px; - border-right: 1px solid #ddd; -} -.tabs-left .nav-tabs > li > a { - margin-right: -1px; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.tabs-left .nav-tabs > li > a:hover { - border-color: #eee #ddd #eee #eee; -} -.tabs-left .nav-tabs .active > a, -.tabs-left .nav-tabs .active > a:hover { - border-color: #ddd transparent #ddd #ddd; - *border-right-color: #fff; -} -.tabs-right .nav-tabs { - float: right; - margin-left: 19px; - border-left: 1px solid #ddd; -} -.tabs-right .nav-tabs > li > a { - margin-left: -1px; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} -.tabs-right .nav-tabs > li > a:hover { - border-color: #eee #eee #eee #ddd; -} -.tabs-right .nav-tabs .active > a, -.tabs-right .nav-tabs .active > a:hover { - border-color: #ddd #ddd #ddd transparent; - *border-left-color: #fff; -} -.navbar { - overflow: visible; - margin-bottom: 18px; -} -.navbar-inner { - padding-left: 20px; - padding-right: 20px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333, #222); - background-image: -ms-linear-gradient(top, #333, #222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222)); - background-image: -webkit-linear-gradient(top, #333, #222); - background-image: -o-linear-gradient(top, #333, #222); - background-image: linear-gradient(top, #333, #222); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.10); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.10); - box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.10); -} -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333, #222); - background-image: -ms-linear-gradient(top, #333, #222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222)); - background-image: -webkit-linear-gradient(top, #333, #222); - background-image: -o-linear-gradient(top, #333, #222); - background-image: linear-gradient(top, #333, #222); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border-color: #222 #222 #1d1d1d; - border-color: rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10), 15%); - filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 0 rgba(255,255,255,0.07); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 0 rgba(255,255,255,0.07); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 0 rgba(255,255,255,0.07); -} -.btn-navbar:hover, -.btn-navbar:active, -.btn-navbar.active, -.btn-navbar.disabled, -.btn-navbar[disabled] { - background-color: #222; -} -.btn-navbar:active, -.btn-navbar.active { - background-color: #1f1f1f e("\9"); -} -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - box-shadow: 0 1px 0 rgba(0,0,0,0.25); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} -.nav-collapse.collapse { - height: auto; -} -.navbar .brand:hover { - text-decoration: none; -} -.navbar .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; - font-size: 20px; - font-weight: 200; - line-height: 1; - color: #fff; -} -.navbar .navbar-text { - margin-bottom: 0; - line-height: 40px; - color: #999; -} -.navbar .navbar-text a:hover { - color: #fff; - background-color: transparent; -} -.navbar .btn, -.navbar .btn-group { - margin-top: 5px; -} -.navbar .btn-group .btn { - margin-top: 0; -} -.navbar-form { - margin-bottom: 0; - *zoom: 1; -} -.navbar-form:before, -.navbar-form:after { - display: table; - content: ""; -} -.navbar-form:after { - clear: both; -} -.navbar-form input, -.navbar-form select { - display: inline-block; - margin-top: 5px; - margin-bottom: 0; -} -.navbar-form .radio, -.navbar-form .checkbox { - margin-top: 5px; -} -.navbar-form input[type="image"], -.navbar-form input[type="checkbox"], -.navbar-form input[type="radio"] { - margin-top: 3px; -} -.navbar-form .input-append, -.navbar-form .input-prepend { - margin-top: 6px; - white-space: nowrap; -} -.navbar-form .input-append input, -.navbar-form .input-prepend input { - margin-top: 0; -} -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; -} -.navbar-search .search-query { - padding: 4px 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: 1; - color: #fff; - color: rgba(255,255,255,0.75); - background: #666; - background: rgba(255,255,255,0.30); - border: 1px solid #111; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10), 0 1px 0px rgba(255,255,255,0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10), 0 1px 0px rgba(255,255,255,0.15); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.10), 0 1px 0px rgba(255,255,255,0.15); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} -.navbar-search .search-query :-moz-placeholder { - color: #eee; -} -.navbar-search .search-query ::-webkit-input-placeholder { - color: #eee; -} -.navbar-search .search-query:hover { - color: #fff; - background-color: #999; - background-color: rgba(255,255,255,0.50); -} -.navbar-search .search-query:focus, -.navbar-search .search-query.focused { - padding: 5px 10px; - color: #333; - text-shadow: 0 1px 0 #fff; - background-color: #fff; - border: 0; - -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15); - -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15); - box-shadow: 0 0 3px rgba(0,0,0,0.15); - outline: 0; -} -.navbar-fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; -} -.navbar-fixed-top .navbar-inner { - padding-left: 0; - padding-right: 0; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; -} -.navbar .nav.pull-right { - float: right; -} -.navbar .nav > li { - display: block; - float: left; -} -.navbar .nav > li > a { - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: #999; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,0.25); -} -.navbar .nav > li > a:hover { - background-color: transparent; - color: #fff; - text-decoration: none; -} -.navbar .nav .active > a, -.navbar .nav .active > a:hover { - color: #fff; - text-decoration: none; - background-color: #222; -} -.navbar .divider-vertical { - height: 40px; - width: 1px; - margin: 0 9px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #333; -} -.navbar .nav.pull-right { - margin-left: 10px; - margin-right: 0; -} -.navbar .dropdown-menu { - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.navbar .dropdown-menu:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0,0,0,0.20); - position: absolute; - top: -7px; - left: 9px; -} -.navbar .dropdown-menu:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - position: absolute; - top: -6px; - left: 10px; -} -.navbar .nav .dropdown-toggle .caret, -.navbar .nav .open.dropdown .caret { - border-top-color: #fff; -} -.navbar .nav .active .caret { - opacity: 1; - filter: "alpha(opacity=$op)"; -} -.navbar .nav .open > .dropdown-toggle, -.navbar .nav .active > .dropdown-toggle, -.navbar .nav .open.active > .dropdown-toggle { - background-color: transparent; -} -.navbar .nav .active > .dropdown-toggle:hover { - color: #fff; -} -.navbar .nav.pull-right .dropdown-menu { - left: auto; - right: 0; -} -.navbar .nav.pull-right .dropdown-menu:before { - left: auto; - right: 12px; -} -.navbar .nav.pull-right .dropdown-menu:after { - left: auto; - right: 13px; -} -.breadcrumb { - padding: 7px 14px; - margin: 0 0 18px; - background-color: #fbfbfb; - background-image: -moz-linear-gradient(top, #fff, #f5f5f5); - background-image: -ms-linear-gradient(top, #fff, #f5f5f5); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f5f5f5)); - background-image: -webkit-linear-gradient(top, #fff, #f5f5f5); - background-image: -o-linear-gradient(top, #fff, #f5f5f5); - background-image: linear-gradient(top, #fff, #f5f5f5); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #fff; - -moz-box-shadow: inset 0 1px 0 #fff; - box-shadow: inset 0 1px 0 #fff; -} -.breadcrumb li { - display: inline-block; - text-shadow: 0 1px 0 #fff; -} -.breadcrumb .divider { - padding: 0 5px; - color: #999; -} -.breadcrumb .active a { - color: #333; -} -.pagination { - height: 36px; - margin: 18px 0; -} -.pagination ul { - display: inline-block; - *display: inline; -/* IE7 inline-block hack */ - *zoom: 1; - margin-left: 0; - margin-bottom: 0; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); - -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05); - box-shadow: 0 1px 2px rgba(0,0,0,0.05); -} -.pagination li { - display: inline; -} -.pagination a { - float: left; - padding: 0 14px; - line-height: 34px; - text-decoration: none; - border: 1px solid #ddd; - border-left-width: 0; -} -.pagination a:hover, -.pagination .active a { - background-color: #f5f5f5; -} -.pagination .active a { - color: #999; - cursor: default; -} -.pagination .disabled a, -.pagination .disabled a:hover { - color: #999; - background-color: transparent; - cursor: default; -} -.pagination li:first-child a { - border-left-width: 1px; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} -.pagination li:last-child a { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; -} -.pagination-centered { - text-align: center; -} -.pagination-right { - text-align: right; -} -.pager { - margin-left: 0; - margin-bottom: 18px; - list-style: none; - text-align: center; - *zoom: 1; -} -.pager:before, -.pager:after { - display: table; - content: ""; -} -.pager:after { - clear: both; -} -.pager li { - display: inline; -} -.pager a { - display: inline-block; - padding: 5px 14px; - background-color: #fff; - border: 1px solid #ddd; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pager a:hover { - text-decoration: none; - background-color: #f5f5f5; -} -.pager .next a { - float: right; -} -.pager .previous a { - float: left; -} -.modal-open .dropdown-menu { - z-index: 2050; -} -.modal-open .dropdown.open { - *z-index: 2050; -} -.modal-open .popover { - z-index: 2060; -} -.modal-open .tooltip { - z-index: 2070; -} -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1040; - background-color: #000; -} -.modal-backdrop.fade { - opacity: 0; -} -.modal-backdrop, -.modal-backdrop.fade.in { - opacity: 0.8; - filter: "alpha(opacity=$op)"; -} -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 1050; - max-height: 500px; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: #fff; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,0.30); - *border: 1px solid #999; -/* IE6-7 */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.30); - -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.30); - box-shadow: 0 3px 7px rgba(0,0,0,0.30); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.modal.fade { - -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; - -moz-transition: opacity 0.3s linear, top 0.3s ease-out; - -ms-transition: opacity 0.3s linear, top 0.3s ease-out; - -o-transition: opacity 0.3s linear, top 0.3s ease-out; - transition: opacity 0.3s linear, top 0.3s ease-out; - top: -25%; -} -.modal.fade.in { - top: 50%; -} -.modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; -} -.modal-header .close { - margin-top: 2px; -} -.modal-body { - padding: 15px; -} -.modal-body .modal-form { - margin-bottom: 0; -} -.modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #fff; - -moz-box-shadow: inset 0 1px 0 #fff; - box-shadow: inset 0 1px 0 #fff; - *zoom: 1; -} -.modal-footer:before, -.modal-footer:after { - display: table; - content: ""; -} -.modal-footer:after { - clear: both; -} -.modal-footer .btn { - float: right; - margin-left: 5px; - margin-bottom: 0; -} -.tooltip { - position: absolute; - z-index: 1020; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: "alpha(opacity=$op)"; -} -.tooltip.in { - opacity: 0.8; - filter: "alpha(opacity=$op)"; -} -.tooltip.top { - margin-top: -2px; -} -.tooltip.right { - margin-left: 2px; -} -.tooltip.bottom { - margin-top: 2px; -} -.tooltip.left { - margin-left: -2px; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -$arrowWidth; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -$arrowWidth; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #fff; - text-align: center; - text-decoration: none; - background-color: #000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; -} -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1010; - display: none; - padding: 5px; -} -.popover.top { - margin-top: -5px; -} -.popover.right { - margin-left: 5px; -} -.popover.bottom { - margin-top: 5px; -} -.popover.left { - margin-left: -5px; -} -.popover.top .arrow { - bottom: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000; -} -.popover.right .arrow { - top: 50%; - left: 0; - margin-top: -$arrowWidth; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000; -} -.popover.bottom .arrow { - top: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000; -} -.popover.left .arrow { - top: 50%; - right: 0; - margin-top: -$arrowWidth; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000; -} -.popover .arrow { - position: absolute; - width: 0; - height: 0; -} -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: #000; - background: rgba(0,0,0,0.80); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.30); - -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.30); - box-shadow: 0 3px 7px rgba(0,0,0,0.30); -} -.popover-title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom: 1px solid #eee; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.popover-content { - padding: 14px; - background-color: #fff; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.popover-content p, -.popover-content ul, -.popover-content ol { - margin-bottom: 0; -} -.thumbnails { - margin-left: -$gridGutterWidth; - list-style: none; - *zoom: 1; -} -.thumbnails:before, -.thumbnails:after { - display: table; - content: ""; -} -.thumbnails:after { - clear: both; -} -.thumbnails > li { - float: left; - margin: 0 0 18px 20px; -} -.thumbnail { - display: block; - padding: 4px; - line-height: 1; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.07); - -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.07); - box-shadow: 0 1px 1px rgba(0,0,0,0.07); -} -a.thumbnail:hover { - border-color: #08c; - -webkit-box-shadow: 0 1px 4px rgba(0,105,214,0.25); - -moz-box-shadow: 0 1px 4px rgba(0,105,214,0.25); - box-shadow: 0 1px 4px rgba(0,105,214,0.25); -} -.thumbnail > img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.thumbnail .caption { - padding: 9px; -} -.label { - padding: 2px 4px 3px; - font-size: 11.049999999999999px; - font-weight: bold; - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.25); - background-color: #999; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label:hover { - color: #fff; - text-decoration: none; -} -.label-important { - background-color: #b94a48; -} -.label-important:hover { - background-color: #a74240; -} -.label-warning { - background-color: #f89406; -} -.label-warning:hover { - background-color: #df8505; -} -.label-success { - background-color: #468847; -} -.label-success:hover { - background-color: #3f7a40; -} -.label-info { - background-color: #3a87ad; -} -.label-info:hover { - background-color: #347a9c; -} -.progress { - overflow: hidden; - height: 18px; - margin-bottom: 18px; - background-color: #f6f6f6; - background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); - -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.progress .bar { - width: 0%; - height: 18px; - color: #fff; - font-size: 12px; - text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,0.25); - background-color: #0d90d1; - background-image: -moz-linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); - background-image: -webkit-linear-gradient(top, #149bdf, #0480be); - background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -.progress-striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255,255,255,0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.75, rgba(255,255,255,0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; -} -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} -.progress-danger .bar { - background-color: #dd514b; - background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(top, #ee5f5b, #c43c35); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; -} -.progress-danger.progress-striped .bar { - background-color: #ee5f5b; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255,255,255,0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.75, rgba(255,255,255,0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); -} -.progress-success .bar { - background-color: #5db95d; - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; -} -.progress-success.progress-striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255,255,255,0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.75, rgba(255,255,255,0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); -} -.progress-info .bar { - background-color: #4bb1cf; - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; -} -.progress-info.progress-striped .bar { - 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); - background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); -} -@-moz-keyframes progress-bar-stripes { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 40px 0; - } -} -@-webkit-keyframes progress-bar-stripes { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 40px 0; - } -} -@-o-keyframes progress-bar-stripes { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 40px 0; - } -} -@-ms-keyframes progress-bar-stripes { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 40px 0; - } -} -@keyframes progress-bar-stripes { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 40px 0; - } -} -.accordion { - margin-bottom: 18px; -} -.accordion-group { - margin-bottom: 2px; - border: 1px solid #e5e5e5; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.accordion-heading { - border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} -.accordion-inner { - padding: 9px 15px; - border-top: 1px solid #e5e5e5; -} -.carousel { - position: relative; - margin-bottom: 18px; - line-height: 1; -} -.carousel-inner { - overflow: hidden; - width: 100%; - position: relative; -} -.carousel .item { - display: none; - position: relative; - -webkit-transition: 0.6s ease-in-out left; - -moz-transition: 0.6s ease-in-out left; - -ms-transition: 0.6s ease-in-out left; - -o-transition: 0.6s ease-in-out left; - transition: 0.6s ease-in-out left; -} -.carousel .item > img { - display: block; - line-height: 1; -} -.carousel .active, -.carousel .next, -.carousel .prev { - display: block; -} -.carousel .active { - left: 0; -} -.carousel .next, -.carousel .prev { - position: absolute; - top: 0; - width: 100%; -} -.carousel .next { - left: 100%; -} -.carousel .prev { - left: -100%; -} -.carousel .next.left, -.carousel .prev.right { - left: 0; -} -.carousel .active.left { - left: -100%; -} -.carousel .active.right { - left: 100%; -} -.carousel-control { - position: absolute; - top: 40%; - left: 15px; - width: 40px; - height: 40px; - margin-top: -20px; - font-size: 60px; - font-weight: 100; - line-height: 30px; - color: #fff; - text-align: center; - background: #222; - border: 3px solid #fff; - -webkit-border-radius: 23px; - -moz-border-radius: 23px; - border-radius: 23px; - opacity: 0.5; - filter: "alpha(opacity=$op)"; -} -.carousel-control.right { - left: auto; - right: 15px; -} -.carousel-control:hover { - color: #fff; - text-decoration: none; - opacity: 0.9; - filter: "alpha(opacity=$op)"; -} -.carousel-caption { - position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 10px 15px 5px; - background: #333; - background: rgba(0,0,0,0.75); -} -.carousel-caption h4, -.carousel-caption p { - color: #fff; -} -.hero-unit { - padding: 60px; - margin-bottom: 30px; - background-color: #f5f5f5; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.hero-unit h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; -} -.hero-unit p { - font-size: 18px; - font-weight: 200; - line-height: 27px; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.hide { - display: none; -} -.show { - display: block; -} -.invisible { - visibility: hidden; -} - diff --git a/css/bootstrap-2.0.1.min.css b/css/bootstrap-2.0.1.min.css deleted file mode 100644 index c2a14d04..00000000 --- a/css/bootstrap-2.0.1.min.css +++ /dev/null @@ -1,719 +0,0 @@ -/* - * Bootstrap v2.0.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world $twitter by $mdo and $fat. - */ -article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block} -audio,canvas,video{display:inline-block;*display:inline;*zoom:1} -audio:not([controls]){display:none} -html{font-size:100%;} -html -webkit-text-size-adjust: 100%{-ms-text-size-adjust:100%} -a:hover,a:active{outline:0} -sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline} -sup{top:-.5em} -sub{bottom:-.25em} -img{max-width:100%;height:auto;border:0;-ms-interpolation-mode:bicubic} -button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle} -button,input{*overflow:visible;line-height:normal} -button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0} -button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button} -input[type="search"]{-webkit-appearance:textfield;} -input[type="search"] -webkit-box-sizing: content-box -moz-box-sizing: content-box{box-sizing:content-box} -input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none} -textarea{overflow:auto;vertical-align:top} -body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#333;background-color:#fff} -a{color:#08c;text-decoration:none} -a:hover{color:#0074ad;text-decoration:underline} -.row{margin-left:-20px;*zoom:1;} -.row:before,.row:after{display:table;content:""} -.row:after{clear:both} -[class*="span"]{float:left;margin-left:20px} -.span1{width:60px} -.span2{width:140px} -.span3{width:220px} -.span4{width:300px} -.span5{width:380px} -.span6{width:460px} -.span7{width:540px} -.span8{width:620px} -.span9{width:700px} -.span10{width:780px} -.span11{width:860px} -.span12,.container{width:940px} -.offset1{margin-left:100px} -.offset2{margin-left:180px} -.offset3{margin-left:260px} -.offset4{margin-left:340px} -.offset5{margin-left:420px} -.offset6{margin-left:500px} -.offset7{margin-left:580px} -.offset8{margin-left:660px} -.offset9{margin-left:740px} -.offset10{margin-left:820px} -.offset11{margin-left:900px} -.row-fluid{width:100%;*zoom:1;} -.row-fluid:before,.row-fluid:after{display:table;content:""} -.row-fluid:after{clear:both} -.row-fluid > [class*="span"]{float:left;margin-left:2.127659574%} -.row-fluid > [class*="span"]:first-child{margin-left:0} -.row-fluid > .span1{width:6.382978723%} -.row-fluid > .span2{width:14.89361702%} -.row-fluid > .span3{width:23.404255317%} -.row-fluid > .span4{width:31.914893614%} -.row-fluid > .span5{width:40.425531911%} -.row-fluid > .span6{width:48.93617020799999%} -.row-fluid > .span7{width:57.446808505%} -.row-fluid > .span8{width:65.95744680199999%} -.row-fluid > .span9{width:74.468085099%} -.row-fluid > .span10{width:82.97872339599999%} -.row-fluid > .span11{width:91.489361693%} -.row-fluid > .span12{width:99.99999998999999%} -.container{width:940px;margin-left:auto;margin-right:auto;*zoom:1;} -.container:before,.container:after{display:table;content:""} -.container:after{clear:both} -.container-fluid{padding-left:20px;padding-right:20px;*zoom:1;} -.container-fluid:before,.container-fluid:after{display:table;content:""} -.container-fluid:after{clear:both} -p{margin:0 0 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;} -p small{font-size:11px;color:#999} -.lead{margin-bottom:18px;font-size:20px;font-weight:200;line-height:27px} -h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold;color:#333;text-rendering:optimizelegibility;} -h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999} -h1{font-size:30px;line-height:36px;} -h1 small{font-size:18px} -h2{font-size:24px;line-height:36px;} -h2 small{font-size:18px} -h3{line-height:27px;font-size:18px;} -h3 small{font-size:14px} -h4,h5,h6{line-height:18px} -h4{font-size:14px;} -h4 small{font-size:12px} -h5{font-size:12px} -h6{font-size:11px;color:#999;text-transform:uppercase} -.page-header{padding-bottom:17px;margin:18px 0;border-bottom:1px solid #eee} -.page-header h1{line-height:1} -ul,ol{padding:0;margin:0 0 9px 25px} -ul ul,ul ol,ol ol,ol ul{margin-bottom:0} -ul{list-style:disc} -ol{list-style:decimal} -li{line-height:18px} -ul.unstyled,ol.unstyled{margin-left:0;list-style:none} -dl{margin-bottom:18px} -dt,dd{line-height:18px} -dt{font-weight:bold} -dd{margin-left:9px} -hr{margin:18px 0;border:0;border-top:1px solid #eee;border-bottom:1px solid #fff} -strong{font-weight:bold} -em{font-style:italic} -.muted{color:#999} -abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help} -blockquote{padding:0 0 0 15px;margin:0 0 18px;border-left:5px solid #eee;} -blockquote p{margin-bottom:0;font-size:16px;font-weight:300;line-height:22.5px} -blockquote small{display:block;line-height:18px;color:#999;} -blockquote small:before{content:'\2014 \00A0'} -blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;} -blockquote.pull-right p,blockquote.pull-right small{text-align:right} -q:before,q:after,blockquote:before,blockquote:after{content:""} -address{display:block;margin-bottom:18px;line-height:18px;font-style:normal} -small{font-size:100%} -cite{font-style:normal} -code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} -code{padding:3px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8} -pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;} -pre.prettyprint{margin-bottom:18px} -pre code{padding:0;color:inherit;background-color:transparent;border:0} -.pre-scrollable{max-height:340px;overflow-y:scroll} -form{margin:0 0 18px} -fieldset{padding:0;margin:0;border:0} -legend{display:block;width:100%;padding:0;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333;border:0;border-bottom:1px solid #eee;} -legend small{font-size:13.5px;color:#999} -label,input,button,select,textarea{font-size:13px;font-weight:normal;line-height:18px} -input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif} -label{display:block;margin-bottom:5px;color:#333} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} -.uneditable-textarea{width:auto;height:auto} -label input,label textarea,label select{display:block} -input[type="image"],input[type="checkbox"],input[type="radio"]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0 9;} -input[type="image"]{border:0} -input[type="file"]{width:auto;padding:initial;line-height:initial;border:initial;background-color:#fff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} -input[type="button"],input[type="reset"],input[type="submit"]{width:auto;height:auto} -select,input[type="file"]{height:28px;*margin-top:4px;line-height:28px} -input[type="file"]{line-height:18px 9} -select{width:220px;background-color:#fff} -select[multiple],select[size]{height:auto} -input[type="image"]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} -textarea{height:auto} -input[type="hidden"]{display:none} -.radio,.checkbox{padding-left:18px} -.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-18px} -.controls > .radio:first-child,.controls > .checkbox:first-child{padding-top:5px} -.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle} -.radio.inline + .radio.inline,.checkbox.inline + .checkbox.inline{margin-left:10px} -input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.07);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.07);box-shadow:inset 0 1px 1px rgba(0,0,0,0.07);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-ms-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s} -input:focus,textarea:focus{border-color:rgba(82,168,236,0.80);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.07),0 0 8px rgba(82,168,236,0.60);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.07),0 0 8px rgba(82,168,236,0.60);box-shadow:inset 0 1px 1px rgba(0,0,0,0.07),0 0 8px rgba(82,168,236,0.60);outline:0;outline:thin dotted 9;} -input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} -.input-mini{width:60px} -.input-small{width:90px} -.input-medium{width:150px} -.input-large{width:210px} -.input-xlarge{width:270px} -.input-xxlarge{width:530px} -input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{float:none;margin-left:0} -input.span1,textarea.span1,.uneditable-input.span1{width:50px} -input.span2,textarea.span2,.uneditable-input.span2{width:130px} -input.span3,textarea.span3,.uneditable-input.span3{width:210px} -input.span4,textarea.span4,.uneditable-input.span4{width:290px} -input.span5,textarea.span5,.uneditable-input.span5{width:370px} -input.span6,textarea.span6,.uneditable-input.span6{width:450px} -input.span7,textarea.span7,.uneditable-input.span7{width:530px} -input.span8,textarea.span8,.uneditable-input.span8{width:610px} -input.span9,textarea.span9,.uneditable-input.span9{width:690px} -input.span10,textarea.span10,.uneditable-input.span10{width:770px} -input.span11,textarea.span11,.uneditable-input.span11{width:850px} -input.span12,textarea.span12,.uneditable-input.span12{width:930px} -input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed} -.control-group.warning > label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853} -.control-group.warning input,.control-group.warning select,.control-group.warning textarea{color:#c09853;border-color:#c09853;} -.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus{border-color:#b58b42;-webkit-box-shadow:0 0 6px #cdad75;-moz-box-shadow:0 0 6px #cdad75;box-shadow:0 0 6px #cdad75} -.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853} -.control-group.error > label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48} -.control-group.error input,.control-group.error select,.control-group.error textarea{color:#b94a48;border-color:#b94a48;} -.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus{border-color:#a74240;-webkit-box-shadow:0 0 6px #c76e6d;-moz-box-shadow:0 0 6px #c76e6d;box-shadow:0 0 6px #c76e6d} -.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48} -.control-group.success > label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847} -.control-group.success input,.control-group.success select,.control-group.success textarea{color:#468847;border-color:#468847;} -.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus{border-color:#3f7a40;-webkit-box-shadow:0 0 6px #5eac60;-moz-box-shadow:0 0 6px #5eac60;box-shadow:0 0 6px #5eac60} -.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847} -input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b;} -input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus{border-color:#eb423d;-webkit-box-shadow:0 0 6px #f17f7c;-moz-box-shadow:0 0 6px #f17f7c;box-shadow:0 0 6px #f17f7c} -.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd} -.uneditable-input{display:block;background-color:#fff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.03);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.03);box-shadow:inset 0 1px 2px rgba(0,0,0,0.03);cursor:not-allowed} -:-moz-placeholder{color:#999} -::-webkit-input-placeholder{color:#999} -.help-block{display:block;margin-top:5px;margin-bottom:0;color:#999} -.help-inline{display:inline-block;*display:inline;*zoom:1;margin-bottom:9px;vertical-align:middle;padding-left:5px} -.input-prepend,.input-append{margin-bottom:5px;*zoom:1;} -.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;content:""} -.input-prepend:after,.input-append:after{clear:both} -.input-prepend input,.input-append input,.input-prepend .uneditable-input,.input-append .uneditable-input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend input:focus,.input-append input:focus,.input-prepend .uneditable-input:focus,.input-append .uneditable-input:focus{position:relative;z-index:2} -.input-prepend .uneditable-input,.input-append .uneditable-input{border-left-color:#ccc} -.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 5px;font-weight:normal;line-height:18px;color:#999;text-align:center;text-shadow:0 1px 0 #fff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px} -.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546} -.input-prepend .add-on{*margin-top:1px;} -.input-append input,.input-append .uneditable-input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px} -.input-append .uneditable-input{border-left-color:#eee;border-right-color:#ccc} -.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0} -.input-append input:first-child{*margin-left:-160px;} -.input-append input:first-child+.add-on{*margin-left:-21px} -.search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px} -.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0} -.form-search .hide,.form-inline .hide,.form-horizontal .hide{display:none} -.form-search label,.form-inline label,.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend{display:inline-block} -.form-search .input-append .add-on,.form-inline .input-prepend .add-on,.form-search .input-append .add-on,.form-inline .input-prepend .add-on{vertical-align:middle} -.form-search .radio,.form-inline .radio,.form-search .checkbox,.form-inline .checkbox{margin-bottom:0;vertical-align:middle} -.control-group{margin-bottom:9px} -legend + .control-group{margin-top:18px;-webkit-margin-top-collapse:separate} -.form-horizontal .control-group{margin-bottom:18px;*zoom:1;} -.form-horizontal .control-group:before,.form-horizontal .control-group:after{display:table;content:""} -.form-horizontal .control-group:after{clear:both} -.form-horizontal .control-label{float:left;width:140px;padding-top:5px;text-align:right} -.form-horizontal .controls{margin-left:160px} -.form-horizontal .form-actions{padding-left:160px} -table{max-width:100%;border-collapse:collapse;border-spacing:0} -.table{width:100%;margin-bottom:18px;} -.table th,.table td{padding:8px;line-height:18px;text-align:left;vertical-align:top;border-top:1px solid #ddd} -.table th{font-weight:bold} -.table thead th{vertical-align:bottom} -.table thead:first-child tr th,.table thead:first-child tr td{border-top:0} -.table tbody + tbody{border-top:2px solid #ddd} -.table-condensed th,.table-condensed td{padding:4px 5px} -.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapsed;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.table-bordered th + th,.table-bordered td + td,.table-bordered th + td,.table-bordered td + th{border-left:1px solid #ddd} -.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0} -.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0} -.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0} -.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px} -.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0} -.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9} -.table tbody tr:hover td,.table tbody tr:hover th{background-color:#f5f5f5} -table .span1{float:none;width:44px;margin-left:0} -table .span2{float:none;width:124px;margin-left:0} -table .span3{float:none;width:204px;margin-left:0} -table .span4{float:none;width:284px;margin-left:0} -table .span5{float:none;width:364px;margin-left:0} -table .span6{float:none;width:444px;margin-left:0} -table .span7{float:none;width:524px;margin-left:0} -table .span8{float:none;width:604px;margin-left:0} -table .span9{float:none;width:684px;margin-left:0} -table .span10{float:none;width:764px;margin-left:0} -table .span11{float:none;width:844px;margin-left:0} -table .span12{float:none;width:924px;margin-left:0} -[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat;*margin-right:.3em;} -[class^="icon-"]:last-child,[class*=" icon-"]:last-child{*margin-left:0} -.icon-white{background-image:url("../img/glyphicons-halflings-white.png")} -.icon-glass{background-position:0 0} -.icon-music{background-position:-24px 0} -.icon-search{background-position:-48px 0} -.icon-envelope{background-position:-72px 0} -.icon-heart{background-position:-96px 0} -.icon-star{background-position:-120px 0} -.icon-star-empty{background-position:-144px 0} -.icon-user{background-position:-168px 0} -.icon-film{background-position:-192px 0} -.icon-th-large{background-position:-216px 0} -.icon-th{background-position:-240px 0} -.icon-th-list{background-position:-264px 0} -.icon-ok{background-position:-288px 0} -.icon-remove{background-position:-312px 0} -.icon-zoom-in{background-position:-336px 0} -.icon-zoom-out{background-position:-360px 0} -.icon-off{background-position:-384px 0} -.icon-signal{background-position:-408px 0} -.icon-cog{background-position:-432px 0} -.icon-trash{background-position:-456px 0} -.icon-home{background-position:0 -24px} -.icon-file{background-position:-24px -24px} -.icon-time{background-position:-48px -24px} -.icon-road{background-position:-72px -24px} -.icon-download-alt{background-position:-96px -24px} -.icon-download{background-position:-120px -24px} -.icon-upload{background-position:-144px -24px} -.icon-inbox{background-position:-168px -24px} -.icon-play-circle{background-position:-192px -24px} -.icon-repeat{background-position:-216px -24px} -.icon-refresh{background-position:-240px -24px} -.icon-list-alt{background-position:-264px -24px} -.icon-lock{background-position:-287px -24px} -.icon-flag{background-position:-312px -24px} -.icon-headphones{background-position:-336px -24px} -.icon-volume-off{background-position:-360px -24px} -.icon-volume-down{background-position:-384px -24px} -.icon-volume-up{background-position:-408px -24px} -.icon-qrcode{background-position:-432px -24px} -.icon-barcode{background-position:-456px -24px} -.icon-tag{background-position:0 -48px} -.icon-tags{background-position:-25px -48px} -.icon-book{background-position:-48px -48px} -.icon-bookmark{background-position:-72px -48px} -.icon-print{background-position:-96px -48px} -.icon-camera{background-position:-120px -48px} -.icon-font{background-position:-144px -48px} -.icon-bold{background-position:-167px -48px} -.icon-italic{background-position:-192px -48px} -.icon-text-height{background-position:-216px -48px} -.icon-text-width{background-position:-240px -48px} -.icon-align-left{background-position:-264px -48px} -.icon-align-center{background-position:-288px -48px} -.icon-align-right{background-position:-312px -48px} -.icon-align-justify{background-position:-336px -48px} -.icon-list{background-position:-360px -48px} -.icon-indent-left{background-position:-384px -48px} -.icon-indent-right{background-position:-408px -48px} -.icon-facetime-video{background-position:-432px -48px} -.icon-picture{background-position:-456px -48px} -.icon-pencil{background-position:0 -72px} -.icon-map-marker{background-position:-24px -72px} -.icon-adjust{background-position:-48px -72px} -.icon-tint{background-position:-72px -72px} -.icon-edit{background-position:-96px -72px} -.icon-share{background-position:-120px -72px} -.icon-check{background-position:-144px -72px} -.icon-move{background-position:-168px -72px} -.icon-step-backward{background-position:-192px -72px} -.icon-fast-backward{background-position:-216px -72px} -.icon-backward{background-position:-240px -72px} -.icon-play{background-position:-264px -72px} -.icon-pause{background-position:-288px -72px} -.icon-stop{background-position:-312px -72px} -.icon-forward{background-position:-336px -72px} -.icon-fast-forward{background-position:-360px -72px} -.icon-step-forward{background-position:-384px -72px} -.icon-eject{background-position:-408px -72px} -.icon-chevron-left{background-position:-432px -72px} -.icon-chevron-right{background-position:-456px -72px} -.icon-plus-sign{background-position:0 -96px} -.icon-minus-sign{background-position:-24px -96px} -.icon-remove-sign{background-position:-48px -96px} -.icon-ok-sign{background-position:-72px -96px} -.icon-question-sign{background-position:-96px -96px} -.icon-info-sign{background-position:-120px -96px} -.icon-screenshot{background-position:-144px -96px} -.icon-remove-circle{background-position:-168px -96px} -.icon-ok-circle{background-position:-192px -96px} -.icon-ban-circle{background-position:-216px -96px} -.icon-arrow-left{background-position:-240px -96px} -.icon-arrow-right{background-position:-264px -96px} -.icon-arrow-up{background-position:-289px -96px} -.icon-arrow-down{background-position:-312px -96px} -.icon-share-alt{background-position:-336px -96px} -.icon-resize-full{background-position:-360px -96px} -.icon-resize-small{background-position:-384px -96px} -.icon-plus{background-position:-408px -96px} -.icon-minus{background-position:-433px -96px} -.icon-asterisk{background-position:-456px -96px} -.icon-exclamation-sign{background-position:0 -120px} -.icon-gift{background-position:-24px -120px} -.icon-leaf{background-position:-48px -120px} -.icon-fire{background-position:-72px -120px} -.icon-eye-open{background-position:-96px -120px} -.icon-eye-close{background-position:-120px -120px} -.icon-warning-sign{background-position:-144px -120px} -.icon-plane{background-position:-168px -120px} -.icon-calendar{background-position:-192px -120px} -.icon-random{background-position:-216px -120px} -.icon-comment{background-position:-240px -120px} -.icon-magnet{background-position:-264px -120px} -.icon-chevron-up{background-position:-288px -120px} -.icon-chevron-down{background-position:-313px -119px} -.icon-retweet{background-position:-336px -120px} -.icon-shopping-cart{background-position:-360px -120px} -.icon-folder-close{background-position:-384px -120px} -.icon-folder-open{background-position:-408px -120px} -.icon-resize-vertical{background-position:-432px -119px} -.icon-resize-horizontal{background-position:-456px -118px} -.dropdown{position:relative} -.dropdown-toggle{*margin-bottom:-3px} -.dropdown-toggle:active,.open .dropdown-toggle{outline:0} -.caret{display:inline-block;width:0;height:0;text-indent:-99999px;*text-indent:0;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;opacity:.3;filter:"alpha(opacity=$op)";content:"\2193"} -.dropdown .caret{margin-top:8px;margin-left:2px} -.dropdown:hover .caret,.open.dropdown .caret{opacity:1;filter:"alpha(opacity=$op)"} -.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;float:left;display:none;min-width:160px;_width:160px;padding:4px 0;margin:0;list-style:none;background-color:#fff;border-color:#ccc;border-color:rgba(0,0,0,0.20);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.20);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.20);box-shadow:0 5px 10px rgba(0,0,0,0.20);*border-right-width:2px;*border-bottom-width:2px;} -.dropdown-menu -webkit-background-clip: padding-box -moz-background-clip: padding{background-clip:padding-box} -.dropdown-menu.bottom-up{top:auto;bottom:100%;margin-bottom:2px} -.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff;*width:100%;*margin:-5px 0 5px} -.dropdown-menu a{display:block;padding:3px 15px;clear:both;font-weight:normal;line-height:18px;color:#555;white-space:nowrap} -.dropdown-menu li > a:hover,.dropdown-menu .active > a,.dropdown-menu .active > a:hover{color:#fff;text-decoration:none;background-color:#08c} -.dropdown.open{*z-index:1000;} -.dropdown.open .dropdown-toggle{color:#fff;background:#ccc;background:rgba(0,0,0,0.30)} -.dropdown.open .dropdown-menu{display:block} -.typeahead{margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0,0,0,0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);} -.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)} -.fade{-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;-ms-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0;} -.fade.in{opacity:1} -.collapse{-webkit-transition:height .35s ease;-moz-transition:height .35s ease;-ms-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease;position:relative;overflow:hidden;height:0;} -.collapse.in{height:auto} -.close{float:right;font-size:20px;font-weight:bold;line-height:18px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:"alpha(opacity=$op)";} -.close:hover{color:#000;text-decoration:none;opacity:.4;filter:"alpha(opacity=$op)";cursor:pointer} -.btn{display:inline-block;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#e6e6e6 #e6e6e6 #c4c4c4;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";*margin-left:.3em;} -.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6} -.btn:active,.btn.active{background-color:#cfcfcf e("\9")} -.btn:first-child{*margin-left:0} -.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear} -.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} -.btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 e("\9");outline:0} -.btn.disabled,.btn[disabled]{cursor:default;background-image:none;background-color:#e6e6e6;opacity:.65;filter:"alpha(opacity=$op)";-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} -.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} -.btn-large [class^="icon-"]{margin-top:1px} -.btn-small{padding:5px 9px;font-size:11px;line-height:16px} -.btn-small [class^="icon-"]{margin-top:-1px} -.btn-mini{padding:2px 6px;font-size:11px;line-height:14px} -.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover{text-shadow:0 -1px 0 rgba(0,0,0,0.25);color:#fff} -.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-dark.active{color:rgba(255,255,255,0.75)} -.btn-primary{background-color:#006ccc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-ms-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(top,#08c,#04c);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#04c #04c #003aad;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#04c} -.btn-primary:active,.btn-primary.active{background-color:#003db8 e("\9")} -.btn-warning{background-color:#f99d1c;background-image:-moz-linear-gradient(top,#faa42b,#f89406);background-image:-ms-linear-gradient(top,#faa42b,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#faa42b),to(#f89406));background-image:-webkit-linear-gradient(top,#faa42b,#f89406);background-image:-o-linear-gradient(top,#faa42b,#f89406);background-image:linear-gradient(top,#faa42b,#f89406);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#f89406 #f89406 #d37e05;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{background-color:#f89406} -.btn-warning:active,.btn-warning.active{background-color:#df8505 e("\9")} -.btn-danger{background-color:#da4e49;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(top,#ee5f5b,#bd362f);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#bd362f #bd362f #a12e28;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{background-color:#bd362f} -.btn-danger:active,.btn-danger.active{background-color:#aa312a e("\9")} -.btn-success{background-color:#5bb65b;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(top,#62c462,#51a351);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#51a351 #51a351 #458b45;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{background-color:#51a351} -.btn-success:active,.btn-success.active{background-color:#499349 e("\9")} -.btn-info{background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(top,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#2f96b4 #2f96b4 #287f99;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{background-color:#2f96b4} -.btn-info:active,.btn-info.active{background-color:#2a87a2 e("\9")} -.btn-inverse{background-color:#383838;background-image:-moz-linear-gradient(top,#454545,#262626);background-image:-ms-linear-gradient(top,#454545,#262626);background-image:-webkit-gradient(linear,0 0,0 100%,from(#454545),to(#262626));background-image:-webkit-linear-gradient(top,#454545,#262626);background-image:-o-linear-gradient(top,#454545,#262626);background-image:linear-gradient(top,#454545,#262626);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#262626 #262626 #202020;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";} -.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{background-color:#262626} -.btn-inverse:active,.btn-inverse.active{background-color:#222 e("\9")} -button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px;} -button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0} -button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px} -button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px} -.btn-group{position:relative;*zoom:1;*margin-left:.3em;} -.btn-group:before,.btn-group:after{display:table;content:""} -.btn-group:after{clear:both} -.btn-group:first-child{*margin-left:0} -.btn-group + .btn-group{margin-left:5px} -.btn-toolbar{margin-top:9px;margin-bottom:9px;} -.btn-toolbar .btn-group{display:inline-block;*display:inline;*zoom:1} -.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} -.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px} -.btn-group .btn:last-child,.btn-group .dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px} -.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px} -.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px} -.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active,.btn-group .btn.active{z-index:2} -.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0} -.btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.13),inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.13),inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 1px 0 0 rgba(255,255,255,0.13),inset 0 1px 0 rgba(255,255,255,0.20),0 1px 2px rgba(0,0,0,0.05);*padding-top:5px;*padding-bottom:5px} -.btn-group.open{*z-index:1000;} -.btn-group.open .dropdown-menu{display:block;margin-top:1px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} -.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 6px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 6px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)} -.btn .caret{margin-top:7px;margin-left:0} -.btn:hover .caret,.open.btn-group .caret{opacity:1;filter:"alpha(opacity=$op)"} -.btn-primary .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret{border-top-color:#fff;opacity:.75;filter:"alpha(opacity=$op)"} -.btn-small .caret{margin-top:4px} -.alert{padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255,255,255,0.50);background-color:#fcf8e3;border:1px solid #fbefd6;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.alert,.alert-heading{color:#c09853} -.alert .close{position:relative;top:-2px;right:-21px;line-height:18px} -.alert-success{background-color:#dff0d8;border-color:#d7eac8} -.alert-success,.alert-success .alert-heading{color:#468847} -.alert-danger,.alert-error{background-color:#f2dede;border-color:#eed4d8} -.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#b94a48} -.alert-info{background-color:#d9edf7;border-color:#bee9f1} -.alert-info,.alert-info .alert-heading{color:#3a87ad} -.alert-block{padding-top:14px;padding-bottom:14px} -.alert-block > p,.alert-block > ul{margin-bottom:0} -.alert-block p + p{margin-top:5px} -.nav{margin-left:0;margin-bottom:18px;list-style:none} -.nav > li > a{display:block} -.nav > li > a:hover{text-decoration:none;background-color:#eee} -.nav .nav-header{display:block;padding:3px 15px;font-size:11px;font-weight:bold;line-height:18px;color:#999;text-shadow:0 1px 0 rgba(255,255,255,0.50);text-transform:uppercase} -.nav li + .nav-header{margin-top:9px} -.nav-list{padding-left:14px;padding-right:14px;margin-bottom:0} -.nav-list > li > a,.nav-list .nav-header{margin-left:-15px;margin-right:-15px;text-shadow:0 1px 0 rgba(255,255,255,0.50)} -.nav-list > li > a{padding:3px 15px} -.nav-list .active > a,.nav-list .active > a:hover{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.20);background-color:#08c} -.nav-list [class^="icon-"]{margin-right:2px} -.nav-tabs,.nav-pills{*zoom:1;} -.nav-tabs:before,.nav-pills:before,.nav-tabs:after,.nav-pills:after{display:table;content:""} -.nav-tabs:after,.nav-pills:after{clear:both} -.nav-tabs > li,.nav-pills > li{float:left} -.nav-tabs > li > a,.nav-pills > li > a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px} -.nav-tabs{border-bottom:1px solid #ddd} -.nav-tabs > li{margin-bottom:-1px} -.nav-tabs > li > a{padding-top:9px;padding-bottom:9px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;} -.nav-tabs > li > a:hover{border-color:#eee #eee #ddd} -.nav-tabs > .active > a,.nav-tabs > .active > a:hover{color:#555;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default} -.nav-pills > li > a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} -.nav-pills .active > a,.nav-pills .active > a:hover{color:#fff;background-color:#08c} -.nav-stacked > li{float:none} -.nav-stacked > li > a{margin-right:0} -.nav-tabs.nav-stacked{border-bottom:0} -.nav-tabs.nav-stacked > li > a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} -.nav-tabs.nav-stacked > li:first-child > a{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0} -.nav-tabs.nav-stacked > li:last-child > a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px} -.nav-tabs.nav-stacked > li > a:hover{border-color:#ddd;z-index:2} -.nav-pills.nav-stacked > li > a{margin-bottom:3px} -.nav-pills.nav-stacked > li:last-child > a{margin-bottom:1px} -.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu{margin-top:1px;border-width:1px} -.nav-pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.nav-tabs .dropdown-toggle .caret,.nav-pills .dropdown-toggle .caret{border-top-color:#08c;margin-top:6px} -.nav-tabs .dropdown-toggle:hover .caret,.nav-pills .dropdown-toggle:hover .caret{border-top-color:#0074ad} -.nav-tabs .active .dropdown-toggle .caret,.nav-pills .active .dropdown-toggle .caret{border-top-color:#333} -.nav > .dropdown.active > a:hover{color:#000;cursor:pointer} -.nav-tabs .open .dropdown-toggle,.nav-pills .open .dropdown-toggle,.nav > .open.active > a:hover{color:#fff;background-color:#999;border-color:#999} -.nav .open .caret,.nav .open.active .caret,.nav .open a:hover .caret{border-top-color:#fff;opacity:1;filter:"alpha(opacity=$op)"} -.tabs-stacked .open > a:hover{border-color:#999} -.tabbable{*zoom:1;} -.tabbable:before,.tabbable:after{display:table;content:""} -.tabbable:after{clear:both} -.tab-content{overflow:hidden} -.tabs-below .nav-tabs,.tabs-right .nav-tabs,.tabs-left .nav-tabs{border-bottom:0} -.tab-content > .tab-pane,.pill-content > .pill-pane{display:none} -.tab-content > .active,.pill-content > .active{display:block} -.tabs-below .nav-tabs{border-top:1px solid #ddd} -.tabs-below .nav-tabs > li{margin-top:-1px;margin-bottom:0} -.tabs-below .nav-tabs > li > a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;} -.tabs-below .nav-tabs > li > a:hover{border-bottom-color:transparent;border-top-color:#ddd} -.tabs-below .nav-tabs .active > a,.tabs-below .nav-tabs .active > a:hover{border-color:transparent #ddd #ddd #ddd} -.tabs-left .nav-tabs > li,.tabs-right .nav-tabs > li{float:none} -.tabs-left .nav-tabs > li > a,.tabs-right .nav-tabs > li > a{min-width:74px;margin-right:0;margin-bottom:3px} -.tabs-left .nav-tabs{float:left;margin-right:19px;border-right:1px solid #ddd} -.tabs-left .nav-tabs > li > a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px} -.tabs-left .nav-tabs > li > a:hover{border-color:#eee #ddd #eee #eee} -.tabs-left .nav-tabs .active > a,.tabs-left .nav-tabs .active > a:hover{border-color:#ddd transparent #ddd #ddd;*border-right-color:#fff} -.tabs-right .nav-tabs{float:right;margin-left:19px;border-left:1px solid #ddd} -.tabs-right .nav-tabs > li > a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0} -.tabs-right .nav-tabs > li > a:hover{border-color:#eee #eee #eee #ddd} -.tabs-right .nav-tabs .active > a,.tabs-right .nav-tabs .active > a:hover{border-color:#ddd #ddd #ddd transparent;*border-left-color:#fff} -.navbar{overflow:visible;margin-bottom:18px} -.navbar-inner{padding-left:20px;padding-right:20px;background-color:#2c2c2c;background-image:-moz-linear-gradient(top,#333,#222);background-image:-ms-linear-gradient(top,#333,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));background-image:-webkit-linear-gradient(top,#333,#222);background-image:-o-linear-gradient(top,#333,#222);background-image:linear-gradient(top,#333,#222);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.10);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.10);box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.10)} -.btn-navbar{display:none;float:right;padding:7px 10px;margin-left:5px;margin-right:5px;background-color:#2c2c2c;background-image:-moz-linear-gradient(top,#333,#222);background-image:-ms-linear-gradient(top,#333,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));background-image:-webkit-linear-gradient(top,#333,#222);background-image:-o-linear-gradient(top,#333,#222);background-image:linear-gradient(top,#333,#222);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border-color:#222 #222 #1d1d1d;border-color:rgba(0,0,0,0.10) rgba(0,0,0,0.10) fadein(rgba(0,0,0,0.10),15%);filter:"progid:DXImageTransform.Microsoft$gradient(enabled = false)";-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 1px 0 rgba(255,255,255,0.07);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 1px 0 rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 1px 0 rgba(255,255,255,0.07)} -.btn-navbar:hover,.btn-navbar:active,.btn-navbar.active,.btn-navbar.disabled,.btn-navbar[disabled]{background-color:#222} -.btn-navbar:active,.btn-navbar.active{background-color:#1f1f1f e("\9")} -.btn-navbar .icon-bar{display:block;width:18px;height:2px;background-color:#f5f5f5;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.25)} -.btn-navbar .icon-bar + .icon-bar{margin-top:3px} -.nav-collapse.collapse{height:auto} -.navbar .brand:hover{text-decoration:none} -.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#fff} -.navbar .navbar-text{margin-bottom:0;line-height:40px;color:#999;} -.navbar .navbar-text a:hover{color:#fff;background-color:transparent} -.navbar .btn,.navbar .btn-group{margin-top:5px} -.navbar .btn-group .btn{margin-top:0} -.navbar-form{margin-bottom:0;*zoom:1;} -.navbar-form:before,.navbar-form:after{display:table;content:""} -.navbar-form:after{clear:both} -.navbar-form input,.navbar-form select{display:inline-block;margin-top:5px;margin-bottom:0} -.navbar-form .radio,.navbar-form .checkbox{margin-top:5px} -.navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"]{margin-top:3px} -.navbar-form .input-append,.navbar-form .input-prepend{margin-top:6px;white-space:nowrap;} -.navbar-form .input-append input,.navbar-form .input-prepend input{margin-top:0} -.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;} -.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#fff;color:rgba(255,255,255,0.75);background:#666;background:rgba(255,255,255,0.30);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.10),0 1px 0 rgba(255,255,255,0.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.10),0 1px 0 rgba(255,255,255,0.15);box-shadow:inset 0 1px 2px rgba(0,0,0,0.10),0 1px 0 rgba(255,255,255,0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;} -.navbar-search .search-query :-moz-placeholder{color:#eee} -.navbar-search .search-query ::-webkit-input-placeholder{color:#eee} -.navbar-search .search-query:hover{color:#fff;background-color:#999;background-color:rgba(255,255,255,0.50)} -.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333;text-shadow:0 1px 0 #fff;background-color:#fff;border:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.15);-moz-box-shadow:0 0 3px rgba(0,0,0,0.15);box-shadow:0 0 3px rgba(0,0,0,0.15);outline:0} -.navbar-fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030} -.navbar-fixed-top .navbar-inner{padding-left:0;padding-right:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} -.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0} -.navbar .nav.pull-right{float:right} -.navbar .nav > li{display:block;float:left} -.navbar .nav > li > a{float:none;padding:10px 10px 11px;line-height:19px;color:#999;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.25)} -.navbar .nav > li > a:hover{background-color:transparent;color:#fff;text-decoration:none} -.navbar .nav .active > a,.navbar .nav .active > a:hover{color:#fff;text-decoration:none;background-color:#222} -.navbar .divider-vertical{height:40px;width:1px;margin:0 9px;overflow:hidden;background-color:#222;border-right:1px solid #333} -.navbar .nav.pull-right{margin-left:10px;margin-right:0} -.navbar .dropdown-menu{margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.20);position:absolute;top:-7px;left:9px} -.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px} -.navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#fff} -.navbar .nav .active .caret{opacity:1;filter:"alpha(opacity=$op)"} -.navbar .nav .open > .dropdown-toggle,.navbar .nav .active > .dropdown-toggle,.navbar .nav .open.active > .dropdown-toggle{background-color:transparent} -.navbar .nav .active > .dropdown-toggle:hover{color:#fff} -.navbar .nav.pull-right .dropdown-menu{left:auto;right:0;} -.navbar .nav.pull-right .dropdown-menu:before{left:auto;right:12px} -.navbar .nav.pull-right .dropdown-menu:after{left:auto;right:13px} -.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#fbfbfb;background-image:-moz-linear-gradient(top,#fff,#f5f5f5);background-image:-ms-linear-gradient(top,#fff,#f5f5f5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f5f5f5));background-image:-webkit-linear-gradient(top,#fff,#f5f5f5);background-image:-o-linear-gradient(top,#fff,#f5f5f5);background-image:linear-gradient(top,#fff,#f5f5f5);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff;} -.breadcrumb li{display:inline-block;text-shadow:0 1px 0 #fff} -.breadcrumb .divider{padding:0 5px;color:#999} -.breadcrumb .active a{color:#333} -.pagination{height:36px;margin:18px 0} -.pagination ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.05);box-shadow:0 1px 2px rgba(0,0,0,0.05)} -.pagination li{display:inline} -.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border:1px solid #ddd;border-left-width:0} -.pagination a:hover,.pagination .active a{background-color:#f5f5f5} -.pagination .active a{color:#999;cursor:default} -.pagination .disabled a,.pagination .disabled a:hover{color:#999;background-color:transparent;cursor:default} -.pagination li:first-child a{border-left-width:1px;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px} -.pagination li:last-child a{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0} -.pagination-centered{text-align:center} -.pagination-right{text-align:right} -.pager{margin-left:0;margin-bottom:18px;list-style:none;text-align:center;*zoom:1;} -.pager:before,.pager:after{display:table;content:""} -.pager:after{clear:both} -.pager li{display:inline} -.pager a{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px} -.pager a:hover{text-decoration:none;background-color:#f5f5f5} -.pager .next a{float:right} -.pager .previous a{float:left} -.modal-open .dropdown-menu{z-index:2050} -.modal-open .dropdown.open{*z-index:2050} -.modal-open .popover{z-index:2060} -.modal-open .tooltip{z-index:2070} -.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000;} -.modal-backdrop.fade{opacity:0} -.modal-backdrop,.modal-backdrop.fade.in{opacity:.8;filter:"alpha(opacity=$op)"} -.modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -280px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.30);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.30);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.30);box-shadow:0 3px 7px rgba(0,0,0,0.30);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;} -.modal.fade{-webkit-transition:opacity .3s linear,top .3s ease-out;-moz-transition:opacity .3s linear,top .3s ease-out;-ms-transition:opacity .3s linear,top .3s ease-out;-o-transition:opacity .3s linear,top .3s ease-out;transition:opacity .3s linear,top .3s ease-out;top:-25%} -.modal.fade.in{top:50%} -.modal-header{padding:9px 15px;border-bottom:1px solid #eee;} -.modal-header .close{margin-top:2px} -.modal-body{padding:15px} -.modal-body .modal-form{margin-bottom:0} -.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff;*zoom:1;} -.modal-footer:before,.modal-footer:after{display:table;content:""} -.modal-footer:after{clear:both} -.modal-footer .btn{float:right;margin-left:5px;margin-bottom:0} -.tooltip{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;opacity:0;filter:"alpha(opacity=$op)";} -.tooltip.in{opacity:.8;filter:"alpha(opacity=$op)"} -.tooltip.top{margin-top:-2px} -.tooltip.right{margin-left:2px} -.tooltip.bottom{margin-top:2px} -.tooltip.left{margin-left:-2px} -.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-$arrowWidth;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000} -.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-$arrowWidth;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000} -.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-$arrowWidth;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000} -.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-$arrowWidth;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000} -.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.tooltip-arrow{position:absolute;width:0;height:0} -.popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;} -.popover.top{margin-top:-5px} -.popover.right{margin-left:5px} -.popover.bottom{margin-top:5px} -.popover.left{margin-left:-5px} -.popover.top .arrow{bottom:0;left:50%;margin-left:-$arrowWidth;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000} -.popover.right .arrow{top:50%;left:0;margin-top:-$arrowWidth;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000} -.popover.bottom .arrow{top:0;left:50%;margin-left:-$arrowWidth;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000} -.popover.left .arrow{top:50%;right:0;margin-top:-$arrowWidth;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000} -.popover .arrow{position:absolute;width:0;height:0} -.popover-inner{padding:3px;width:280px;overflow:hidden;background:#000;background:rgba(0,0,0,0.80);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.30);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.30);box-shadow:0 3px 7px rgba(0,0,0,0.30)} -.popover-title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0} -.popover-content{padding:14px;background-color:#fff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;} -.popover-content p,.popover-content ul,.popover-content ol{margin-bottom:0} -.thumbnails{margin-left:-$gridGutterWidth;list-style:none;*zoom:1;} -.thumbnails:before,.thumbnails:after{display:table;content:""} -.thumbnails:after{clear:both} -.thumbnails > li{float:left;margin:0 0 18px 20px} -.thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.07);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.07);box-shadow:0 1px 1px rgba(0,0,0,0.07)} -a.thumbnail:hover{border-color:#08c;-webkit-box-shadow:0 1px 4px rgba(0,105,214,0.25);-moz-box-shadow:0 1px 4px rgba(0,105,214,0.25);box-shadow:0 1px 4px rgba(0,105,214,0.25)} -.thumbnail > img{display:block;max-width:100%;margin-left:auto;margin-right:auto} -.thumbnail .caption{padding:9px} -.label{padding:2px 4px 3px;font-size:11.049999999999999px;font-weight:bold;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} -.label:hover{color:#fff;text-decoration:none} -.label-important{background-color:#b94a48} -.label-important:hover{background-color:#a74240} -.label-warning{background-color:#f89406} -.label-warning:hover{background-color:#df8505} -.label-success{background-color:#468847} -.label-success:hover{background-color:#3f7a40} -.label-info{background-color:#3a87ad} -.label-info:hover{background-color:#347a9c} -.progress{overflow:hidden;height:18px;margin-bottom:18px;background-color:#f6f6f6;background-image:-moz-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-ms-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));background-image:-webkit-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-o-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:linear-gradient(top,#f5f5f5,#f9f9f9);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.10);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.10);box-shadow:inset 0 1px 2px rgba(0,0,0,0.10);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.progress .bar{width:0%;height:18px;color:#fff;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0d90d1;background-image:-moz-linear-gradient(top,#149bdf,#0480be);background-image:-ms-linear-gradient(top,#149bdf,#0480be);background-image:-webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));background-image:-webkit-linear-gradient(top,#149bdf,#0480be);background-image:-o-linear-gradient(top,#149bdf,#0480be);background-image:linear-gradient(top,#149bdf,#0480be);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)";-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width .6s ease;-moz-transition:width .6s ease;-ms-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease} -.progress-striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,0.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,0.15)),color-stop(.75,rgba(255,255,255,0.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px} -.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite} -.progress-danger .bar{background-color:#dd514b;background-image:-moz-linear-gradient(top,#ee5f5b,#c43c35);background-image:-ms-linear-gradient(top,#ee5f5b,#c43c35);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));background-image:-webkit-linear-gradient(top,#ee5f5b,#c43c35);background-image:-o-linear-gradient(top,#ee5f5b,#c43c35);background-image:linear-gradient(top,#ee5f5b,#c43c35);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"} -.progress-danger.progress-striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,0.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,0.15)),color-stop(.75,rgba(255,255,255,0.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)} -.progress-success .bar{background-color:#5db95d;background-image:-moz-linear-gradient(top,#62c462,#57a957);background-image:-ms-linear-gradient(top,#62c462,#57a957);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));background-image:-webkit-linear-gradient(top,#62c462,#57a957);background-image:-o-linear-gradient(top,#62c462,#57a957);background-image:linear-gradient(top,#62c462,#57a957);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"} -.progress-success.progress-striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,0.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,0.15)),color-stop(.75,rgba(255,255,255,0.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)} -.progress-info .bar{background-color:#4bb1cf;background-image:-moz-linear-gradient(top,#5bc0de,#339bb9);background-image:-ms-linear-gradient(top,#5bc0de,#339bb9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#339bb9));background-image:-webkit-linear-gradient(top,#5bc0de,#339bb9);background-image:-o-linear-gradient(top,#5bc0de,#339bb9);background-image:linear-gradient(top,#5bc0de,#339bb9);background-repeat:repeat-x;filter:"progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"} -.progress-info.progress-striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,0.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,0.15)),color-stop(.75,rgba(255,255,255,0.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)} -@-moz-keyframes progress-bar-stripes{0%{background-position:0 0} -100%{background-position:40px 0} -}@-webkit-keyframes progress-bar-stripes{0%{background-position:0 0} -100%{background-position:40px 0} -}@-o-keyframes progress-bar-stripes{0%{background-position:0 0} -100%{background-position:40px 0} -}@-ms-keyframes progress-bar-stripes{0%{background-position:0 0} -100%{background-position:40px 0} -}@keyframes progress-bar-stripes{0%{background-position:0 0} -100%{background-position:40px 0} -}.accordion{margin-bottom:18px} -.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} -.accordion-heading{border-bottom:0} -.accordion-heading .accordion-toggle{display:block;padding:8px 15px} -.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5} -.carousel{position:relative;margin-bottom:18px;line-height:1} -.carousel-inner{overflow:hidden;width:100%;position:relative} -.carousel .item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;-moz-transition:.6s ease-in-out left;-ms-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left} -.carousel .item > img{display:block;line-height:1} -.carousel .active,.carousel .next,.carousel .prev{display:block} -.carousel .active{left:0} -.carousel .next,.carousel .prev{position:absolute;top:0;width:100%} -.carousel .next{left:100%} -.carousel .prev{left:-100%} -.carousel .next.left,.carousel .prev.right{left:0} -.carousel .active.left{left:-100%} -.carousel .active.right{left:100%} -.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;filter:"alpha(opacity=$op)";} -.carousel-control.right{left:auto;right:15px} -.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:"alpha(opacity=$op)"} -.carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333;background:rgba(0,0,0,0.75)} -.carousel-caption h4,.carousel-caption p{color:#fff} -.hero-unit{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} -.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px} -.hero-unit p{font-size:18px;font-weight:200;line-height:27px} -.pull-right{float:right} -.pull-left{float:left} -.hide{display:none} -.show{display:block} -.invisible{visibility:hidden} - diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip deleted file mode 100644 index 4cad194d..00000000 Binary files a/docs/assets/bootstrap.zip and /dev/null differ diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index d77d97d1..a3352d77 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -1,5 +1,5 @@ /*! - * Bootstrap Responsive v2.0.1 + * Bootstrap Responsive v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -7,118 +7,103 @@ * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + +@-ms-viewport { + width: device-width; +} + .clearfix { *zoom: 1; } -.clearfix:before, .clearfix:after { + +.clearfix:before, +.clearfix:after { display: table; + line-height: 0; content: ""; } + .clearfix:after { clear: both; } + +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + .hidden { display: none; visibility: hidden; } -@media (max-width: 480px) { - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); - } - .page-header h1 small { - display: block; - line-height: 18px; - } - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - display: block; - width: 100%; - min-height: 28px; - /* Make inputs at least the height of their button counterpart */ - - /* Makes inputs behave like true block-level elements */ - - -webkit-box-sizing: border-box; - /* Older Webkit */ - - -moz-box-sizing: border-box; - /* Older FF */ - - -ms-box-sizing: border-box; - /* IE8 */ - - box-sizing: border-box; - /* CSS3 spec*/ - - } - .input-prepend input[class*="span"], .input-append input[class*="span"] { - width: auto; - } - input[type="checkbox"], input[type="radio"] { - border: 1px solid #ccc; - } - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .form-horizontal .controls { - margin-left: 0; - } - .form-horizontal .control-list { - padding-top: 0; - } - .form-horizontal .form-actions { - padding-left: 10px; - padding-right: 10px; - } - .modal { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - width: auto; - margin: 0; + +.visible-phone { + display: none !important; +} + +.visible-tablet { + display: none !important; +} + +.hidden-desktop { + display: none !important; +} + +.visible-desktop { + display: inherit !important; +} + +@media (min-width: 768px) and (max-width: 979px) { + .hidden-desktop { + display: inherit !important; } - .modal.fade.in { - top: auto; + .visible-desktop { + display: none !important ; } - .modal-header .close { - padding: 10px; - margin: -10px; + .visible-tablet { + display: inherit !important; } - .carousel-caption { - position: static; + .hidden-tablet { + display: none !important; } } + @media (max-width: 767px) { - .container { - width: auto; - padding: 0 20px; + .hidden-desktop { + display: inherit !important; } - .row-fluid { - width: 100%; + .visible-desktop { + display: none !important; } - .row { - margin-left: 0; + .visible-phone { + display: inherit !important; } - .row > [class*="span"], .row-fluid > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; + .hidden-phone { + display: none !important; } } -@media (min-width: 768px) and (max-width: 979px) { + +@media (min-width: 1200px) { .row { - margin-left: -20px; + margin-left: -30px; *zoom: 1; } - .row:before, .row:after { + .row:before, + .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -126,284 +111,349 @@ } [class*="span"] { float: left; - margin-left: 20px; + min-height: 1px; + margin-left: 30px; } - .span1 { - width: 42px; + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1170px; } - .span2 { - width: 104px; + .span12 { + width: 1170px; } - .span3 { - width: 166px; + .span11 { + width: 1070px; } - .span4 { - width: 228px; + .span10 { + width: 970px; } - .span5 { - width: 290px; + .span9 { + width: 870px; } - .span6 { - width: 352px; + .span8 { + width: 770px; } .span7 { - width: 414px; + width: 670px; } - .span8 { - width: 476px; + .span6 { + width: 570px; } - .span9 { - width: 538px; + .span5 { + width: 470px; } - .span10 { - width: 600px; + .span4 { + width: 370px; } - .span11 { - width: 662px; + .span3 { + width: 270px; } - .span12, .container { - width: 724px; + .span2 { + width: 170px; } - .offset1 { - margin-left: 82px; + .span1 { + width: 70px; } - .offset2 { - margin-left: 144px; + .offset12 { + margin-left: 1230px; } - .offset3 { - margin-left: 206px; + .offset11 { + margin-left: 1130px; } - .offset4 { - margin-left: 268px; + .offset10 { + margin-left: 1030px; } - .offset5 { - margin-left: 330px; + .offset9 { + margin-left: 930px; } - .offset6 { - margin-left: 392px; + .offset8 { + margin-left: 830px; } .offset7 { - margin-left: 454px; + margin-left: 730px; } - .offset8 { - margin-left: 516px; + .offset6 { + margin-left: 630px; } - .offset9 { - margin-left: 578px; + .offset5 { + margin-left: 530px; } - .offset10 { - margin-left: 640px; + .offset4 { + margin-left: 430px; } - .offset11 { - margin-left: 702px; + .offset3 { + margin-left: 330px; + } + .offset2 { + margin-left: 230px; + } + .offset1 { + margin-left: 130px; } .row-fluid { width: 100%; *zoom: 1; } - .row-fluid:before, .row-fluid:after { + .row-fluid:before, + .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { clear: both; } - .row-fluid > [class*="span"] { + .row-fluid [class*="span"] { + display: block; float: left; - margin-left: 2.762430939%; + width: 100%; + min-height: 30px; + margin-left: 2.564102564102564%; + *margin-left: 2.5109110747408616%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .row-fluid > [class*="span"]:first-child { + .row-fluid [class*="span"]:first-child { margin-left: 0; } - .row-fluid > .span1 { - width: 5.801104972%; - } - .row-fluid > .span2 { - width: 14.364640883%; - } - .row-fluid > .span3 { - width: 22.928176794%; - } - .row-fluid > .span4 { - width: 31.491712705%; + .row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.564102564102564%; } - .row-fluid > .span5 { - width: 40.055248616%; + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; } - .row-fluid > .span6 { - width: 48.618784527%; + .row-fluid .span11 { + width: 91.45299145299145%; + *width: 91.39979996362975%; } - .row-fluid > .span7 { - width: 57.182320438000005%; + .row-fluid .span10 { + width: 82.90598290598291%; + *width: 82.8527914166212%; } - .row-fluid > .span8 { - width: 65.74585634900001%; + .row-fluid .span9 { + width: 74.35897435897436%; + *width: 74.30578286961266%; } - .row-fluid > .span9 { - width: 74.30939226%; + .row-fluid .span8 { + width: 65.81196581196582%; + *width: 65.75877432260411%; } - .row-fluid > .span10 { - width: 82.87292817100001%; + .row-fluid .span7 { + width: 57.26495726495726%; + *width: 57.21176577559556%; } - .row-fluid > .span11 { - width: 91.436464082%; + .row-fluid .span6 { + width: 48.717948717948715%; + *width: 48.664757228587014%; } - .row-fluid > .span12 { - width: 99.999999993%; + .row-fluid .span5 { + width: 40.17094017094017%; + *width: 40.11774868157847%; } - input.span1, textarea.span1, .uneditable-input.span1 { - width: 32px; + .row-fluid .span4 { + width: 31.623931623931625%; + *width: 31.570740134569924%; } - input.span2, textarea.span2, .uneditable-input.span2 { - width: 94px; + .row-fluid .span3 { + width: 23.076923076923077%; + *width: 23.023731587561375%; } - input.span3, textarea.span3, .uneditable-input.span3 { - width: 156px; + .row-fluid .span2 { + width: 14.52991452991453%; + *width: 14.476723040552828%; } - input.span4, textarea.span4, .uneditable-input.span4 { - width: 218px; + .row-fluid .span1 { + width: 5.982905982905983%; + *width: 5.929714493544281%; } - input.span5, textarea.span5, .uneditable-input.span5 { - width: 280px; + .row-fluid .offset12 { + margin-left: 105.12820512820512%; + *margin-left: 105.02182214948171%; } - input.span6, textarea.span6, .uneditable-input.span6 { - width: 342px; + .row-fluid .offset12:first-child { + margin-left: 102.56410256410257%; + *margin-left: 102.45771958537915%; } - input.span7, textarea.span7, .uneditable-input.span7 { - width: 404px; + .row-fluid .offset11 { + margin-left: 96.58119658119658%; + *margin-left: 96.47481360247316%; } - input.span8, textarea.span8, .uneditable-input.span8 { - width: 466px; + .row-fluid .offset11:first-child { + margin-left: 94.01709401709402%; + *margin-left: 93.91071103837061%; } - input.span9, textarea.span9, .uneditable-input.span9 { - width: 528px; + .row-fluid .offset10 { + margin-left: 88.03418803418803%; + *margin-left: 87.92780505546462%; } - input.span10, textarea.span10, .uneditable-input.span10 { - width: 590px; + .row-fluid .offset10:first-child { + margin-left: 85.47008547008548%; + *margin-left: 85.36370249136206%; } - input.span11, textarea.span11, .uneditable-input.span11 { - width: 652px; + .row-fluid .offset9 { + margin-left: 79.48717948717949%; + *margin-left: 79.38079650845607%; } - input.span12, textarea.span12, .uneditable-input.span12 { - width: 714px; + .row-fluid .offset9:first-child { + margin-left: 76.92307692307693%; + *margin-left: 76.81669394435352%; } -} -@media (max-width: 979px) { - body { - padding-top: 0; + .row-fluid .offset8 { + margin-left: 70.94017094017094%; + *margin-left: 70.83378796144753%; } - .navbar-fixed-top { - position: static; - margin-bottom: 18px; + .row-fluid .offset8:first-child { + margin-left: 68.37606837606839%; + *margin-left: 68.26968539734497%; } - .navbar-fixed-top .navbar-inner { - padding: 5px; + .row-fluid .offset7 { + margin-left: 62.393162393162385%; + *margin-left: 62.28677941443899%; } - .navbar .container { - width: auto; - padding: 0; + .row-fluid .offset7:first-child { + margin-left: 59.82905982905982%; + *margin-left: 59.72267685033642%; } - .navbar .brand { - padding-left: 10px; - padding-right: 10px; - margin: 0 0 0 -5px; + .row-fluid .offset6 { + margin-left: 53.84615384615384%; + *margin-left: 53.739770867430444%; } - .navbar .nav-collapse { - clear: left; + .row-fluid .offset6:first-child { + margin-left: 51.28205128205128%; + *margin-left: 51.175668303327875%; } - .navbar .nav { - float: none; - margin: 0 0 9px; + .row-fluid .offset5 { + margin-left: 45.299145299145295%; + *margin-left: 45.1927623204219%; } - .navbar .nav > li { - float: none; + .row-fluid .offset5:first-child { + margin-left: 42.73504273504273%; + *margin-left: 42.62865975631933%; } - .navbar .nav > li > a { - margin-bottom: 2px; + .row-fluid .offset4 { + margin-left: 36.75213675213675%; + *margin-left: 36.645753773413354%; } - .navbar .nav > .divider-vertical { - display: none; + .row-fluid .offset4:first-child { + margin-left: 34.18803418803419%; + *margin-left: 34.081651209310785%; } - .navbar .nav .nav-header { - color: #999999; - text-shadow: none; + .row-fluid .offset3 { + margin-left: 28.205128205128204%; + *margin-left: 28.0987452264048%; } - .navbar .nav > li > a, .navbar .dropdown-menu a { - padding: 6px 15px; - font-weight: bold; - color: #999999; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + .row-fluid .offset3:first-child { + margin-left: 25.641025641025642%; + *margin-left: 25.53464266230224%; } - .navbar .dropdown-menu li + li a { - margin-bottom: 2px; + .row-fluid .offset2 { + margin-left: 19.65811965811966%; + *margin-left: 19.551736679396257%; } - .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover { - background-color: #222222; + .row-fluid .offset2:first-child { + margin-left: 17.094017094017094%; + *margin-left: 16.98763411529369%; } - .navbar .dropdown-menu { - position: static; - top: auto; - left: auto; - float: none; - display: block; - max-width: none; - margin: 0 15px; - padding: 0; - background-color: transparent; - border: none; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + .row-fluid .offset1 { + margin-left: 11.11111111111111%; + *margin-left: 11.004728132387708%; } - .navbar .dropdown-menu:before, .navbar .dropdown-menu:after { - display: none; + .row-fluid .offset1:first-child { + margin-left: 8.547008547008547%; + *margin-left: 8.440625568285142%; } - .navbar .dropdown-menu .divider { - display: none; + input, + textarea, + .uneditable-input { + margin-left: 0; } - .navbar-form, .navbar-search { - float: none; - padding: 9px 15px; - margin: 9px 0; - border-top: 1px solid #222222; - border-bottom: 1px solid #222222; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + .controls-row [class*="span"] + [class*="span"] { + margin-left: 30px; } - .navbar .nav.pull-right { - float: none; - margin-left: 0; + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 1156px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 1056px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 956px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 856px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 756px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 656px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 556px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 456px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 356px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 256px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 156px; } - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 56px; } - .btn-navbar { - display: block; + .thumbnails { + margin-left: -30px; } - .nav-collapse { - overflow: hidden; - height: 0; + .thumbnails > li { + margin-left: 30px; } -} -@media (min-width: 980px) { - .nav-collapse.collapse { - height: auto !important; + .row-fluid .thumbnails { + margin-left: 0; } } -@media (min-width: 1200px) { + +@media (min-width: 768px) and (max-width: 979px) { .row { - margin-left: -30px; + margin-left: -20px; *zoom: 1; } - .row:before, .row:after { + .row:before, + .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -411,171 +461,632 @@ } [class*="span"] { float: left; - margin-left: 30px; + min-height: 1px; + margin-left: 20px; } - .span1 { - width: 70px; + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 724px; } - .span2 { - width: 170px; + .span12 { + width: 724px; } - .span3 { - width: 270px; + .span11 { + width: 662px; } - .span4 { - width: 370px; + .span10 { + width: 600px; } - .span5 { - width: 470px; + .span9 { + width: 538px; } - .span6 { - width: 570px; + .span8 { + width: 476px; } .span7 { - width: 670px; + width: 414px; } - .span8 { - width: 770px; + .span6 { + width: 352px; } - .span9 { - width: 870px; + .span5 { + width: 290px; } - .span10 { - width: 970px; + .span4 { + width: 228px; } - .span11 { - width: 1070px; + .span3 { + width: 166px; } - .span12, .container { - width: 1170px; + .span2 { + width: 104px; } - .offset1 { - margin-left: 130px; + .span1 { + width: 42px; } - .offset2 { - margin-left: 230px; + .offset12 { + margin-left: 764px; } - .offset3 { - margin-left: 330px; + .offset11 { + margin-left: 702px; } - .offset4 { - margin-left: 430px; + .offset10 { + margin-left: 640px; } - .offset5 { - margin-left: 530px; + .offset9 { + margin-left: 578px; } - .offset6 { - margin-left: 630px; + .offset8 { + margin-left: 516px; } .offset7 { - margin-left: 730px; + margin-left: 454px; } - .offset8 { - margin-left: 830px; + .offset6 { + margin-left: 392px; } - .offset9 { - margin-left: 930px; + .offset5 { + margin-left: 330px; } - .offset10 { - margin-left: 1030px; + .offset4 { + margin-left: 268px; } - .offset11 { - margin-left: 1130px; + .offset3 { + margin-left: 206px; + } + .offset2 { + margin-left: 144px; + } + .offset1 { + margin-left: 82px; } .row-fluid { width: 100%; *zoom: 1; } - .row-fluid:before, .row-fluid:after { + .row-fluid:before, + .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { clear: both; } - .row-fluid > [class*="span"] { + .row-fluid [class*="span"] { + display: block; float: left; - margin-left: 2.564102564%; + width: 100%; + min-height: 30px; + margin-left: 2.7624309392265194%; + *margin-left: 2.709239449864817%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .row-fluid > [class*="span"]:first-child { + .row-fluid [class*="span"]:first-child { margin-left: 0; } - .row-fluid > .span1 { - width: 5.982905983%; + .row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.7624309392265194%; + } + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; } - .row-fluid > .span2 { - width: 14.529914530000001%; + .row-fluid .span11 { + width: 91.43646408839778%; + *width: 91.38327259903608%; } - .row-fluid > .span3 { - width: 23.076923077%; + .row-fluid .span10 { + width: 82.87292817679558%; + *width: 82.81973668743387%; } - .row-fluid > .span4 { - width: 31.623931624%; + .row-fluid .span9 { + width: 74.30939226519337%; + *width: 74.25620077583166%; } - .row-fluid > .span5 { - width: 40.170940171000005%; + .row-fluid .span8 { + width: 65.74585635359117%; + *width: 65.69266486422946%; } - .row-fluid > .span6 { - width: 48.717948718%; + .row-fluid .span7 { + width: 57.18232044198895%; + *width: 57.12912895262725%; } - .row-fluid > .span7 { - width: 57.264957265%; + .row-fluid .span6 { + width: 48.61878453038674%; + *width: 48.56559304102504%; } - .row-fluid > .span8 { - width: 65.81196581200001%; + .row-fluid .span5 { + width: 40.05524861878453%; + *width: 40.00205712942283%; } - .row-fluid > .span9 { - width: 74.358974359%; + .row-fluid .span4 { + width: 31.491712707182323%; + *width: 31.43852121782062%; } - .row-fluid > .span10 { - width: 82.905982906%; + .row-fluid .span3 { + width: 22.92817679558011%; + *width: 22.87498530621841%; } - .row-fluid > .span11 { - width: 91.45299145300001%; + .row-fluid .span2 { + width: 14.3646408839779%; + *width: 14.311449394616199%; } - .row-fluid > .span12 { - width: 100%; + .row-fluid .span1 { + width: 5.801104972375691%; + *width: 5.747913483013988%; + } + .row-fluid .offset12 { + margin-left: 105.52486187845304%; + *margin-left: 105.41847889972962%; + } + .row-fluid .offset12:first-child { + margin-left: 102.76243093922652%; + *margin-left: 102.6560479605031%; + } + .row-fluid .offset11 { + margin-left: 96.96132596685082%; + *margin-left: 96.8549429881274%; + } + .row-fluid .offset11:first-child { + margin-left: 94.1988950276243%; + *margin-left: 94.09251204890089%; + } + .row-fluid .offset10 { + margin-left: 88.39779005524862%; + *margin-left: 88.2914070765252%; + } + .row-fluid .offset10:first-child { + margin-left: 85.6353591160221%; + *margin-left: 85.52897613729868%; + } + .row-fluid .offset9 { + margin-left: 79.8342541436464%; + *margin-left: 79.72787116492299%; + } + .row-fluid .offset9:first-child { + margin-left: 77.07182320441989%; + *margin-left: 76.96544022569647%; + } + .row-fluid .offset8 { + margin-left: 71.2707182320442%; + *margin-left: 71.16433525332079%; } - input.span1, textarea.span1, .uneditable-input.span1 { - width: 60px; + .row-fluid .offset8:first-child { + margin-left: 68.50828729281768%; + *margin-left: 68.40190431409427%; } - input.span2, textarea.span2, .uneditable-input.span2 { - width: 160px; + .row-fluid .offset7 { + margin-left: 62.70718232044199%; + *margin-left: 62.600799341718584%; } - input.span3, textarea.span3, .uneditable-input.span3 { - width: 260px; + .row-fluid .offset7:first-child { + margin-left: 59.94475138121547%; + *margin-left: 59.838368402492065%; } - input.span4, textarea.span4, .uneditable-input.span4 { - width: 360px; + .row-fluid .offset6 { + margin-left: 54.14364640883978%; + *margin-left: 54.037263430116376%; } - input.span5, textarea.span5, .uneditable-input.span5 { - width: 460px; + .row-fluid .offset6:first-child { + margin-left: 51.38121546961326%; + *margin-left: 51.27483249088986%; } - input.span6, textarea.span6, .uneditable-input.span6 { - width: 560px; + .row-fluid .offset5 { + margin-left: 45.58011049723757%; + *margin-left: 45.47372751851417%; } - input.span7, textarea.span7, .uneditable-input.span7 { - width: 660px; + .row-fluid .offset5:first-child { + margin-left: 42.81767955801105%; + *margin-left: 42.71129657928765%; } - input.span8, textarea.span8, .uneditable-input.span8 { - width: 760px; + .row-fluid .offset4 { + margin-left: 37.01657458563536%; + *margin-left: 36.91019160691196%; } - input.span9, textarea.span9, .uneditable-input.span9 { - width: 860px; + .row-fluid .offset4:first-child { + margin-left: 34.25414364640884%; + *margin-left: 34.14776066768544%; } - input.span10, textarea.span10, .uneditable-input.span10 { - width: 960px; + .row-fluid .offset3 { + margin-left: 28.45303867403315%; + *margin-left: 28.346655695309746%; } - input.span11, textarea.span11, .uneditable-input.span11 { - width: 1060px; + .row-fluid .offset3:first-child { + margin-left: 25.69060773480663%; + *margin-left: 25.584224756083227%; } - input.span12, textarea.span12, .uneditable-input.span12 { - width: 1160px; + .row-fluid .offset2 { + margin-left: 19.88950276243094%; + *margin-left: 19.783119783707537%; } + .row-fluid .offset2:first-child { + margin-left: 17.12707182320442%; + *margin-left: 17.02068884448102%; + } + .row-fluid .offset1 { + margin-left: 11.32596685082873%; + *margin-left: 11.219583872105325%; + } + .row-fluid .offset1:first-child { + margin-left: 8.56353591160221%; + *margin-left: 8.457152932878806%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 710px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 648px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 586px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 524px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 462px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 400px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 338px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 276px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 214px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 152px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 90px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 28px; + } +} + +@media (max-width: 767px) { + body { + padding-right: 20px; + padding-left: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom, + .navbar-static-top { + margin-right: -20px; + margin-left: -20px; + } + .container-fluid { + padding: 0; + } + .dl-horizontal dt { + float: none; + width: auto; + clear: none; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } + .container { + width: auto; + } + .row-fluid { + width: 100%; + } + .row, .thumbnails { - margin-left: -30px; + margin-left: 0; } .thumbnails > li { - margin-left: 30px; + float: none; + margin-left: 0; + } + [class*="span"], + .uneditable-input[class*="span"], + .row-fluid [class*="span"] { + display: block; + float: none; + width: 100%; + margin-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .span12, + .row-fluid .span12 { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; + width: auto; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 0; + } + .modal { + position: fixed; + top: 20px; + right: 20px; + left: 20px; + width: auto; + margin: 0; + } + .modal.fade { + top: -100px; + } + .modal.fade.in { + top: 20px; + } +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + .page-header h1 small { + display: block; + line-height: 20px; + } + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + .form-horizontal .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-right: 10px; + padding-left: 10px; + } + .media .pull-left, + .media .pull-right { + display: block; + float: none; + margin-bottom: 10px; + } + .media-object { + margin-right: 0; + margin-left: 0; + } + .modal { + top: 10px; + right: 10px; + left: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + .carousel-caption { + position: static; + } +} + +@media (max-width: 979px) { + body { + padding-top: 0; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + position: static; + } + .navbar-fixed-top { + margin-bottom: 20px; + } + .navbar-fixed-bottom { + margin-top: 20px; + } + .navbar-fixed-top .navbar-inner, + .navbar-fixed-bottom .navbar-inner { + padding: 5px; + } + .navbar .container { + width: auto; + padding: 0; + } + .navbar .brand { + padding-right: 10px; + padding-left: 10px; + margin: 0 0 0 -5px; + } + .nav-collapse { + clear: both; + } + .nav-collapse .nav { + float: none; + margin: 0 0 10px; + } + .nav-collapse .nav > li { + float: none; + } + .nav-collapse .nav > li > a { + margin-bottom: 2px; + } + .nav-collapse .nav > .divider-vertical { + display: none; + } + .nav-collapse .nav .nav-header { + color: #777777; + text-shadow: none; + } + .nav-collapse .nav > li > a, + .nav-collapse .dropdown-menu a { + padding: 9px 15px; + font-weight: bold; + color: #777777; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + } + .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + } + .nav-collapse .dropdown-menu li + li a { + margin-bottom: 2px; + } + .nav-collapse .nav > li > a:hover, + .nav-collapse .dropdown-menu a:hover { + background-color: #f2f2f2; + } + .navbar-inverse .nav-collapse .nav > li > a, + .navbar-inverse .nav-collapse .dropdown-menu a { + color: #999999; + } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: #111111; + } + .nav-collapse.in .btn-group { + padding: 0; + margin-top: 5px; + } + .nav-collapse .dropdown-menu { + position: static; + top: auto; + left: auto; + display: none; + float: none; + max-width: none; + padding: 0; + margin: 0 15px; + background-color: transparent; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .nav-collapse .open > .dropdown-menu { + display: block; + } + .nav-collapse .dropdown-menu:before, + .nav-collapse .dropdown-menu:after { + display: none; + } + .nav-collapse .dropdown-menu .divider { + display: none; + } + .nav-collapse .nav > li > .dropdown-menu:before, + .nav-collapse .nav > li > .dropdown-menu:after { + display: none; + } + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { + float: none; + padding: 10px 15px; + margin: 10px 0; + border-top: 1px solid #f2f2f2; + border-bottom: 1px solid #f2f2f2; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar-inverse .nav-collapse .navbar-form, + .navbar-inverse .nav-collapse .navbar-search { + border-top-color: #111111; + border-bottom-color: #111111; + } + .navbar .nav-collapse .nav.pull-right { + float: none; + margin-left: 0; + } + .nav-collapse, + .nav-collapse.collapse { + height: 0; + overflow: hidden; + } + .navbar .btn-navbar { + display: block; + } + .navbar-static .navbar-inner { + padding-right: 10px; + padding-left: 10px; + } +} + +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c3e0c005..8ab3cefc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.0.1 + * Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -7,6 +7,7 @@ * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + article, aside, details, @@ -19,45 +20,66 @@ nav, section { display: block; } -audio, canvas, video { + +audio, +canvas, +video { display: inline-block; *display: inline; *zoom: 1; } + audio:not([controls]) { display: none; } + html { font-size: 100%; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -a:hover, a:active { + +a:hover, +a:active { outline: 0; } -sub, sup { + +sub, +sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } + sup { top: -0.5em; } + sub { bottom: -0.25em; } + img { - max-width: 100%; + width: auto\9; height: auto; + max-width: 100%; + vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } + +#map_canvas img, +.google-maps img { + max-width: none; +} + button, input, select, @@ -66,250 +88,646 @@ textarea { font-size: 100%; vertical-align: middle; } -button, input { + +button, +input { *overflow: visible; line-height: normal; } -button::-moz-focus-inner, input::-moz-focus-inner { + +button::-moz-focus-inner, +input::-moz-focus-inner { padding: 0; border: 0; } + button, -input[type="button"], +html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } + +label, +select, +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +input[type="radio"], +input[type="checkbox"] { + cursor: pointer; +} + input[type="search"] { - -webkit-appearance: textfield; -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; } -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } + textarea { overflow: auto; vertical-align: top; } + +@media print { + * { + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + @page { + margin: 0.5cm; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} + .clearfix { *zoom: 1; } -.clearfix:before, .clearfix:after { + +.clearfix:before, +.clearfix:after { display: table; + line-height: 0; content: ""; } + .clearfix:after { clear: both; } + +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; color: #333333; background-color: #ffffff; } + a { color: #0088cc; text-decoration: none; } + a:hover { color: #005580; text-decoration: underline; } + +.img-rounded { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.img-circle { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} + .row { margin-left: -20px; *zoom: 1; } -.row:before, .row:after { + +.row:before, +.row:after { display: table; + line-height: 0; content: ""; } + .row:after { clear: both; } + [class*="span"] { float: left; + min-height: 1px; margin-left: 20px; } -.span1 { - width: 60px; + +.container, +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; } -.span2 { - width: 140px; + +.span12 { + width: 940px; } -.span3 { - width: 220px; + +.span11 { + width: 860px; } -.span4 { - width: 300px; + +.span10 { + width: 780px; } -.span5 { - width: 380px; + +.span9 { + width: 700px; } -.span6 { - width: 460px; + +.span8 { + width: 620px; } + .span7 { width: 540px; } -.span8 { - width: 620px; + +.span6 { + width: 460px; } -.span9 { - width: 700px; + +.span5 { + width: 380px; } -.span10 { - width: 780px; + +.span4 { + width: 300px; } -.span11 { - width: 860px; + +.span3 { + width: 220px; } -.span12, .container { - width: 940px; + +.span2 { + width: 140px; } -.offset1 { - margin-left: 100px; + +.span1 { + width: 60px; } -.offset2 { - margin-left: 180px; + +.offset12 { + margin-left: 980px; } -.offset3 { - margin-left: 260px; + +.offset11 { + margin-left: 900px; } -.offset4 { - margin-left: 340px; + +.offset10 { + margin-left: 820px; } -.offset5 { - margin-left: 420px; + +.offset9 { + margin-left: 740px; } -.offset6 { - margin-left: 500px; + +.offset8 { + margin-left: 660px; } + .offset7 { margin-left: 580px; } -.offset8 { - margin-left: 660px; + +.offset6 { + margin-left: 500px; } -.offset9 { - margin-left: 740px; + +.offset5 { + margin-left: 420px; } -.offset10 { - margin-left: 820px; + +.offset4 { + margin-left: 340px; } -.offset11 { - margin-left: 900px; + +.offset3 { + margin-left: 260px; +} + +.offset2 { + margin-left: 180px; +} + +.offset1 { + margin-left: 100px; } + .row-fluid { width: 100%; *zoom: 1; } -.row-fluid:before, .row-fluid:after { + +.row-fluid:before, +.row-fluid:after { display: table; + line-height: 0; content: ""; } + .row-fluid:after { clear: both; } -.row-fluid > [class*="span"] { + +.row-fluid [class*="span"] { + display: block; float: left; - margin-left: 2.127659574%; + width: 100%; + min-height: 30px; + margin-left: 2.127659574468085%; + *margin-left: 2.074468085106383%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.row-fluid > [class*="span"]:first-child { + +.row-fluid [class*="span"]:first-child { margin-left: 0; } -.row-fluid > .span1 { - width: 6.382978723%; + +.row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.127659574468085%; } -.row-fluid > .span2 { - width: 14.89361702%; + +.row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; } -.row-fluid > .span3 { - width: 23.404255317%; + +.row-fluid .span11 { + width: 91.48936170212765%; + *width: 91.43617021276594%; } -.row-fluid > .span4 { - width: 31.914893614%; + +.row-fluid .span10 { + width: 82.97872340425532%; + *width: 82.92553191489361%; } -.row-fluid > .span5 { - width: 40.425531911%; + +.row-fluid .span9 { + width: 74.46808510638297%; + *width: 74.41489361702126%; } -.row-fluid > .span6 { - width: 48.93617020799999%; + +.row-fluid .span8 { + width: 65.95744680851064%; + *width: 65.90425531914893%; } -.row-fluid > .span7 { - width: 57.446808505%; + +.row-fluid .span7 { + width: 57.44680851063829%; + *width: 57.39361702127659%; } -.row-fluid > .span8 { - width: 65.95744680199999%; + +.row-fluid .span6 { + width: 48.93617021276595%; + *width: 48.88297872340425%; } -.row-fluid > .span9 { - width: 74.468085099%; + +.row-fluid .span5 { + width: 40.42553191489362%; + *width: 40.37234042553192%; } -.row-fluid > .span10 { - width: 82.97872339599999%; + +.row-fluid .span4 { + width: 31.914893617021278%; + *width: 31.861702127659576%; } -.row-fluid > .span11 { - width: 91.489361693%; + +.row-fluid .span3 { + width: 23.404255319148934%; + *width: 23.351063829787233%; } -.row-fluid > .span12 { - width: 99.99999998999999%; + +.row-fluid .span2 { + width: 14.893617021276595%; + *width: 14.840425531914894%; } -.container { - width: 940px; - margin-left: auto; - margin-right: auto; - *zoom: 1; + +.row-fluid .span1 { + width: 6.382978723404255%; + *width: 6.329787234042553%; } -.container:before, .container:after { - display: table; - content: ""; + +.row-fluid .offset12 { + margin-left: 104.25531914893617%; + *margin-left: 104.14893617021275%; } -.container:after { - clear: both; + +.row-fluid .offset12:first-child { + margin-left: 102.12765957446808%; + *margin-left: 102.02127659574467%; } -.container-fluid { - padding-left: 20px; - padding-right: 20px; - *zoom: 1; + +.row-fluid .offset11 { + margin-left: 95.74468085106382%; + *margin-left: 95.6382978723404%; } -.container-fluid:before, .container-fluid:after { - display: table; - content: ""; + +.row-fluid .offset11:first-child { + margin-left: 93.61702127659574%; + *margin-left: 93.51063829787232%; } -.container-fluid:after { - clear: both; + +.row-fluid .offset10 { + margin-left: 87.23404255319149%; + *margin-left: 87.12765957446807%; } -p { - margin: 0 0 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; + +.row-fluid .offset10:first-child { + margin-left: 85.1063829787234%; + *margin-left: 84.99999999999999%; } -p small { - font-size: 11px; - color: #999999; + +.row-fluid .offset9 { + margin-left: 78.72340425531914%; + *margin-left: 78.61702127659572%; } -.lead { - margin-bottom: 18px; - font-size: 20px; - font-weight: 200; - line-height: 27px; + +.row-fluid .offset9:first-child { + margin-left: 76.59574468085106%; + *margin-left: 76.48936170212764%; } -h1, -h2, -h3, + +.row-fluid .offset8 { + margin-left: 70.2127659574468%; + *margin-left: 70.10638297872339%; +} + +.row-fluid .offset8:first-child { + margin-left: 68.08510638297872%; + *margin-left: 67.9787234042553%; +} + +.row-fluid .offset7 { + margin-left: 61.70212765957446%; + *margin-left: 61.59574468085106%; +} + +.row-fluid .offset7:first-child { + margin-left: 59.574468085106375%; + *margin-left: 59.46808510638297%; +} + +.row-fluid .offset6 { + margin-left: 53.191489361702125%; + *margin-left: 53.085106382978715%; +} + +.row-fluid .offset6:first-child { + margin-left: 51.063829787234035%; + *margin-left: 50.95744680851063%; +} + +.row-fluid .offset5 { + margin-left: 44.68085106382979%; + *margin-left: 44.57446808510638%; +} + +.row-fluid .offset5:first-child { + margin-left: 42.5531914893617%; + *margin-left: 42.4468085106383%; +} + +.row-fluid .offset4 { + margin-left: 36.170212765957444%; + *margin-left: 36.06382978723405%; +} + +.row-fluid .offset4:first-child { + margin-left: 34.04255319148936%; + *margin-left: 33.93617021276596%; +} + +.row-fluid .offset3 { + margin-left: 27.659574468085104%; + *margin-left: 27.5531914893617%; +} + +.row-fluid .offset3:first-child { + margin-left: 25.53191489361702%; + *margin-left: 25.425531914893618%; +} + +.row-fluid .offset2 { + margin-left: 19.148936170212764%; + *margin-left: 19.04255319148936%; +} + +.row-fluid .offset2:first-child { + margin-left: 17.02127659574468%; + *margin-left: 16.914893617021278%; +} + +.row-fluid .offset1 { + margin-left: 10.638297872340425%; + *margin-left: 10.53191489361702%; +} + +.row-fluid .offset1:first-child { + margin-left: 8.51063829787234%; + *margin-left: 8.404255319148938%; +} + +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; +} + +.container { + margin-right: auto; + margin-left: auto; + *zoom: 1; +} + +.container:before, +.container:after { + display: table; + line-height: 0; + content: ""; +} + +.container:after { + clear: both; +} + +.container-fluid { + padding-right: 20px; + padding-left: 20px; + *zoom: 1; +} + +.container-fluid:before, +.container-fluid:after { + display: table; + line-height: 0; + content: ""; +} + +.container-fluid:after { + clear: both; +} + +p { + margin: 0 0 10px; +} + +.lead { + margin-bottom: 20px; + font-size: 21px; + font-weight: 200; + line-height: 30px; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +cite { + font-style: normal; +} + +.muted { + color: #999999; +} + +a.muted:hover { + color: #808080; +} + +.text-warning { + color: #c09853; +} + +a.text-warning:hover { + color: #a47e3c; +} + +.text-error { + color: #b94a48; +} + +a.text-error:hover { + color: #953b39; +} + +.text-info { + color: #3a87ad; +} + +a.text-info:hover { + color: #2d6987; +} + +.text-success { + color: #468847; +} + +a.text-success:hover { + color: #356635; +} + +h1, +h2, +h3, h4, h5, h6 { - margin: 0; + margin: 10px 0; + font-family: inherit; font-weight: bold; - color: #333333; + line-height: 20px; + color: inherit; text-rendering: optimizelegibility; } + h1 small, h2 small, h3 small, @@ -317,648 +735,1115 @@ h4 small, h5 small, h6 small { font-weight: normal; + line-height: 1; color: #999999; } -h1 { - font-size: 30px; - line-height: 36px; + +h1, +h2, +h3 { + line-height: 40px; } -h1 small { - font-size: 18px; + +h1 { + font-size: 38.5px; } + h2 { - font-size: 24px; - line-height: 36px; -} -h2 small { - font-size: 18px; + font-size: 31.5px; } + h3 { - line-height: 27px; - font-size: 18px; + font-size: 24.5px; } -h3 small { + +h4 { + font-size: 17.5px; +} + +h5 { font-size: 14px; } -h4, h5, h6 { - line-height: 18px; + +h6 { + font-size: 11.9px; } -h4 { - font-size: 14px; + +h1 small { + font-size: 24.5px; } -h4 small { - font-size: 12px; + +h2 small { + font-size: 17.5px; } -h5 { - font-size: 12px; + +h3 small { + font-size: 14px; } -h6 { - font-size: 11px; - color: #999999; - text-transform: uppercase; + +h4 small { + font-size: 14px; } + .page-header { - padding-bottom: 17px; - margin: 18px 0; + padding-bottom: 9px; + margin: 20px 0 30px; border-bottom: 1px solid #eeeeee; } -.page-header h1 { - line-height: 1; -} -ul, ol { + +ul, +ol { padding: 0; - margin: 0 0 9px 25px; + margin: 0 0 10px 25px; } + ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } -ul { - list-style: disc; -} -ol { - list-style: decimal; -} + li { - line-height: 18px; + line-height: 20px; +} + +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; } -ul.unstyled, ol.unstyled { + +ul.inline, +ol.inline { margin-left: 0; list-style: none; } + +ul.inline > li, +ol.inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} + dl { - margin-bottom: 18px; + margin-bottom: 20px; } -dt, dd { - line-height: 18px; + +dt, +dd { + line-height: 20px; } + dt { font-weight: bold; } + dd { - margin-left: 9px; + margin-left: 10px; +} + +.dl-horizontal { + *zoom: 1; +} + +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + line-height: 0; + content: ""; +} + +.dl-horizontal:after { + clear: both; +} + +.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; +} + hr { - margin: 18px 0; + margin: 20px 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff; } -strong { - font-weight: bold; -} -em { - font-style: italic; -} -.muted { - color: #999999; + +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; } -abbr { + +abbr.initialism { font-size: 90%; text-transform: uppercase; - border-bottom: 1px dotted #ddd; - cursor: help; } + blockquote { padding: 0 0 0 15px; - margin: 0 0 18px; + margin: 0 0 20px; border-left: 5px solid #eeeeee; } + blockquote p { margin-bottom: 0; font-size: 16px; font-weight: 300; - line-height: 22.5px; + line-height: 25px; } + blockquote small { display: block; - line-height: 18px; + line-height: 20px; color: #999999; } + blockquote small:before { content: '\2014 \00A0'; } + blockquote.pull-right { float: right; - padding-left: 0; padding-right: 15px; - border-left: 0; + padding-left: 0; border-right: 5px solid #eeeeee; + border-left: 0; } -blockquote.pull-right p, blockquote.pull-right small { + +blockquote.pull-right p, +blockquote.pull-right small { text-align: right; } + +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + q:before, q:after, blockquote:before, blockquote:after { content: ""; } + address { display: block; - margin-bottom: 18px; - line-height: 18px; - font-style: normal; -} -small { - font-size: 100%; -} -cite { + margin-bottom: 20px; font-style: normal; + line-height: 20px; } -code, pre { + +code, +pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: #333333; -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + code { - padding: 3px 4px; + padding: 2px 4px; color: #d14; + white-space: nowrap; background-color: #f7f7f9; border: 1px solid #e1e1e8; } + pre { display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12px; - line-height: 18px; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; + -moz-border-radius: 4px; + border-radius: 4px; } + pre.prettyprint { - margin-bottom: 18px; + margin-bottom: 20px; } + pre code { padding: 0; color: inherit; + white-space: pre; + white-space: pre-wrap; background-color: transparent; border: 0; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } + form { - margin: 0 0 18px; + margin: 0 0 20px; } + fieldset { padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; padding: 0; - margin-bottom: 27px; - font-size: 19.5px; - line-height: 36px; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; color: #333333; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } + legend small { - font-size: 13.5px; + font-size: 15px; color: #999999; } + label, input, button, select, textarea { - font-size: 13px; + font-size: 14px; font-weight: normal; - line-height: 18px; + line-height: 20px; } + input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } + label { display: block; margin-bottom: 5px; - color: #333333; } -input, -textarea, + select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], .uneditable-input { display: inline-block; - width: 210px; - height: 18px; - padding: 4px; - margin-bottom: 9px; - font-size: 13px; - line-height: 18px; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; color: #555555; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + vertical-align: middle; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.uneditable-textarea { - width: auto; + +input, +textarea, +.uneditable-input { + width: 206px; +} + +textarea { height: auto; } -label input, label textarea, label select { - display: block; + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; } -input[type="image"], input[type="checkbox"], input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; - /* IE7 */ - line-height: normal; - cursor: pointer; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - border: 0 \9; - /* IE9 and down */ +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-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); } -input[type="image"] { - border: 0; -} -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - border: initial; - background-color: #ffffff; - background-color: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + *margin-top: 0; + line-height: normal; } -input[type="button"], input[type="reset"], input[type="submit"] { + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { width: auto; - height: auto; } -select, input[type="file"] { - height: 28px; + +select, +input[type="file"] { + height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: 28px; -} -input[type="file"] { - line-height: 18px \9; + line-height: 30px; } + select { width: 220px; background-color: #ffffff; + border: 1px solid #cccccc; } -select[multiple], select[size] { + +select[multiple], +select[size] { height: auto; } -input[type="image"] { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } -textarea { + +.uneditable-input, +.uneditable-textarea { + color: #999999; + cursor: not-allowed; + background-color: #fcfcfc; + border-color: #cccccc; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; +} + +.uneditable-textarea { + width: auto; height: auto; } -input[type="hidden"] { - display: none; + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; } -.radio, .checkbox { - padding-left: 18px; + +.radio, +.checkbox { + min-height: 20px; + padding-left: 20px; } -.radio input[type="radio"], .checkbox input[type="checkbox"] { + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { float: left; - margin-left: -18px; + margin-left: -20px; } -.controls > .radio:first-child, .controls > .checkbox:first-child { + +.controls > .radio:first-child, +.controls > .checkbox:first-child { padding-top: 5px; } -.radio.inline, .checkbox.inline { + +.radio.inline, +.checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; } -.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { margin-left: 10px; } -input, textarea { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; -} -input:focus, textarea:focus { - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-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); - outline: 0; - outline: thin dotted \9; - /* IE6-9 */ -} -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} .input-mini { width: 60px; } + .input-small { width: 90px; } + .input-medium { width: 150px; } + .input-large { width: 210px; } + .input-xlarge { width: 270px; } + .input-xxlarge { width: 530px; } + input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input { +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } -input.span1, textarea.span1, .uneditable-input.span1 { - width: 50px; + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; } -input.span2, textarea.span2, .uneditable-input.span2 { - width: 130px; + +input, +textarea, +.uneditable-input { + margin-left: 0; } -input.span3, textarea.span3, .uneditable-input.span3 { - width: 210px; + +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + +input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 926px; } -input.span4, textarea.span4, .uneditable-input.span4 { - width: 290px; + +input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 846px; } -input.span5, textarea.span5, .uneditable-input.span5 { - width: 370px; + +input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 766px; } -input.span6, textarea.span6, .uneditable-input.span6 { - width: 450px; + +input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 686px; } -input.span7, textarea.span7, .uneditable-input.span7 { - width: 530px; + +input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 606px; +} + +input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 526px; +} + +input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 446px; +} + +input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 366px; +} + +input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 286px; } -input.span8, textarea.span8, .uneditable-input.span8 { - width: 610px; + +input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 206px; +} + +input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 126px; +} + +input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 46px; +} + +.controls-row { + *zoom: 1; } -input.span9, textarea.span9, .uneditable-input.span9 { - width: 690px; + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; } -input.span10, textarea.span10, .uneditable-input.span10 { - width: 770px; + +.controls-row:after { + clear: both; } -input.span11, textarea.span11, .uneditable-input.span11 { - width: 850px; + +.controls-row [class*="span"], +.row-fluid .controls-row [class*="span"] { + float: left; } -input.span12, textarea.span12, .uneditable-input.span12 { - width: 930px; + +.controls-row .checkbox[class*="span"], +.controls-row .radio[class*="span"] { + padding-top: 5px; } + input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - background-color: #f5f5f5; - border-color: #ddd; cursor: not-allowed; + background-color: #eeeeee; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; } -.control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline { + +.control-group.warning .control-label, +.control-group.warning .help-block, +.control-group.warning .help-inline { color: #c09853; } -.control-group.warning input, .control-group.warning select, .control-group.warning textarea { + +.control-group.warning .checkbox, +.control-group.warning .radio, +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { color: #c09853; +} + +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { + +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { border-color: #a47e3c; - -webkit-box-shadow: 0 0 6px #dbc59e; - -moz-box-shadow: 0 0 6px #dbc59e; - box-shadow: 0 0 6px #dbc59e; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } -.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { + +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { color: #c09853; background-color: #fcf8e3; border-color: #c09853; } -.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline { + +.control-group.error .control-label, +.control-group.error .help-block, +.control-group.error .help-inline { color: #b94a48; } -.control-group.error input, .control-group.error select, .control-group.error textarea { + +.control-group.error .checkbox, +.control-group.error .radio, +.control-group.error input, +.control-group.error select, +.control-group.error textarea { color: #b94a48; +} + +.control-group.error input, +.control-group.error select, +.control-group.error textarea { border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { + +.control-group.error input:focus, +.control-group.error select:focus, +.control-group.error textarea:focus { border-color: #953b39; - -webkit-box-shadow: 0 0 6px #d59392; - -moz-box-shadow: 0 0 6px #d59392; - box-shadow: 0 0 6px #d59392; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } -.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { + +.control-group.error .input-prepend .add-on, +.control-group.error .input-append .add-on { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } -.control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline { + +.control-group.success .control-label, +.control-group.success .help-block, +.control-group.success .help-inline { color: #468847; } -.control-group.success input, .control-group.success select, .control-group.success textarea { + +.control-group.success .checkbox, +.control-group.success .radio, +.control-group.success input, +.control-group.success select, +.control-group.success textarea { color: #468847; +} + +.control-group.success input, +.control-group.success select, +.control-group.success textarea { border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { + +.control-group.success input:focus, +.control-group.success select:focus, +.control-group.success textarea:focus { border-color: #356635; - -webkit-box-shadow: 0 0 6px #7aba7b; - -moz-box-shadow: 0 0 6px #7aba7b; - box-shadow: 0 0 6px #7aba7b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } -.control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { + +.control-group.success .input-prepend .add-on, +.control-group.success .input-append .add-on { color: #468847; background-color: #dff0d8; border-color: #468847; } -input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid { + +.control-group.info .control-label, +.control-group.info .help-block, +.control-group.info .help-inline { + color: #3a87ad; +} + +.control-group.info .checkbox, +.control-group.info .radio, +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + color: #3a87ad; +} + +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + border-color: #3a87ad; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.info input:focus, +.control-group.info select:focus, +.control-group.info textarea:focus { + border-color: #2d6987; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; +} + +.control-group.info .input-prepend .add-on, +.control-group.info .input-append .add-on { + color: #3a87ad; + background-color: #d9edf7; + border-color: #3a87ad; +} + +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } -input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus { + +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; } + .form-actions { - padding: 17px 20px 18px; - margin-top: 18px; - margin-bottom: 18px; + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; background-color: #f5f5f5; - border-top: 1px solid #ddd; + border-top: 1px solid #e5e5e5; + *zoom: 1; } -.uneditable-input { - display: block; - background-color: #ffffff; - border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - cursor: not-allowed; + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; } -:-moz-placeholder { - color: #999999; + +.form-actions:after { + clear: both; } -::-webkit-input-placeholder { - color: #999999; + +.help-block, +.help-inline { + color: #595959; } + .help-block { display: block; - margin-top: 5px; - margin-bottom: 0; - color: #999999; + margin-bottom: 10px; } + .help-inline { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - margin-bottom: 9px; - vertical-align: middle; padding-left: 5px; -} -.input-prepend, .input-append { - margin-bottom: 5px; + vertical-align: middle; *zoom: 1; } -.input-prepend:before, -.input-append:before, -.input-prepend:after, -.input-append:after { - display: table; - content: ""; -} -.input-prepend:after, .input-append:after { - clear: both; + +.input-append, +.input-prepend { + margin-bottom: 5px; + font-size: 0; + white-space: nowrap; } -.input-prepend input, + .input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, .input-prepend .uneditable-input, -.input-append .uneditable-input { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; +.input-append .dropdown-menu, +.input-prepend .dropdown-menu { + font-size: 14px; } -.input-prepend input:focus, -.input-append input:focus, -.input-prepend .uneditable-input:focus, -.input-append .uneditable-input:focus { + +.input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { position: relative; - z-index: 2; + margin-bottom: 0; + *margin-left: 0; + vertical-align: top; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } -.input-prepend .uneditable-input, .input-append .uneditable-input { - border-left-color: #ccc; + +.input-append input:focus, +.input-prepend input:focus, +.input-append select:focus, +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { + z-index: 2; } -.input-prepend .add-on, .input-append .add-on { - float: left; - display: block; + +.input-append .add-on, +.input-prepend .add-on { + display: inline-block; width: auto; + height: 20px; min-width: 16px; - height: 18px; - margin-right: -1px; padding: 4px 5px; + font-size: 14px; font-weight: normal; - line-height: 18px; - color: #999999; + line-height: 20px; text-align: center; text-shadow: 0 1px 0 #ffffff; - background-color: #f5f5f5; + background-color: #eeeeee; border: 1px solid #ccc; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; } -.input-prepend .active, .input-append .active { + +.input-append .add-on, +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn, +.input-append .btn-group > .dropdown-toggle, +.input-prepend .btn-group > .dropdown-toggle { + vertical-align: top; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-append .active, +.input-prepend .active { background-color: #a9dba9; border-color: #46a546; } -.input-prepend .add-on { - *margin-top: 1px; - /* IE6-7 */ +.input-prepend .add-on, +.input-prepend .btn { + margin-right: -1px; } -.input-append input, .input-append .uneditable-input { - float: left; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + +.input-prepend .add-on:first-child, +.input-prepend .btn:first-child { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } + +.input-append input, +.input-append select, .input-append .uneditable-input { - border-left-color: #eee; - border-right-color: #ccc; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } -.input-append .add-on { - margin-right: 0; + +.input-append input + .btn-group .btn:last-child, +.input-append select + .btn-group .btn:last-child, +.input-append .uneditable-input + .btn-group .btn:last-child { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append .add-on, +.input-append .btn, +.input-append .btn-group { margin-left: -1px; - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; } -.input-append input:first-child { - *margin-left: -160px; + +.input-append .add-on:last-child, +.input-append .btn:last-child, +.input-append .btn-group:last-child > .dropdown-toggle { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append input, +.input-prepend.input-append select, +.input-prepend.input-append .uneditable-input { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.input-append input:first-child + .add-on { - *margin-left: -21px; + +.input-prepend.input-append input + .btn-group .btn, +.input-prepend.input-append select + .btn-group .btn, +.input-prepend.input-append .uneditable-input + .btn-group .btn { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } -.search-query { - padding-left: 14px; + +.input-prepend.input-append .add-on:first-child, +.input-prepend.input-append .btn:first-child { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-prepend.input-append .add-on:last-child, +.input-prepend.input-append .btn:last-child { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .btn-group:first-child { + margin-left: 0; +} + +input.search-query { padding-right: 14px; + padding-right: 4px \9; + padding-left: 14px; + padding-left: 4px \9; + /* IE7-8 doesn't have border-radius, so don't indent the padding */ + margin-bottom: 0; - -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; } + .form-search input, .form-inline input, .form-horizontal input, @@ -973,1659 +1858,2662 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, -.form-horizontal .uneditable-input { +.form-horizontal .uneditable-input, +.form-search .input-prepend, +.form-inline .input-prepend, +.form-horizontal .input-prepend, +.form-search .input-append, +.form-inline .input-append, +.form-horizontal .input-append { display: inline-block; + *display: inline; margin-bottom: 0; + vertical-align: middle; + *zoom: 1; } -.form-search .hide, .form-inline .hide, .form-horizontal .hide { + +.form-search .hide, +.form-inline .hide, +.form-horizontal .hide { display: none; } + .form-search label, .form-inline label, +.form-search .btn-group, +.form-inline .btn-group { + display: inline-block; +} + .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { - display: inline-block; -} -.form-search .input-append .add-on, -.form-inline .input-prepend .add-on, -.form-search .input-append .add-on, -.form-inline .input-prepend .add-on { - vertical-align: middle; + margin-bottom: 0; } + .form-search .radio, -.form-inline .radio, .form-search .checkbox, +.form-inline .radio, .form-inline .checkbox { + padding-left: 0; margin-bottom: 0; vertical-align: middle; } + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"], +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: left; + margin-right: 3px; + margin-left: 0; +} + .control-group { - margin-bottom: 9px; + margin-bottom: 10px; } + legend + .control-group { - margin-top: 18px; + margin-top: 20px; -webkit-margin-top-collapse: separate; } + .form-horizontal .control-group { - margin-bottom: 18px; + margin-bottom: 20px; *zoom: 1; } -.form-horizontal .control-group:before, .form-horizontal .control-group:after { + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { display: table; + line-height: 0; content: ""; } + .form-horizontal .control-group:after { clear: both; } + .form-horizontal .control-label { float: left; - width: 140px; + width: 160px; padding-top: 5px; text-align: right; } + .form-horizontal .controls { - margin-left: 160px; + *display: inline-block; + *padding-left: 20px; + margin-left: 180px; + *margin-left: 0; +} + +.form-horizontal .controls:first-child { + *padding-left: 180px; } + +.form-horizontal .help-block { + margin-bottom: 0; +} + +.form-horizontal input + .help-block, +.form-horizontal select + .help-block, +.form-horizontal textarea + .help-block, +.form-horizontal .uneditable-input + .help-block, +.form-horizontal .input-prepend + .help-block, +.form-horizontal .input-append + .help-block { + margin-top: 10px; +} + .form-horizontal .form-actions { - padding-left: 160px; + padding-left: 180px; } + table { max-width: 100%; + background-color: transparent; border-collapse: collapse; border-spacing: 0; } + .table { width: 100%; - margin-bottom: 18px; + margin-bottom: 20px; } -.table th, .table td { + +.table th, +.table td { padding: 8px; - line-height: 18px; + line-height: 20px; text-align: left; vertical-align: top; - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; } + .table th { font-weight: bold; } + .table thead th { vertical-align: bottom; } -.table thead:first-child tr th, .table thead:first-child tr td { + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child th, +.table colgroup + thead tr:first-child td, +.table thead:first-child tr:first-child th, +.table thead:first-child tr:first-child td { border-top: 0; } + .table tbody + tbody { - border-top: 2px solid #ddd; + border-top: 2px solid #dddddd; +} + +.table .table { + background-color: #ffffff; } -.table-condensed th, .table-condensed td { + +.table-condensed th, +.table-condensed td { padding: 4px 5px; } + .table-bordered { - border: 1px solid #ddd; + border: 1px solid #dddddd; border-collapse: separate; - *border-collapse: collapsed; + *border-collapse: collapse; + border-left: 0; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.table-bordered th + th, -.table-bordered td + td, -.table-bordered th + td, -.table-bordered td + th { - border-left: 1px solid #ddd; + +.table-bordered th, +.table-bordered td { + border-left: 1px solid #dddddd; } -.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { border-top: 0; } -.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child { - -webkit-border-radius: 4px 0 0 0; - -moz-border-radius: 4px 0 0 0; - border-radius: 4px 0 0 0; + +.table-bordered thead:first-child tr:first-child > th:first-child, +.table-bordered tbody:first-child tr:first-child > td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered thead:first-child tr:first-child > th:last-child, +.table-bordered tbody:first-child tr:first-child > td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:first-child, +.table-bordered tbody:last-child tr:last-child > td:first-child, +.table-bordered tfoot:last-child tr:last-child > td:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:last-child, +.table-bordered tbody:last-child tr:last-child > td:last-child, +.table-bordered tfoot:last-child tr:last-child > td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; +} + +.table-bordered tfoot + tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; } -.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child { - -webkit-border-radius: 0 4px 0 0; - -moz-border-radius: 0 4px 0 0; - border-radius: 0 4px 0 0; + +.table-bordered tfoot + tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; } -.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child { - -webkit-border-radius: 0 0 0 4px; - -moz-border-radius: 0 0 0 4px; - border-radius: 0 0 0 4px; + +.table-bordered caption + thead tr:first-child th:first-child, +.table-bordered caption + tbody tr:first-child td:first-child, +.table-bordered colgroup + thead tr:first-child th:first-child, +.table-bordered colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; } -.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; + +.table-bordered caption + thead tr:first-child th:last-child, +.table-bordered caption + tbody tr:first-child td:last-child, +.table-bordered colgroup + thead tr:first-child th:last-child, +.table-bordered colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; } -.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { + +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; } -.table tbody tr:hover td, .table tbody tr:hover th { + +.table-hover tbody tr:hover td, +.table-hover tbody tr:hover th { background-color: #f5f5f5; } -table .span1 { + +table td[class*="span"], +table th[class*="span"], +.row-fluid table td[class*="span"], +.row-fluid table th[class*="span"] { + display: table-cell; + float: none; + margin-left: 0; +} + +.table td.span1, +.table th.span1 { float: none; width: 44px; margin-left: 0; } -table .span2 { + +.table td.span2, +.table th.span2 { float: none; width: 124px; margin-left: 0; } -table .span3 { + +.table td.span3, +.table th.span3 { float: none; width: 204px; margin-left: 0; } -table .span4 { + +.table td.span4, +.table th.span4 { float: none; width: 284px; margin-left: 0; } -table .span5 { + +.table td.span5, +.table th.span5 { float: none; width: 364px; margin-left: 0; } -table .span6 { + +.table td.span6, +.table th.span6 { float: none; width: 444px; margin-left: 0; } -table .span7 { + +.table td.span7, +.table th.span7 { float: none; width: 524px; margin-left: 0; } -table .span8 { + +.table td.span8, +.table th.span8 { float: none; width: 604px; margin-left: 0; } -table .span9 { + +.table td.span9, +.table th.span9 { float: none; width: 684px; margin-left: 0; } -table .span10 { + +.table td.span10, +.table th.span10 { float: none; width: 764px; margin-left: 0; } -table .span11 { + +.table td.span11, +.table th.span11 { float: none; width: 844px; margin-left: 0; } -table .span12 { + +.table td.span12, +.table th.span12 { float: none; width: 924px; margin-left: 0; } -[class^="icon-"], [class*=" icon-"] { + +.table tbody tr.success td { + background-color: #dff0d8; +} + +.table tbody tr.error td { + background-color: #f2dede; +} + +.table tbody tr.warning td { + background-color: #fcf8e3; +} + +.table tbody tr.info td { + background-color: #d9edf7; +} + +.table-hover tbody tr.success:hover td { + background-color: #d0e9c6; +} + +.table-hover tbody tr.error:hover td { + background-color: #ebcccc; +} + +.table-hover tbody tr.warning:hover td { + background-color: #faf2cc; +} + +.table-hover tbody tr.info:hover td { + background-color: #c4e3f3; +} + +[class^="icon-"], +[class*=" icon-"] { display: inline-block; width: 14px; height: 14px; + margin-top: 1px; + *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("../img/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat; - *margin-right: .3em; -} -[class^="icon-"]:last-child, [class*=" icon-"]:last-child { - *margin-left: 0; } -.icon-white { + +/* White icons with optional class, or on hover/active states of certain elements */ + +.icon-white, +.nav-pills > .active > a > [class^="icon-"], +.nav-pills > .active > a > [class*=" icon-"], +.nav-list > .active > a > [class^="icon-"], +.nav-list > .active > a > [class*=" icon-"], +.navbar-inverse .nav > .active > a > [class^="icon-"], +.navbar-inverse .nav > .active > a > [class*=" icon-"], +.dropdown-menu > li > a:hover > [class^="icon-"], +.dropdown-menu > li > a:hover > [class*=" icon-"], +.dropdown-menu > .active > a > [class^="icon-"], +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"] { background-image: url("../img/glyphicons-halflings-white.png"); } + .icon-glass { background-position: 0 0; } + .icon-music { background-position: -24px 0; } + .icon-search { background-position: -48px 0; } + .icon-envelope { background-position: -72px 0; } + .icon-heart { background-position: -96px 0; } + .icon-star { background-position: -120px 0; } + .icon-star-empty { background-position: -144px 0; } + .icon-user { background-position: -168px 0; } + .icon-film { background-position: -192px 0; } + .icon-th-large { background-position: -216px 0; } + .icon-th { background-position: -240px 0; } + .icon-th-list { background-position: -264px 0; } + .icon-ok { background-position: -288px 0; } + .icon-remove { background-position: -312px 0; } + .icon-zoom-in { background-position: -336px 0; } + .icon-zoom-out { background-position: -360px 0; } + .icon-off { background-position: -384px 0; } + .icon-signal { background-position: -408px 0; } + .icon-cog { background-position: -432px 0; } + .icon-trash { background-position: -456px 0; } + .icon-home { background-position: 0 -24px; } + .icon-file { background-position: -24px -24px; } + .icon-time { background-position: -48px -24px; } + .icon-road { background-position: -72px -24px; } + .icon-download-alt { background-position: -96px -24px; } + .icon-download { background-position: -120px -24px; } + .icon-upload { background-position: -144px -24px; } + .icon-inbox { background-position: -168px -24px; } + .icon-play-circle { background-position: -192px -24px; } + .icon-repeat { background-position: -216px -24px; } + .icon-refresh { background-position: -240px -24px; } + .icon-list-alt { background-position: -264px -24px; } + .icon-lock { background-position: -287px -24px; } + .icon-flag { background-position: -312px -24px; } + .icon-headphones { background-position: -336px -24px; } + .icon-volume-off { background-position: -360px -24px; } + .icon-volume-down { background-position: -384px -24px; } + .icon-volume-up { background-position: -408px -24px; } + .icon-qrcode { background-position: -432px -24px; } + .icon-barcode { background-position: -456px -24px; } + .icon-tag { background-position: 0 -48px; } + .icon-tags { background-position: -25px -48px; } + .icon-book { background-position: -48px -48px; } + .icon-bookmark { background-position: -72px -48px; } + .icon-print { background-position: -96px -48px; } + .icon-camera { background-position: -120px -48px; } + .icon-font { background-position: -144px -48px; } + .icon-bold { background-position: -167px -48px; } + .icon-italic { background-position: -192px -48px; } + .icon-text-height { background-position: -216px -48px; } + .icon-text-width { background-position: -240px -48px; } + .icon-align-left { background-position: -264px -48px; } + .icon-align-center { background-position: -288px -48px; } + .icon-align-right { background-position: -312px -48px; } + .icon-align-justify { background-position: -336px -48px; } + .icon-list { background-position: -360px -48px; } + .icon-indent-left { background-position: -384px -48px; } + .icon-indent-right { background-position: -408px -48px; } + .icon-facetime-video { background-position: -432px -48px; } + .icon-picture { background-position: -456px -48px; } + .icon-pencil { background-position: 0 -72px; } + .icon-map-marker { background-position: -24px -72px; } + .icon-adjust { background-position: -48px -72px; } + .icon-tint { background-position: -72px -72px; } + .icon-edit { background-position: -96px -72px; } + .icon-share { background-position: -120px -72px; } + .icon-check { background-position: -144px -72px; } + .icon-move { background-position: -168px -72px; } + .icon-step-backward { background-position: -192px -72px; } + .icon-fast-backward { background-position: -216px -72px; } + .icon-backward { background-position: -240px -72px; } + .icon-play { background-position: -264px -72px; } + .icon-pause { background-position: -288px -72px; } + .icon-stop { background-position: -312px -72px; } + .icon-forward { background-position: -336px -72px; } + .icon-fast-forward { background-position: -360px -72px; } + .icon-step-forward { background-position: -384px -72px; } + .icon-eject { background-position: -408px -72px; } + .icon-chevron-left { background-position: -432px -72px; } + .icon-chevron-right { background-position: -456px -72px; } + .icon-plus-sign { background-position: 0 -96px; } + .icon-minus-sign { background-position: -24px -96px; } + .icon-remove-sign { background-position: -48px -96px; } + .icon-ok-sign { background-position: -72px -96px; } + .icon-question-sign { background-position: -96px -96px; } + .icon-info-sign { background-position: -120px -96px; } + .icon-screenshot { background-position: -144px -96px; } + .icon-remove-circle { background-position: -168px -96px; } + .icon-ok-circle { background-position: -192px -96px; } + .icon-ban-circle { background-position: -216px -96px; } + .icon-arrow-left { background-position: -240px -96px; } + .icon-arrow-right { background-position: -264px -96px; } + .icon-arrow-up { background-position: -289px -96px; } + .icon-arrow-down { background-position: -312px -96px; } + .icon-share-alt { background-position: -336px -96px; } + .icon-resize-full { background-position: -360px -96px; } + .icon-resize-small { background-position: -384px -96px; } + .icon-plus { background-position: -408px -96px; } + .icon-minus { background-position: -433px -96px; } + .icon-asterisk { background-position: -456px -96px; } + .icon-exclamation-sign { background-position: 0 -120px; } + .icon-gift { background-position: -24px -120px; } + .icon-leaf { background-position: -48px -120px; } + .icon-fire { background-position: -72px -120px; } + .icon-eye-open { background-position: -96px -120px; } + .icon-eye-close { background-position: -120px -120px; } + .icon-warning-sign { background-position: -144px -120px; } + .icon-plane { background-position: -168px -120px; } + .icon-calendar { background-position: -192px -120px; } + .icon-random { + width: 16px; background-position: -216px -120px; } + .icon-comment { background-position: -240px -120px; } + .icon-magnet { background-position: -264px -120px; } + .icon-chevron-up { background-position: -288px -120px; } + .icon-chevron-down { background-position: -313px -119px; } + .icon-retweet { background-position: -336px -120px; } + .icon-shopping-cart { background-position: -360px -120px; } + .icon-folder-close { background-position: -384px -120px; } + .icon-folder-open { + width: 16px; background-position: -408px -120px; } + .icon-resize-vertical { background-position: -432px -119px; } + .icon-resize-horizontal { background-position: -456px -118px; } + +.icon-hdd { + background-position: 0 -144px; +} + +.icon-bullhorn { + background-position: -24px -144px; +} + +.icon-bell { + background-position: -48px -144px; +} + +.icon-certificate { + background-position: -72px -144px; +} + +.icon-thumbs-up { + background-position: -96px -144px; +} + +.icon-thumbs-down { + background-position: -120px -144px; +} + +.icon-hand-right { + background-position: -144px -144px; +} + +.icon-hand-left { + background-position: -168px -144px; +} + +.icon-hand-up { + background-position: -192px -144px; +} + +.icon-hand-down { + background-position: -216px -144px; +} + +.icon-circle-arrow-right { + background-position: -240px -144px; +} + +.icon-circle-arrow-left { + background-position: -264px -144px; +} + +.icon-circle-arrow-up { + background-position: -288px -144px; +} + +.icon-circle-arrow-down { + background-position: -312px -144px; +} + +.icon-globe { + background-position: -336px -144px; +} + +.icon-wrench { + background-position: -360px -144px; +} + +.icon-tasks { + background-position: -384px -144px; +} + +.icon-filter { + background-position: -408px -144px; +} + +.icon-briefcase { + background-position: -432px -144px; +} + +.icon-fullscreen { + background-position: -456px -144px; +} + +.dropup, .dropdown { position: relative; } + .dropdown-toggle { *margin-bottom: -3px; } -.dropdown-toggle:active, .open .dropdown-toggle { + +.dropdown-toggle:active, +.open .dropdown-toggle { outline: 0; } + .caret { display: inline-block; width: 0; height: 0; - text-indent: -99999px; - *text-indent: 0; vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; border-top: 4px solid #000000; - opacity: 0.3; - filter: alpha(opacity=30); - content: "\2193"; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; } + .dropdown .caret { margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret, .open.dropdown .caret { - opacity: 1; - filter: alpha(opacity=100); -} + .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; - float: left; display: none; + float: left; min-width: 160px; - _width: 160px; - padding: 4px 0; - margin: 0; + padding: 5px 0; + margin: 2px 0 0; list-style: none; background-color: #ffffff; - border-color: #ccc; - border-color: rgba(0, 0, 0, 0.2); - border-style: solid; - border-width: 1px; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } -.dropdown-menu.bottom-up { - top: auto; - bottom: 100%; - margin-bottom: 2px; + +.dropdown-menu.pull-right { + right: 0; + left: auto; } + .dropdown-menu .divider { + *width: 100%; height: 1px; - margin: 5px 1px; + margin: 9px 1px; + *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; - *width: 100%; - *margin: -5px 0 5px; } -.dropdown-menu a { + +.dropdown-menu li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 20px; + color: #333333; + white-space: nowrap; +} + +.dropdown-menu li > a:hover, +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + outline: 0; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +.dropdown-menu .disabled > a, +.dropdown-menu .disabled > a:hover { + color: #999999; +} + +.dropdown-menu .disabled > a:hover { + text-decoration: none; + cursor: default; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.open { + *z-index: 1000; +} + +.open > .dropdown-menu { + display: block; +} + +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px solid #000000; + content: ""; +} + +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + -webkit-border-radius: 5px 5px 5px 0; + -moz-border-radius: 5px 5px 5px 0; + border-radius: 5px 5px 5px 0; +} + +.dropdown-submenu > a:after { display: block; - padding: 3px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: #555555; - white-space: nowrap; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -10px; + border-color: transparent; + border-left-color: #cccccc; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; } -.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: #ffffff; - text-decoration: none; - background-color: #0088cc; + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; } -.dropdown.open { - *z-index: 1000; + +.dropdown-submenu.pull-left { + float: none; } -.dropdown.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; } -.dropdown.open .dropdown-menu { - display: block; + +.dropdown .dropdown-menu .nav-header { + padding-right: 20px; + padding-left: 20px; } + .typeahead { + z-index: 1051; margin-top: 2px; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid #e3e3e3; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } + .well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); } + +.well-large { + padding: 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.well-small { + padding: 9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + .fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; opacity: 0; + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; } + .fade.in { opacity: 1; } + .collapse { - -webkit-transition: height 0.35s ease; - -moz-transition: height 0.35s ease; - -ms-transition: height 0.35s ease; - -o-transition: height 0.35s ease; - transition: height 0.35s ease; position: relative; - overflow: hidden; height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; } + .collapse.in { height: auto; } + .close { float: right; font-size: 20px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } + .close:hover { color: #000000; text-decoration: none; + cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); +} + +button.close { + padding: 0; cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } + .btn { display: inline-block; - padding: 4px 10px 4px; + *display: inline; + padding: 4px 12px; margin-bottom: 0; - font-size: 13px; - line-height: 18px; + *margin-left: .3em; + font-size: 14px; + line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; + cursor: pointer; background-color: #f5f5f5; + *background-color: #e6e6e6; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + border: 1px solid #bbbbbb; + *border: 0; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - border: 1px solid #ccc; - border-bottom-color: #bbb; + border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: pointer; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - *margin-left: .3em; + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } + .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { + color: #333333; background-color: #e6e6e6; + *background-color: #d9d9d9; } -.btn:active, .btn.active { + +.btn:active, +.btn.active { background-color: #cccccc \9; } + .btn:first-child { *margin-left: 0; } + .btn:hover { color: #333333; text-decoration: none; - background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; } + .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -.btn.active, .btn:active { + +.btn.active, +.btn:active { background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - background-color: #e6e6e6; - background-color: #d9d9d9 \9; outline: 0; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn.disabled, .btn[disabled] { + +.btn.disabled, +.btn[disabled] { cursor: default; background-image: none; - background-color: #e6e6e6; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } + .btn-large { - padding: 9px 14px; - font-size: 15px; - line-height: normal; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + padding: 11px 19px; + font-size: 17.5px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } -.btn-large [class^="icon-"] { - margin-top: 1px; + +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { + margin-top: 4px; } + .btn-small { - padding: 5px 9px; - font-size: 11px; - line-height: 16px; + padding: 2px 10px; + font-size: 11.9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.btn-small [class^="icon-"], +.btn-small [class*=" icon-"] { + margin-top: 0; } -.btn-small [class^="icon-"] { + +.btn-mini [class^="icon-"], +.btn-mini [class*=" icon-"] { margin-top: -1px; } + .btn-mini { - padding: 2px 6px; - font-size: 11px; - line-height: 14px; + padding: 0 6px; + font-size: 10.5px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - color: #ffffff; + +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.btn-block + .btn-block { + margin-top: 5px; +} + +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; } + .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, -.btn-dark.active { +.btn-inverse.active { color: rgba(255, 255, 255, 0.75); } + +.btn { + border-color: #c5c5c5; + border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); +} + .btn-primary { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; + *background-color: #0044cc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); - background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); - background-image: linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(to bottom, #0088cc, #0044cc); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { + color: #ffffff; background-color: #0044cc; + *background-color: #003bb3; } -.btn-primary:active, .btn-primary.active { + +.btn-primary:active, +.btn-primary.active { background-color: #003399 \9; } + .btn-warning { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #faa732; + *background-color: #f89406; background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { + color: #ffffff; background-color: #f89406; + *background-color: #df8505; } -.btn-warning:active, .btn-warning.active { + +.btn-warning:active, +.btn-warning.active { background-color: #c67605 \9; } + .btn-danger { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; + *background-color: #bd362f; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); - background-image: linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { + color: #ffffff; background-color: #bd362f; + *background-color: #a9302a; } -.btn-danger:active, .btn-danger.active { + +.btn-danger:active, +.btn-danger.active { background-color: #942a25 \9; } + .btn-success { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; + *background-color: #51a351; background-image: -moz-linear-gradient(top, #62c462, #51a351); - background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); - background-image: linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(to bottom, #62c462, #51a351); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { + color: #ffffff; background-color: #51a351; + *background-color: #499249; } -.btn-success:active, .btn-success.active { + +.btn-success:active, +.btn-success.active { background-color: #408140 \9; } + .btn-info { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; + *background-color: #2f96b4; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); - background-image: linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { + color: #ffffff; background-color: #2f96b4; + *background-color: #2a85a0; } -.btn-info:active, .btn-info.active { + +.btn-info:active, +.btn-info.active { background-color: #24748c \9; } + .btn-inverse { - background-color: #393939; - background-image: -moz-linear-gradient(top, #454545, #262626); - background-image: -ms-linear-gradient(top, #454545, #262626); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626)); - background-image: -webkit-linear-gradient(top, #454545, #262626); - background-image: -o-linear-gradient(top, #454545, #262626); - background-image: linear-gradient(top, #454545, #262626); + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #363636; + *background-color: #222222; + background-image: -moz-linear-gradient(top, #444444, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0); - border-color: #262626 #262626 #000000; + border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } + .btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { - background-color: #262626; + color: #ffffff; + background-color: #222222; + *background-color: #151515; } -.btn-inverse:active, .btn-inverse.active { - background-color: #0c0c0c \9; + +.btn-inverse:active, +.btn-inverse.active { + background-color: #080808 \9; } -button.btn, input[type="submit"].btn { - *padding-top: 2px; - *padding-bottom: 2px; + +button.btn, +input[type="submit"].btn { + *padding-top: 3px; + *padding-bottom: 3px; } -button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { + +button.btn::-moz-focus-inner, +input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; } -button.btn.large, input[type="submit"].btn.large { + +button.btn.btn-large, +input[type="submit"].btn.btn-large { *padding-top: 7px; *padding-bottom: 7px; } -button.btn.small, input[type="submit"].btn.small { + +button.btn.btn-small, +input[type="submit"].btn.btn-small { *padding-top: 3px; *padding-bottom: 3px; } + +button.btn.btn-mini, +input[type="submit"].btn.btn-mini { + *padding-top: 1px; + *padding-bottom: 1px; +} + +.btn-link, +.btn-link:active, +.btn-link[disabled] { + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.btn-link { + color: #0088cc; + cursor: pointer; + border-color: transparent; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-link:hover { + color: #005580; + text-decoration: underline; + background-color: transparent; +} + +.btn-link[disabled]:hover { + color: #333333; + text-decoration: none; +} + .btn-group { position: relative; - *zoom: 1; + display: inline-block; + *display: inline; *margin-left: .3em; + font-size: 0; + white-space: nowrap; + vertical-align: middle; + *zoom: 1; } -.btn-group:before, .btn-group:after { - display: table; - content: ""; -} -.btn-group:after { - clear: both; -} + .btn-group:first-child { *margin-left: 0; } + .btn-group + .btn-group { margin-left: 5px; } + .btn-toolbar { - margin-top: 9px; - margin-bottom: 9px; + margin-top: 10px; + margin-bottom: 10px; + font-size: 0; } -.btn-toolbar .btn-group { - display: inline-block; - *display: inline; - /* IE7 inline-block hack */ - *zoom: 1; +.btn-toolbar > .btn + .btn, +.btn-toolbar > .btn-group + .btn, +.btn-toolbar > .btn + .btn-group { + margin-left: 5px; } -.btn-group .btn { + +.btn-group > .btn { position: relative; - float: left; - margin-left: -1px; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-group > .btn + .btn { + margin-left: -1px; +} + +.btn-group > .btn, +.btn-group > .dropdown-menu, +.btn-group > .popover { + font-size: 14px; +} + +.btn-group > .btn-mini { + font-size: 10.5px; +} + +.btn-group > .btn-small { + font-size: 11.9px; +} + +.btn-group > .btn-large { + font-size: 17.5px; } -.btn-group .btn:first-child { + +.btn-group > .btn:first-child { margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; + -moz-border-radius-topleft: 4px; } -.btn-group .btn:last-child, .btn-group .dropdown-toggle { + +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; + border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; } -.btn-group .btn.large:first-child { + +.btn-group > .btn.large:first-child { margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; + -moz-border-radius-topleft: 6px; } -.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle { + +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; + border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; } -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { + +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } -.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { + +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { outline: 0; } -.btn-group .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; - -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + +.btn-group > .btn + .dropdown-toggle { *padding-top: 5px; + padding-right: 8px; *padding-bottom: 5px; + padding-left: 8px; + -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn-group.open { - *z-index: 1000; + +.btn-group > .btn-mini + .dropdown-toggle { + *padding-top: 2px; + padding-right: 5px; + *padding-bottom: 2px; + padding-left: 5px; } -.btn-group.open .dropdown-menu { - display: block; - margin-top: 1px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + +.btn-group > .btn-small + .dropdown-toggle { + *padding-top: 5px; + *padding-bottom: 4px; +} + +.btn-group > .btn-large + .dropdown-toggle { + *padding-top: 7px; + padding-right: 12px; + *padding-bottom: 7px; + padding-left: 12px; } + .btn-group.open .dropdown-toggle { background-image: none; - -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group.open .btn.dropdown-toggle { + background-color: #e6e6e6; +} + +.btn-group.open .btn-primary.dropdown-toggle { + background-color: #0044cc; +} + +.btn-group.open .btn-warning.dropdown-toggle { + background-color: #f89406; +} + +.btn-group.open .btn-danger.dropdown-toggle { + background-color: #bd362f; +} + +.btn-group.open .btn-success.dropdown-toggle { + background-color: #51a351; +} + +.btn-group.open .btn-info.dropdown-toggle { + background-color: #2f96b4; +} + +.btn-group.open .btn-inverse.dropdown-toggle { + background-color: #222222; } + .btn .caret { - margin-top: 7px; + margin-top: 8px; margin-left: 0; } -.btn:hover .caret, .open.btn-group .caret { - opacity: 1; - filter: alpha(opacity=100); + +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { + margin-top: 6px; +} + +.btn-large .caret { + border-top-width: 5px; + border-right-width: 5px; + border-left-width: 5px; } + +.dropup .btn-large .caret { + border-bottom-width: 5px; +} + .btn-primary .caret, +.btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret { border-top-color: #ffffff; - opacity: 0.75; - filter: alpha(opacity=75); + border-bottom-color: #ffffff; } -.btn-small .caret { - margin-top: 4px; + +.btn-group-vertical { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; +} + +.btn-group-vertical > .btn { + display: block; + float: none; + max-width: 100%; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-group-vertical > .btn + .btn { + margin-top: -1px; + margin-left: 0; +} + +.btn-group-vertical > .btn:first-child { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.btn-group-vertical > .btn:last-child { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.btn-group-vertical > .btn-large:first-child { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; } + +.btn-group-vertical > .btn-large:last-child { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} + .alert { padding: 8px 35px 8px 14px; - margin-bottom: 18px; + margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.alert, .alert-heading { + +.alert, +.alert h4 { color: #c09853; } + +.alert h4 { + margin: 0; +} + .alert .close { position: relative; top: -2px; right: -21px; - line-height: 18px; + line-height: 20px; } + .alert-success { + color: #468847; background-color: #dff0d8; border-color: #d6e9c6; } -.alert-success, .alert-success .alert-heading { + +.alert-success h4 { color: #468847; } -.alert-danger, .alert-error { + +.alert-danger, +.alert-error { + color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } -.alert-danger, -.alert-error, -.alert-danger .alert-heading, -.alert-error .alert-heading { + +.alert-danger h4, +.alert-error h4 { color: #b94a48; } + .alert-info { + color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; } -.alert-info, .alert-info .alert-heading { + +.alert-info h4 { color: #3a87ad; } + .alert-block { padding-top: 14px; padding-bottom: 14px; } -.alert-block > p, .alert-block > ul { + +.alert-block > p, +.alert-block > ul { margin-bottom: 0; } + .alert-block p + p { margin-top: 5px; } + .nav { + margin-bottom: 20px; margin-left: 0; - margin-bottom: 18px; list-style: none; } + .nav > li > a { display: block; } + .nav > li > a:hover { text-decoration: none; background-color: #eeeeee; } -.nav .nav-header { + +.nav > li > a > img { + max-width: none; +} + +.nav > .pull-right { + float: right; +} + +.nav-header { display: block; padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; } + .nav li + .nav-header { margin-top: 9px; } + .nav-list { - padding-left: 14px; - padding-right: 14px; + padding-right: 15px; + padding-left: 15px; margin-bottom: 0; } -.nav-list > li > a, .nav-list .nav-header { - margin-left: -15px; + +.nav-list > li > a, +.nav-list .nav-header { margin-right: -15px; + margin-left: -15px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } + .nav-list > li > a { padding: 3px 15px; } -.nav-list .active > a, .nav-list .active > a:hover { + +.nav-list > .active > a, +.nav-list > .active > a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #0088cc; } -.nav-list [class^="icon-"] { + +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { margin-right: 2px; } -.nav-tabs, .nav-pills { + +.nav-list .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.nav-tabs, +.nav-pills { *zoom: 1; } + .nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after { display: table; + line-height: 0; content: ""; } -.nav-tabs:after, .nav-pills:after { + +.nav-tabs:after, +.nav-pills:after { clear: both; } -.nav-tabs > li, .nav-pills > li { + +.nav-tabs > li, +.nav-pills > li { float: left; } -.nav-tabs > li > a, .nav-pills > li > a { + +.nav-tabs > li > a, +.nav-pills > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } + .nav-tabs { border-bottom: 1px solid #ddd; } + .nav-tabs > li { margin-bottom: -1px; } + .nav-tabs > li > a { - padding-top: 9px; - padding-bottom: 9px; + padding-top: 8px; + padding-bottom: 8px; + line-height: 20px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } + .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } -.nav-tabs > .active > a, .nav-tabs > .active > a:hover { + +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover { color: #555555; + cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; - cursor: default; } + .nav-pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } -.nav-pills .active > a, .nav-pills .active > a:hover { + +.nav-pills > .active > a, +.nav-pills > .active > a:hover { color: #ffffff; background-color: #0088cc; } + .nav-stacked > li { float: none; } + .nav-stacked > li > a { margin-right: 0; } + .nav-tabs.nav-stacked { border-bottom: 0; } + .nav-tabs.nav-stacked > li > a { border: 1px solid #ddd; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + .nav-tabs.nav-stacked > li:first-child > a { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; } + .nav-tabs.nav-stacked > li:last-child > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; } + .nav-tabs.nav-stacked > li > a:hover { - border-color: #ddd; z-index: 2; + border-color: #ddd; } + .nav-pills.nav-stacked > li > a { margin-bottom: 3px; } + .nav-pills.nav-stacked > li:last-child > a { margin-bottom: 1px; } -.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; + +.nav-tabs .dropdown-menu { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; } + .nav-pills .dropdown-menu { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } -.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { - border-top-color: #0088cc; + +.nav .dropdown-toggle .caret { margin-top: 6px; + border-top-color: #0088cc; + border-bottom-color: #0088cc; } -.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { + +.nav .dropdown-toggle:hover .caret { border-top-color: #005580; + border-bottom-color: #005580; +} + +/* move down carets for tabs */ + +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; } -.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { - border-top-color: #333333; + +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; } + .nav > .dropdown.active > a:hover { - color: #000000; cursor: pointer; } -.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { + +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } -.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { + +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } + .tabs-stacked .open > a:hover { border-color: #999999; } + .tabbable { *zoom: 1; } -.tabbable:before, .tabbable:after { + +.tabbable:before, +.tabbable:after { display: table; + line-height: 0; content: ""; } + .tabbable:after { clear: both; } + .tab-content { - overflow: hidden; + overflow: auto; } -.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs { + +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { border-bottom: 0; } -.tab-content > .tab-pane, .pill-content > .pill-pane { + +.tab-content > .tab-pane, +.pill-content > .pill-pane { display: none; } -.tab-content > .active, .pill-content > .active { + +.tab-content > .active, +.pill-content > .active { display: block; } -.tabs-below .nav-tabs { + +.tabs-below > .nav-tabs { border-top: 1px solid #ddd; } -.tabs-below .nav-tabs > li { + +.tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } -.tabs-below .nav-tabs > li > a { + +.tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } -.tabs-below .nav-tabs > li > a:hover { - border-bottom-color: transparent; + +.tabs-below > .nav-tabs > li > a:hover { border-top-color: #ddd; + border-bottom-color: transparent; } -.tabs-below .nav-tabs .active > a, .tabs-below .nav-tabs .active > a:hover { + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover { border-color: transparent #ddd #ddd #ddd; } -.tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { + +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { float: none; } -.tabs-left .nav-tabs > li > a, .tabs-right .nav-tabs > li > a { + +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } -.tabs-left .nav-tabs { + +.tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } -.tabs-left .nav-tabs > li > a { + +.tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } -.tabs-left .nav-tabs > li > a:hover { + +.tabs-left > .nav-tabs > li > a:hover { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } -.tabs-left .nav-tabs .active > a, .tabs-left .nav-tabs .active > a:hover { + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } -.tabs-right .nav-tabs { + +.tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } -.tabs-right .nav-tabs > li > a { + +.tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } -.tabs-right .nav-tabs > li > a:hover { + +.tabs-right > .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } -.tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover { + +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff; } + +.nav > .disabled > a { + color: #999999; +} + +.nav > .disabled > a:hover { + text-decoration: none; + cursor: default; + background-color: transparent; +} + .navbar { + *position: relative; + *z-index: 2; + margin-bottom: 20px; overflow: visible; - margin-bottom: 18px; } + .navbar-inner { - padding-left: 20px; + min-height: 40px; padding-right: 20px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); + padding-left: 20px; + background-color: #fafafa; + background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); + background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); + background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + border: 1px solid #d4d4d4; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -} -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - border-color: #222222 #222222 #000000; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -} -.btn-navbar:hover, -.btn-navbar:active, -.btn-navbar.active, -.btn-navbar.disabled, -.btn-navbar[disabled] { - background-color: #222222; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); + *zoom: 1; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } -.btn-navbar:active, .btn-navbar.active { - background-color: #080808 \9; + +.navbar-inner:before, +.navbar-inner:after { + display: table; + line-height: 0; + content: ""; } -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + +.navbar-inner:after { + clear: both; } -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; + +.navbar .container { + width: auto; } + .nav-collapse.collapse { height: auto; + overflow: visible; } -.navbar .brand:hover { - text-decoration: none; -} + .navbar .brand { - float: left; display: block; - padding: 8px 20px 12px; + float: left; + padding: 10px 20px 10px; margin-left: -20px; font-size: 20px; font-weight: 200; - line-height: 1; - color: #ffffff; + color: #777777; + text-shadow: 0 1px 0 #ffffff; +} + +.navbar .brand:hover { + text-decoration: none; } -.navbar .navbar-text { + +.navbar-text { margin-bottom: 0; line-height: 40px; - color: #999999; + color: #777777; } -.navbar .navbar-text a:hover { - color: #ffffff; - background-color: transparent; + +.navbar-link { + color: #777777; +} + +.navbar-link:hover { + color: #333333; } -.navbar .btn, .navbar .btn-group { + +.navbar .divider-vertical { + height: 40px; + margin: 0 9px; + border-right: 1px solid #ffffff; + border-left: 1px solid #f2f2f2; +} + +.navbar .btn, +.navbar .btn-group { margin-top: 5px; } -.navbar .btn-group .btn { + +.navbar .btn-group .btn, +.navbar .input-prepend .btn, +.navbar .input-append .btn { margin-top: 0; } + .navbar-form { margin-bottom: 0; *zoom: 1; } -.navbar-form:before, .navbar-form:after { + +.navbar-form:before, +.navbar-form:after { display: table; + line-height: 0; content: ""; } + .navbar-form:after { clear: both; } -.navbar-form input, .navbar-form select { - display: inline-block; + +.navbar-form input, +.navbar-form select, +.navbar-form .radio, +.navbar-form .checkbox { margin-top: 5px; - margin-bottom: 0; } -.navbar-form .radio, .navbar-form .checkbox { - margin-top: 5px; + +.navbar-form input, +.navbar-form select, +.navbar-form .btn { + display: inline-block; + margin-bottom: 0; } -.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] { + +.navbar-form input[type="image"], +.navbar-form input[type="checkbox"], +.navbar-form input[type="radio"] { margin-top: 3px; } -.navbar-form .input-append, .navbar-form .input-prepend { - margin-top: 6px; + +.navbar-form .input-append, +.navbar-form .input-prepend { + margin-top: 5px; white-space: nowrap; } -.navbar-form .input-append input, .navbar-form .input-prepend input { + +.navbar-form .input-append input, +.navbar-form .input-prepend input { margin-top: 0; } + .navbar-search { position: relative; float: left; - margin-top: 6px; + margin-top: 5px; margin-bottom: 0; } + .navbar-search .search-query { - padding: 4px 9px; + padding: 4px 14px; + margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1; - color: #ffffff; - color: rgba(255, 255, 255, 0.75); - background: #666; - background: rgba(255, 255, 255, 0.3); - border: 1px solid #111; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} -.navbar-search .search-query :-moz-placeholder { - color: #eeeeee; -} -.navbar-search .search-query::-webkit-input-placeholder { - color: #eeeeee; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } -.navbar-search .search-query:hover { - color: #ffffff; - background-color: #999999; - background-color: rgba(255, 255, 255, 0.5); + +.navbar-static-top { + position: static; + margin-bottom: 0; } -.navbar-search .search-query:focus, .navbar-search .search-query.focused { - padding: 5px 10px; - color: #333333; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - border: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - outline: 0; + +.navbar-static-top .navbar-inner { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.navbar-fixed-top { + +.navbar-fixed-top, +.navbar-fixed-bottom { position: fixed; - top: 0; right: 0; left: 0; z-index: 1030; + margin-bottom: 0; } -.navbar-fixed-top .navbar-inner { - padding-left: 0; + +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { + border-width: 0 0 1px; +} + +.navbar-fixed-bottom .navbar-inner { + border-width: 1px 0 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-fixed-bottom .navbar-inner { padding-right: 0; + padding-left: 0; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; +} + +.navbar-fixed-top { + top: 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { + -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); +} + +.navbar-fixed-bottom { + bottom: 0; +} + +.navbar-fixed-bottom .navbar-inner { + -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); } + .navbar .nav { position: relative; left: 0; @@ -2633,233 +4521,571 @@ button.btn.small, input[type="submit"].btn.small { float: left; margin: 0 10px 0 0; } + .navbar .nav.pull-right { float: right; + margin-right: 0; } + .navbar .nav > li { - display: block; float: left; } + .navbar .nav > li > a { float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: #999999; + padding: 10px 15px 10px; + color: #777777; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + text-shadow: 0 1px 0 #ffffff; +} + +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; } + +.navbar .nav > li > a:focus, .navbar .nav > li > a:hover { + color: #333333; + text-decoration: none; background-color: transparent; - color: #ffffff; +} + +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: #555555; text-decoration: none; + background-color: #e5e5e5; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } -.navbar .nav .active > a, .navbar .nav .active > a:hover { + +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-right: 5px; + margin-left: 5px; color: #ffffff; - text-decoration: none; - background-color: #222222; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #ededed; + *background-color: #e5e5e5; + background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); + background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); + background-repeat: repeat-x; + border-color: #e5e5e5 #e5e5e5 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); } -.navbar .divider-vertical { - height: 40px; - width: 1px; - margin: 0 9px; - overflow: hidden; - background-color: #222222; - border-right: 1px solid #333333; + +.navbar .btn-navbar:hover, +.navbar .btn-navbar:active, +.navbar .btn-navbar.active, +.navbar .btn-navbar.disabled, +.navbar .btn-navbar[disabled] { + color: #ffffff; + background-color: #e5e5e5; + *background-color: #d9d9d9; } -.navbar .nav.pull-right { - margin-left: 10px; - margin-right: 0; + +.navbar .btn-navbar:active, +.navbar .btn-navbar.active { + background-color: #cccccc \9; } -.navbar .dropdown-menu { - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } -.navbar .dropdown-menu:before { - content: ''; + +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + +.navbar .nav > li > .dropdown-menu:before { + position: absolute; + top: -7px; + left: 9px; display: inline-block; - border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); - position: absolute; - top: -7px; - left: 9px; -} -.navbar .dropdown-menu:after { content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; +} + +.navbar .nav > li > .dropdown-menu:after { position: absolute; top: -6px; left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.navbar-fixed-bottom .nav > li > .dropdown-menu:before { + top: auto; + bottom: -7px; + border-top: 7px solid #ccc; + border-bottom: 0; + border-top-color: rgba(0, 0, 0, 0.2); +} + +.navbar-fixed-bottom .nav > li > .dropdown-menu:after { + top: auto; + bottom: -6px; + border-top: 6px solid #ffffff; + border-bottom: 0; +} + +.navbar .nav li.dropdown > a:hover .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + color: #555555; + background-color: #e5e5e5; +} + +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #777777; + border-bottom-color: #777777; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .pull-right > li > .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:before, +.navbar .nav > li > .dropdown-menu.pull-right:before { + right: 12px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:after, +.navbar .nav > li > .dropdown-menu.pull-right:after { + right: 13px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { + right: 100%; + left: auto; + margin-right: -1px; + margin-left: 0; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +.navbar-inverse .navbar-inner { + background-color: #1b1b1b; + background-image: -moz-linear-gradient(top, #222222, #111111); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); + background-image: -webkit-linear-gradient(top, #222222, #111111); + background-image: -o-linear-gradient(top, #222222, #111111); + background-image: linear-gradient(to bottom, #222222, #111111); + background-repeat: repeat-x; + border-color: #252525; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); +} + +.navbar-inverse .brand, +.navbar-inverse .nav > li > a { + color: #999999; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +.navbar-inverse .brand:hover, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; +} + +.navbar-inverse .brand { + color: #999999; +} + +.navbar-inverse .navbar-text { + color: #999999; +} + +.navbar-inverse .nav > li > a:focus, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; + background-color: transparent; +} + +.navbar-inverse .nav .active > a, +.navbar-inverse .nav .active > a:hover, +.navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .navbar-link { + color: #999999; +} + +.navbar-inverse .navbar-link:hover { + color: #ffffff; } -.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { + +.navbar-inverse .divider-vertical { + border-right-color: #222222; + border-left-color: #111111; +} + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .nav li.dropdown > a:hover .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; } -.navbar .nav .active .caret { - opacity: 1; - filter: alpha(opacity=100); + +.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #999999; + border-bottom-color: #999999; } -.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { - background-color: transparent; + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; } -.navbar .nav .active > .dropdown-toggle:hover { + +.navbar-inverse .navbar-search .search-query { color: #ffffff; + background-color: #515151; + border-color: #111111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; } -.navbar .nav.pull-right .dropdown-menu { - left: auto; - right: 0; + +.navbar-inverse .navbar-search .search-query:-moz-placeholder { + color: #cccccc; } -.navbar .nav.pull-right .dropdown-menu:before { - left: auto; - right: 12px; + +.navbar-inverse .navbar-search .search-query:-ms-input-placeholder { + color: #cccccc; } -.navbar .nav.pull-right .dropdown-menu:after { - left: auto; - right: 13px; + +.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder { + color: #cccccc; } -.breadcrumb { - padding: 7px 14px; - margin: 0 0 18px; - background-color: #fbfbfb; - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); + +.navbar-inverse .navbar-search .search-query:focus, +.navbar-inverse .navbar-search .search-query.focused { + padding: 5px 15px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); +} + +.navbar-inverse .btn-navbar { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0e0e0e; + *background-color: #040404; + background-image: -moz-linear-gradient(top, #151515, #040404); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); + background-image: -webkit-linear-gradient(top, #151515, #040404); + background-image: -o-linear-gradient(top, #151515, #040404); + background-image: linear-gradient(to bottom, #151515, #040404); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + border-color: #040404 #040404 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.navbar-inverse .btn-navbar:hover, +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active, +.navbar-inverse .btn-navbar.disabled, +.navbar-inverse .btn-navbar[disabled] { + color: #ffffff; + background-color: #040404; + *background-color: #000000; +} + +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active { + background-color: #000000 \9; +} + +.breadcrumb { + padding: 8px 15px; + margin: 0 0 20px; + list-style: none; + background-color: #f5f5f5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.breadcrumb li { + +.breadcrumb > li { display: inline-block; + *display: inline; text-shadow: 0 1px 0 #ffffff; + *zoom: 1; } -.breadcrumb .divider { + +.breadcrumb > li > .divider { padding: 0 5px; - color: #999999; + color: #ccc; } -.breadcrumb .active a { - color: #333333; + +.breadcrumb > .active { + color: #999999; } + .pagination { - height: 36px; - margin: 18px 0; + margin: 20px 0; } + .pagination ul { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - margin-left: 0; margin-bottom: 0; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + margin-left: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } -.pagination li { + +.pagination ul > li { display: inline; } -.pagination a { + +.pagination ul > li > a, +.pagination ul > li > span { float: left; - padding: 0 14px; - line-height: 34px; + padding: 4px 12px; + line-height: 20px; text-decoration: none; - border: 1px solid #ddd; + background-color: #ffffff; + border: 1px solid #dddddd; border-left-width: 0; } -.pagination a:hover, .pagination .active a { + +.pagination ul > li > a:hover, +.pagination ul > .active > a, +.pagination ul > .active > span { background-color: #f5f5f5; } -.pagination .active a { + +.pagination ul > .active > a, +.pagination ul > .active > span { color: #999999; cursor: default; } -.pagination .disabled a, .pagination .disabled a:hover { + +.pagination ul > .disabled > span, +.pagination ul > .disabled > a, +.pagination ul > .disabled > a:hover { color: #999999; - background-color: transparent; cursor: default; + background-color: transparent; } -.pagination li:first-child a { + +.pagination ul > li:first-child > a, +.pagination ul > li:first-child > span { border-left-width: 1px; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -moz-border-radius-topleft: 4px; } -.pagination li:last-child a { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; + +.pagination ul > li:last-child > a, +.pagination ul > li:last-child > span { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; } + .pagination-centered { text-align: center; } + .pagination-right { text-align: right; } + +.pagination-large ul > li > a, +.pagination-large ul > li > span { + padding: 11px 19px; + font-size: 17.5px; +} + +.pagination-large ul > li:first-child > a, +.pagination-large ul > li:first-child > span { + -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + -moz-border-radius-topleft: 6px; +} + +.pagination-large ul > li:last-child > a, +.pagination-large ul > li:last-child > span { + -webkit-border-top-right-radius: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; + -moz-border-radius-bottomright: 6px; +} + +.pagination-mini ul > li:first-child > a, +.pagination-small ul > li:first-child > a, +.pagination-mini ul > li:first-child > span, +.pagination-small ul > li:first-child > span { + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -moz-border-radius-topleft: 3px; +} + +.pagination-mini ul > li:last-child > a, +.pagination-small ul > li:last-child > a, +.pagination-mini ul > li:last-child > span, +.pagination-small ul > li:last-child > span { + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 3px; +} + +.pagination-small ul > li > a, +.pagination-small ul > li > span { + padding: 2px 10px; + font-size: 11.9px; +} + +.pagination-mini ul > li > a, +.pagination-mini ul > li > span { + padding: 0 6px; + font-size: 10.5px; +} + .pager { - margin-left: 0; - margin-bottom: 18px; - list-style: none; + margin: 20px 0; text-align: center; + list-style: none; *zoom: 1; } -.pager:before, .pager:after { + +.pager:before, +.pager:after { display: table; + line-height: 0; content: ""; } + .pager:after { clear: both; } + .pager li { display: inline; } -.pager a { + +.pager li > a, +.pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } -.pager a:hover { + +.pager li > a:hover { text-decoration: none; background-color: #f5f5f5; } -.pager .next a { + +.pager .next > a, +.pager .next > span { float: right; } -.pager .previous a { + +.pager .previous > a, +.pager .previous > span { float: left; } -.modal-open .dropdown-menu { - z-index: 2050; -} -.modal-open .dropdown.open { - *z-index: 2050; -} -.modal-open .popover { - z-index: 2060; -} -.modal-open .tooltip { - z-index: 2070; + +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > span { + color: #999999; + cursor: default; + background-color: #fff; } + .modal-backdrop { position: fixed; top: 0; @@ -2869,344 +5095,569 @@ button.btn.small, input[type="submit"].btn.small { z-index: 1040; background-color: #000000; } + .modal-backdrop.fade { opacity: 0; } -.modal-backdrop, .modal-backdrop.fade.in { + +.modal-backdrop, +.modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } + .modal { position: fixed; - top: 50%; + top: 10%; left: 50%; z-index: 1050; - max-height: 500px; - overflow: auto; width: 560px; - margin: -250px 0 0 -280px; + margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; - /* IE6-7 */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; } + .modal.fade { - -webkit-transition: opacity .3s linear, top .3s ease-out; - -moz-transition: opacity .3s linear, top .3s ease-out; - -ms-transition: opacity .3s linear, top .3s ease-out; - -o-transition: opacity .3s linear, top .3s ease-out; - transition: opacity .3s linear, top .3s ease-out; top: -25%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out; } + .modal.fade.in { - top: 50%; + top: 10%; } + .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; } + .modal-header .close { margin-top: 2px; } + +.modal-header h3 { + margin: 0; + line-height: 30px; +} + .modal-body { + position: relative; + max-height: 400px; padding: 15px; + overflow-y: auto; } -.modal-body .modal-form { + +.modal-form { margin-bottom: 0; } + .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; + text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; } -.modal-footer:before, .modal-footer:after { + +.modal-footer:before, +.modal-footer:after { display: table; + line-height: 0; content: ""; } + .modal-footer:after { clear: both; } -.modal-footer .btn { - float: right; - margin-left: 5px; + +.modal-footer .btn + .btn { margin-bottom: 0; + margin-left: 5px; +} + +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} + +.modal-footer .btn-block + .btn-block { + margin-left: 0; } + .tooltip { position: absolute; - z-index: 1020; + z-index: 1030; display: block; - visibility: visible; padding: 5px; font-size: 11px; opacity: 0; filter: alpha(opacity=0); + visibility: visible; } + .tooltip.in { opacity: 0.8; filter: alpha(opacity=80); } + .tooltip.top { - margin-top: -2px; + margin-top: -3px; } + .tooltip.right { - margin-left: 2px; + margin-left: 3px; } + .tooltip.bottom { - margin-top: 2px; + margin-top: 3px; } + .tooltip.left { - margin-left: -2px; + margin-left: -3px; +} + +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + text-decoration: none; + background-color: #000000; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; + border-top-color: #000000; + border-width: 5px 5px 0; +} + +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-right-color: #000000; + border-width: 5px 5px 5px 0; } + .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; + border-left-color: #000000; + border-width: 5px 0 5px 5px; } + .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; + border-bottom-color: #000000; + border-width: 0 5px 5px; } + .popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; - padding: 5px; + width: 236px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } + .popover.top { - margin-top: -5px; + margin-top: -10px; +} + +.popover.right { + margin-left: 10px; +} + +.popover.bottom { + margin-top: 10px; +} + +.popover.left { + margin-left: -10px; +} + +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +.popover-content { + padding: 9px 14px; } -.popover.right { - margin-left: 5px; + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } -.popover.bottom { - margin-top: 5px; + +.popover .arrow { + border-width: 11px; } -.popover.left { - margin-left: -5px; + +.popover .arrow:after { + border-width: 10px; + content: ""; } + .popover.top .arrow { - bottom: 0; + bottom: -11px; left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, 0.25); + border-bottom-width: 0; +} + +.popover.top .arrow:after { + bottom: 1px; + margin-left: -10px; + border-top-color: #ffffff; + border-bottom-width: 0; } + .popover.right .arrow { top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, 0.25); + border-left-width: 0; } + +.popover.right .arrow:after { + bottom: -10px; + left: 1px; + border-right-color: #ffffff; + border-left-width: 0; +} + .popover.bottom .arrow { - top: 0; + top: -11px; left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; + margin-left: -11px; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, 0.25); + border-top-width: 0; +} + +.popover.bottom .arrow:after { + top: 1px; + margin-left: -10px; + border-bottom-color: #ffffff; + border-top-width: 0; } + .popover.left .arrow { top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.popover .arrow { - position: absolute; - width: 0; - height: 0; -} -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: #000000; - background: rgba(0, 0, 0, 0.8); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + right: -11px; + margin-top: -11px; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, 0.25); + border-right-width: 0; } -.popover-title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom: 1px solid #eee; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.popover-content { - padding: 14px; - background-color: #ffffff; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.popover-content p, .popover-content ul, .popover-content ol { - margin-bottom: 0; + +.popover.left .arrow:after { + right: 1px; + bottom: -10px; + border-left-color: #ffffff; + border-right-width: 0; } + .thumbnails { margin-left: -20px; list-style: none; *zoom: 1; } -.thumbnails:before, .thumbnails:after { + +.thumbnails:before, +.thumbnails:after { display: table; + line-height: 0; content: ""; } + .thumbnails:after { clear: both; } + +.row-fluid .thumbnails { + margin-left: 0; +} + .thumbnails > li { float: left; - margin: 0 0 18px 20px; + margin-bottom: 20px; + margin-left: 20px; } + .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + a.thumbnail:hover { border-color: #0088cc; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } + .thumbnail > img { display: block; max-width: 100%; - margin-left: auto; margin-right: auto; + margin-left: auto; } + .thumbnail .caption { padding: 9px; + color: #555555; } -.label { - padding: 2px 4px 3px; - font-size: 11.049999999999999px; + +.media, +.media-body { + overflow: hidden; + *overflow: visible; + zoom: 1; +} + +.media, +.media .media { + margin-top: 15px; +} + +.media:first-child { + margin-top: 0; +} + +.media-object { + display: block; +} + +.media-heading { + margin: 0 0 5px; +} + +.media .pull-left { + margin-right: 10px; +} + +.media .pull-right { + margin-left: 10px; +} + +.media-list { + margin-left: 0; + list-style: none; +} + +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: 11.844px; font-weight: bold; + line-height: 14px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + white-space: nowrap; + vertical-align: baseline; background-color: #999999; +} + +.label { -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.badge { + padding-right: 9px; + padding-left: 9px; + -webkit-border-radius: 9px; + -moz-border-radius: 9px; + border-radius: 9px; +} + +.label:empty, +.badge:empty { + display: none; } -.label:hover { + +a.label:hover, +a.badge:hover { color: #ffffff; text-decoration: none; + cursor: pointer; } -.label-important { + +.label-important, +.badge-important { background-color: #b94a48; } -.label-important:hover { + +.label-important[href], +.badge-important[href] { background-color: #953b39; } -.label-warning { + +.label-warning, +.badge-warning { background-color: #f89406; } -.label-warning:hover { + +.label-warning[href], +.badge-warning[href] { background-color: #c67605; } -.label-success { + +.label-success, +.badge-success { background-color: #468847; } -.label-success:hover { + +.label-success[href], +.badge-success[href] { background-color: #356635; } -.label-info { + +.label-info, +.badge-info { background-color: #3a87ad; } -.label-info:hover { + +.label-info[href], +.badge-info[href] { background-color: #2d6987; } + +.label-inverse, +.badge-inverse { + background-color: #333333; +} + +.label-inverse[href], +.badge-inverse[href] { + background-color: #1a1a1a; +} + +.btn .label, +.btn .badge { + position: relative; + top: -1px; +} + +.btn-mini .label, +.btn-mini .badge { + top: 0; +} + @-webkit-keyframes progress-bar-stripes { from { + background-position: 40px 0; + } + to { background-position: 0 0; } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } to { + background-position: 0 0; + } +} + +@-ms-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { + background-position: 0 0; + } } -@-moz-keyframes progress-bar-stripes { + +@-o-keyframes progress-bar-stripes { from { background-position: 0 0; } @@ -3214,210 +5665,273 @@ a.thumbnail:hover { background-position: 40px 0; } } + @keyframes progress-bar-stripes { from { - background-position: 0 0; + background-position: 40px 0; } to { - background-position: 40px 0; + background-position: 0 0; } } + .progress { + height: 20px; + margin-bottom: 20px; overflow: hidden; - height: 18px; - margin-bottom: 18px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } + .progress .bar { - width: 0%; - height: 18px; - color: #ffffff; + float: left; + width: 0; + height: 100%; font-size: 12px; + color: #ffffff; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.progress .bar + .bar { + -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } + .progress-striped .bar { - background-color: #62c462; + background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; } + .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; } -.progress-danger .bar { + +.progress-danger .bar, +.progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(top, #ee5f5b, #c43c35); + background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } -.progress-danger.progress-striped .bar { + +.progress-danger.progress-striped .bar, +.progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress-success .bar { + +.progress-success .bar, +.progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } -.progress-success.progress-striped .bar { + +.progress-success.progress-striped .bar, +.progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress-info .bar { + +.progress-info .bar, +.progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } -.progress-info.progress-striped .bar { + +.progress-info.progress-striped .bar, +.progress-striped .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); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-warning .bar, +.progress .bar-warning { + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); +} + +.progress-warning.progress-striped .bar, +.progress-striped .bar-warning { + background-color: #fbb450; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } + .accordion { - margin-bottom: 18px; + margin-bottom: 20px; } + .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .accordion-heading { border-bottom: 0; } + .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; } + +.accordion-toggle { + cursor: pointer; +} + .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } + .carousel { position: relative; - margin-bottom: 18px; + margin-bottom: 20px; line-height: 1; } + .carousel-inner { - overflow: hidden; - width: 100%; position: relative; + width: 100%; + overflow: hidden; } -.carousel .item { - display: none; + +.carousel-inner > .item { position: relative; + display: none; -webkit-transition: 0.6s ease-in-out left; - -moz-transition: 0.6s ease-in-out left; - -ms-transition: 0.6s ease-in-out left; - -o-transition: 0.6s ease-in-out left; - transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; } -.carousel .item > img { + +.carousel-inner > .item > img { display: block; line-height: 1; } -.carousel .active, .carousel .next, .carousel .prev { + +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { display: block; } -.carousel .active { + +.carousel-inner > .active { left: 0; } -.carousel .next, .carousel .prev { + +.carousel-inner > .next, +.carousel-inner > .prev { position: absolute; top: 0; width: 100%; } -.carousel .next { + +.carousel-inner > .next { left: 100%; } -.carousel .prev { + +.carousel-inner > .prev { left: -100%; } -.carousel .next.left, .carousel .prev.right { + +.carousel-inner > .next.left, +.carousel-inner > .prev.right { left: 0; } -.carousel .active.left { + +.carousel-inner > .active.left { left: -100%; } -.carousel .active.right { + +.carousel-inner > .active.right { left: 100%; } + .carousel-control { position: absolute; top: 40%; @@ -3433,64 +5947,93 @@ a.thumbnail:hover { background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; - -moz-border-radius: 23px; - border-radius: 23px; + -moz-border-radius: 23px; + border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50); } + .carousel-control.right { - left: auto; right: 15px; + left: auto; } + .carousel-control:hover { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); } + .carousel-caption { position: absolute; - left: 0; right: 0; bottom: 0; - padding: 10px 15px 5px; + left: 0; + padding: 15px; background: #333333; background: rgba(0, 0, 0, 0.75); } -.carousel-caption h4, .carousel-caption p { + +.carousel-caption h4, +.carousel-caption p { + line-height: 20px; color: #ffffff; } + +.carousel-caption h4 { + margin: 0 0 5px; +} + +.carousel-caption p { + margin-bottom: 0; +} + .hero-unit { padding: 60px; margin-bottom: 30px; - background-color: #f5f5f5; + font-size: 18px; + font-weight: 200; + line-height: 30px; + color: inherit; + background-color: #eeeeee; -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } + .hero-unit h1 { margin-bottom: 0; font-size: 60px; line-height: 1; letter-spacing: -1px; + color: inherit; } -.hero-unit p { - font-size: 18px; - font-weight: 200; - line-height: 27px; + +.hero-unit li { + line-height: 30px; } + .pull-right { float: right; } + .pull-left { float: left; } + .hide { display: none; } + .show { display: block; } + .invisible { visibility: hidden; } + +.affix { + position: fixed; +} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f6a388c2..c7bddd45 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -6,21 +6,32 @@ */ + /* Body and structure -------------------------------------------------- */ + body { position: relative; - padding-top: 90px; - background-color: #fff; - background-image: url(../img/grid-18px-masked.png); - background-repeat: repeat-x; - background-position: 0 40px; + padding-top: 40px; +} + +/* Code in headings */ +h3 code { + font-size: 14px; + font-weight: normal; } + /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ -.navbar-fixed-top .brand { + +body > .navbar { + font-size: 13px; +} + +/* Change the docs' brand */ +body > .navbar .brand { padding-right: 0; padding-left: 0; margin-left: 20px; @@ -32,21 +43,36 @@ body { -moz-transition: all .2s linear; transition: all .2s linear; } -.navbar-fixed-top .brand:hover { +body > .navbar .brand:hover { text-decoration: none; + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4); } -/* Space out sub-sections more +/* Sections -------------------------------------------------- */ + +/* padding for in-page bookmarks and fixed navbar */ section { - padding-top: 60px; + padding-top: 30px; +} +section > .page-header, +section > .lead { + color: #5a5a5a; +} +section > ul li { + margin-bottom: 5px; +} + +/* Separators (hr) */ +.bs-docs-separator { + margin: 40px 0 39px; } /* Faded out hr */ hr.soften { height: 1px; - margin: 54px 0; + margin: 70px 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); @@ -55,229 +81,251 @@ hr.soften { } + /* Jumbotrons -------------------------------------------------- */ + +/* Base class +------------------------- */ .jumbotron { position: relative; + padding: 40px 0; + color: #fff; + text-align: center; + text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); + box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); } .jumbotron h1 { - margin-bottom: 9px; - font-size: 81px; + font-size: 80px; + font-weight: bold; letter-spacing: -1px; line-height: 1; } .jumbotron p { - margin-bottom: 18px; + font-size: 24px; font-weight: 300; + line-height: 1.25; + margin-bottom: 30px; } -.jumbotron .btn-large { - font-size: 20px; - font-weight: normal; - padding: 14px 24px; - margin-right: 10px; + +/* Link styles (used on .masthead-links as well) */ +.jumbotron a { + color: #fff; + color: rgba(255,255,255,.5); + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.jumbotron a:hover { + color: #fff; + text-shadow: 0 0 10px rgba(255,255,255,.25); +} + +/* Download button */ +.masthead .btn { + padding: 19px 24px; + font-size: 24px; + font-weight: 200; + color: #fff; /* redeclare to override the `.jumbotron a` */ + border: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -webkit-transition: none; + -moz-transition: none; + transition: none; } - -/* Masthead (docs home) */ -.masthead { - padding-top: 36px; - margin-bottom: 72px; -} -.masthead h1, -.masthead p { - text-align: center; -} -.masthead h1 { - margin-bottom: 18px; +.masthead .btn:hover { + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); } -.masthead p { - margin-left: 5%; - margin-right: 5%; - font-size: 30px; - line-height: 36px; +.masthead .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); } -/* Specific jumbotrons +/* Pattern overlay ------------------------- */ -/* supporting docs pages */ -.subhead { - padding-bottom: 0; - margin-bottom: 9px; +.jumbotron .container { + position: relative; + z-index: 2; } -.subhead h1 { - font-size: 54px; -} - -/* Subnav */ -.subnav { - width: 100%; - height: 36px; - background-color: #eeeeee; /* Old browsers */ - background-repeat: repeat-x; /* Repeat the gradient */ - background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */ - background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */ - background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ - background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ - border: 1px solid #e5e5e5; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; +.jumbotron:after { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: url(../img/bs-docs-masthead-pattern.png) repeat center center; + opacity: .4; +} +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and ( min--moz-device-pixel-ratio: 2), +only screen and ( -o-min-device-pixel-ratio: 2/1) { + + .jumbotron:after { + background-size: 150px 150px; + } + } -.subnav .nav { + +/* Masthead (docs home) +------------------------- */ +.masthead { + padding: 70px 0 80px; margin-bottom: 0; + color: #fff; } -.subnav .nav > li > a { - margin: 0; - padding-top: 11px; - padding-bottom: 11px; - border-left: 1px solid #f5f5f5; - border-right: 1px solid #e5e5e5; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -.subnav .nav > .active > a, -.subnav .nav > .active > a:hover { - padding-left: 13px; - color: #777; - background-color: #e9e9e9; - border-right-color: #ddd; - border-left: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); - -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); - box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -} -.subnav .nav > .active > a .caret, -.subnav .nav > .active > a:hover .caret { - border-top-color: #777; -} -.subnav .nav > li:first-child > a, -.subnav .nav > li:first-child > a:hover { - border-left: 0; - padding-left: 12px; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.subnav .nav > li:last-child > a { - border-right: 0; -} -.subnav .dropdown-menu { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; +.masthead h1 { + font-size: 120px; + line-height: 1; + letter-spacing: -2px; +} +.masthead p { + font-size: 40px; + font-weight: 200; + line-height: 1.25; } -/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ -@media (min-width: 980px) { - .subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ - } - .subnav-fixed .nav { - width: 938px; - margin: 0 auto; - padding: 0 1px; - } - .subnav .nav > li:first-child > a, - .subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - } +/* Textual links in masthead */ +.masthead-links { + margin: 0; + list-style: none; +} +.masthead-links li { + display: inline; + padding: 0 10px; + color: rgba(255,255,255,.25); } +/* Social proof buttons from GitHub & Twitter */ +.bs-docs-social { + padding: 15px 0; + text-align: center; + background-color: #f5f5f5; + border-top: 1px solid #fff; + border-bottom: 1px solid #ddd; +} -/* Quick links --------------------------------------------------- */ -.quick-links { - min-height: 30px; - padding: 5px 20px; - margin: 36px 0; +/* Quick links on Home */ +.bs-docs-social-buttons { + margin-left: 0; + margin-bottom: 0; + padding-left: 0; list-style: none; - text-align: center; - overflow: hidden; } -.quick-links li { - display: inline; - margin: 0 5px; - color: #999; +.bs-docs-social-buttons li { + display: inline-block; + padding: 5px 8px; + line-height: 1; + *display: inline; + *zoom: 1; } -.quick-links .github-btn, -.quick-links .tweet-btn, -.quick-links .follow-btn { - position: relative; - top: 5px; + +/* Subhead (other pages) +------------------------- */ +.subhead { + text-align: left; + border-bottom: 1px solid #ddd; +} +.subhead h1 { + font-size: 60px; +} +.subhead p { + margin-bottom: 20px; +} +.subhead .navbar { + display: none; } + /* Marketing section of Overview -------------------------------------------------- */ -.marketing .row { - margin-bottom: 9px; -} -.marketing h1 { - margin: 36px 0 27px; - font-size: 40px; - font-weight: 300; + +.marketing { text-align: center; + color: #5a5a5a; } -.marketing h2, -.marketing h3 { - font-weight: 300; +.marketing h1 { + margin: 60px 0 10px; + font-size: 60px; + font-weight: 200; + line-height: 1; + letter-spacing: -1px; } .marketing h2 { - font-size: 22px; + font-weight: 200; + margin-bottom: 5px; } .marketing p { - margin-right: 10px; + font-size: 16px; + line-height: 1.5; } -.marketing .bs-icon { - float: left; - margin: 7px 10px 0 0; - opacity: .8; +.marketing .marketing-byline { + margin-bottom: 40px; + font-size: 20px; + font-weight: 300; + line-height: 1.25; + color: #999; } -.marketing .small-bs-icon { - float: left; - margin: 4px 5px 0 0; +.marketing-img { + display: block; + margin: 0 auto 30px; + max-height: 145px; } /* Footer -------------------------------------------------- */ + .footer { - margin-top: 45px; - padding: 35px 0 36px; + text-align: center; + padding: 30px 0; + margin-top: 70px; border-top: 1px solid #e5e5e5; + background-color: #f5f5f5; } .footer p { margin-bottom: 0; - color: #555; + color: #777; +} +.footer-links { + margin: 10px 0; +} +.footer-links li { + display: inline; + padding: 0 2px; +} +.footer-links li:first-child { + padding-left: 0; } /* Special grid styles -------------------------------------------------- */ + .show-grid { margin-top: 10px; margin-bottom: 20px; @@ -288,8 +336,8 @@ hr.soften { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - min-height: 30px; - line-height: 30px; + min-height: 40px; + line-height: 40px; } .show-grid:hover [class*="span"] { background: #ddd; @@ -299,11 +347,18 @@ hr.soften { margin-bottom: 0; } .show-grid .show-grid [class*="span"] { + margin-top: 5px; +} +.show-grid [class*="span"] [class*="span"] { background-color: #ccc; } +.show-grid [class*="span"] [class*="span"] [class*="span"] { + background-color: #999; +} + -/* Render mini layout previews +/* Mini layout previews -------------------------------------------------- */ .mini-layout { border: 1px solid #ddd; @@ -314,8 +369,12 @@ hr.soften { -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); box-shadow: 0 1px 2px rgba(0,0,0,.075); } +.mini-layout, +.mini-layout .mini-layout-body, +.mini-layout.fluid .mini-layout-sidebar { + height: 300px; +} .mini-layout { - height: 240px; margin-bottom: 20px; padding: 9px; } @@ -328,7 +387,6 @@ hr.soften { background-color: #dceaf4; margin: 0 auto; width: 70%; - height: 240px; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, @@ -338,7 +396,6 @@ hr.soften { .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; - height: 240px; } .mini-layout.fluid .mini-layout-body { width: 77.5%; @@ -346,32 +403,10 @@ hr.soften { } -/* Popover docs --------------------------------------------------- */ -.popover-well { - min-height: 160px; -} -.popover-well .popover { - display: block; -} -.popover-well .popover-wrapper { - width: 50%; - height: 160px; - float: left; - margin-left: 55px; - position: relative; -} -.popover-well .popover-menu-wrapper { - height: 80px; -} -.large-bird { - margin: 5px 0 0 310px; - opacity: .1; -} - /* Download page -------------------------------------------------- */ + .download .page-header { margin-top: 36px; } @@ -402,6 +437,8 @@ hr.soften { /* Custom, larger checkbox labels */ .download .checkbox { padding: 6px 10px 6px 25px; + font-size: 13px; + line-height: 18px; color: #555; background-color: #f9f9f9; -webkit-border-radius: 3px; @@ -427,17 +464,17 @@ hr.soften { .download-btn { margin: 36px 0 108px; } -.download p, -.download h4 { +#download p, +#download h4 { max-width: 50%; margin: 0 auto; color: #999; text-align: center; } -.download h4 { +#download h4 { margin-bottom: 0; } -.download p { +#download p { margin-bottom: 18px; } .download-btn .btn { @@ -455,38 +492,9 @@ hr.soften { -/* Color swatches on LESS docs page --------------------------------------------------- */ -/* Sets the width of the td */ -.swatch-col { - width: 30px; -} -/* Le swatch */ -.swatch { - display: inline-block; - width: 30px; - height: 20px; - margin: -6px 0; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -/* For white swatches, give a border */ -.swatch-bordered { - width: 28px; - height: 18px; - border: 1px solid #eee; -} - - /* Misc -------------------------------------------------- */ - -.browser-support { - max-width: 100%; -} - /* Make tables spaced out a bit more */ h2 + table, h3 + table, @@ -496,18 +504,13 @@ h2 + .row { } /* Example sites showcase */ +.example-sites { + xmargin-left: 20px; +} .example-sites img { max-width: 100%; margin: 0 auto; } -.marketing-byline { - margin: -18px 0 27px; - font-size: 18px; - font-weight: 300; - line-height: 24px; - color: #999; - text-align: center; -} .scrollspy-example { height: 200px; @@ -515,15 +518,6 @@ h2 + .row { position: relative; } -/* Remove bottom margin on example forms in wells */ -form.well { - padding: 14px; -} - -/* Tighten up spacing */ -.well hr { - margin: 18px 0; -} /* Fake the :focus state to demo it */ .focused { @@ -547,154 +541,401 @@ form.well { margin-left: 0; list-style: none; } +.the-icons li { + float: left; + width: 25%; + line-height: 25px; +} .the-icons i:hover { background-color: rgba(255,0,0,.25); } -/* Eaxmples page +/* Example page ------------------------- */ +.bootstrap-examples p { + font-size: 13px; + line-height: 18px; +} .bootstrap-examples .thumbnail { margin-bottom: 9px; background-color: #fff; } -/* Responsive Docs + +/* Bootstrap code examples -------------------------------------------------- */ -@media (max-width: 480px) { - /* Reduce padding above jumbotron */ - body { - padding-top: 70px; - } +/* Base class */ +.bs-docs-example { + position: relative; + margin: 15px 0; + padding: 39px 19px 14px; + *padding-top: 19px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} - /* Change up some type stuff */ - h2 { - margin-top: 27px; +/* Echo out a label for the example */ +.bs-docs-example:after { + content: "Example"; + position: absolute; + top: -1px; + left: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ddd; + color: #9da0a4; + -webkit-border-radius: 4px 0 4px 0; + -moz-border-radius: 4px 0 4px 0; + border-radius: 4px 0 4px 0; +} + +/* Remove spacing between an example and it's code */ +.bs-docs-example + .prettyprint { + margin-top: -20px; + padding-top: 15px; +} + +/* Tweak examples +------------------------- */ +.bs-docs-example > p:last-child { + margin-bottom: 0; +} +.bs-docs-example .table, +.bs-docs-example .progress, +.bs-docs-example .well, +.bs-docs-example .alert, +.bs-docs-example .hero-unit, +.bs-docs-example .pagination, +.bs-docs-example .navbar, +.bs-docs-example > .nav, +.bs-docs-example blockquote { + margin-bottom: 5px; +} +.bs-docs-example .pagination { + margin-top: 0; +} +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + height: 90px; + overflow: hidden; /* cut the drop shadows off */ +} +.bs-navbar-top-example .navbar-fixed-top, +.bs-navbar-bottom-example .navbar-fixed-bottom { + margin-left: 0; + margin-right: 0; +} +.bs-navbar-top-example { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: -1px; + -webkit-border-radius: 0 4px 0 4px; + -moz-border-radius: 0 4px 0 4px; + border-radius: 0 4px 0 4px; +} +.bs-navbar-bottom-example { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} +form.bs-docs-example { + padding-bottom: 19px; +} + +/* Images */ +.bs-docs-example-images img { + margin: 10px; + display: inline-block; +} + +/* Tooltips */ +.bs-docs-tooltip-examples { + text-align: center; + margin: 0 0 10px; + list-style: none; +} +.bs-docs-tooltip-examples li { + display: inline; + padding: 0 10px; +} + +/* Popovers */ +.bs-docs-example-popover { + padding-bottom: 24px; + background-color: #f9f9f9; +} +.bs-docs-example-popover .popover { + position: relative; + display: block; + float: left; + width: 260px; + margin: 20px; +} + +/* Dropdowns */ +.bs-docs-example-submenus { + min-height: 180px; +} +.bs-docs-example-submenus > .pull-left + .pull-left { + margin-left: 20px; +} +.bs-docs-example-submenus .dropup > .dropdown-menu, +.bs-docs-example-submenus .dropdown > .dropdown-menu { + display: block; + position: static; + margin-bottom: 5px; + *width: 180px; +} + + + +/* Responsive docs +-------------------------------------------------- */ + +/* Utility classes table +------------------------- */ +.responsive-utilities th small { + display: block; + font-weight: normal; + color: #999; +} +.responsive-utilities tbody th { + font-weight: normal; +} +.responsive-utilities td { + text-align: center; +} +.responsive-utilities td.is-visible { + color: #468847; + background-color: #dff0d8 !important; +} +.responsive-utilities td.is-hidden { + color: #ccc; + background-color: #f9f9f9 !important; +} + +/* Responsive tests +------------------------- */ +.responsive-utilities-test { + margin-top: 5px; + margin-left: 0; + list-style: none; + overflow: hidden; /* clear floats */ +} +.responsive-utilities-test li { + position: relative; + float: left; + width: 25%; + height: 43px; + font-size: 14px; + font-weight: bold; + line-height: 43px; + color: #999; + text-align: center; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.responsive-utilities-test li + li { + margin-left: 10px; +} +.responsive-utilities-test span { + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.responsive-utilities-test span { + color: #468847; + background-color: #dff0d8; + border: 1px solid #d6e9c6; +} + + + +/* Sidenav for Docs +-------------------------------------------------- */ + +.bs-docs-sidenav { + width: 228px; + margin: 30px 0 0; + padding: 0; + background-color: #fff; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); + -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); + box-shadow: 0 1px 4px rgba(0,0,0,.065); +} +.bs-docs-sidenav > li > a { + display: block; + width: 190px \9; + margin: 0 0 -1px; + padding: 8px 14px; + border: 1px solid #e5e5e5; +} +.bs-docs-sidenav > li:first-child > a { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.bs-docs-sidenav > li:last-child > a { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.bs-docs-sidenav > .active > a { + position: relative; + z-index: 2; + padding: 9px 15px; + border: 0; + text-shadow: 0 1px 0 rgba(0,0,0,.15); + -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); +} +/* Chevrons */ +.bs-docs-sidenav .icon-chevron-right { + float: right; + margin-top: 2px; + margin-right: -6px; + opacity: .25; +} +.bs-docs-sidenav > li > a:hover { + background-color: #f5f5f5; +} +.bs-docs-sidenav a:hover .icon-chevron-right { + opacity: .5; +} +.bs-docs-sidenav .active .icon-chevron-right, +.bs-docs-sidenav .active a:hover .icon-chevron-right { + background-image: url(../img/glyphicons-halflings-white.png); + opacity: 1; +} +.bs-docs-sidenav.affix { + top: 40px; +} +.bs-docs-sidenav.affix-bottom { + position: absolute; + top: auto; + bottom: 270px; +} + + + + +/* Responsive +-------------------------------------------------- */ + +/* Desktop large +------------------------- */ +@media (min-width: 1200px) { + .bs-docs-container { + max-width: 970px; } - h2 small { - display: block; - line-height: 18px; + .bs-docs-sidenav { + width: 258px; } - h3 { - margin-top: 18px; + .bs-docs-sidenav > li > a { + width: 230px \9; /* Override the previous IE8-9 hack */ } +} - /* Adjust the jumbotron */ - .jumbotron h1, - .jumbotron p { - text-align: center; - margin-right: 0; - } - .jumbotron h1 { - font-size: 45px; - margin-right: 0; - } - .jumbotron p { - margin-right: 0; +/* Desktop +------------------------- */ +@media (max-width: 980px) { + /* Unfloat brand */ + body > .navbar-fixed-top .brand { + float: left; margin-left: 0; - font-size: 18px; - line-height: 24px; - } - .jumbotron .btn { - display: block; - font-size: 18px; - padding: 10px 14px; - margin: 0 auto 10px; - } - /* Masthead (home page jumbotron) */ - .masthead { - padding-top: 0; + padding-left: 10px; + padding-right: 10px; } - /* Don't space out quick links so much */ - .quick-links { - margin: 40px 0 0; - } - /* hide the bullets on mobile since our horizontal space is limited */ - .quick-links .divider { - display: none; + /* Inline-block quick links for more spacing */ + .quick-links li { + display: inline-block; + margin: 5px; } - /* center example sites */ - .example-sites { - margin-left: 0; + /* When affixed, space properly */ + .bs-docs-sidenav { + top: 0; + width: 218px; + margin-top: 30px; + margin-right: 0; } - .example-sites > li { - float: none; - display: block; - max-width: 280px; - margin: 0 auto 18px; - text-align: center; +} + +/* Tablet to desktop +------------------------- */ +@media (min-width: 768px) and (max-width: 979px) { + /* Remove any padding from the body */ + body { + padding-top: 0; } - .example-sites .thumbnail > img { - max-width: 270px; + /* Widen masthead and social buttons to fill body padding */ + .jumbotron { + margin-top: -20px; /* Offset bottom margin on .navbar */ } - - table code { - white-space: normal; - word-wrap: break-word; - word-break: break-all; + /* Adjust sidenav width */ + .bs-docs-sidenav { + width: 166px; + margin-top: 20px; } - - /* Modal example */ - .modal-example .modal { - position: relative; - top: auto; - right: auto; - bottom: auto; - left: auto; + .bs-docs-sidenav.affix { + top: 0; } - } - -@media (max-width: 768px) { - +/* Tablet +------------------------- */ +@media (max-width: 767px) { /* Remove any padding from the body */ body { padding-top: 0; } - /* Jumbotron buttons */ - .jumbotron .btn { - margin-bottom: 10px; - } - - /* Subnav */ - .subnav { - position: static; - top: auto; - z-index: auto; - width: auto; - height: auto; - background: #fff; /* whole background property since we use a background-image for gradient */ - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + /* Widen masthead and social buttons to fill body padding */ + .jumbotron { + padding: 40px 20px; + margin-top: -20px; /* Offset bottom margin on .navbar */ + margin-right: -20px; + margin-left: -20px; } - .subnav .nav > li { - float: none; + .masthead h1 { + font-size: 90px; } - .subnav .nav > li > a { - border: 0; + .masthead p, + .masthead .btn { + font-size: 24px; } - .subnav .nav > li + li > a { - border-top: 1px solid #e5e5e5; + .marketing .span4 { + margin-bottom: 40px; } - .subnav .nav > li:first-child > a, - .subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - } - - /* Popovers */ - .large-bird { - display: none; - } - .popover-well .popover-wrapper { - margin-left: 0; + .bs-docs-social { + margin: 0 -20px; } /* Space out the show-grid examples */ @@ -702,71 +943,122 @@ form.well { margin-bottom: 5px; } + /* Sidenav */ + .bs-docs-sidenav { + width: auto; + margin-bottom: 20px; + } + .bs-docs-sidenav.affix { + position: static; + width: auto; + top: 0; + } + /* Unfloat the back to top link in footer */ - .footer .pull-right { - float: none; + .footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; } .footer p { margin-bottom: 9px; } - } +/* Landscape phones +------------------------- */ +@media (max-width: 480px) { + /* Remove padding above jumbotron */ + body { + padding-top: 0; + } -@media (min-width: 480px) and (max-width: 768px) { + /* Change up some type stuff */ + h2 small { + display: block; + } - /* Scale down the jumbotron content */ + /* Downsize the jumbotrons */ .jumbotron h1 { - font-size: 54px; + font-size: 45px; } - .jumbotron p { - margin-right: 0; - margin-left: 0; + .jumbotron p, + .jumbotron .btn { + font-size: 18px; } - -} - - -@media (min-width: 768px) and (max-width: 980px) { - - /* Remove any padding from the body */ - body { - padding-top: 0; + .jumbotron .btn { + display: block; + margin: 0 auto; } - /* Scale down the jumbotron content */ - .jumbotron h1 { - font-size: 72px; + /* center align subhead text like the masthead */ + .subhead h1, + .subhead p { + text-align: center; } -} - - -@media (max-width: 980px) { + /* Marketing on home */ + .marketing h1 { + font-size: 30px; + } + .marketing-byline { + font-size: 18px; + } - /* Unfloat brand */ - .navbar-fixed-top .brand { - float: left; + /* center example sites */ + .example-sites { margin-left: 0; - padding-left: 10px; - padding-right: 10px; } - - /* Inline-block quick links for more spacing */ - .quick-links li { - display: inline-block; - margin: 5px; + .example-sites > li { + float: none; + display: block; + max-width: 280px; + margin: 0 auto 18px; + text-align: center; + } + .example-sites .thumbnail > img { + max-width: 270px; } -} - + /* Do our best to make tables work in narrow viewports */ + table code { + white-space: normal; + word-wrap: break-word; + word-break: break-all; + } -/* LARGE DESKTOP SCREENS */ -@media (min-width: 1210px) { + /* Examples: dropdowns */ + .bs-docs-example-submenus > .pull-left { + float: none; + clear: both; + } + .bs-docs-example-submenus > .pull-left, + .bs-docs-example-submenus > .pull-left + .pull-left { + margin-left: 0; + } + .bs-docs-example-submenus p { + margin-bottom: 0; + } + .bs-docs-example-submenus .dropup > .dropdown-menu, + .bs-docs-example-submenus .dropdown > .dropdown-menu { + margin-bottom: 10px; + float: none; + max-width: 180px; + } - /* Update subnav container */ - .subnav-fixed .nav { - width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ + /* Examples: modal */ + .modal-example .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; } + /* Tighten up footer */ + .footer { + padding-top: 20px; + padding-bottom: 20px; + } } diff --git a/docs/assets/ico/apple-touch-icon-114-precomposed.png b/docs/assets/ico/apple-touch-icon-114-precomposed.png new file mode 100644 index 00000000..790a64f7 Binary files /dev/null and b/docs/assets/ico/apple-touch-icon-114-precomposed.png differ diff --git a/docs/assets/ico/apple-touch-icon-144-precomposed.png b/docs/assets/ico/apple-touch-icon-144-precomposed.png new file mode 100644 index 00000000..6d0e463f Binary files /dev/null and b/docs/assets/ico/apple-touch-icon-144-precomposed.png differ diff --git a/docs/assets/ico/apple-touch-icon-57-precomposed.png b/docs/assets/ico/apple-touch-icon-57-precomposed.png new file mode 100644 index 00000000..4936cca8 Binary files /dev/null and b/docs/assets/ico/apple-touch-icon-57-precomposed.png differ diff --git a/docs/assets/ico/apple-touch-icon-72-precomposed.png b/docs/assets/ico/apple-touch-icon-72-precomposed.png new file mode 100644 index 00000000..b1165bdb Binary files /dev/null and b/docs/assets/ico/apple-touch-icon-72-precomposed.png differ diff --git a/docs/assets/ico/bootstrap-apple-114x114.png b/docs/assets/ico/bootstrap-apple-114x114.png deleted file mode 100644 index 4e6df51f..00000000 Binary files a/docs/assets/ico/bootstrap-apple-114x114.png and /dev/null differ diff --git a/docs/assets/ico/bootstrap-apple-57x57.png b/docs/assets/ico/bootstrap-apple-57x57.png deleted file mode 100644 index 030fdfbc..00000000 Binary files a/docs/assets/ico/bootstrap-apple-57x57.png and /dev/null differ diff --git a/docs/assets/ico/bootstrap-apple-72x72.png b/docs/assets/ico/bootstrap-apple-72x72.png deleted file mode 100644 index 2ab0a1d0..00000000 Binary files a/docs/assets/ico/bootstrap-apple-72x72.png and /dev/null differ diff --git a/docs/assets/ico/favicon.ico b/docs/assets/ico/favicon.ico index 3455c3fb..cb8dbdfc 100644 Binary files a/docs/assets/ico/favicon.ico and b/docs/assets/ico/favicon.ico differ diff --git a/docs/assets/ico/favicon.png b/docs/assets/ico/favicon.png new file mode 100644 index 00000000..073c13c0 Binary files /dev/null and b/docs/assets/ico/favicon.png differ diff --git a/docs/assets/img/bird.png b/docs/assets/img/bird.png deleted file mode 100644 index 903e4c78..00000000 Binary files a/docs/assets/img/bird.png and /dev/null differ diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg index 135c9bab..2d398982 100644 Binary files a/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg and b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg differ diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg index 704e5dfe..7a89371a 100644 Binary files a/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg and b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg differ diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg index 430fde2c..3638f156 100644 Binary files a/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg and b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg differ diff --git a/docs/assets/img/browsers.png b/docs/assets/img/browsers.png deleted file mode 100644 index 73b668d9..00000000 Binary files a/docs/assets/img/browsers.png and /dev/null differ diff --git a/docs/assets/img/bs-docs-bootstrap-features.png b/docs/assets/img/bs-docs-bootstrap-features.png new file mode 100644 index 00000000..7cd8501a Binary files /dev/null and b/docs/assets/img/bs-docs-bootstrap-features.png differ diff --git a/docs/assets/img/bs-docs-masthead-pattern.png b/docs/assets/img/bs-docs-masthead-pattern.png new file mode 100644 index 00000000..75c46a15 Binary files /dev/null and b/docs/assets/img/bs-docs-masthead-pattern.png differ diff --git a/docs/assets/img/bs-docs-responsive-illustrations.png b/docs/assets/img/bs-docs-responsive-illustrations.png new file mode 100644 index 00000000..77c8f18f Binary files /dev/null and b/docs/assets/img/bs-docs-responsive-illustrations.png differ diff --git a/docs/assets/img/bs-docs-twitter-github.png b/docs/assets/img/bs-docs-twitter-github.png new file mode 100644 index 00000000..06100f39 Binary files /dev/null and b/docs/assets/img/bs-docs-twitter-github.png differ diff --git a/docs/assets/img/example-diagram-01.png b/docs/assets/img/example-diagram-01.png deleted file mode 100644 index 2c07bf7f..00000000 Binary files a/docs/assets/img/example-diagram-01.png and /dev/null differ diff --git a/docs/assets/img/example-diagram-02.png b/docs/assets/img/example-diagram-02.png deleted file mode 100644 index 416d157e..00000000 Binary files a/docs/assets/img/example-diagram-02.png and /dev/null differ diff --git a/docs/assets/img/example-diagram-03.png b/docs/assets/img/example-diagram-03.png deleted file mode 100644 index df13fd5f..00000000 Binary files a/docs/assets/img/example-diagram-03.png and /dev/null differ diff --git a/docs/assets/img/example-sites/8020select.png b/docs/assets/img/example-sites/8020select.png new file mode 100644 index 00000000..e8eeeb22 Binary files /dev/null and b/docs/assets/img/example-sites/8020select.png differ diff --git a/docs/assets/img/example-sites/adoptahydrant.png b/docs/assets/img/example-sites/adoptahydrant.png new file mode 100644 index 00000000..ec918891 Binary files /dev/null and b/docs/assets/img/example-sites/adoptahydrant.png differ diff --git a/docs/assets/img/example-sites/bartop.png b/docs/assets/img/example-sites/bartop.png deleted file mode 100644 index ab483aa6..00000000 Binary files a/docs/assets/img/example-sites/bartop.png and /dev/null differ diff --git a/docs/assets/img/example-sites/breakingnews.png b/docs/assets/img/example-sites/breakingnews.png new file mode 100644 index 00000000..5a077856 Binary files /dev/null and b/docs/assets/img/example-sites/breakingnews.png differ diff --git a/docs/assets/img/example-sites/fleetio.png b/docs/assets/img/example-sites/fleetio.png index 8d975079..9207b0cb 100644 Binary files a/docs/assets/img/example-sites/fleetio.png and b/docs/assets/img/example-sites/fleetio.png differ diff --git a/docs/assets/img/example-sites/gathercontent.png b/docs/assets/img/example-sites/gathercontent.png new file mode 100644 index 00000000..92cd0ee2 Binary files /dev/null and b/docs/assets/img/example-sites/gathercontent.png differ diff --git a/docs/assets/img/example-sites/kippt.png b/docs/assets/img/example-sites/kippt.png index b2bb236d..7ea1742f 100644 Binary files a/docs/assets/img/example-sites/kippt.png and b/docs/assets/img/example-sites/kippt.png differ diff --git a/docs/assets/img/example-sites/railwayjs.png b/docs/assets/img/example-sites/railwayjs.png deleted file mode 100644 index 23fb1cf3..00000000 Binary files a/docs/assets/img/example-sites/railwayjs.png and /dev/null differ diff --git a/docs/assets/img/example-sites/soundready.png b/docs/assets/img/example-sites/soundready.png new file mode 100644 index 00000000..94e0e01b Binary files /dev/null and b/docs/assets/img/example-sites/soundready.png differ diff --git a/docs/assets/img/example-sites/totalwireframe.png b/docs/assets/img/example-sites/totalwireframe.png deleted file mode 100644 index 66a4e850..00000000 Binary files a/docs/assets/img/example-sites/totalwireframe.png and /dev/null differ diff --git a/docs/assets/img/examples/bootstrap-example-carousel.png b/docs/assets/img/examples/bootstrap-example-carousel.png new file mode 100644 index 00000000..a2f668ab Binary files /dev/null and b/docs/assets/img/examples/bootstrap-example-carousel.png differ diff --git a/docs/assets/img/examples/bootstrap-example-fluid.jpg b/docs/assets/img/examples/bootstrap-example-fluid.jpg index 151b987c..d616ba00 100644 Binary files a/docs/assets/img/examples/bootstrap-example-fluid.jpg and b/docs/assets/img/examples/bootstrap-example-fluid.jpg differ diff --git a/docs/assets/img/examples/bootstrap-example-hero.jpg b/docs/assets/img/examples/bootstrap-example-hero.jpg index cd4a3210..a9662d2b 100644 Binary files a/docs/assets/img/examples/bootstrap-example-hero.jpg and b/docs/assets/img/examples/bootstrap-example-hero.jpg differ diff --git a/docs/assets/img/examples/bootstrap-example-marketing-narrow.png b/docs/assets/img/examples/bootstrap-example-marketing-narrow.png new file mode 100644 index 00000000..a7ac9ef9 Binary files /dev/null and b/docs/assets/img/examples/bootstrap-example-marketing-narrow.png differ diff --git a/docs/assets/img/examples/bootstrap-example-signin.png b/docs/assets/img/examples/bootstrap-example-signin.png new file mode 100644 index 00000000..39210096 Binary files /dev/null and b/docs/assets/img/examples/bootstrap-example-signin.png differ diff --git a/docs/assets/img/examples/bootstrap-example-starter.jpg b/docs/assets/img/examples/bootstrap-example-starter.jpg index 09c8a066..3b1cbf9e 100644 Binary files a/docs/assets/img/examples/bootstrap-example-starter.jpg and b/docs/assets/img/examples/bootstrap-example-starter.jpg differ diff --git a/docs/assets/img/examples/bootstrap-example-sticky-footer.png b/docs/assets/img/examples/bootstrap-example-sticky-footer.png new file mode 100644 index 00000000..c2255044 Binary files /dev/null and b/docs/assets/img/examples/bootstrap-example-sticky-footer.png differ diff --git a/docs/assets/img/examples/browser-icon-chrome.png b/docs/assets/img/examples/browser-icon-chrome.png new file mode 100644 index 00000000..8c846c54 Binary files /dev/null and b/docs/assets/img/examples/browser-icon-chrome.png differ diff --git a/docs/assets/img/examples/browser-icon-firefox.png b/docs/assets/img/examples/browser-icon-firefox.png new file mode 100644 index 00000000..3dd68b11 Binary files /dev/null and b/docs/assets/img/examples/browser-icon-firefox.png differ diff --git a/docs/assets/img/examples/browser-icon-safari.png b/docs/assets/img/examples/browser-icon-safari.png new file mode 100644 index 00000000..7aaa29a7 Binary files /dev/null and b/docs/assets/img/examples/browser-icon-safari.png differ diff --git a/docs/assets/img/examples/slide-01.jpg b/docs/assets/img/examples/slide-01.jpg new file mode 100644 index 00000000..bedab7d8 Binary files /dev/null and b/docs/assets/img/examples/slide-01.jpg differ diff --git a/docs/assets/img/examples/slide-02.jpg b/docs/assets/img/examples/slide-02.jpg new file mode 100644 index 00000000..4ed12cc0 Binary files /dev/null and b/docs/assets/img/examples/slide-02.jpg differ diff --git a/docs/assets/img/examples/slide-03.jpg b/docs/assets/img/examples/slide-03.jpg new file mode 100644 index 00000000..37415da3 Binary files /dev/null and b/docs/assets/img/examples/slide-03.jpg differ diff --git a/docs/assets/img/github-16px.png b/docs/assets/img/github-16px.png deleted file mode 100644 index c99ab237..00000000 Binary files a/docs/assets/img/github-16px.png and /dev/null differ diff --git a/docs/assets/img/glyphicons-halflings-white.png b/docs/assets/img/glyphicons-halflings-white.png index a20760bf..3bf6484a 100644 Binary files a/docs/assets/img/glyphicons-halflings-white.png and b/docs/assets/img/glyphicons-halflings-white.png differ diff --git a/docs/assets/img/glyphicons-halflings.png b/docs/assets/img/glyphicons-halflings.png index 92d4445d..a9969993 100644 Binary files a/docs/assets/img/glyphicons-halflings.png and b/docs/assets/img/glyphicons-halflings.png differ diff --git a/docs/assets/img/glyphicons/glyphicons_009_magic.png b/docs/assets/img/glyphicons/glyphicons_009_magic.png deleted file mode 100644 index f1cfb378..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_009_magic.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_042_group.png b/docs/assets/img/glyphicons/glyphicons_042_group.png deleted file mode 100644 index be5c6f94..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_042_group.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_079_podium.png b/docs/assets/img/glyphicons/glyphicons_079_podium.png deleted file mode 100644 index 20b7c99b..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_079_podium.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_082_roundabout.png b/docs/assets/img/glyphicons/glyphicons_082_roundabout.png deleted file mode 100644 index e3a6487a..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_082_roundabout.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png b/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png deleted file mode 100644 index 751e3b71..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_163_iphone.png b/docs/assets/img/glyphicons/glyphicons_163_iphone.png deleted file mode 100644 index 926df7e5..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_163_iphone.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_214_resize_small.png b/docs/assets/img/glyphicons/glyphicons_214_resize_small.png deleted file mode 100644 index 707d9e03..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_214_resize_small.png and /dev/null differ diff --git a/docs/assets/img/glyphicons/glyphicons_266_book_open.png b/docs/assets/img/glyphicons/glyphicons_266_book_open.png deleted file mode 100644 index ab04b4a1..00000000 Binary files a/docs/assets/img/glyphicons/glyphicons_266_book_open.png and /dev/null differ diff --git a/docs/assets/img/grid-18px-masked.png b/docs/assets/img/grid-18px-masked.png deleted file mode 100644 index 1bc82b03..00000000 Binary files a/docs/assets/img/grid-18px-masked.png and /dev/null differ diff --git a/docs/assets/img/grid-baseline-20px.png b/docs/assets/img/grid-baseline-20px.png new file mode 100644 index 00000000..ce8c69ca Binary files /dev/null and b/docs/assets/img/grid-baseline-20px.png differ diff --git a/docs/assets/img/icon-css3.png b/docs/assets/img/icon-css3.png deleted file mode 100644 index 58e10723..00000000 Binary files a/docs/assets/img/icon-css3.png and /dev/null differ diff --git a/docs/assets/img/icon-github.png b/docs/assets/img/icon-github.png deleted file mode 100644 index 1a5fb781..00000000 Binary files a/docs/assets/img/icon-github.png and /dev/null differ diff --git a/docs/assets/img/icon-html5.png b/docs/assets/img/icon-html5.png deleted file mode 100644 index 1e878831..00000000 Binary files a/docs/assets/img/icon-html5.png and /dev/null differ diff --git a/docs/assets/img/icon-twitter.png b/docs/assets/img/icon-twitter.png deleted file mode 100644 index a4716545..00000000 Binary files a/docs/assets/img/icon-twitter.png and /dev/null differ diff --git a/docs/assets/img/less-logo-large.png b/docs/assets/img/less-logo-large.png index cb56637c..8f62ffbe 100644 Binary files a/docs/assets/img/less-logo-large.png and b/docs/assets/img/less-logo-large.png differ diff --git a/docs/assets/img/less-small.png b/docs/assets/img/less-small.png deleted file mode 100644 index 93ea597c..00000000 Binary files a/docs/assets/img/less-small.png and /dev/null differ diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png index 6ca0f078..a4bcbe30 100644 Binary files a/docs/assets/img/responsive-illustrations.png and b/docs/assets/img/responsive-illustrations.png differ diff --git a/docs/assets/js/README.md b/docs/assets/js/README.md index b58fa1d4..66903c71 100644 --- a/docs/assets/js/README.md +++ b/docs/assets/js/README.md @@ -17,7 +17,7 @@ To target a specific plugin, just include the plugins name as a namespace along --- -### PROGRAMATIC API +### PROGRAMMATIC API We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API. diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 732bed45..f6c7849c 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -6,11 +6,21 @@ $(function(){ + var $window = $(window) + // Disable certain links in docs $('section [href^=#]').click(function (e) { e.preventDefault() }) + // side bar + $('.bs-docs-sidenav').affix({ + offset: { + top: function () { return $window.width() <= 980 ? 290 : 210 } + , bottom: 270 + } + }) + // make code pretty window.prettyPrint && prettyPrint() @@ -21,51 +31,16 @@ $(this).parents('.add-on')[method]('active') }) - // position static twipsies for components page - if ($(".twipsies a").length) { - $(window).on('load resize', function () { - $(".twipsies a").each(function () { - $(this) - .tooltip({ - placement: $(this).attr('title') - , trigger: 'manual' - }) - .tooltip('show') - }) - }) - } - // add tipsies to grid for scaffolding - if ($('#grid-system').length) { - $('#grid-system').tooltip({ + if ($('#gridSystem').length) { + $('#gridSystem').tooltip({ selector: '.show-grid > div' , title: function () { return $(this).width() + 'px' } }) } - // fix sub nav on scroll - var $win = $(window) - , $nav = $('.subnav') - , navTop = $('.subnav').length && $('.subnav').offset().top - 40 - , isFixed = 0 - - processScroll() - - $win.on('scroll', processScroll) - - function processScroll() { - var i, scrollTop = $win.scrollTop() - if (scrollTop >= navTop && !isFixed) { - isFixed = 1 - $nav.addClass('subnav-fixed') - } else if (scrollTop <= navTop && isFixed) { - isFixed = 0 - $nav.removeClass('subnav-fixed') - } - } - // tooltip demo - $('.tooltip-demo.well').tooltip({ + $('.tooltip-demo').tooltip({ selector: "a[rel=tooltip]" }) @@ -114,7 +89,7 @@ }) // request built javascript - $('.download-btn').on('click', function () { + $('.download-btn .btn').on('click', function () { var css = $("#components.download input:checked") .map(function () { return this.value }) @@ -132,7 +107,7 @@ $.ajax({ type: 'POST' - , url: 'http://bootstrap.herokuapp.com' + , url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com' , dataType: 'jsonpi' , params: { js: js @@ -142,7 +117,6 @@ } }) }) - }) // Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi diff --git a/docs/assets/js/bootstrap-affix.js b/docs/assets/js/bootstrap-affix.js new file mode 100644 index 00000000..6020a19a --- /dev/null +++ b/docs/assets/js/bootstrap-affix.js @@ -0,0 +1,117 @@ +/* ========================================================== + * bootstrap-affix.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#affix + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) + this.$element = $(element) + this.checkPosition() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollHeight = $(document).height() + , scrollTop = this.$window.scrollTop() + , position = this.$element.offset() + , offset = this.options.offset + , offsetBottom = offset.bottom + , offsetTop = offset.top + , reset = 'affix affix-top affix-bottom' + , affix + + if (typeof offset != 'object') offsetBottom = offsetTop = offset + if (typeof offsetTop == 'function') offsetTop = offset.top() + if (typeof offsetBottom == 'function') offsetBottom = offset.bottom() + + affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? + false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? + 'bottom' : offsetTop != null && scrollTop <= offsetTop ? + 'top' : false + + if (this.affixed === affix) return + + this.affixed = affix + this.unpin = affix == 'bottom' ? position.top - scrollTop : null + + this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')) + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.affix + + $.fn.affix = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + /* AFFIX NO CONFLICT + * ================= */ + + $.fn.affix.noConflict = function () { + $.fn.affix = old + return this + } + + + /* AFFIX DATA-API + * ============== */ + + $(window).on('load', function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetBottom && (data.offset.bottom = data.offsetBottom) + data.offsetTop && (data.offset.top = data.offsetTop) + + $spy.affix(data) + }) + }) + + +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-alert.js b/docs/assets/js/bootstrap-alert.js index 2242dddc..5bc02644 100644 --- a/docs/assets/js/bootstrap-alert.js +++ b/docs/assets/js/bootstrap-alert.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alert.js v2.0.1 + * bootstrap-alert.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2012 Twitter, Inc. @@ -18,61 +18,59 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* ALERT CLASS DEFINITION * ====================== */ var dismiss = '[data-dismiss="alert"]' - , Alert = function ( el ) { + , Alert = function (el) { $(el).on('click', dismiss, this.close) } - Alert.prototype = { + Alert.prototype.close = function (e) { + var $this = $(this) + , selector = $this.attr('data-target') + , $parent - constructor: Alert + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } - , close: function ( e ) { - var $this = $(this) - , selector = $this.attr('data-target') - , $parent + $parent = $(selector) - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + e && e.preventDefault() - $parent = $(selector) - $parent.trigger('close') + $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) - e && e.preventDefault() + $parent.trigger(e = $.Event('close')) - $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) + if (e.isDefaultPrevented()) return - $parent - .trigger('close') - .removeClass('in') - - function removeElement() { - $parent - .trigger('closed') - .remove() - } + $parent.removeClass('in') - $.support.transition && $parent.hasClass('fade') ? - $parent.on($.support.transition.end, removeElement) : - removeElement() + function removeElement() { + $parent + .trigger('closed') + .remove() } + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : + removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ - $.fn.alert = function ( option ) { + var old = $.fn.alert + + $.fn.alert = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('alert') @@ -84,11 +82,18 @@ $.fn.alert.Constructor = Alert + /* ALERT NO CONFLICT + * ================= */ + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + /* ALERT DATA-API * ============== */ - $(function () { - $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) - }) + $(document).on('click.alert.data-api', dismiss, Alert.prototype.close) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-button.js b/docs/assets/js/bootstrap-button.js index a0e05354..39b83399 100644 --- a/docs/assets/js/bootstrap-button.js +++ b/docs/assets/js/bootstrap-button.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-button.js v2.0.1 + * bootstrap-button.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#buttons * ============================================================ * Copyright 2012 Twitter, Inc. @@ -17,58 +17,56 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ - var Button = function ( element, options ) { + var Button = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.button.defaults, options) } - Button.prototype = { - - constructor: Button + Button.prototype.setState = function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' - , setState: function ( state ) { - var d = 'disabled' - , $el = this.$element - , data = $el.data() - , val = $el.is('input') ? 'val' : 'html' + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) - state = state + 'Text' - data.resetText || $el.data('resetText', $el[val]()) + $el[val](data[state] || this.options[state]) - $el[val](data[state] || this.options[state]) - - // push to event loop to allow forms to submit - setTimeout(function () { - state == 'loadingText' ? - $el.addClass(d).attr(d, d) : - $el.removeClass(d).removeAttr(d) - }, 0) - } - - , toggle: function () { - var $parent = this.$element.parent('[data-toggle="buttons-radio"]') + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } - $parent && $parent - .find('.active') - .removeClass('active') + Button.prototype.toggle = function () { + var $parent = this.$element.closest('[data-toggle="buttons-radio"]') - this.$element.toggleClass('active') - } + $parent && $parent + .find('.active') + .removeClass('active') + this.$element.toggleClass('active') } /* BUTTON PLUGIN DEFINITION * ======================== */ - $.fn.button = function ( option ) { + var old = $.fn.button + + $.fn.button = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('button') @@ -86,13 +84,22 @@ $.fn.button.Constructor = Button + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + /* BUTTON DATA-API * =============== */ - $(function () { - $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { - $(e.currentTarget).button('toggle') - }) + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js index 810256e8..238ff428 100644 --- a/docs/assets/js/bootstrap-carousel.js +++ b/docs/assets/js/bootstrap-carousel.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-carousel.js v2.0.1 + * bootstrap-carousel.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#carousel * ========================================================== * Copyright 2012 Twitter, Inc. @@ -18,28 +18,34 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* CAROUSEL CLASS DEFINITION * ========================= */ var Carousel = function (element, options) { this.$element = $(element) - this.options = $.extend({}, $.fn.carousel.defaults, options) - this.options.slide && this.slide(this.options.slide) + this.options = options + this.options.pause == 'hover' && this.$element + .on('mouseenter', $.proxy(this.pause, this)) + .on('mouseleave', $.proxy(this.cycle, this)) } Carousel.prototype = { - cycle: function () { - this.interval = setInterval($.proxy(this.next, this), this.options.interval) + cycle: function (e) { + if (!e) this.paused = false + this.options.interval + && !this.paused + && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) return this } , to: function (pos) { - var $active = this.$element.find('.active') + var $active = this.$element.find('.item.active') , children = $active.parent().children() , activePos = children.index($active) , that = this @@ -59,7 +65,12 @@ return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) } - , pause: function () { + , pause: function (e) { + if (!e) this.paused = true + if (this.$element.find('.next, .prev').length && $.support.transition.end) { + this.$element.trigger($.support.transition.end) + this.cycle() + } clearInterval(this.interval) this.interval = null return this @@ -76,14 +87,13 @@ } , slide: function (type, next) { - var $active = this.$element.find('.active') + var $active = this.$element.find('.item.active') , $next = next || $active[type]() , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this - - if (!$next.length) return + , e this.sliding = true @@ -91,24 +101,32 @@ $next = $next.length ? $next : this.$element.find('.item')[fallback]() - if (!$.support.transition && this.$element.hasClass('slide')) { - this.$element.trigger('slide') - $active.removeClass('active') - $next.addClass('active') - this.sliding = false - this.$element.trigger('slid') - } else { + e = $.Event('slide', { + relatedTarget: $next[0] + }) + + if ($next.hasClass('active')) return + + if ($.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) - this.$element.trigger('slide') this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) that.sliding = false setTimeout(function () { that.$element.trigger('slid') }, 0) }) + } else { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return + $active.removeClass('active') + $next.addClass('active') + this.sliding = false + this.$element.trigger('slid') } isCycling && this.cycle() @@ -122,36 +140,46 @@ /* CAROUSEL PLUGIN DEFINITION * ========================== */ - $.fn.carousel = function ( option ) { + var old = $.fn.carousel + + $.fn.carousel = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('carousel') - , options = typeof option == 'object' && option + , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option) + , action = typeof option == 'string' ? option : options.slide if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (typeof option == 'number') data.to(option) - else if (typeof option == 'string' || (option = options.slide)) data[option]() - else data.cycle() + else if (action) data[action]() + else if (options.interval) data.cycle() }) } $.fn.carousel.defaults = { interval: 5000 + , pause: 'hover' } $.fn.carousel.Constructor = Carousel + /* CAROUSEL NO CONFLICT + * ==================== */ + + $.fn.carousel.noConflict = function () { + $.fn.carousel = old + return this + } + /* CAROUSEL DATA-API * ================= */ - $(function () { - $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) - $target.carousel(options) - e.preventDefault() - }) + $(document).on('click.carousel.data-api', '[data-slide]', function (e) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , options = $.extend({}, $target.data(), $this.data()) + $target.carousel(options) + e.preventDefault() }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-collapse.js b/docs/assets/js/bootstrap-collapse.js index d195efc7..6ac0191a 100644 --- a/docs/assets/js/bootstrap-collapse.js +++ b/docs/assets/js/bootstrap-collapse.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-collapse.js v2.0.1 + * bootstrap-collapse.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#collapse * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,16 +17,21 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { - var Collapse = function ( element, options ) { - this.$element = $(element) + "use strict"; // jshint ;_; + + + /* COLLAPSE PUBLIC CLASS DEFINITION + * ================================ */ + + var Collapse = function (element, options) { + this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) - if (this.options["parent"]) { - this.$parent = $(this.options["parent"]) + if (this.options.parent) { + this.$parent = $(this.options.parent) } this.options.toggle && this.toggle() @@ -42,31 +47,39 @@ } , show: function () { - var dimension = this.dimension() - , scroll = $.camelCase(['scroll', dimension].join('-')) - , actives = this.$parent && this.$parent.find('.in') + var dimension + , scroll + , actives , hasData + if (this.transitioning) return + + dimension = this.dimension() + scroll = $.camelCase(['scroll', dimension].join('-')) + actives = this.$parent && this.$parent.find('> .accordion-group > .in') + if (actives && actives.length) { hasData = actives.data('collapse') + if (hasData && hasData.transitioning) return actives.collapse('hide') hasData || actives.data('collapse', null) } this.$element[dimension](0) - this.transition('addClass', 'show', 'shown') - this.$element[dimension](this.$element[0][scroll]) - + this.transition('addClass', $.Event('show'), 'shown') + $.support.transition && this.$element[dimension](this.$element[0][scroll]) } , hide: function () { - var dimension = this.dimension() + var dimension + if (this.transitioning) return + dimension = this.dimension() this.reset(this.$element[dimension]()) - this.transition('removeClass', 'hide', 'hidden') + this.transition('removeClass', $.Event('hide'), 'hidden') this.$element[dimension](0) } - , reset: function ( size ) { + , reset: function (size) { var dimension = this.dimension() this.$element @@ -74,35 +87,45 @@ [dimension](size || 'auto') [0].offsetWidth - this.$element.addClass('collapse') + this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') + + return this } - , transition: function ( method, startEvent, completeEvent ) { + , transition: function (method, startEvent, completeEvent) { var that = this , complete = function () { - if (startEvent == 'show') that.reset() + if (startEvent.type == 'show') that.reset() + that.transitioning = 0 that.$element.trigger(completeEvent) } - this.$element - .trigger(startEvent) - [method]('in') + this.$element.trigger(startEvent) + + if (startEvent.isDefaultPrevented()) return + + this.transitioning = 1 + + this.$element[method]('in') $.support.transition && this.$element.hasClass('collapse') ? this.$element.one($.support.transition.end, complete) : complete() - } + } , toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']() - } + } } - /* COLLAPSIBLE PLUGIN DEFINITION - * ============================== */ - $.fn.collapse = function ( option ) { + /* COLLAPSE PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.collapse + + $.fn.collapse = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') @@ -119,18 +142,26 @@ $.fn.collapse.Constructor = Collapse - /* COLLAPSIBLE DATA-API + /* COLLAPSE NO CONFLICT * ==================== */ - $(function () { - $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) { - var $this = $(this), href - , target = $this.attr('data-target') - || e.preventDefault() - || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 - , option = $(target).data('collapse') ? 'toggle' : $this.data() - $(target).collapse(option) - }) + $.fn.collapse.noConflict = function () { + $.fn.collapse = old + return this + } + + + /* COLLAPSE DATA-API + * ================= */ + + $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { + var $this = $(this), href + , target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + , option = $(target).data('collapse') ? 'toggle' : $this.data() + $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') + $(target).collapse(option) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js index f1f6c33f..900355d5 100644 --- a/docs/assets/js/bootstrap-dropdown.js +++ b/docs/assets/js/bootstrap-dropdown.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-dropdown.js v2.0.1 + * bootstrap-dropdown.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#dropdowns * ============================================================ * Copyright 2012 Twitter, Inc. @@ -18,15 +18,16 @@ * ============================================================ */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* DROPDOWN CLASS DEFINITION * ========================= */ - var toggle = '[data-toggle="dropdown"]' - , Dropdown = function ( element ) { + var toggle = '[data-toggle=dropdown]' + , Dropdown = function (element) { var $el = $(element).on('click.dropdown.data-api', this.toggle) $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') @@ -37,39 +38,96 @@ constructor: Dropdown - , toggle: function ( e ) { + , toggle: function (e) { var $this = $(this) - , selector = $this.attr('data-target') , $parent , isActive - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + if ($this.is('.disabled, :disabled')) return - $parent = $(selector) - $parent.length || ($parent = $this.parent()) + $parent = getParent($this) isActive = $parent.hasClass('open') clearMenus() - !isActive && $parent.toggleClass('open') + + if (!isActive) { + $parent.toggleClass('open') + } + + $this.focus() return false } + , keydown: function (e) { + var $this + , $items + , $active + , $parent + , isActive + , index + + if (!/(38|40|27)/.test(e.keyCode)) return + + $this = $(this) + + e.preventDefault() + e.stopPropagation() + + if ($this.is('.disabled, :disabled')) return + + $parent = getParent($this) + + isActive = $parent.hasClass('open') + + if (!isActive || (isActive && e.keyCode == 27)) return $this.click() + + $items = $('[role=menu] li:not(.divider):visible a', $parent) + + if (!$items.length) return + + index = $items.index($items.filter(':focus')) + + if (e.keyCode == 38 && index > 0) index-- // up + if (e.keyCode == 40 && index < $items.length - 1) index++ // down + if (!~index) index = 0 + + $items + .eq(index) + .focus() + } + } function clearMenus() { - $(toggle).parent().removeClass('open') + $(toggle).each(function () { + getParent($(this)).removeClass('open') + }) + } + + function getParent($this) { + var selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = $(selector) + $parent.length || ($parent = $this.parent()) + + return $parent } /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( option ) { + var old = $.fn.dropdown + + $.fn.dropdown = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('dropdown') @@ -81,12 +139,23 @@ $.fn.dropdown.Constructor = Dropdown + /* DROPDOWN NO CONFLICT + * ==================== */ + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - $(function () { - $('html').on('click.dropdown.data-api', clearMenus) - $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) - }) + $(document) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js index bceb3035..689a414e 100644 --- a/docs/assets/js/bootstrap-modal.js +++ b/docs/assets/js/bootstrap-modal.js @@ -1,5 +1,5 @@ /* ========================================================= - * bootstrap-modal.js v2.0.1 + * bootstrap-modal.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#modals * ========================================================= * Copyright 2012 Twitter, Inc. @@ -18,17 +18,19 @@ * ========================================================= */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function ( content, options ) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } Modal.prototype = { @@ -41,19 +43,22 @@ , show: function () { var that = this + , e = $.Event('show') - if (this.isShown) return + this.$element.trigger(e) - $('body').addClass('modal-open') + if (this.isShown || e.isDefaultPrevented()) return this.isShown = true - this.$element.trigger('show') - escape.call(this) - backdrop.call(this, function () { + this.escape() + + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') - !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position + if (!that.$element.parent().length) { + that.$element.appendTo(document.body) //don't move modals dom position + } that.$element .show() @@ -62,118 +67,135 @@ that.$element[0].offsetWidth // force reflow } - that.$element.addClass('in') + that.$element + .addClass('in') + .attr('aria-hidden', false) + + that.enforceFocus() transition ? - that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : - that.$element.trigger('shown') + that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : + that.$element.focus().trigger('shown') }) } - , hide: function ( e ) { + , hide: function (e) { e && e.preventDefault() - if (!this.isShown) return - var that = this + + e = $.Event('hide') + + this.$element.trigger(e) + + if (!this.isShown || e.isDefaultPrevented()) return + this.isShown = false - $('body').removeClass('modal-open') + this.escape() - escape.call(this) + $(document).off('focusin.modal') this.$element - .trigger('hide') .removeClass('in') + .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? - hideWithTransition.call(this) : - hideModal.call(this) + this.hideWithTransition() : + this.hideModal() } - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - function hideWithTransition() { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - hideModal.call(that) - }, 500) + , enforceFocus: function () { + var that = this + $(document).on('focusin.modal', function (e) { + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) + } - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - hideModal.call(that) - }) - } + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + this.$element.on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.modal') + } + } - function hideModal( that ) { - this.$element - .hide() - .trigger('hidden') + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) + + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } - backdrop.call(this) - } + , hideModal: function (that) { + this.$element + .hide() + .trigger('hidden') - function backdrop( callback ) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' + this.backdrop() + } - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate + , removeBackdrop: function () { + this.$backdrop.remove() + this.$backdrop = null + } - this.$backdrop = $('
') - .appendTo(document.body) + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) - } + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + this.$backdrop = $('
') + .appendTo(document.body) - this.$backdrop.addClass('in') + this.$backdrop.click( + this.options.backdrop == 'static' ? + $.proxy(this.$element[0].focus, this.$element[0]) + : $.proxy(this.hide, this) + ) - doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : - callback() + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') + this.$backdrop.addClass('in') - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : - removeBackdrop.call(this) + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() - } else if (callback) { - callback() - } - } + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') - function removeBackdrop() { - this.$backdrop.remove() - this.$backdrop = null - } + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : + this.removeBackdrop() - function escape() { - var that = this - if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') - } + } else if (callback) { + callback() + } + } } /* MODAL PLUGIN DEFINITION * ======================= */ - $.fn.modal = function ( option ) { + var old = $.fn.modal + + $.fn.modal = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('modal') @@ -193,18 +215,31 @@ $.fn.modal.Constructor = Modal + /* MODAL NO CONFLICT + * ================= */ + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + /* MODAL DATA-API * ============== */ - $(function () { - $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) + $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + , href = $this.attr('href') + , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) - e.preventDefault() - $target.modal(option) - }) + e.preventDefault() + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js index 924844e8..1a4f532a 100644 --- a/docs/assets/js/bootstrap-popover.js +++ b/docs/assets/js/bootstrap-popover.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-popover.js v2.0.1 + * bootstrap-popover.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#popovers * =========================================================== * Copyright 2012 Twitter, Inc. @@ -18,14 +18,19 @@ * =========================================================== */ -!function( $ ) { +!function ($) { - "use strict" + "use strict"; // jshint ;_; - var Popover = function ( element, options ) { + + /* POPOVER PUBLIC CLASS DEFINITION + * =============================== */ + + var Popover = function (element, options) { this.init('popover', element, options) } + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js ========================================== */ @@ -38,8 +43,8 @@ , title = this.getTitle() , content = this.getContent() - $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title) - $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content) + $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) + $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') } @@ -56,25 +61,29 @@ content = $e.attr('data-content') || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) - content = content.toString().replace(/(^\s*|\s*$)/, "") - return content } - , tip: function() { + , tip: function () { if (!this.$tip) { this.$tip = $(this.options.template) } return this.$tip } + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) + } + }) /* POPOVER PLUGIN DEFINITION * ======================= */ - $.fn.popover = function ( option ) { + var old = $.fn.popover + + $.fn.popover = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('popover') @@ -88,8 +97,18 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' - , template: '

' + , template: '

' }) -}( window.jQuery ); \ No newline at end of file + + /* POPOVER NO CONFLICT + * =================== */ + + $.fn.popover.noConflict = function () { + $.fn.popover = old + return this + } + +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js index 5f09cfe8..07a5c3a5 100644 --- a/docs/assets/js/bootstrap-scrollspy.js +++ b/docs/assets/js/bootstrap-scrollspy.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-scrollspy.js v2.0.1 + * bootstrap-scrollspy.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#scrollspy * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,23 +17,25 @@ * limitations under the License. * ============================================================== */ -!function ( $ ) { - "use strict" +!function ($) { - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + "use strict"; // jshint ;_; - function ScrollSpy( element, options) { + + /* SCROLLSPY CLASS DEFINITION + * ========================== */ + + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' - this.$body = $('body').on('click.scroll.data-api', this.selector, process) + this.$body = $('body') this.refresh() this.process() } @@ -43,25 +45,43 @@ constructor: ScrollSpy , refresh: function () { - this.targets = this.$body + var self = this + , $targets + + this.offsets = $([]) + this.targets = $([]) + + $targets = this.$body .find(this.selector) .map(function () { - var href = $(this).attr('href') - return /^#\w/.test(href) && $(href).length ? href : null + var $el = $(this) + , href = $el.data('target') || $el.attr('href') + , $href = /^#\w/.test(href) && $(href) + return ( $href + && $href.length + && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null + }) + .sort(function (a, b) { return a[0] - b[0] }) + .each(function () { + self.offsets.push(this[0]) + self.targets.push(this[1]) }) - - this.offsets = $.map(this.targets, function (id) { - return $(id).position().top - }) } , process: function () { var scrollTop = this.$scrollElement.scrollTop() + this.options.offset + , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight + , maxScroll = scrollHeight - this.$scrollElement.height() , offsets = this.offsets , targets = this.targets , activeTarget = this.activeTarget , i + if (scrollTop >= maxScroll) { + return activeTarget != (i = targets.last()[0]) + && this.activate ( i ) + } + for (i = offsets.length; i--;) { activeTarget != targets[i] && scrollTop >= offsets[i] @@ -72,21 +92,27 @@ , activate: function (target) { var active + , selector this.activeTarget = target - this.$body - .find(this.selector).parent('.active') + $(this.selector) + .parent('.active') .removeClass('active') - active = this.$body - .find(this.selector + '[href="' + target + '"]') + selector = this.selector + + '[data-target="' + target + '"],' + + this.selector + '[href="' + target + '"]' + + active = $(selector) .parent('li') .addClass('active') - if ( active.parent('.dropdown-menu') ) { - active.closest('li.dropdown').addClass('active') + if (active.parent('.dropdown-menu').length) { + active = active.closest('li.dropdown').addClass('active') } + + active.trigger('activate') } } @@ -95,7 +121,9 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + var old = $.fn.scrollspy + + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -112,14 +140,23 @@ } + /* SCROLLSPY NO CONFLICT + * ===================== */ + + $.fn.scrollspy.noConflict = function () { + $.fn.scrollspy = old + return this + } + + /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) }) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-tab.js b/docs/assets/js/bootstrap-tab.js index 26c9ece7..84d4834a 100644 --- a/docs/assets/js/bootstrap-tab.js +++ b/docs/assets/js/bootstrap-tab.js @@ -1,5 +1,5 @@ /* ======================================================== - * bootstrap-tab.js v2.0.1 + * bootstrap-tab.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2012 Twitter, Inc. @@ -18,14 +18,15 @@ * ======================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } @@ -39,6 +40,7 @@ , selector = $this.attr('data-target') , previous , $target + , e if (!selector) { selector = $this.attr('href') @@ -47,13 +49,16 @@ if ( $this.parent('li').hasClass('active') ) return - previous = $ul.find('.active a').last()[0] + previous = $ul.find('.active:last a')[0] - $this.trigger({ - type: 'show' - , relatedTarget: previous + e = $.Event('show', { + relatedTarget: previous }) + $this.trigger(e) + + if (e.isDefaultPrevented()) return + $target = $(selector) this.activate($this.parent('li'), $ul) @@ -105,6 +110,8 @@ /* TAB PLUGIN DEFINITION * ===================== */ + var old = $.fn.tab + $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) @@ -117,14 +124,21 @@ $.fn.tab.Constructor = Tab + /* TAB NO CONFLICT + * =============== */ + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + /* TAB DATA-API * ============ */ - $(function () { - $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { - e.preventDefault() - $(this).tab('show') - }) + $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-tooltip.js b/docs/assets/js/bootstrap-tooltip.js index d76e51e8..a08952a4 100644 --- a/docs/assets/js/bootstrap-tooltip.js +++ b/docs/assets/js/bootstrap-tooltip.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-tooltip.js v2.0.1 + * bootstrap-tooltip.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tooltips * Inspired by the original jQuery.tipsy by Jason Frame * =========================================================== @@ -18,14 +18,16 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* TOOLTIP PUBLIC CLASS DEFINITION * =============================== */ - var Tooltip = function ( element, options ) { + var Tooltip = function (element, options) { this.init('tooltip', element, options) } @@ -33,7 +35,7 @@ constructor: Tooltip - , init: function ( type, element, options ) { + , init: function (type, element, options) { var eventIn , eventOut @@ -42,11 +44,13 @@ this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? @@ -54,7 +58,7 @@ this.fixTitle() } - , getOptions: function ( options ) { + , getOptions: function (options) { options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) if (options.delay && typeof options.delay == 'number') { @@ -67,34 +71,28 @@ return options } - , enter: function ( e ) { + , enter: function (e) { var self = $(e.currentTarget)[this.type](this._options).data(this.type) - if (!self.options.delay || !self.options.delay.show) { - self.show() - } else { - self.hoverState = 'in' - setTimeout(function() { - if (self.hoverState == 'in') { - self.show() - } - }, self.options.delay.show) - } + if (!self.options.delay || !self.options.delay.show) return self.show() + + clearTimeout(this.timeout) + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) } - , leave: function ( e ) { + , leave: function (e) { var self = $(e.currentTarget)[this.type](this._options).data(this.type) - if (!self.options.delay || !self.options.delay.hide) { - self.hide() - } else { - self.hoverState = 'out' - setTimeout(function() { - if (self.hoverState == 'out') { - self.hide() - } - }, self.options.delay.hide) - } + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) } , show: function () { @@ -121,9 +119,9 @@ inside = /in/.test(placement) $tip - .remove() + .detach() .css({ top: 0, left: 0, display: 'block' }) - .appendTo(inside ? this.$element : document.body) + .insertAfter(this.$element) pos = this.getPosition(inside) @@ -146,7 +144,7 @@ } $tip - .css(tp) + .offset(tp) .addClass(placement) .addClass('in') } @@ -154,7 +152,9 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.tooltip-inner').html(this.getTitle()) + , title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) $tip.removeClass('fade in top bottom left right') } @@ -166,18 +166,20 @@ function removeWithAnimation() { var timeout = setTimeout(function () { - $tip.off($.support.transition.end).remove() + $tip.off($.support.transition.end).detach() }, 500) $tip.one($.support.transition.end, function () { clearTimeout(timeout) - $tip.remove() + $tip.detach() }) } $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : - $tip.remove() + $tip.detach() + + return this } , fixTitle: function () { @@ -206,8 +208,6 @@ title = $e.attr('data-original-title') || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) - title = title.toString().replace(/(^\s*|\s*$)/, "") - return title } @@ -235,8 +235,13 @@ this.enabled = !this.enabled } - , toggle: function () { - this[this.tip().hasClass('in') ? 'hide' : 'show']() + , toggle: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + self[self.tip().hasClass('in') ? 'hide' : 'show']() + } + + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) } } @@ -245,6 +250,8 @@ /* TOOLTIP PLUGIN DEFINITION * ========================= */ + var old = $.fn.tooltip + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) @@ -259,12 +266,22 @@ $.fn.tooltip.defaults = { animation: true - , delay: 0 - , selector: false , placement: 'top' + , selector: false + , template: '
' , trigger: 'hover' , title: '' - , template: '
' + , delay: 0 + , html: false + } + + + /* TOOLTIP NO CONFLICT + * =================== */ + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this } -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-transition.js b/docs/assets/js/bootstrap-transition.js index 52196c40..b0f12c26 100644 --- a/docs/assets/js/bootstrap-transition.js +++ b/docs/assets/js/bootstrap-transition.js @@ -1,5 +1,5 @@ /* =================================================== - * bootstrap-transition.js v2.0.1 + * bootstrap-transition.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#transitions * =================================================== * Copyright 2012 Twitter, Inc. @@ -17,35 +17,44 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - $(function () { +!function ($) { + + "use strict"; // jshint ;_; - "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ + /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) + * ======================================================= */ + + $(function () { $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - - return support && { - end: (function () { - var transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" + + var transitionEnd = (function () { + + var el = document.createElement('bootstrap') + , transEndEventNames = { + 'WebkitTransition' : 'webkitTransitionEnd' + , 'MozTransition' : 'transitionend' + , 'OTransition' : 'oTransitionEnd otransitionend' + , 'transition' : 'transitionend' + } + , name + + for (name in transEndEventNames){ + if (el.style[name] !== undefined) { + return transEndEventNames[name] } - return transitionEnd - }()) + } + + }()) + + return transitionEnd && { + end: transitionEnd } + })() }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-typeahead.js b/docs/assets/js/bootstrap-typeahead.js index 50315595..088e7ce9 100644 --- a/docs/assets/js/bootstrap-typeahead.js +++ b/docs/assets/js/bootstrap-typeahead.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-typeahead.js v2.0.1 + * bootstrap-typeahead.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#typeahead * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,18 +17,24 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function($){ - var Typeahead = function ( element, options ) { + "use strict"; // jshint ;_; + + + /* TYPEAHEAD PUBLIC CLASS DEFINITION + * ================================= */ + + var Typeahead = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter - this.$menu = $(this.options.menu).appendTo('body') + this.updater = this.options.updater || this.updater this.source = this.options.source + this.$menu = $(this.options.menu) this.shown = false this.listen() } @@ -39,21 +45,29 @@ , select: function () { var val = this.$menu.find('.active').attr('data-value') - this.$element.val(val) + this.$element + .val(this.updater(val)) + .change() return this.hide() } + , updater: function (item) { + return item + } + , show: function () { - var pos = $.extend({}, this.$element.offset(), { + var pos = $.extend({}, this.$element.position(), { height: this.$element[0].offsetHeight }) - this.$menu.css({ - top: pos.top + pos.height - , left: pos.left - }) + this.$menu + .insertAfter(this.$element) + .css({ + top: pos.top + pos.height + , left: pos.left + }) + .show() - this.$menu.show() this.shown = true return this } @@ -65,18 +79,24 @@ } , lookup: function (event) { - var that = this - , items - , q + var items this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } - items = $.grep(this.source, function (item) { - if (that.matcher(item)) return item + items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source + + return items ? this.process(items) : this + } + + , process: function (items) { + var that = this + + items = $.grep(items, function (item) { + return that.matcher(item) }) items = this.sorter(items) @@ -108,7 +128,8 @@ } , highlighter: function (item) { - return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) { + var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') + return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '' + match + '' }) } @@ -155,8 +176,8 @@ .on('keypress', $.proxy(this.keypress, this)) .on('keyup', $.proxy(this.keyup, this)) - if ($.browser.webkit || $.browser.msie) { - this.$element.on('keydown', $.proxy(this.keypress, this)) + if (this.eventSupported('keydown')) { + this.$element.on('keydown', $.proxy(this.keydown, this)) } this.$menu @@ -164,33 +185,16 @@ .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } - , keyup: function (e) { - e.stopPropagation() - e.preventDefault() - - switch(e.keyCode) { - case 40: // down arrow - case 38: // up arrow - break - - case 9: // tab - case 13: // enter - if (!this.shown) return - this.select() - break - - case 27: // escape - this.hide() - break - - default: - this.lookup() + , eventSupported: function(eventName) { + var isSupported = eventName in this.$element + if (!isSupported) { + this.$element.setAttribute(eventName, 'return;') + isSupported = typeof this.$element[eventName] === 'function' } + return isSupported + } - } - - , keypress: function (e) { - e.stopPropagation() + , move: function (e) { if (!this.shown) return switch(e.keyCode) { @@ -210,12 +214,50 @@ this.next() break } + + e.stopPropagation() } - , blur: function (e) { - var that = this + , keydown: function (e) { + this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) + this.move(e) + } + + , keypress: function (e) { + if (this.suppressKeyPressRepeat) return + this.move(e) + } + + , keyup: function (e) { + switch(e.keyCode) { + case 40: // down arrow + case 38: // up arrow + case 16: // shift + case 17: // ctrl + case 18: // alt + break + + case 9: // tab + case 13: // enter + if (!this.shown) return + this.select() + break + + case 27: // escape + if (!this.shown) return + this.hide() + break + + default: + this.lookup() + } + e.stopPropagation() e.preventDefault() + } + + , blur: function (e) { + var that = this setTimeout(function () { that.hide() }, 150) } @@ -236,7 +278,9 @@ /* TYPEAHEAD PLUGIN DEFINITION * =========================== */ - $.fn.typeahead = function ( option ) { + var old = $.fn.typeahead + + $.fn.typeahead = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('typeahead') @@ -251,21 +295,29 @@ , items: 8 , menu: '
    ' , item: '
    • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead + /* TYPEAHEAD NO CONFLICT + * =================== */ + + $.fn.typeahead.noConflict = function () { + $.fn.typeahead = old + return this + } + + /* TYPEAHEAD DATA-API * ================== */ - $(function () { - $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { - var $this = $(this) - if ($this.data('typeahead')) return - e.preventDefault() - $this.typeahead($this.data()) - }) + $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + e.preventDefault() + $this.typeahead($this.data()) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js new file mode 100644 index 00000000..6c15a583 --- /dev/null +++ b/docs/assets/js/bootstrap.js @@ -0,0 +1,2159 @@ +/* =================================================== + * bootstrap-transition.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#transitions + * =================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) + * ======================================================= */ + + $(function () { + + $.support.transition = (function () { + + var transitionEnd = (function () { + + var el = document.createElement('bootstrap') + , transEndEventNames = { + 'WebkitTransition' : 'webkitTransitionEnd' + , 'MozTransition' : 'transitionend' + , 'OTransition' : 'oTransitionEnd otransitionend' + , 'transition' : 'transitionend' + } + , name + + for (name in transEndEventNames){ + if (el.style[name] !== undefined) { + return transEndEventNames[name] + } + } + + }()) + + return transitionEnd && { + end: transitionEnd + } + + })() + + }) + +}(window.jQuery);/* ========================================================== + * bootstrap-alert.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#alerts + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* ALERT CLASS DEFINITION + * ====================== */ + + var dismiss = '[data-dismiss="alert"]' + , Alert = function (el) { + $(el).on('click', dismiss, this.close) + } + + Alert.prototype.close = function (e) { + var $this = $(this) + , selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = $(selector) + + e && e.preventDefault() + + $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) + + $parent.trigger(e = $.Event('close')) + + if (e.isDefaultPrevented()) return + + $parent.removeClass('in') + + function removeElement() { + $parent + .trigger('closed') + .remove() + } + + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : + removeElement() + } + + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.alert + + $.fn.alert = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.alert.Constructor = Alert + + + /* ALERT NO CONFLICT + * ================= */ + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + + /* ALERT DATA-API + * ============== */ + + $(document).on('click.alert.data-api', dismiss, Alert.prototype.close) + +}(window.jQuery);/* ============================================================ + * bootstrap-button.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#buttons + * ============================================================ + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* BUTTON PUBLIC CLASS DEFINITION + * ============================== */ + + var Button = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, $.fn.button.defaults, options) + } + + Button.prototype.setState = function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' + + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) + + $el[val](data[state] || this.options[state]) + + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } + + Button.prototype.toggle = function () { + var $parent = this.$element.closest('[data-toggle="buttons-radio"]') + + $parent && $parent + .find('.active') + .removeClass('active') + + this.$element.toggleClass('active') + } + + + /* BUTTON PLUGIN DEFINITION + * ======================== */ + + var old = $.fn.button + + $.fn.button = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('button') + , options = typeof option == 'object' && option + if (!data) $this.data('button', (data = new Button(this, options))) + if (option == 'toggle') data.toggle() + else if (option) data.setState(option) + }) + } + + $.fn.button.defaults = { + loadingText: 'loading...' + } + + $.fn.button.Constructor = Button + + + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + + /* BUTTON DATA-API + * =============== */ + + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') + }) + +}(window.jQuery);/* ========================================================== + * bootstrap-carousel.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#carousel + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* CAROUSEL CLASS DEFINITION + * ========================= */ + + var Carousel = function (element, options) { + this.$element = $(element) + this.options = options + this.options.pause == 'hover' && this.$element + .on('mouseenter', $.proxy(this.pause, this)) + .on('mouseleave', $.proxy(this.cycle, this)) + } + + Carousel.prototype = { + + cycle: function (e) { + if (!e) this.paused = false + this.options.interval + && !this.paused + && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) + return this + } + + , to: function (pos) { + var $active = this.$element.find('.item.active') + , children = $active.parent().children() + , activePos = children.index($active) + , that = this + + if (pos > (children.length - 1) || pos < 0) return + + if (this.sliding) { + return this.$element.one('slid', function () { + that.to(pos) + }) + } + + if (activePos == pos) { + return this.pause().cycle() + } + + return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) + } + + , pause: function (e) { + if (!e) this.paused = true + if (this.$element.find('.next, .prev').length && $.support.transition.end) { + this.$element.trigger($.support.transition.end) + this.cycle() + } + clearInterval(this.interval) + this.interval = null + return this + } + + , next: function () { + if (this.sliding) return + return this.slide('next') + } + + , prev: function () { + if (this.sliding) return + return this.slide('prev') + } + + , slide: function (type, next) { + var $active = this.$element.find('.item.active') + , $next = next || $active[type]() + , isCycling = this.interval + , direction = type == 'next' ? 'left' : 'right' + , fallback = type == 'next' ? 'first' : 'last' + , that = this + , e + + this.sliding = true + + isCycling && this.pause() + + $next = $next.length ? $next : this.$element.find('.item')[fallback]() + + e = $.Event('slide', { + relatedTarget: $next[0] + }) + + if ($next.hasClass('active')) return + + if ($.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return + $next.addClass(type) + $next[0].offsetWidth // force reflow + $active.addClass(direction) + $next.addClass(direction) + this.$element.one($.support.transition.end, function () { + $next.removeClass([type, direction].join(' ')).addClass('active') + $active.removeClass(['active', direction].join(' ')) + that.sliding = false + setTimeout(function () { that.$element.trigger('slid') }, 0) + }) + } else { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return + $active.removeClass('active') + $next.addClass('active') + this.sliding = false + this.$element.trigger('slid') + } + + isCycling && this.cycle() + + return this + } + + } + + + /* CAROUSEL PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.carousel + + $.fn.carousel = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('carousel') + , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option) + , action = typeof option == 'string' ? option : options.slide + if (!data) $this.data('carousel', (data = new Carousel(this, options))) + if (typeof option == 'number') data.to(option) + else if (action) data[action]() + else if (options.interval) data.cycle() + }) + } + + $.fn.carousel.defaults = { + interval: 5000 + , pause: 'hover' + } + + $.fn.carousel.Constructor = Carousel + + + /* CAROUSEL NO CONFLICT + * ==================== */ + + $.fn.carousel.noConflict = function () { + $.fn.carousel = old + return this + } + + /* CAROUSEL DATA-API + * ================= */ + + $(document).on('click.carousel.data-api', '[data-slide]', function (e) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , options = $.extend({}, $target.data(), $this.data()) + $target.carousel(options) + e.preventDefault() + }) + +}(window.jQuery);/* ============================================================= + * bootstrap-collapse.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#collapse + * ============================================================= + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* COLLAPSE PUBLIC CLASS DEFINITION + * ================================ */ + + var Collapse = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, $.fn.collapse.defaults, options) + + if (this.options.parent) { + this.$parent = $(this.options.parent) + } + + this.options.toggle && this.toggle() + } + + Collapse.prototype = { + + constructor: Collapse + + , dimension: function () { + var hasWidth = this.$element.hasClass('width') + return hasWidth ? 'width' : 'height' + } + + , show: function () { + var dimension + , scroll + , actives + , hasData + + if (this.transitioning) return + + dimension = this.dimension() + scroll = $.camelCase(['scroll', dimension].join('-')) + actives = this.$parent && this.$parent.find('> .accordion-group > .in') + + if (actives && actives.length) { + hasData = actives.data('collapse') + if (hasData && hasData.transitioning) return + actives.collapse('hide') + hasData || actives.data('collapse', null) + } + + this.$element[dimension](0) + this.transition('addClass', $.Event('show'), 'shown') + $.support.transition && this.$element[dimension](this.$element[0][scroll]) + } + + , hide: function () { + var dimension + if (this.transitioning) return + dimension = this.dimension() + this.reset(this.$element[dimension]()) + this.transition('removeClass', $.Event('hide'), 'hidden') + this.$element[dimension](0) + } + + , reset: function (size) { + var dimension = this.dimension() + + this.$element + .removeClass('collapse') + [dimension](size || 'auto') + [0].offsetWidth + + this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') + + return this + } + + , transition: function (method, startEvent, completeEvent) { + var that = this + , complete = function () { + if (startEvent.type == 'show') that.reset() + that.transitioning = 0 + that.$element.trigger(completeEvent) + } + + this.$element.trigger(startEvent) + + if (startEvent.isDefaultPrevented()) return + + this.transitioning = 1 + + this.$element[method]('in') + + $.support.transition && this.$element.hasClass('collapse') ? + this.$element.one($.support.transition.end, complete) : + complete() + } + + , toggle: function () { + this[this.$element.hasClass('in') ? 'hide' : 'show']() + } + + } + + + /* COLLAPSE PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.collapse + + $.fn.collapse = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('collapse') + , options = typeof option == 'object' && option + if (!data) $this.data('collapse', (data = new Collapse(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.collapse.defaults = { + toggle: true + } + + $.fn.collapse.Constructor = Collapse + + + /* COLLAPSE NO CONFLICT + * ==================== */ + + $.fn.collapse.noConflict = function () { + $.fn.collapse = old + return this + } + + + /* COLLAPSE DATA-API + * ================= */ + + $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { + var $this = $(this), href + , target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + , option = $(target).data('collapse') ? 'toggle' : $this.data() + $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') + $(target).collapse(option) + }) + +}(window.jQuery);/* ============================================================ + * bootstrap-dropdown.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#dropdowns + * ============================================================ + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* DROPDOWN CLASS DEFINITION + * ========================= */ + + var toggle = '[data-toggle=dropdown]' + , Dropdown = function (element) { + var $el = $(element).on('click.dropdown.data-api', this.toggle) + $('html').on('click.dropdown.data-api', function () { + $el.parent().removeClass('open') + }) + } + + Dropdown.prototype = { + + constructor: Dropdown + + , toggle: function (e) { + var $this = $(this) + , $parent + , isActive + + if ($this.is('.disabled, :disabled')) return + + $parent = getParent($this) + + isActive = $parent.hasClass('open') + + clearMenus() + + if (!isActive) { + $parent.toggleClass('open') + } + + $this.focus() + + return false + } + + , keydown: function (e) { + var $this + , $items + , $active + , $parent + , isActive + , index + + if (!/(38|40|27)/.test(e.keyCode)) return + + $this = $(this) + + e.preventDefault() + e.stopPropagation() + + if ($this.is('.disabled, :disabled')) return + + $parent = getParent($this) + + isActive = $parent.hasClass('open') + + if (!isActive || (isActive && e.keyCode == 27)) return $this.click() + + $items = $('[role=menu] li:not(.divider):visible a', $parent) + + if (!$items.length) return + + index = $items.index($items.filter(':focus')) + + if (e.keyCode == 38 && index > 0) index-- // up + if (e.keyCode == 40 && index < $items.length - 1) index++ // down + if (!~index) index = 0 + + $items + .eq(index) + .focus() + } + + } + + function clearMenus() { + $(toggle).each(function () { + getParent($(this)).removeClass('open') + }) + } + + function getParent($this) { + var selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = $(selector) + $parent.length || ($parent = $this.parent()) + + return $parent + } + + + /* DROPDOWN PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.dropdown + + $.fn.dropdown = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('dropdown') + if (!data) $this.data('dropdown', (data = new Dropdown(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.dropdown.Constructor = Dropdown + + + /* DROPDOWN NO CONFLICT + * ==================== */ + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + + /* APPLY TO STANDARD DROPDOWN ELEMENTS + * =================================== */ + + $(document) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) + +}(window.jQuery);/* ========================================================= + * bootstrap-modal.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#modals + * ========================================================= + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================= */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* MODAL CLASS DEFINITION + * ====================== */ + + var Modal = function (element, options) { + this.options = options + this.$element = $(element) + .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + this.options.remote && this.$element.find('.modal-body').load(this.options.remote) + } + + Modal.prototype = { + + constructor: Modal + + , toggle: function () { + return this[!this.isShown ? 'show' : 'hide']() + } + + , show: function () { + var that = this + , e = $.Event('show') + + this.$element.trigger(e) + + if (this.isShown || e.isDefaultPrevented()) return + + this.isShown = true + + this.escape() + + this.backdrop(function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + if (!that.$element.parent().length) { + that.$element.appendTo(document.body) //don't move modals dom position + } + + that.$element + .show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element + .addClass('in') + .attr('aria-hidden', false) + + that.enforceFocus() + + transition ? + that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : + that.$element.focus().trigger('shown') + + }) + } + + , hide: function (e) { + e && e.preventDefault() + + var that = this + + e = $.Event('hide') + + this.$element.trigger(e) + + if (!this.isShown || e.isDefaultPrevented()) return + + this.isShown = false + + this.escape() + + $(document).off('focusin.modal') + + this.$element + .removeClass('in') + .attr('aria-hidden', true) + + $.support.transition && this.$element.hasClass('fade') ? + this.hideWithTransition() : + this.hideModal() + } + + , enforceFocus: function () { + var that = this + $(document).on('focusin.modal', function (e) { + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) + } + + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + this.$element.on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.modal') + } + } + + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) + + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } + + , hideModal: function (that) { + this.$element + .hide() + .trigger('hidden') + + this.backdrop() + } + + , removeBackdrop: function () { + this.$backdrop.remove() + this.$backdrop = null + } + + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
    ') + .appendTo(document.body) + + this.$backdrop.click( + this.options.backdrop == 'static' ? + $.proxy(this.$element[0].focus, this.$element[0]) + : $.proxy(this.hide, this) + ) + + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() + + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : + this.removeBackdrop() + + } else if (callback) { + callback() + } + } + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.modal + + $.fn.modal = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('modal') + , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option) + if (!data) $this.data('modal', (data = new Modal(this, options))) + if (typeof option == 'string') data[option]() + else if (options.show) data.show() + }) + } + + $.fn.modal.defaults = { + backdrop: true + , keyboard: true + , show: true + } + + $.fn.modal.Constructor = Modal + + + /* MODAL NO CONFLICT + * ================= */ + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + + /* MODAL DATA-API + * ============== */ + + $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + , href = $this.attr('href') + , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) + + e.preventDefault() + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) + }) + +}(window.jQuery); +/* =========================================================== + * bootstrap-tooltip.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#tooltips + * Inspired by the original jQuery.tipsy by Jason Frame + * =========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* TOOLTIP PUBLIC CLASS DEFINITION + * =============================== */ + + var Tooltip = function (element, options) { + this.init('tooltip', element, options) + } + + Tooltip.prototype = { + + constructor: Tooltip + + , init: function (type, element, options) { + var eventIn + , eventOut + + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + this.enabled = true + + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + , getOptions: function (options) { + options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + , enter: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.show) return self.show() + + clearTimeout(this.timeout) + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) + } + + , leave: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) + } + + , show: function () { + var $tip + , inside + , pos + , actualWidth + , actualHeight + , placement + , tp + + if (this.hasContent() && this.enabled) { + $tip = this.tip() + this.setContent() + + if (this.options.animation) { + $tip.addClass('fade') + } + + placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement + + inside = /in/.test(placement) + + $tip + .detach() + .css({ top: 0, left: 0, display: 'block' }) + .insertAfter(this.$element) + + pos = this.getPosition(inside) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + + switch (inside ? placement.split(' ')[1] : placement) { + case 'bottom': + tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'top': + tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} + break + } + + $tip + .offset(tp) + .addClass(placement) + .addClass('in') + } + } + + , setContent: function () { + var $tip = this.tip() + , title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) + $tip.removeClass('fade in top bottom left right') + } + + , hide: function () { + var that = this + , $tip = this.tip() + + $tip.removeClass('in') + + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).detach() + }, 500) + + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) + $tip.detach() + }) + } + + $.support.transition && this.$tip.hasClass('fade') ? + removeWithAnimation() : + $tip.detach() + + return this + } + + , fixTitle: function () { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , hasContent: function () { + return this.getTitle() + } + + , getPosition: function (inside) { + return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + } + + , getTitle: function () { + var title + , $e = this.$element + , o = this.options + + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + + return title + } + + , tip: function () { + return this.$tip = this.$tip || $(this.options.template) + } + + , validate: function () { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function () { + this.enabled = true + } + + , disable: function () { + this.enabled = false + } + + , toggleEnabled: function () { + this.enabled = !this.enabled + } + + , toggle: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + self[self.tip().hasClass('in') ? 'hide' : 'show']() + } + + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) + } + + } + + + /* TOOLTIP PLUGIN DEFINITION + * ========================= */ + + var old = $.fn.tooltip + + $.fn.tooltip = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tooltip') + , options = typeof option == 'object' && option + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tooltip.Constructor = Tooltip + + $.fn.tooltip.defaults = { + animation: true + , placement: 'top' + , selector: false + , template: '
    ' + , trigger: 'hover' + , title: '' + , delay: 0 + , html: false + } + + + /* TOOLTIP NO CONFLICT + * =================== */ + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this + } + +}(window.jQuery);/* =========================================================== + * bootstrap-popover.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#popovers + * =========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * =========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* POPOVER PUBLIC CLASS DEFINITION + * =============================== */ + + var Popover = function (element, options) { + this.init('popover', element, options) + } + + + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js + ========================================== */ + + Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, { + + constructor: Popover + + , setContent: function () { + var $tip = this.tip() + , title = this.getTitle() + , content = this.getContent() + + $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) + $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) + + $tip.removeClass('fade top bottom left right in') + } + + , hasContent: function () { + return this.getTitle() || this.getContent() + } + + , getContent: function () { + var content + , $e = this.$element + , o = this.options + + content = $e.attr('data-content') + || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) + + return content + } + + , tip: function () { + if (!this.$tip) { + this.$tip = $(this.options.template) + } + return this.$tip + } + + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) + } + + }) + + + /* POPOVER PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.popover + + $.fn.popover = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('popover') + , options = typeof option == 'object' && option + if (!data) $this.data('popover', (data = new Popover(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.popover.Constructor = Popover + + $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { + placement: 'right' + , trigger: 'click' + , content: '' + , template: '

    ' + }) + + + /* POPOVER NO CONFLICT + * =================== */ + + $.fn.popover.noConflict = function () { + $.fn.popover = old + return this + } + +}(window.jQuery);/* ============================================================= + * bootstrap-scrollspy.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#scrollspy + * ============================================================= + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* SCROLLSPY CLASS DEFINITION + * ========================== */ + + function ScrollSpy(element, options) { + var process = $.proxy(this.process, this) + , $element = $(element).is('body') ? $(window) : $(element) + , href + this.options = $.extend({}, $.fn.scrollspy.defaults, options) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) + this.selector = (this.options.target + || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + || '') + ' .nav li > a' + this.$body = $('body') + this.refresh() + this.process() + } + + ScrollSpy.prototype = { + + constructor: ScrollSpy + + , refresh: function () { + var self = this + , $targets + + this.offsets = $([]) + this.targets = $([]) + + $targets = this.$body + .find(this.selector) + .map(function () { + var $el = $(this) + , href = $el.data('target') || $el.attr('href') + , $href = /^#\w/.test(href) && $(href) + return ( $href + && $href.length + && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null + }) + .sort(function (a, b) { return a[0] - b[0] }) + .each(function () { + self.offsets.push(this[0]) + self.targets.push(this[1]) + }) + } + + , process: function () { + var scrollTop = this.$scrollElement.scrollTop() + this.options.offset + , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight + , maxScroll = scrollHeight - this.$scrollElement.height() + , offsets = this.offsets + , targets = this.targets + , activeTarget = this.activeTarget + , i + + if (scrollTop >= maxScroll) { + return activeTarget != (i = targets.last()[0]) + && this.activate ( i ) + } + + for (i = offsets.length; i--;) { + activeTarget != targets[i] + && scrollTop >= offsets[i] + && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) + && this.activate( targets[i] ) + } + } + + , activate: function (target) { + var active + , selector + + this.activeTarget = target + + $(this.selector) + .parent('.active') + .removeClass('active') + + selector = this.selector + + '[data-target="' + target + '"],' + + this.selector + '[href="' + target + '"]' + + active = $(selector) + .parent('li') + .addClass('active') + + if (active.parent('.dropdown-menu').length) { + active = active.closest('li.dropdown').addClass('active') + } + + active.trigger('activate') + } + + } + + + /* SCROLLSPY PLUGIN DEFINITION + * =========================== */ + + var old = $.fn.scrollspy + + $.fn.scrollspy = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('scrollspy') + , options = typeof option == 'object' && option + if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.scrollspy.Constructor = ScrollSpy + + $.fn.scrollspy.defaults = { + offset: 10 + } + + + /* SCROLLSPY NO CONFLICT + * ===================== */ + + $.fn.scrollspy.noConflict = function () { + $.fn.scrollspy = old + return this + } + + + /* SCROLLSPY DATA-API + * ================== */ + + $(window).on('load', function () { + $('[data-spy="scroll"]').each(function () { + var $spy = $(this) + $spy.scrollspy($spy.data()) + }) + }) + +}(window.jQuery);/* ======================================================== + * bootstrap-tab.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#tabs + * ======================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* TAB CLASS DEFINITION + * ==================== */ + + var Tab = function (element) { + this.element = $(element) + } + + Tab.prototype = { + + constructor: Tab + + , show: function () { + var $this = this.element + , $ul = $this.closest('ul:not(.dropdown-menu)') + , selector = $this.attr('data-target') + , previous + , $target + , e + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + if ( $this.parent('li').hasClass('active') ) return + + previous = $ul.find('.active:last a')[0] + + e = $.Event('show', { + relatedTarget: previous + }) + + $this.trigger(e) + + if (e.isDefaultPrevented()) return + + $target = $(selector) + + this.activate($this.parent('li'), $ul) + this.activate($target, $target.parent(), function () { + $this.trigger({ + type: 'shown' + , relatedTarget: previous + }) + }) + } + + , activate: function ( element, container, callback) { + var $active = container.find('> .active') + , transition = callback + && $.support.transition + && $active.hasClass('fade') + + function next() { + $active + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + + element.addClass('active') + + if (transition) { + element[0].offsetWidth // reflow for transition + element.addClass('in') + } else { + element.removeClass('fade') + } + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } + + callback && callback() + } + + transition ? + $active.one($.support.transition.end, next) : + next() + + $active.removeClass('in') + } + } + + + /* TAB PLUGIN DEFINITION + * ===================== */ + + var old = $.fn.tab + + $.fn.tab = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tab') + if (!data) $this.data('tab', (data = new Tab(this))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tab.Constructor = Tab + + + /* TAB NO CONFLICT + * =============== */ + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + + /* TAB DATA-API + * ============ */ + + $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') + }) + +}(window.jQuery);/* ============================================================= + * bootstrap-typeahead.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#typeahead + * ============================================================= + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + + +!function($){ + + "use strict"; // jshint ;_; + + + /* TYPEAHEAD PUBLIC CLASS DEFINITION + * ================================= */ + + var Typeahead = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, $.fn.typeahead.defaults, options) + this.matcher = this.options.matcher || this.matcher + this.sorter = this.options.sorter || this.sorter + this.highlighter = this.options.highlighter || this.highlighter + this.updater = this.options.updater || this.updater + this.source = this.options.source + this.$menu = $(this.options.menu) + this.shown = false + this.listen() + } + + Typeahead.prototype = { + + constructor: Typeahead + + , select: function () { + var val = this.$menu.find('.active').attr('data-value') + this.$element + .val(this.updater(val)) + .change() + return this.hide() + } + + , updater: function (item) { + return item + } + + , show: function () { + var pos = $.extend({}, this.$element.position(), { + height: this.$element[0].offsetHeight + }) + + this.$menu + .insertAfter(this.$element) + .css({ + top: pos.top + pos.height + , left: pos.left + }) + .show() + + this.shown = true + return this + } + + , hide: function () { + this.$menu.hide() + this.shown = false + return this + } + + , lookup: function (event) { + var items + + this.query = this.$element.val() + + if (!this.query || this.query.length < this.options.minLength) { + return this.shown ? this.hide() : this + } + + items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source + + return items ? this.process(items) : this + } + + , process: function (items) { + var that = this + + items = $.grep(items, function (item) { + return that.matcher(item) + }) + + items = this.sorter(items) + + if (!items.length) { + return this.shown ? this.hide() : this + } + + return this.render(items.slice(0, this.options.items)).show() + } + + , matcher: function (item) { + return ~item.toLowerCase().indexOf(this.query.toLowerCase()) + } + + , sorter: function (items) { + var beginswith = [] + , caseSensitive = [] + , caseInsensitive = [] + , item + + while (item = items.shift()) { + if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item) + else if (~item.indexOf(this.query)) caseSensitive.push(item) + else caseInsensitive.push(item) + } + + return beginswith.concat(caseSensitive, caseInsensitive) + } + + , highlighter: function (item) { + var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') + return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { + return '' + match + '' + }) + } + + , render: function (items) { + var that = this + + items = $(items).map(function (i, item) { + i = $(that.options.item).attr('data-value', item) + i.find('a').html(that.highlighter(item)) + return i[0] + }) + + items.first().addClass('active') + this.$menu.html(items) + return this + } + + , next: function (event) { + var active = this.$menu.find('.active').removeClass('active') + , next = active.next() + + if (!next.length) { + next = $(this.$menu.find('li')[0]) + } + + next.addClass('active') + } + + , prev: function (event) { + var active = this.$menu.find('.active').removeClass('active') + , prev = active.prev() + + if (!prev.length) { + prev = this.$menu.find('li').last() + } + + prev.addClass('active') + } + + , listen: function () { + this.$element + .on('blur', $.proxy(this.blur, this)) + .on('keypress', $.proxy(this.keypress, this)) + .on('keyup', $.proxy(this.keyup, this)) + + if (this.eventSupported('keydown')) { + this.$element.on('keydown', $.proxy(this.keydown, this)) + } + + this.$menu + .on('click', $.proxy(this.click, this)) + .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) + } + + , eventSupported: function(eventName) { + var isSupported = eventName in this.$element + if (!isSupported) { + this.$element.setAttribute(eventName, 'return;') + isSupported = typeof this.$element[eventName] === 'function' + } + return isSupported + } + + , move: function (e) { + if (!this.shown) return + + switch(e.keyCode) { + case 9: // tab + case 13: // enter + case 27: // escape + e.preventDefault() + break + + case 38: // up arrow + e.preventDefault() + this.prev() + break + + case 40: // down arrow + e.preventDefault() + this.next() + break + } + + e.stopPropagation() + } + + , keydown: function (e) { + this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) + this.move(e) + } + + , keypress: function (e) { + if (this.suppressKeyPressRepeat) return + this.move(e) + } + + , keyup: function (e) { + switch(e.keyCode) { + case 40: // down arrow + case 38: // up arrow + case 16: // shift + case 17: // ctrl + case 18: // alt + break + + case 9: // tab + case 13: // enter + if (!this.shown) return + this.select() + break + + case 27: // escape + if (!this.shown) return + this.hide() + break + + default: + this.lookup() + } + + e.stopPropagation() + e.preventDefault() + } + + , blur: function (e) { + var that = this + setTimeout(function () { that.hide() }, 150) + } + + , click: function (e) { + e.stopPropagation() + e.preventDefault() + this.select() + } + + , mouseenter: function (e) { + this.$menu.find('.active').removeClass('active') + $(e.currentTarget).addClass('active') + } + + } + + + /* TYPEAHEAD PLUGIN DEFINITION + * =========================== */ + + var old = $.fn.typeahead + + $.fn.typeahead = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('typeahead') + , options = typeof option == 'object' && option + if (!data) $this.data('typeahead', (data = new Typeahead(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.typeahead.defaults = { + source: [] + , items: 8 + , menu: '
      ' + , item: '
      • ' + , minLength: 1 + } + + $.fn.typeahead.Constructor = Typeahead + + + /* TYPEAHEAD NO CONFLICT + * =================== */ + + $.fn.typeahead.noConflict = function () { + $.fn.typeahead = old + return this + } + + + /* TYPEAHEAD DATA-API + * ================== */ + + $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + e.preventDefault() + $this.typeahead($this.data()) + }) + +}(window.jQuery); +/* ========================================================== + * bootstrap-affix.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#affix + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) + this.$element = $(element) + this.checkPosition() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollHeight = $(document).height() + , scrollTop = this.$window.scrollTop() + , position = this.$element.offset() + , offset = this.options.offset + , offsetBottom = offset.bottom + , offsetTop = offset.top + , reset = 'affix affix-top affix-bottom' + , affix + + if (typeof offset != 'object') offsetBottom = offsetTop = offset + if (typeof offsetTop == 'function') offsetTop = offset.top() + if (typeof offsetBottom == 'function') offsetBottom = offset.bottom() + + affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? + false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? + 'bottom' : offsetTop != null && scrollTop <= offsetTop ? + 'top' : false + + if (this.affixed === affix) return + + this.affixed = affix + this.unpin = affix == 'bottom' ? position.top - scrollTop : null + + this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')) + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.affix + + $.fn.affix = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + /* AFFIX NO CONFLICT + * ================= */ + + $.fn.affix.noConflict = function () { + $.fn.affix = old + return this + } + + + /* AFFIX DATA-API + * ============== */ + + $(window).on('load', function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetBottom && (data.offset.bottom = data.offsetBottom) + data.offsetTop && (data.offset.top = data.offsetTop) + + $spy.affix(data) + }) + }) + + +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js new file mode 100644 index 00000000..4abe532c --- /dev/null +++ b/docs/assets/js/bootstrap.min.js @@ -0,0 +1,6 @@ +/** +* Bootstrap.js v2.2.2 by @fat & @mdo +* Copyright 2012 Twitter, Inc. +* http://www.apache.org/licenses/LICENSE-2.0.txt +*/ +!function($){"use strict";$(function(){$.support.transition=function(){var transitionEnd=function(){var name,el=document.createElement("bootstrap"),transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(name in transEndEventNames)if(void 0!==el.style[name])return transEndEventNames[name]}();return transitionEnd&&{end:transitionEnd}}()})}(window.jQuery),!function($){"use strict";var dismiss='[data-dismiss="alert"]',Alert=function(el){$(el).on("click",dismiss,this.close)};Alert.prototype.close=function(e){function removeElement(){$parent.trigger("closed").remove()}var $parent,$this=$(this),selector=$this.attr("data-target");selector||(selector=$this.attr("href"),selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,"")),$parent=$(selector),e&&e.preventDefault(),$parent.length||($parent=$this.hasClass("alert")?$this:$this.parent()),$parent.trigger(e=$.Event("close")),e.isDefaultPrevented()||($parent.removeClass("in"),$.support.transition&&$parent.hasClass("fade")?$parent.on($.support.transition.end,removeElement):removeElement())};var old=$.fn.alert;$.fn.alert=function(option){return this.each(function(){var $this=$(this),data=$this.data("alert");data||$this.data("alert",data=new Alert(this)),"string"==typeof option&&data[option].call($this)})},$.fn.alert.Constructor=Alert,$.fn.alert.noConflict=function(){return $.fn.alert=old,this},$(document).on("click.alert.data-api",dismiss,Alert.prototype.close)}(window.jQuery),!function($){"use strict";var Button=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.button.defaults,options)};Button.prototype.setState=function(state){var d="disabled",$el=this.$element,data=$el.data(),val=$el.is("input")?"val":"html";state+="Text",data.resetText||$el.data("resetText",$el[val]()),$el[val](data[state]||this.options[state]),setTimeout(function(){"loadingText"==state?$el.addClass(d).attr(d,d):$el.removeClass(d).removeAttr(d)},0)},Button.prototype.toggle=function(){var $parent=this.$element.closest('[data-toggle="buttons-radio"]');$parent&&$parent.find(".active").removeClass("active"),this.$element.toggleClass("active")};var old=$.fn.button;$.fn.button=function(option){return this.each(function(){var $this=$(this),data=$this.data("button"),options="object"==typeof option&&option;data||$this.data("button",data=new Button(this,options)),"toggle"==option?data.toggle():option&&data.setState(option)})},$.fn.button.defaults={loadingText:"loading..."},$.fn.button.Constructor=Button,$.fn.button.noConflict=function(){return $.fn.button=old,this},$(document).on("click.button.data-api","[data-toggle^=button]",function(e){var $btn=$(e.target);$btn.hasClass("btn")||($btn=$btn.closest(".btn")),$btn.button("toggle")})}(window.jQuery),!function($){"use strict";var Carousel=function(element,options){this.$element=$(element),this.options=options,"hover"==this.options.pause&&this.$element.on("mouseenter",$.proxy(this.pause,this)).on("mouseleave",$.proxy(this.cycle,this))};Carousel.prototype={cycle:function(e){return e||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval($.proxy(this.next,this),this.options.interval)),this},to:function(pos){var $active=this.$element.find(".item.active"),children=$active.parent().children(),activePos=children.index($active),that=this;if(!(pos>children.length-1||0>pos))return this.sliding?this.$element.one("slid",function(){that.to(pos)}):activePos==pos?this.pause().cycle():this.slide(pos>activePos?"next":"prev",$(children[pos]))},pause:function(e){return e||(this.paused=!0),this.$element.find(".next, .prev").length&&$.support.transition.end&&(this.$element.trigger($.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){return this.sliding?void 0:this.slide("next")},prev:function(){return this.sliding?void 0:this.slide("prev")},slide:function(type,next){var e,$active=this.$element.find(".item.active"),$next=next||$active[type](),isCycling=this.interval,direction="next"==type?"left":"right",fallback="next"==type?"first":"last",that=this;if(this.sliding=!0,isCycling&&this.pause(),$next=$next.length?$next:this.$element.find(".item")[fallback](),e=$.Event("slide",{relatedTarget:$next[0]}),!$next.hasClass("active")){if($.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(e),e.isDefaultPrevented())return;$next.addClass(type),$next[0].offsetWidth,$active.addClass(direction),$next.addClass(direction),this.$element.one($.support.transition.end,function(){$next.removeClass([type,direction].join(" ")).addClass("active"),$active.removeClass(["active",direction].join(" ")),that.sliding=!1,setTimeout(function(){that.$element.trigger("slid")},0)})}else{if(this.$element.trigger(e),e.isDefaultPrevented())return;$active.removeClass("active"),$next.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return isCycling&&this.cycle(),this}}};var old=$.fn.carousel;$.fn.carousel=function(option){return this.each(function(){var $this=$(this),data=$this.data("carousel"),options=$.extend({},$.fn.carousel.defaults,"object"==typeof option&&option),action="string"==typeof option?option:options.slide;data||$this.data("carousel",data=new Carousel(this,options)),"number"==typeof option?data.to(option):action?data[action]():options.interval&&data.cycle()})},$.fn.carousel.defaults={interval:5e3,pause:"hover"},$.fn.carousel.Constructor=Carousel,$.fn.carousel.noConflict=function(){return $.fn.carousel=old,this},$(document).on("click.carousel.data-api","[data-slide]",function(e){var href,$this=$(this),$target=$($this.attr("data-target")||(href=$this.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,"")),options=$.extend({},$target.data(),$this.data());$target.carousel(options),e.preventDefault()})}(window.jQuery),!function($){"use strict";var Collapse=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.collapse.defaults,options),this.options.parent&&(this.$parent=$(this.options.parent)),this.options.toggle&&this.toggle()};Collapse.prototype={constructor:Collapse,dimension:function(){var hasWidth=this.$element.hasClass("width");return hasWidth?"width":"height"},show:function(){var dimension,scroll,actives,hasData;if(!this.transitioning){if(dimension=this.dimension(),scroll=$.camelCase(["scroll",dimension].join("-")),actives=this.$parent&&this.$parent.find("> .accordion-group > .in"),actives&&actives.length){if(hasData=actives.data("collapse"),hasData&&hasData.transitioning)return;actives.collapse("hide"),hasData||actives.data("collapse",null)}this.$element[dimension](0),this.transition("addClass",$.Event("show"),"shown"),$.support.transition&&this.$element[dimension](this.$element[0][scroll])}},hide:function(){var dimension;this.transitioning||(dimension=this.dimension(),this.reset(this.$element[dimension]()),this.transition("removeClass",$.Event("hide"),"hidden"),this.$element[dimension](0))},reset:function(size){var dimension=this.dimension();return this.$element.removeClass("collapse")[dimension](size||"auto")[0].offsetWidth,this.$element[null!==size?"addClass":"removeClass"]("collapse"),this},transition:function(method,startEvent,completeEvent){var that=this,complete=function(){"show"==startEvent.type&&that.reset(),that.transitioning=0,that.$element.trigger(completeEvent)};this.$element.trigger(startEvent),startEvent.isDefaultPrevented()||(this.transitioning=1,this.$element[method]("in"),$.support.transition&&this.$element.hasClass("collapse")?this.$element.one($.support.transition.end,complete):complete())},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var old=$.fn.collapse;$.fn.collapse=function(option){return this.each(function(){var $this=$(this),data=$this.data("collapse"),options="object"==typeof option&&option;data||$this.data("collapse",data=new Collapse(this,options)),"string"==typeof option&&data[option]()})},$.fn.collapse.defaults={toggle:!0},$.fn.collapse.Constructor=Collapse,$.fn.collapse.noConflict=function(){return $.fn.collapse=old,this},$(document).on("click.collapse.data-api","[data-toggle=collapse]",function(e){var href,$this=$(this),target=$this.attr("data-target")||e.preventDefault()||(href=$this.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,""),option=$(target).data("collapse")?"toggle":$this.data();$this[$(target).hasClass("in")?"addClass":"removeClass"]("collapsed"),$(target).collapse(option)})}(window.jQuery),!function($){"use strict";function clearMenus(){$(toggle).each(function(){getParent($(this)).removeClass("open")})}function getParent($this){var $parent,selector=$this.attr("data-target");return selector||(selector=$this.attr("href"),selector=selector&&/#/.test(selector)&&selector.replace(/.*(?=#[^\s]*$)/,"")),$parent=$(selector),$parent.length||($parent=$this.parent()),$parent}var toggle="[data-toggle=dropdown]",Dropdown=function(element){var $el=$(element).on("click.dropdown.data-api",this.toggle);$("html").on("click.dropdown.data-api",function(){$el.parent().removeClass("open")})};Dropdown.prototype={constructor:Dropdown,toggle:function(){var $parent,isActive,$this=$(this);if(!$this.is(".disabled, :disabled"))return $parent=getParent($this),isActive=$parent.hasClass("open"),clearMenus(),isActive||$parent.toggleClass("open"),$this.focus(),!1},keydown:function(e){var $this,$items,$parent,isActive,index;if(/(38|40|27)/.test(e.keyCode)&&($this=$(this),e.preventDefault(),e.stopPropagation(),!$this.is(".disabled, :disabled"))){if($parent=getParent($this),isActive=$parent.hasClass("open"),!isActive||isActive&&27==e.keyCode)return $this.click();$items=$("[role=menu] li:not(.divider):visible a",$parent),$items.length&&(index=$items.index($items.filter(":focus")),38==e.keyCode&&index>0&&index--,40==e.keyCode&&$items.length-1>index&&index++,~index||(index=0),$items.eq(index).focus())}}};var old=$.fn.dropdown;$.fn.dropdown=function(option){return this.each(function(){var $this=$(this),data=$this.data("dropdown");data||$this.data("dropdown",data=new Dropdown(this)),"string"==typeof option&&data[option].call($this)})},$.fn.dropdown.Constructor=Dropdown,$.fn.dropdown.noConflict=function(){return $.fn.dropdown=old,this},$(document).on("click.dropdown.data-api touchstart.dropdown.data-api",clearMenus).on("click.dropdown touchstart.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("touchstart.dropdown.data-api",".dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api touchstart.dropdown.data-api",toggle,Dropdown.prototype.toggle).on("keydown.dropdown.data-api touchstart.dropdown.data-api",toggle+", [role=menu]",Dropdown.prototype.keydown)}(window.jQuery),!function($){"use strict";var Modal=function(element,options){this.options=options,this.$element=$(element).delegate('[data-dismiss="modal"]',"click.dismiss.modal",$.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};Modal.prototype={constructor:Modal,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var that=this,e=$.Event("show");this.$element.trigger(e),this.isShown||e.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.backdrop(function(){var transition=$.support.transition&&that.$element.hasClass("fade");that.$element.parent().length||that.$element.appendTo(document.body),that.$element.show(),transition&&that.$element[0].offsetWidth,that.$element.addClass("in").attr("aria-hidden",!1),that.enforceFocus(),transition?that.$element.one($.support.transition.end,function(){that.$element.focus().trigger("shown")}):that.$element.focus().trigger("shown")}))},hide:function(e){e&&e.preventDefault(),e=$.Event("hide"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.escape(),$(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),$.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal())},enforceFocus:function(){var that=this;$(document).on("focusin.modal",function(e){that.$element[0]===e.target||that.$element.has(e.target).length||that.$element.focus()})},escape:function(){var that=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(e){27==e.which&&that.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var that=this,timeout=setTimeout(function(){that.$element.off($.support.transition.end),that.hideModal()},500);this.$element.one($.support.transition.end,function(){clearTimeout(timeout),that.hideModal()})},hideModal:function(){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(callback){var animate=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var doAnimate=$.support.transition&&animate;this.$backdrop=$('
      ').appendTo(document.body),this.$backdrop.click("static"==this.options.backdrop?$.proxy(this.$element[0].focus,this.$element[0]):$.proxy(this.hide,this)),doAnimate&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),doAnimate?this.$backdrop.one($.support.transition.end,callback):callback()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),$.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one($.support.transition.end,$.proxy(this.removeBackdrop,this)):this.removeBackdrop()):callback&&callback()}};var old=$.fn.modal;$.fn.modal=function(option){return this.each(function(){var $this=$(this),data=$this.data("modal"),options=$.extend({},$.fn.modal.defaults,$this.data(),"object"==typeof option&&option);data||$this.data("modal",data=new Modal(this,options)),"string"==typeof option?data[option]():options.show&&data.show()})},$.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},$.fn.modal.Constructor=Modal,$.fn.modal.noConflict=function(){return $.fn.modal=old,this},$(document).on("click.modal.data-api",'[data-toggle="modal"]',function(e){var $this=$(this),href=$this.attr("href"),$target=$($this.attr("data-target")||href&&href.replace(/.*(?=#[^\s]+$)/,"")),option=$target.data("modal")?"toggle":$.extend({remote:!/#/.test(href)&&href},$target.data(),$this.data());e.preventDefault(),$target.modal(option).one("hide",function(){$this.focus()})})}(window.jQuery),!function($){"use strict";var Tooltip=function(element,options){this.init("tooltip",element,options)};Tooltip.prototype={constructor:Tooltip,init:function(type,element,options){var eventIn,eventOut;this.type=type,this.$element=$(element),this.options=this.getOptions(options),this.enabled=!0,"click"==this.options.trigger?this.$element.on("click."+this.type,this.options.selector,$.proxy(this.toggle,this)):"manual"!=this.options.trigger&&(eventIn="hover"==this.options.trigger?"mouseenter":"focus",eventOut="hover"==this.options.trigger?"mouseleave":"blur",this.$element.on(eventIn+"."+this.type,this.options.selector,$.proxy(this.enter,this)),this.$element.on(eventOut+"."+this.type,this.options.selector,$.proxy(this.leave,this))),this.options.selector?this._options=$.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(options){return options=$.extend({},$.fn[this.type].defaults,options,this.$element.data()),options.delay&&"number"==typeof options.delay&&(options.delay={show:options.delay,hide:options.delay}),options},enter:function(e){var self=$(e.currentTarget)[this.type](this._options).data(this.type);return self.options.delay&&self.options.delay.show?(clearTimeout(this.timeout),self.hoverState="in",this.timeout=setTimeout(function(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self.show()},leave:function(e){var self=$(e.currentTarget)[this.type](this._options).data(this.type);return this.timeout&&clearTimeout(this.timeout),self.options.delay&&self.options.delay.hide?(self.hoverState="out",this.timeout=setTimeout(function(){"out"==self.hoverState&&self.hide()},self.options.delay.hide),void 0):self.hide()},show:function(){var $tip,inside,pos,actualWidth,actualHeight,placement,tp;if(this.hasContent()&&this.enabled){switch($tip=this.tip(),this.setContent(),this.options.animation&&$tip.addClass("fade"),placement="function"==typeof this.options.placement?this.options.placement.call(this,$tip[0],this.$element[0]):this.options.placement,inside=/in/.test(placement),$tip.detach().css({top:0,left:0,display:"block"}).insertAfter(this.$element),pos=this.getPosition(inside),actualWidth=$tip[0].offsetWidth,actualHeight=$tip[0].offsetHeight,inside?placement.split(" ")[1]:placement){case"bottom":tp={top:pos.top+pos.height,left:pos.left+pos.width/2-actualWidth/2};break;case"top":tp={top:pos.top-actualHeight,left:pos.left+pos.width/2-actualWidth/2};break;case"left":tp={top:pos.top+pos.height/2-actualHeight/2,left:pos.left-actualWidth};break;case"right":tp={top:pos.top+pos.height/2-actualHeight/2,left:pos.left+pos.width}}$tip.offset(tp).addClass(placement).addClass("in")}},setContent:function(){var $tip=this.tip(),title=this.getTitle();$tip.find(".tooltip-inner")[this.options.html?"html":"text"](title),$tip.removeClass("fade in top bottom left right")},hide:function(){function removeWithAnimation(){var timeout=setTimeout(function(){$tip.off($.support.transition.end).detach()},500);$tip.one($.support.transition.end,function(){clearTimeout(timeout),$tip.detach()})}var $tip=this.tip();return $tip.removeClass("in"),$.support.transition&&this.$tip.hasClass("fade")?removeWithAnimation():$tip.detach(),this},fixTitle:function(){var $e=this.$element;($e.attr("title")||"string"!=typeof $e.attr("data-original-title"))&&$e.attr("data-original-title",$e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(inside){return $.extend({},inside?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var title,$e=this.$element,o=this.options;return title=$e.attr("data-original-title")||("function"==typeof o.title?o.title.call($e[0]):o.title)},tip:function(){return this.$tip=this.$tip||$(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(e){var self=$(e.currentTarget)[this.type](this._options).data(this.type);self[self.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var old=$.fn.tooltip;$.fn.tooltip=function(option){return this.each(function(){var $this=$(this),data=$this.data("tooltip"),options="object"==typeof option&&option;data||$this.data("tooltip",data=new Tooltip(this,options)),"string"==typeof option&&data[option]()})},$.fn.tooltip.Constructor=Tooltip,$.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
      ',trigger:"hover",title:"",delay:0,html:!1},$.fn.tooltip.noConflict=function(){return $.fn.tooltip=old,this}}(window.jQuery),!function($){"use strict";var Popover=function(element,options){this.init("popover",element,options)};Popover.prototype=$.extend({},$.fn.tooltip.Constructor.prototype,{constructor:Popover,setContent:function(){var $tip=this.tip(),title=this.getTitle(),content=this.getContent();$tip.find(".popover-title")[this.options.html?"html":"text"](title),$tip.find(".popover-content")[this.options.html?"html":"text"](content),$tip.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var content,$e=this.$element,o=this.options;return content=$e.attr("data-content")||("function"==typeof o.content?o.content.call($e[0]):o.content)},tip:function(){return this.$tip||(this.$tip=$(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var old=$.fn.popover;$.fn.popover=function(option){return this.each(function(){var $this=$(this),data=$this.data("popover"),options="object"==typeof option&&option;data||$this.data("popover",data=new Popover(this,options)),"string"==typeof option&&data[option]()})},$.fn.popover.Constructor=Popover,$.fn.popover.defaults=$.extend({},$.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'

      '}),$.fn.popover.noConflict=function(){return $.fn.popover=old,this}}(window.jQuery),!function($){"use strict";function ScrollSpy(element,options){var href,process=$.proxy(this.process,this),$element=$(element).is("body")?$(window):$(element);this.options=$.extend({},$.fn.scrollspy.defaults,options),this.$scrollElement=$element.on("scroll.scroll-spy.data-api",process),this.selector=(this.options.target||(href=$(element).attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=$("body"),this.refresh(),this.process()}ScrollSpy.prototype={constructor:ScrollSpy,refresh:function(){var $targets,self=this;this.offsets=$([]),this.targets=$([]),$targets=this.$body.find(this.selector).map(function(){var $el=$(this),href=$el.data("target")||$el.attr("href"),$href=/^#\w/.test(href)&&$(href);return $href&&$href.length&&[[$href.position().top+self.$scrollElement.scrollTop(),href]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){self.offsets.push(this[0]),self.targets.push(this[1])})},process:function(){var i,scrollTop=this.$scrollElement.scrollTop()+this.options.offset,scrollHeight=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,maxScroll=scrollHeight-this.$scrollElement.height(),offsets=this.offsets,targets=this.targets,activeTarget=this.activeTarget;if(scrollTop>=maxScroll)return activeTarget!=(i=targets.last()[0])&&this.activate(i);for(i=offsets.length;i--;)activeTarget!=targets[i]&&scrollTop>=offsets[i]&&(!offsets[i+1]||offsets[i+1]>=scrollTop)&&this.activate(targets[i])},activate:function(target){var active,selector;this.activeTarget=target,$(this.selector).parent(".active").removeClass("active"),selector=this.selector+'[data-target="'+target+'"],'+this.selector+'[href="'+target+'"]',active=$(selector).parent("li").addClass("active"),active.parent(".dropdown-menu").length&&(active=active.closest("li.dropdown").addClass("active")),active.trigger("activate")}};var old=$.fn.scrollspy;$.fn.scrollspy=function(option){return this.each(function(){var $this=$(this),data=$this.data("scrollspy"),options="object"==typeof option&&option;data||$this.data("scrollspy",data=new ScrollSpy(this,options)),"string"==typeof option&&data[option]()})},$.fn.scrollspy.Constructor=ScrollSpy,$.fn.scrollspy.defaults={offset:10},$.fn.scrollspy.noConflict=function(){return $.fn.scrollspy=old,this},$(window).on("load",function(){$('[data-spy="scroll"]').each(function(){var $spy=$(this);$spy.scrollspy($spy.data())})})}(window.jQuery),!function($){"use strict";var Tab=function(element){this.element=$(element)};Tab.prototype={constructor:Tab,show:function(){var previous,$target,e,$this=this.element,$ul=$this.closest("ul:not(.dropdown-menu)"),selector=$this.attr("data-target");selector||(selector=$this.attr("href"),selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,"")),$this.parent("li").hasClass("active")||(previous=$ul.find(".active:last a")[0],e=$.Event("show",{relatedTarget:previous}),$this.trigger(e),e.isDefaultPrevented()||($target=$(selector),this.activate($this.parent("li"),$ul),this.activate($target,$target.parent(),function(){$this.trigger({type:"shown",relatedTarget:previous})})))},activate:function(element,container,callback){function next(){$active.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),element.addClass("active"),transition?(element[0].offsetWidth,element.addClass("in")):element.removeClass("fade"),element.parent(".dropdown-menu")&&element.closest("li.dropdown").addClass("active"),callback&&callback()}var $active=container.find("> .active"),transition=callback&&$.support.transition&&$active.hasClass("fade");transition?$active.one($.support.transition.end,next):next(),$active.removeClass("in")}};var old=$.fn.tab;$.fn.tab=function(option){return this.each(function(){var $this=$(this),data=$this.data("tab");data||$this.data("tab",data=new Tab(this)),"string"==typeof option&&data[option]()})},$.fn.tab.Constructor=Tab,$.fn.tab.noConflict=function(){return $.fn.tab=old,this},$(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(e){e.preventDefault(),$(this).tab("show")})}(window.jQuery),!function($){"use strict";var Typeahead=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.typeahead.defaults,options),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=$(this.options.menu),this.shown=!1,this.listen()};Typeahead.prototype={constructor:Typeahead,select:function(){var val=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(val)).change(),this.hide()},updater:function(item){return item},show:function(){var pos=$.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:pos.top+pos.height,left:pos.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(){var items;return this.query=this.$element.val(),!this.query||this.query.length"+match+""})},render:function(items){var that=this;return items=$(items).map(function(i,item){return i=$(that.options.item).attr("data-value",item),i.find("a").html(that.highlighter(item)),i[0]}),items.first().addClass("active"),this.$menu.html(items),this},next:function(){var active=this.$menu.find(".active").removeClass("active"),next=active.next();next.length||(next=$(this.$menu.find("li")[0])),next.addClass("active")},prev:function(){var active=this.$menu.find(".active").removeClass("active"),prev=active.prev();prev.length||(prev=this.$menu.find("li").last()),prev.addClass("active")},listen:function(){this.$element.on("blur",$.proxy(this.blur,this)).on("keypress",$.proxy(this.keypress,this)).on("keyup",$.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",$.proxy(this.keydown,this)),this.$menu.on("click",$.proxy(this.click,this)).on("mouseenter","li",$.proxy(this.mouseenter,this))},eventSupported:function(eventName){var isSupported=eventName in this.$element;return isSupported||(this.$element.setAttribute(eventName,"return;"),isSupported="function"==typeof this.$element[eventName]),isSupported},move:function(e){if(this.shown){switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()}},keydown:function(e){this.suppressKeyPressRepeat=~$.inArray(e.keyCode,[40,38,9,13,27]),this.move(e)},keypress:function(e){this.suppressKeyPressRepeat||this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(){var that=this;setTimeout(function(){that.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(e){this.$menu.find(".active").removeClass("active"),$(e.currentTarget).addClass("active")}};var old=$.fn.typeahead;$.fn.typeahead=function(option){return this.each(function(){var $this=$(this),data=$this.data("typeahead"),options="object"==typeof option&&option;data||$this.data("typeahead",data=new Typeahead(this,options)),"string"==typeof option&&data[option]()})},$.fn.typeahead.defaults={source:[],items:8,menu:'
        ',item:'
        • ',minLength:1},$.fn.typeahead.Constructor=Typeahead,$.fn.typeahead.noConflict=function(){return $.fn.typeahead=old,this},$(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(e){var $this=$(this);$this.data("typeahead")||(e.preventDefault(),$this.typeahead($this.data()))})}(window.jQuery),!function($){"use strict";var Affix=function(element,options){this.options=$.extend({},$.fn.affix.defaults,options),this.$window=$(window).on("scroll.affix.data-api",$.proxy(this.checkPosition,this)).on("click.affix.data-api",$.proxy(function(){setTimeout($.proxy(this.checkPosition,this),1)},this)),this.$element=$(element),this.checkPosition()};Affix.prototype.checkPosition=function(){if(this.$element.is(":visible")){var affix,scrollHeight=$(document).height(),scrollTop=this.$window.scrollTop(),position=this.$element.offset(),offset=this.options.offset,offsetBottom=offset.bottom,offsetTop=offset.top,reset="affix affix-top affix-bottom";"object"!=typeof offset&&(offsetBottom=offsetTop=offset),"function"==typeof offsetTop&&(offsetTop=offset.top()),"function"==typeof offsetBottom&&(offsetBottom=offset.bottom()),affix=null!=this.unpin&&scrollTop+this.unpin<=position.top?!1:null!=offsetBottom&&position.top+this.$element.height()>=scrollHeight-offsetBottom?"bottom":null!=offsetTop&&offsetTop>=scrollTop?"top":!1,this.affixed!==affix&&(this.affixed=affix,this.unpin="bottom"==affix?position.top-scrollTop:null,this.$element.removeClass(reset).addClass("affix"+(affix?"-"+affix:"")))}};var old=$.fn.affix;$.fn.affix=function(option){return this.each(function(){var $this=$(this),data=$this.data("affix"),options="object"==typeof option&&option;data||$this.data("affix",data=new Affix(this,options)),"string"==typeof option&&data[option]()})},$.fn.affix.Constructor=Affix,$.fn.affix.defaults={offset:0},$.fn.affix.noConflict=function(){return $.fn.affix=old,this},$(window).on("load",function(){$('[data-spy="affix"]').each(function(){var $spy=$(this),data=$spy.data();data.offset=data.offset||{},data.offsetBottom&&(data.offset.bottom=data.offsetBottom),data.offsetTop&&(data.offset.top=data.offsetTop),$spy.affix(data)})})}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index aedd8d1a..d437aff6 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -3,7 +3,7 @@ .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } .str, .atv { color: #D14; } -.kwd, .linenums .tag { color: #1e347b; } +.kwd, .prettyprint .tag { color: #1e347b; } .typ, .atn, .dec, .var { color: teal; } .pln { color: #48484c; } @@ -21,10 +21,10 @@ /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 33px; /* IE indents via margin-left */ -} +} ol.linenums li { padding-left: 12px; color: #bebec5; - line-height: 18px; + line-height: 20px; text-shadow: 0 1px 0 #fff; } \ No newline at end of file diff --git a/docs/assets/js/holder/holder.js b/docs/assets/js/holder/holder.js new file mode 100755 index 00000000..2377badf --- /dev/null +++ b/docs/assets/js/holder/holder.js @@ -0,0 +1,342 @@ +/* + +Holder - 1.6 - client side image placeholders +(c) 2012 Ivan Malopinsky / http://imsky.co + +Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 +Commercial use requires attribution. + +*/ + +var Holder = Holder || {}; +(function (app, win) { + +var preempted = false, +fallback = false, +canvas = document.createElement('canvas'); + +//getElementsByClassName polyfill +document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i 1) { + text_height = template.size / (ctx.measureText(text).width / width); + } + ctx.font = "bold " + (text_height * ratio) + "px sans-serif"; + ctx.fillText(text, (width / 2), (height / 2), width); + return canvas.toDataURL("image/png"); +} + +function render(mode, el, holder, src) { + + var dimensions = holder.dimensions, + theme = holder.theme, + text = holder.text; + var dimensions_caption = dimensions.width + "x" + dimensions.height; + theme = (text ? extend(theme, { + text: text + }) : theme); + + var ratio = 1; + if(window.devicePixelRatio && window.devicePixelRatio > 1){ + ratio = window.devicePixelRatio; + } + + if (mode == "image") { + el.setAttribute("data-src", src); + el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); + el.style.width = dimensions.width + "px"; + el.style.height = dimensions.height + "px"; + + if (fallback) { + el.style.backgroundColor = theme.background; + } + else{ + el.setAttribute("src", draw(ctx, dimensions, theme, ratio)); + } + } else { + if (!fallback) { + el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")"; + el.style.backgroundSize = dimensions.width+"px "+dimensions.height+"px"; + } + } +}; + +function fluid(el, holder, src) { + var dimensions = holder.dimensions, + theme = holder.theme, + text = holder.text; + var dimensions_caption = dimensions.width + "x" + dimensions.height; + theme = (text ? extend(theme, { + text: text + }) : theme); + + var fluid = document.createElement("table"); + fluid.setAttribute("cellspacing",0) + fluid.setAttribute("cellpadding",0) + fluid.setAttribute("border",0) + + var row = document.createElement("tr") + .appendChild(document.createElement("td") + .appendChild(document.createTextNode(theme.text))); + + fluid.style.backgroundColor = theme.background; + fluid.style.color = theme.foreground; + fluid.className = el.className + " holderjs-fluid"; + fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px"); + fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px"); + fluid.id = el.id; + + var frag = document.createDocumentFragment(), + tbody = document.createElement("tbody"), + tr = document.createElement("tr"), + td = document.createElement("td"); + tr.appendChild(td); + tbody.appendChild(tr); + frag.appendChild(tbody); + + if (theme.text) { + td.appendChild(document.createTextNode(theme.text)) + fluid.appendChild(frag); + } else { + td.appendChild(document.createTextNode(dimensions_caption)) + fluid.appendChild(frag); + fluid_images.push(fluid); + setTimeout(fluid_update, 0); + } + + el.parentNode.replaceChild(fluid, el); +} + +function fluid_update() { + for (i in fluid_images) { + var el = fluid_images[i]; + var label = el.getElementsByTagName("td")[0].firstChild; + label.data = el.offsetWidth + "x" + el.offsetHeight; + } +} + +function parse_flags(flags, options) { + + var ret = { + theme: settings.themes.gray + }, render = false; + + for (sl = flags.length, j = 0; j < sl; j++) { + var flag = flags[j]; + if (app.flags.dimensions.match(flag)) { + render = true; + ret.dimensions = app.flags.dimensions.output(flag); + } else if (app.flags.fluid.match(flag)) { + render = true; + ret.dimensions = app.flags.fluid.output(flag); + ret.fluid = true; + } else if (app.flags.colors.match(flag)) { + ret.theme = app.flags.colors.output(flag); + } else if (options.themes[flag]) { + //If a theme is specified, it will override custom colors + ret.theme = options.themes[flag]; + } else if (app.flags.text.match(flag)) { + ret.text = app.flags.text.output(flag); + } + } + + return render ? ret : false; + +}; + +if (!canvas.getContext) { + fallback = true; +} else { + if (canvas.toDataURL("image/png") + .indexOf("data:image/png") < 0) { + //Android doesn't support data URI + fallback = true; + } else { + var ctx = canvas.getContext("2d"); + } +} + +var fluid_images = []; + +var settings = { + domain: "holder.js", + images: "img", + elements: ".holderjs", + themes: { + "gray": { + background: "#eee", + foreground: "#aaa", + size: 12 + }, + "social": { + background: "#3a5a97", + foreground: "#fff", + size: 12 + }, + "industrial": { + background: "#434A52", + foreground: "#C2F200", + size: 12 + } + }, + stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;border-collapse:collapse;border:0;vertical-align:middle;margin:0}" +}; + + +app.flags = { + dimensions: { + regex: /(\d+)x(\d+)/, + output: function (val) { + var exec = this.regex.exec(val); + return { + width: +exec[1], + height: +exec[2] + } + } + }, + fluid: { + regex: /([0-9%]+)x([0-9%]+)/, + output: function (val) { + var exec = this.regex.exec(val); + return { + width: exec[1], + height: exec[2] + } + } + }, + colors: { + regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i, + output: function (val) { + var exec = this.regex.exec(val); + return { + size: settings.themes.gray.size, + foreground: "#" + exec[2], + background: "#" + exec[1] + } + } + }, + text: { + regex: /text\:(.*)/, + output: function (val) { + return this.regex.exec(val)[1]; + } + } +} + +for (var flag in app.flags) { + app.flags[flag].match = function (val) { + return val.match(this.regex) + } +} + +app.add_theme = function (name, theme) { + name != null && theme != null && (settings.themes[name] = theme); + return app; +}; + +app.add_image = function (src, el) { + var node = selector(el); + if (node.length) { + for (var i = 0, l = node.length; i < l; i++) { + var img = document.createElement("img") + img.setAttribute("data-src", src); + node[i].appendChild(img); + } + } + return app; +}; + +app.run = function (o) { + var options = extend(settings, o), + images_nodes = selector(options.images), + elements = selector(options.elements), + preempted = true, + images = []; + + for (i = 0, l = images_nodes.length; i < l; i++) images.push(images_nodes[i]); + + var holdercss = document.createElement("style"); + holdercss.type = "text/css"; + holdercss.styleSheet ? holdercss.styleSheet.cssText = options.stylesheet : holdercss.textContent = options.stylesheet; + document.getElementsByTagName("head")[0].appendChild(holdercss); + + var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); + + for (var l = elements.length, i = 0; i < l; i++) { + var src = window.getComputedStyle(elements[i], null) + .getPropertyValue("background-image"); + var flags = src.match(cssregex); + if (flags) { + var holder = parse_flags(flags[1].split("/"), options); + if (holder) { + render("background", elements[i], holder, src); + } + } + } + + for (var l = images.length, i = 0; i < l; i++) { + var src = images[i].getAttribute("src") || images[i].getAttribute("data-src"); + if (src != null && src.indexOf(options.domain) >= 0) { + var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1) + .split("/"), options); + if (holder) { + if (holder.fluid) { + fluid(images[i], holder, src); + } else { + render("image", images[i], holder, src); + } + } + } + } + return app; +}; + +contentLoaded(win, function () { + if (window.addEventListener) { + window.addEventListener("resize", fluid_update, false); + window.addEventListener("orientationchange", fluid_update, false); + } else { + window.attachEvent("onresize", fluid_update) + } + preempted || app.run(); +}); + +})(Holder, window); diff --git a/docs/assets/js/jquery.js b/docs/assets/js/jquery.js index 00c4e23a..3b8d15d0 100644 --- a/docs/assets/js/jquery.js +++ b/docs/assets/js/jquery.js @@ -1,9252 +1,2 @@ -/*! jQuery v1.7.1 jquery.com | jquery.org/license */ -(function( window, undefined ) { - -// Use the correct document accordingly with window argument (sandbox) -var document = window.document, - navigator = window.navigator, - location = window.location; -var jQuery = (function() { - -// Define a local copy of jQuery -var jQuery = function( selector, context ) { - // The jQuery object is actually just the init constructor 'enhanced' - return new jQuery.fn.init( selector, context, rootjQuery ); - }, - - // Map over jQuery in case of overwrite - _jQuery = window.jQuery, - - // Map over the $ in case of overwrite - _$ = window.$, - - // A central reference to the root jQuery(document) - rootjQuery, - - // A simple way to check for HTML strings or ID strings - // Prioritize #id over to avoid XSS via location.hash (#9521) - quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/, - - // Check if a string has a non-whitespace character in it - rnotwhite = /\S/, - - // Used for trimming whitespace - trimLeft = /^\s+/, - trimRight = /\s+$/, - - // Match a standalone tag - rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, - - // JSON RegExp - rvalidchars = /^[\],:{}\s]*$/, - rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, - rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, - rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g, - - // Useragent RegExp - rwebkit = /(webkit)[ \/]([\w.]+)/, - ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, - rmsie = /(msie) ([\w.]+)/, - rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, - - // Matches dashed string for camelizing - rdashAlpha = /-([a-z]|[0-9])/ig, - rmsPrefix = /^-ms-/, - - // Used by jQuery.camelCase as callback to replace() - fcamelCase = function( all, letter ) { - return ( letter + "" ).toUpperCase(); - }, - - // Keep a UserAgent string for use with jQuery.browser - userAgent = navigator.userAgent, - - // For matching the engine and version of the browser - browserMatch, - - // The deferred used on DOM ready - readyList, - - // The ready event handler - DOMContentLoaded, - - // Save a reference to some core methods - toString = Object.prototype.toString, - hasOwn = Object.prototype.hasOwnProperty, - push = Array.prototype.push, - slice = Array.prototype.slice, - trim = String.prototype.trim, - indexOf = Array.prototype.indexOf, - - // [[Class]] -> type pairs - class2type = {}; - -jQuery.fn = jQuery.prototype = { - constructor: jQuery, - init: function( selector, context, rootjQuery ) { - var match, elem, ret, doc; - - // Handle $(""), $(null), or $(undefined) - if ( !selector ) { - return this; - } - - // Handle $(DOMElement) - if ( selector.nodeType ) { - this.context = this[0] = selector; - this.length = 1; - return this; - } - - // The body element only exists once, optimize finding it - if ( selector === "body" && !context && document.body ) { - this.context = document; - this[0] = document.body; - this.selector = selector; - this.length = 1; - return this; - } - - // Handle HTML strings - if ( typeof selector === "string" ) { - // Are we dealing with HTML string or an ID? - if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { - // Assume that strings that start and end with <> are HTML and skip the regex check - match = [ null, selector, null ]; - - } else { - match = quickExpr.exec( selector ); - } - - // Verify a match, and that no context was specified for #id - if ( match && (match[1] || !context) ) { - - // HANDLE: $(html) -> $(array) - if ( match[1] ) { - context = context instanceof jQuery ? context[0] : context; - doc = ( context ? context.ownerDocument || context : document ); - - // If a single string is passed in and it's a single tag - // just do a createElement and skip the rest - ret = rsingleTag.exec( selector ); - - if ( ret ) { - if ( jQuery.isPlainObject( context ) ) { - selector = [ document.createElement( ret[1] ) ]; - jQuery.fn.attr.call( selector, context, true ); - - } else { - selector = [ doc.createElement( ret[1] ) ]; - } - - } else { - ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); - selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes; - } - - return jQuery.merge( this, selector ); - - // HANDLE: $("#id") - } else { - elem = document.getElementById( match[2] ); - - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - if ( elem && elem.parentNode ) { - // Handle the case where IE and Opera return items - // by name instead of ID - if ( elem.id !== match[2] ) { - return rootjQuery.find( selector ); - } - - // Otherwise, we inject the element directly into the jQuery object - this.length = 1; - this[0] = elem; - } - - this.context = document; - this.selector = selector; - return this; - } - - // HANDLE: $(expr, $(...)) - } else if ( !context || context.jquery ) { - return ( context || rootjQuery ).find( selector ); - - // HANDLE: $(expr, context) - // (which is just equivalent to: $(context).find(expr) - } else { - return this.constructor( context ).find( selector ); - } - - // HANDLE: $(function) - // Shortcut for document ready - } else if ( jQuery.isFunction( selector ) ) { - return rootjQuery.ready( selector ); - } - - if ( selector.selector !== undefined ) { - this.selector = selector.selector; - this.context = selector.context; - } - - return jQuery.makeArray( selector, this ); - }, - - // Start with an empty selector - selector: "", - - // The current version of jQuery being used - jquery: "1.7.1", - - // The default length of a jQuery object is 0 - length: 0, - - // The number of elements contained in the matched element set - size: function() { - return this.length; - }, - - toArray: function() { - return slice.call( this, 0 ); - }, - - // Get the Nth element in the matched element set OR - // Get the whole matched element set as a clean array - get: function( num ) { - return num == null ? - - // Return a 'clean' array - this.toArray() : - - // Return just the object - ( num < 0 ? this[ this.length + num ] : this[ num ] ); - }, - - // Take an array of elements and push it onto the stack - // (returning the new matched element set) - pushStack: function( elems, name, selector ) { - // Build a new jQuery matched element set - var ret = this.constructor(); - - if ( jQuery.isArray( elems ) ) { - push.apply( ret, elems ); - - } else { - jQuery.merge( ret, elems ); - } - - // Add the old object onto the stack (as a reference) - ret.prevObject = this; - - ret.context = this.context; - - if ( name === "find" ) { - ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; - } else if ( name ) { - ret.selector = this.selector + "." + name + "(" + selector + ")"; - } - - // Return the newly-formed element set - return ret; - }, - - // Execute a callback for every element in the matched set. - // (You can seed the arguments with an array of args, but this is - // only used internally.) - each: function( callback, args ) { - return jQuery.each( this, callback, args ); - }, - - ready: function( fn ) { - // Attach the listeners - jQuery.bindReady(); - - // Add the callback - readyList.add( fn ); - - return this; - }, - - eq: function( i ) { - i = +i; - return i === -1 ? - this.slice( i ) : - this.slice( i, i + 1 ); - }, - - first: function() { - return this.eq( 0 ); - }, - - last: function() { - return this.eq( -1 ); - }, - - slice: function() { - return this.pushStack( slice.apply( this, arguments ), - "slice", slice.call(arguments).join(",") ); - }, - - map: function( callback ) { - return this.pushStack( jQuery.map(this, function( elem, i ) { - return callback.call( elem, i, elem ); - })); - }, - - end: function() { - return this.prevObject || this.constructor(null); - }, - - // For internal use only. - // Behaves like an Array's method, not like a jQuery method. - push: push, - sort: [].sort, - splice: [].splice -}; - -// Give the init function the jQuery prototype for later instantiation -jQuery.fn.init.prototype = jQuery.fn; - -jQuery.extend = jQuery.fn.extend = function() { - var options, name, src, copy, copyIsArray, clone, - target = arguments[0] || {}, - i = 1, - length = arguments.length, - deep = false; - - // Handle a deep copy situation - if ( typeof target === "boolean" ) { - deep = target; - target = arguments[1] || {}; - // skip the boolean and the target - i = 2; - } - - // Handle case when target is a string or something (possible in deep copy) - if ( typeof target !== "object" && !jQuery.isFunction(target) ) { - target = {}; - } - - // extend jQuery itself if only one argument is passed - if ( length === i ) { - target = this; - --i; - } - - for ( ; i < length; i++ ) { - // Only deal with non-null/undefined values - if ( (options = arguments[ i ]) != null ) { - // Extend the base object - for ( name in options ) { - src = target[ name ]; - copy = options[ name ]; - - // Prevent never-ending loop - if ( target === copy ) { - continue; - } - - // Recurse if we're merging plain objects or arrays - if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { - if ( copyIsArray ) { - copyIsArray = false; - clone = src && jQuery.isArray(src) ? src : []; - - } else { - clone = src && jQuery.isPlainObject(src) ? src : {}; - } - - // Never move original objects, clone them - target[ name ] = jQuery.extend( deep, clone, copy ); - - // Don't bring in undefined values - } else if ( copy !== undefined ) { - target[ name ] = copy; - } - } - } - } - - // Return the modified object - return target; -}; - -jQuery.extend({ - noConflict: function( deep ) { - if ( window.$ === jQuery ) { - window.$ = _$; - } - - if ( deep && window.jQuery === jQuery ) { - window.jQuery = _jQuery; - } - - return jQuery; - }, - - // Is the DOM ready to be used? Set to true once it occurs. - isReady: false, - - // A counter to track how many items to wait for before - // the ready event fires. See #6781 - readyWait: 1, - - // Hold (or release) the ready event - holdReady: function( hold ) { - if ( hold ) { - jQuery.readyWait++; - } else { - jQuery.ready( true ); - } - }, - - // Handle when the DOM is ready - ready: function( wait ) { - // Either a released hold or an DOMready/load event and not yet ready - if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) { - // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). - if ( !document.body ) { - return setTimeout( jQuery.ready, 1 ); - } - - // Remember that the DOM is ready - jQuery.isReady = true; - - // If a normal DOM Ready event fired, decrement, and wait if need be - if ( wait !== true && --jQuery.readyWait > 0 ) { - return; - } - - // If there are functions bound, to execute - readyList.fireWith( document, [ jQuery ] ); - - // Trigger any bound ready events - if ( jQuery.fn.trigger ) { - jQuery( document ).trigger( "ready" ).off( "ready" ); - } - } - }, - - bindReady: function() { - if ( readyList ) { - return; - } - - readyList = jQuery.Callbacks( "once memory" ); - - // Catch cases where $(document).ready() is called after the - // browser event has already occurred. - if ( document.readyState === "complete" ) { - // Handle it asynchronously to allow scripts the opportunity to delay ready - return setTimeout( jQuery.ready, 1 ); - } - - // Mozilla, Opera and webkit nightlies currently support this event - if ( document.addEventListener ) { - // Use the handy event callback - document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); - - // A fallback to window.onload, that will always work - window.addEventListener( "load", jQuery.ready, false ); - - // If IE event model is used - } else if ( document.attachEvent ) { - // ensure firing before onload, - // maybe late but safe also for iframes - document.attachEvent( "onreadystatechange", DOMContentLoaded ); - - // A fallback to window.onload, that will always work - window.attachEvent( "onload", jQuery.ready ); - - // If IE and not a frame - // continually check to see if the document is ready - var toplevel = false; - - try { - toplevel = window.frameElement == null; - } catch(e) {} - - if ( document.documentElement.doScroll && toplevel ) { - doScrollCheck(); - } - } - }, - - // See test/unit/core.js for details concerning isFunction. - // Since version 1.3, DOM methods and functions like alert - // aren't supported. They return false on IE (#2968). - isFunction: function( obj ) { - return jQuery.type(obj) === "function"; - }, - - isArray: Array.isArray || function( obj ) { - return jQuery.type(obj) === "array"; - }, - - // A crude way of determining if an object is a window - isWindow: function( obj ) { - return obj && typeof obj === "object" && "setInterval" in obj; - }, - - isNumeric: function( obj ) { - return !isNaN( parseFloat(obj) ) && isFinite( obj ); - }, - - type: function( obj ) { - return obj == null ? - String( obj ) : - class2type[ toString.call(obj) ] || "object"; - }, - - isPlainObject: function( obj ) { - // Must be an Object. - // Because of IE, we also have to check the presence of the constructor property. - // Make sure that DOM nodes and window objects don't pass through, as well - if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) { - return false; - } - - try { - // Not own constructor property must be Object - if ( obj.constructor && - !hasOwn.call(obj, "constructor") && - !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) { - return false; - } - } catch ( e ) { - // IE8,9 Will throw exceptions on certain host objects #9897 - return false; - } - - // Own properties are enumerated firstly, so to speed up, - // if last one is own, then all properties are own. - - var key; - for ( key in obj ) {} - - return key === undefined || hasOwn.call( obj, key ); - }, - - isEmptyObject: function( obj ) { - for ( var name in obj ) { - return false; - } - return true; - }, - - error: function( msg ) { - throw new Error( msg ); - }, - - parseJSON: function( data ) { - if ( typeof data !== "string" || !data ) { - return null; - } - - // Make sure leading/trailing whitespace is removed (IE can't handle it) - data = jQuery.trim( data ); - - // Attempt to parse using the native JSON parser first - if ( window.JSON && window.JSON.parse ) { - return window.JSON.parse( data ); - } - - // Make sure the incoming data is actual JSON - // Logic borrowed from http://json.org/json2.js - if ( rvalidchars.test( data.replace( rvalidescape, "@" ) - .replace( rvalidtokens, "]" ) - .replace( rvalidbraces, "")) ) { - - return ( new Function( "return " + data ) )(); - - } - jQuery.error( "Invalid JSON: " + data ); - }, - - // Cross-browser xml parsing - parseXML: function( data ) { - var xml, tmp; - try { - if ( window.DOMParser ) { // Standard - tmp = new DOMParser(); - xml = tmp.parseFromString( data , "text/xml" ); - } else { // IE - xml = new ActiveXObject( "Microsoft.XMLDOM" ); - xml.async = "false"; - xml.loadXML( data ); - } - } catch( e ) { - xml = undefined; - } - if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) { - jQuery.error( "Invalid XML: " + data ); - } - return xml; - }, - - noop: function() {}, - - // Evaluates a script in a global context - // Workarounds based on findings by Jim Driscoll - // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context - globalEval: function( data ) { - if ( data && rnotwhite.test( data ) ) { - // We use execScript on Internet Explorer - // We use an anonymous function so that context is window - // rather than jQuery in Firefox - ( window.execScript || function( data ) { - window[ "eval" ].call( window, data ); - } )( data ); - } - }, - - // Convert dashed to camelCase; used by the css and data modules - // Microsoft forgot to hump their vendor prefix (#9572) - camelCase: function( string ) { - return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); - }, - - nodeName: function( elem, name ) { - return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase(); - }, - - // args is for internal usage only - each: function( object, callback, args ) { - var name, i = 0, - length = object.length, - isObj = length === undefined || jQuery.isFunction( object ); - - if ( args ) { - if ( isObj ) { - for ( name in object ) { - if ( callback.apply( object[ name ], args ) === false ) { - break; - } - } - } else { - for ( ; i < length; ) { - if ( callback.apply( object[ i++ ], args ) === false ) { - break; - } - } - } - - // A special, fast, case for the most common use of each - } else { - if ( isObj ) { - for ( name in object ) { - if ( callback.call( object[ name ], name, object[ name ] ) === false ) { - break; - } - } - } else { - for ( ; i < length; ) { - if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { - break; - } - } - } - } - - return object; - }, - - // Use native String.trim function wherever possible - trim: trim ? - function( text ) { - return text == null ? - "" : - trim.call( text ); - } : - - // Otherwise use our own trimming functionality - function( text ) { - return text == null ? - "" : - text.toString().replace( trimLeft, "" ).replace( trimRight, "" ); - }, - - // results is for internal usage only - makeArray: function( array, results ) { - var ret = results || []; - - if ( array != null ) { - // The window, strings (and functions) also have 'length' - // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930 - var type = jQuery.type( array ); - - if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { - push.call( ret, array ); - } else { - jQuery.merge( ret, array ); - } - } - - return ret; - }, - - inArray: function( elem, array, i ) { - var len; - - if ( array ) { - if ( indexOf ) { - return indexOf.call( array, elem, i ); - } - - len = array.length; - i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; - - for ( ; i < len; i++ ) { - // Skip accessing in sparse arrays - if ( i in array && array[ i ] === elem ) { - return i; - } - } - } - - return -1; - }, - - merge: function( first, second ) { - var i = first.length, - j = 0; - - if ( typeof second.length === "number" ) { - for ( var l = second.length; j < l; j++ ) { - first[ i++ ] = second[ j ]; - } - - } else { - while ( second[j] !== undefined ) { - first[ i++ ] = second[ j++ ]; - } - } - - first.length = i; - - return first; - }, - - grep: function( elems, callback, inv ) { - var ret = [], retVal; - inv = !!inv; - - // Go through the array, only saving the items - // that pass the validator function - for ( var i = 0, length = elems.length; i < length; i++ ) { - retVal = !!callback( elems[ i ], i ); - if ( inv !== retVal ) { - ret.push( elems[ i ] ); - } - } - - return ret; - }, - - // arg is for internal usage only - map: function( elems, callback, arg ) { - var value, key, ret = [], - i = 0, - length = elems.length, - // jquery objects are treated as arrays - isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; - - // Go through the array, translating each of the items to their - if ( isArray ) { - for ( ; i < length; i++ ) { - value = callback( elems[ i ], i, arg ); - - if ( value != null ) { - ret[ ret.length ] = value; - } - } - - // Go through every key on the object - } else { - for ( key in elems ) { - value = callback( elems[ key ], key, arg ); - - if ( value != null ) { - ret[ ret.length ] = value; - } - } - } - - // Flatten any nested arrays - return ret.concat.apply( [], ret ); - }, - - // A global GUID counter for objects - guid: 1, - - // Bind a function to a context, optionally partially applying any - // arguments. - proxy: function( fn, context ) { - if ( typeof context === "string" ) { - var tmp = fn[ context ]; - context = fn; - fn = tmp; - } - - // Quick check to determine if target is callable, in the spec - // this throws a TypeError, but we will just return undefined. - if ( !jQuery.isFunction( fn ) ) { - return undefined; - } - - // Simulated bind - var args = slice.call( arguments, 2 ), - proxy = function() { - return fn.apply( context, args.concat( slice.call( arguments ) ) ); - }; - - // Set the guid of unique handler to the same of original handler, so it can be removed - proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; - - return proxy; - }, - - // Mutifunctional method to get and set values to a collection - // The value/s can optionally be executed if it's a function - access: function( elems, key, value, exec, fn, pass ) { - var length = elems.length; - - // Setting many attributes - if ( typeof key === "object" ) { - for ( var k in key ) { - jQuery.access( elems, k, key[k], exec, fn, value ); - } - return elems; - } - - // Setting one attribute - if ( value !== undefined ) { - // Optionally, function values get executed if exec is true - exec = !pass && exec && jQuery.isFunction(value); - - for ( var i = 0; i < length; i++ ) { - fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); - } - - return elems; - } - - // Getting an attribute - return length ? fn( elems[0], key ) : undefined; - }, - - now: function() { - return ( new Date() ).getTime(); - }, - - // Use of jQuery.browser is frowned upon. - // More details: http://docs.jquery.com/Utilities/jQuery.browser - uaMatch: function( ua ) { - ua = ua.toLowerCase(); - - var match = rwebkit.exec( ua ) || - ropera.exec( ua ) || - rmsie.exec( ua ) || - ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || - []; - - return { browser: match[1] || "", version: match[2] || "0" }; - }, - - sub: function() { - function jQuerySub( selector, context ) { - return new jQuerySub.fn.init( selector, context ); - } - jQuery.extend( true, jQuerySub, this ); - jQuerySub.superclass = this; - jQuerySub.fn = jQuerySub.prototype = this(); - jQuerySub.fn.constructor = jQuerySub; - jQuerySub.sub = this.sub; - jQuerySub.fn.init = function init( selector, context ) { - if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) { - context = jQuerySub( context ); - } - - return jQuery.fn.init.call( this, selector, context, rootjQuerySub ); - }; - jQuerySub.fn.init.prototype = jQuerySub.fn; - var rootjQuerySub = jQuerySub(document); - return jQuerySub; - }, - - browser: {} -}); - -// Populate the class2type map -jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { - class2type[ "[object " + name + "]" ] = name.toLowerCase(); -}); - -browserMatch = jQuery.uaMatch( userAgent ); -if ( browserMatch.browser ) { - jQuery.browser[ browserMatch.browser ] = true; - jQuery.browser.version = browserMatch.version; -} - -// Deprecated, use jQuery.browser.webkit instead -if ( jQuery.browser.webkit ) { - jQuery.browser.safari = true; -} - -// IE doesn't match non-breaking spaces with \s -if ( rnotwhite.test( "\xA0" ) ) { - trimLeft = /^[\s\xA0]+/; - trimRight = /[\s\xA0]+$/; -} - -// All jQuery objects should point back to these -rootjQuery = jQuery(document); - -// Cleanup functions for the document ready method -if ( document.addEventListener ) { - DOMContentLoaded = function() { - document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); - jQuery.ready(); - }; - -} else if ( document.attachEvent ) { - DOMContentLoaded = function() { - // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). - if ( document.readyState === "complete" ) { - document.detachEvent( "onreadystatechange", DOMContentLoaded ); - jQuery.ready(); - } - }; -} - -// The DOM ready check for Internet Explorer -function doScrollCheck() { - if ( jQuery.isReady ) { - return; - } - - try { - // If IE is used, use the trick by Diego Perini - // http://javascript.nwbox.com/IEContentLoaded/ - document.documentElement.doScroll("left"); - } catch(e) { - setTimeout( doScrollCheck, 1 ); - return; - } - - // and execute any waiting functions - jQuery.ready(); -} - -return jQuery; - -})(); - - -// String to Object flags format cache -var flagsCache = {}; - -// Convert String-formatted flags into Object-formatted ones and store in cache -function createFlags( flags ) { - var object = flagsCache[ flags ] = {}, - i, length; - flags = flags.split( /\s+/ ); - for ( i = 0, length = flags.length; i < length; i++ ) { - object[ flags[i] ] = true; - } - return object; -} - -/* - * Create a callback list using the following parameters: - * - * flags: an optional list of space-separated flags that will change how - * the callback list behaves - * - * By default a callback list will act like an event callback list and can be - * "fired" multiple times. - * - * Possible flags: - * - * once: will ensure the callback list can only be fired once (like a Deferred) - * - * memory: will keep track of previous values and will call any callback added - * after the list has been fired right away with the latest "memorized" - * values (like a Deferred) - * - * unique: will ensure a callback can only be added once (no duplicate in the list) - * - * stopOnFalse: interrupt callings when a callback returns false - * - */ -jQuery.Callbacks = function( flags ) { - - // Convert flags from String-formatted to Object-formatted - // (we check in cache first) - flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {}; - - var // Actual callback list - list = [], - // Stack of fire calls for repeatable lists - stack = [], - // Last fire value (for non-forgettable lists) - memory, - // Flag to know if list is currently firing - firing, - // First callback to fire (used internally by add and fireWith) - firingStart, - // End of the loop when firing - firingLength, - // Index of currently firing callback (modified by remove if needed) - firingIndex, - // Add one or several callbacks to the list - add = function( args ) { - var i, - length, - elem, - type, - actual; - for ( i = 0, length = args.length; i < length; i++ ) { - elem = args[ i ]; - type = jQuery.type( elem ); - if ( type === "array" ) { - // Inspect recursively - add( elem ); - } else if ( type === "function" ) { - // Add if not in unique mode and callback is not in - if ( !flags.unique || !self.has( elem ) ) { - list.push( elem ); - } - } - } - }, - // Fire callbacks - fire = function( context, args ) { - args = args || []; - memory = !flags.memory || [ context, args ]; - firing = true; - firingIndex = firingStart || 0; - firingStart = 0; - firingLength = list.length; - for ( ; list && firingIndex < firingLength; firingIndex++ ) { - if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) { - memory = true; // Mark as halted - break; - } - } - firing = false; - if ( list ) { - if ( !flags.once ) { - if ( stack && stack.length ) { - memory = stack.shift(); - self.fireWith( memory[ 0 ], memory[ 1 ] ); - } - } else if ( memory === true ) { - self.disable(); - } else { - list = []; - } - } - }, - // Actual Callbacks object - self = { - // Add a callback or a collection of callbacks to the list - add: function() { - if ( list ) { - var length = list.length; - add( arguments ); - // Do we need to add the callbacks to the - // current firing batch? - if ( firing ) { - firingLength = list.length; - // With memory, if we're not firing then - // we should call right away, unless previous - // firing was halted (stopOnFalse) - } else if ( memory && memory !== true ) { - firingStart = length; - fire( memory[ 0 ], memory[ 1 ] ); - } - } - return this; - }, - // Remove a callback from the list - remove: function() { - if ( list ) { - var args = arguments, - argIndex = 0, - argLength = args.length; - for ( ; argIndex < argLength ; argIndex++ ) { - for ( var i = 0; i < list.length; i++ ) { - if ( args[ argIndex ] === list[ i ] ) { - // Handle firingIndex and firingLength - if ( firing ) { - if ( i <= firingLength ) { - firingLength--; - if ( i <= firingIndex ) { - firingIndex--; - } - } - } - // Remove the element - list.splice( i--, 1 ); - // If we have some unicity property then - // we only need to do this once - if ( flags.unique ) { - break; - } - } - } - } - } - return this; - }, - // Control if a given callback is in the list - has: function( fn ) { - if ( list ) { - var i = 0, - length = list.length; - for ( ; i < length; i++ ) { - if ( fn === list[ i ] ) { - return true; - } - } - } - return false; - }, - // Remove all callbacks from the list - empty: function() { - list = []; - return this; - }, - // Have the list do nothing anymore - disable: function() { - list = stack = memory = undefined; - return this; - }, - // Is it disabled? - disabled: function() { - return !list; - }, - // Lock the list in its current state - lock: function() { - stack = undefined; - if ( !memory || memory === true ) { - self.disable(); - } - return this; - }, - // Is it locked? - locked: function() { - return !stack; - }, - // Call all callbacks with the given context and arguments - fireWith: function( context, args ) { - if ( stack ) { - if ( firing ) { - if ( !flags.once ) { - stack.push( [ context, args ] ); - } - } else if ( !( flags.once && memory ) ) { - fire( context, args ); - } - } - return this; - }, - // Call all the callbacks with the given arguments - fire: function() { - self.fireWith( this, arguments ); - return this; - }, - // To know if the callbacks have already been called at least once - fired: function() { - return !!memory; - } - }; - - return self; -}; - - - - -var // Static reference to slice - sliceDeferred = [].slice; - -jQuery.extend({ - - Deferred: function( func ) { - var doneList = jQuery.Callbacks( "once memory" ), - failList = jQuery.Callbacks( "once memory" ), - progressList = jQuery.Callbacks( "memory" ), - state = "pending", - lists = { - resolve: doneList, - reject: failList, - notify: progressList - }, - promise = { - done: doneList.add, - fail: failList.add, - progress: progressList.add, - - state: function() { - return state; - }, - - // Deprecated - isResolved: doneList.fired, - isRejected: failList.fired, - - then: function( doneCallbacks, failCallbacks, progressCallbacks ) { - deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks ); - return this; - }, - always: function() { - deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments ); - return this; - }, - pipe: function( fnDone, fnFail, fnProgress ) { - return jQuery.Deferred(function( newDefer ) { - jQuery.each( { - done: [ fnDone, "resolve" ], - fail: [ fnFail, "reject" ], - progress: [ fnProgress, "notify" ] - }, function( handler, data ) { - var fn = data[ 0 ], - action = data[ 1 ], - returned; - if ( jQuery.isFunction( fn ) ) { - deferred[ handler ](function() { - returned = fn.apply( this, arguments ); - if ( returned && jQuery.isFunction( returned.promise ) ) { - returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify ); - } else { - newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] ); - } - }); - } else { - deferred[ handler ]( newDefer[ action ] ); - } - }); - }).promise(); - }, - // Get a promise for this deferred - // If obj is provided, the promise aspect is added to the object - promise: function( obj ) { - if ( obj == null ) { - obj = promise; - } else { - for ( var key in promise ) { - obj[ key ] = promise[ key ]; - } - } - return obj; - } - }, - deferred = promise.promise({}), - key; - - for ( key in lists ) { - deferred[ key ] = lists[ key ].fire; - deferred[ key + "With" ] = lists[ key ].fireWith; - } - - // Handle state - deferred.done( function() { - state = "resolved"; - }, failList.disable, progressList.lock ).fail( function() { - state = "rejected"; - }, doneList.disable, progressList.lock ); - - // Call given func if any - if ( func ) { - func.call( deferred, deferred ); - } - - // All done! - return deferred; - }, - - // Deferred helper - when: function( firstParam ) { - var args = sliceDeferred.call( arguments, 0 ), - i = 0, - length = args.length, - pValues = new Array( length ), - count = length, - pCount = length, - deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ? - firstParam : - jQuery.Deferred(), - promise = deferred.promise(); - function resolveFunc( i ) { - return function( value ) { - args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; - if ( !( --count ) ) { - deferred.resolveWith( deferred, args ); - } - }; - } - function progressFunc( i ) { - return function( value ) { - pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; - deferred.notifyWith( promise, pValues ); - }; - } - if ( length > 1 ) { - for ( ; i < length; i++ ) { - if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) { - args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) ); - } else { - --count; - } - } - if ( !count ) { - deferred.resolveWith( deferred, args ); - } - } else if ( deferred !== firstParam ) { - deferred.resolveWith( deferred, length ? [ firstParam ] : [] ); - } - return promise; - } -}); - - - - -jQuery.support = (function() { - - var support, - all, - a, - select, - opt, - input, - marginDiv, - fragment, - tds, - events, - eventName, - i, - isSupported, - div = document.createElement( "div" ), - documentElement = document.documentElement; - - // Preliminary tests - div.setAttribute("className", "t"); - div.innerHTML = "
        a"; - - all = div.getElementsByTagName( "*" ); - a = div.getElementsByTagName( "a" )[ 0 ]; - - // Can't get basic test support - if ( !all || !all.length || !a ) { - return {}; - } - - // First batch of supports tests - select = document.createElement( "select" ); - opt = select.appendChild( document.createElement("option") ); - input = div.getElementsByTagName( "input" )[ 0 ]; - - support = { - // IE strips leading whitespace when .innerHTML is used - leadingWhitespace: ( div.firstChild.nodeType === 3 ), - - // Make sure that tbody elements aren't automatically inserted - // IE will insert them into empty tables - tbody: !div.getElementsByTagName("tbody").length, - - // Make sure that link elements get serialized correctly by innerHTML - // This requires a wrapper element in IE - htmlSerialize: !!div.getElementsByTagName("link").length, - - // Get the style information from getAttribute - // (IE uses .cssText instead) - style: /top/.test( a.getAttribute("style") ), - - // Make sure that URLs aren't manipulated - // (IE normalizes it by default) - hrefNormalized: ( a.getAttribute("href") === "/a" ), - - // Make sure that element opacity exists - // (IE uses filter instead) - // Use a regex to work around a WebKit issue. See #5145 - opacity: /^0.55/.test( a.style.opacity ), - - // Verify style float existence - // (IE uses styleFloat instead of cssFloat) - cssFloat: !!a.style.cssFloat, - - // Make sure that if no value is specified for a checkbox - // that it defaults to "on". - // (WebKit defaults to "" instead) - checkOn: ( input.value === "on" ), - - // Make sure that a selected-by-default option has a working selected property. - // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) - optSelected: opt.selected, - - // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7) - getSetAttribute: div.className !== "t", - - // Tests for enctype support on a form(#6743) - enctype: !!document.createElement("form").enctype, - - // Makes sure cloning an html5 element does not cause problems - // Where outerHTML is undefined, this still works - html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav>", - - // Will be defined later - submitBubbles: true, - changeBubbles: true, - focusinBubbles: false, - deleteExpando: true, - noCloneEvent: true, - inlineBlockNeedsLayout: false, - shrinkWrapBlocks: false, - reliableMarginRight: true - }; - - // Make sure checked status is properly cloned - input.checked = true; - support.noCloneChecked = input.cloneNode( true ).checked; - - // Make sure that the options inside disabled selects aren't marked as disabled - // (WebKit marks them as disabled) - select.disabled = true; - support.optDisabled = !opt.disabled; - - // Test to see if it's possible to delete an expando from an element - // Fails in Internet Explorer - try { - delete div.test; - } catch( e ) { - support.deleteExpando = false; - } - - if ( !div.addEventListener && div.attachEvent && div.fireEvent ) { - div.attachEvent( "onclick", function() { - // Cloning a node shouldn't copy over any - // bound event handlers (IE does this) - support.noCloneEvent = false; - }); - div.cloneNode( true ).fireEvent( "onclick" ); - } - - // Check if a radio maintains its value - // after being appended to the DOM - input = document.createElement("input"); - input.value = "t"; - input.setAttribute("type", "radio"); - support.radioValue = input.value === "t"; - - input.setAttribute("checked", "checked"); - div.appendChild( input ); - fragment = document.createDocumentFragment(); - fragment.appendChild( div.lastChild ); - - // WebKit doesn't clone checked state correctly in fragments - support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; - - // Check if a disconnected checkbox will retain its checked - // value of true after appended to the DOM (IE6/7) - support.appendChecked = input.checked; - - fragment.removeChild( input ); - fragment.appendChild( div ); - - div.innerHTML = ""; - - // Check if div with explicit width and no margin-right incorrectly - // gets computed margin-right based on width of container. For more - // info see bug #3333 - // Fails in WebKit before Feb 2011 nightlies - // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right - if ( window.getComputedStyle ) { - marginDiv = document.createElement( "div" ); - marginDiv.style.width = "0"; - marginDiv.style.marginRight = "0"; - div.style.width = "2px"; - div.appendChild( marginDiv ); - support.reliableMarginRight = - ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0; - } - - // Technique from Juriy Zaytsev - // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ - // We only care about the case where non-standard event systems - // are used, namely in IE. Short-circuiting here helps us to - // avoid an eval call (in setAttribute) which can cause CSP - // to go haywire. See: https://developer.mozilla.org/en/Security/CSP - if ( div.attachEvent ) { - for( i in { - submit: 1, - change: 1, - focusin: 1 - }) { - eventName = "on" + i; - isSupported = ( eventName in div ); - if ( !isSupported ) { - div.setAttribute( eventName, "return;" ); - isSupported = ( typeof div[ eventName ] === "function" ); - } - support[ i + "Bubbles" ] = isSupported; - } - } - - fragment.removeChild( div ); - - // Null elements to avoid leaks in IE - fragment = select = opt = marginDiv = div = input = null; - - // Run tests that need a body at doc ready - jQuery(function() { - var container, outer, inner, table, td, offsetSupport, - conMarginTop, ptlm, vb, style, html, - body = document.getElementsByTagName("body")[0]; - - if ( !body ) { - // Return for frameset docs that don't have a body - return; - } - - conMarginTop = 1; - ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;"; - vb = "visibility:hidden;border:0;"; - style = "style='" + ptlm + "border:5px solid #000;padding:0;'"; - html = "
        " + - "" + - "
        "; - - container = document.createElement("div"); - container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px"; - body.insertBefore( container, body.firstChild ); - - // Construct the test element - div = document.createElement("div"); - container.appendChild( div ); - - // Check if table cells still have offsetWidth/Height when they are set - // to display:none and there are still other visible table cells in a - // table row; if so, offsetWidth/Height are not reliable for use when - // determining if an element has been hidden directly using - // display:none (it is still safe to use offsets if a parent element is - // hidden; don safety goggles and see bug #4512 for more information). - // (only IE 8 fails this test) - div.innerHTML = "
        t
        "; - tds = div.getElementsByTagName( "td" ); - isSupported = ( tds[ 0 ].offsetHeight === 0 ); - - tds[ 0 ].style.display = ""; - tds[ 1 ].style.display = "none"; - - // Check if empty table cells still have offsetWidth/Height - // (IE <= 8 fail this test) - support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); - - // Figure out if the W3C box model works as expected - div.innerHTML = ""; - div.style.width = div.style.paddingLeft = "1px"; - jQuery.boxModel = support.boxModel = div.offsetWidth === 2; - - if ( typeof div.style.zoom !== "undefined" ) { - // Check if natively block-level elements act like inline-block - // elements when setting their display to 'inline' and giving - // them layout - // (IE < 8 does this) - div.style.display = "inline"; - div.style.zoom = 1; - support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 ); - - // Check if elements with layout shrink-wrap their children - // (IE 6 does this) - div.style.display = ""; - div.innerHTML = "
        "; - support.shrinkWrapBlocks = ( div.offsetWidth !== 2 ); - } - - div.style.cssText = ptlm + vb; - div.innerHTML = html; - - outer = div.firstChild; - inner = outer.firstChild; - td = outer.nextSibling.firstChild.firstChild; - - offsetSupport = { - doesNotAddBorder: ( inner.offsetTop !== 5 ), - doesAddBorderForTableAndCells: ( td.offsetTop === 5 ) - }; - - inner.style.position = "fixed"; - inner.style.top = "20px"; - - // safari subtracts parent border width here which is 5px - offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 ); - inner.style.position = inner.style.top = ""; - - outer.style.overflow = "hidden"; - outer.style.position = "relative"; - - offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 ); - offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop ); - - body.removeChild( container ); - div = container = null; - - jQuery.extend( support, offsetSupport ); - }); - - return support; -})(); - - - - -var rbrace = /^(?:\{.*\}|\[.*\])$/, - rmultiDash = /([A-Z])/g; - -jQuery.extend({ - cache: {}, - - // Please use with caution - uuid: 0, - - // Unique for each copy of jQuery on the page - // Non-digits removed to match rinlinejQuery - expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ), - - // The following elements throw uncatchable exceptions if you - // attempt to add expando properties to them. - noData: { - "embed": true, - // Ban all objects except for Flash (which handle expandos) - "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", - "applet": true - }, - - hasData: function( elem ) { - elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ]; - return !!elem && !isEmptyDataObject( elem ); - }, - - data: function( elem, name, data, pvt /* Internal Use Only */ ) { - if ( !jQuery.acceptData( elem ) ) { - return; - } - - var privateCache, thisCache, ret, - internalKey = jQuery.expando, - getByName = typeof name === "string", - - // We have to handle DOM nodes and JS objects differently because IE6-7 - // can't GC object references properly across the DOM-JS boundary - isNode = elem.nodeType, - - // Only DOM nodes need the global jQuery cache; JS object data is - // attached directly to the object so GC can occur automatically - cache = isNode ? jQuery.cache : elem, - - // Only defining an ID for JS objects if its cache already exists allows - // the code to shortcut on the same path as a DOM node with no cache - id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey, - isEvents = name === "events"; - - // Avoid doing any more work than we need to when trying to get data on an - // object that has no data at all - if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) { - return; - } - - if ( !id ) { - // Only DOM nodes need a new unique ID for each element since their data - // ends up in the global cache - if ( isNode ) { - elem[ internalKey ] = id = ++jQuery.uuid; - } else { - id = internalKey; - } - } - - if ( !cache[ id ] ) { - cache[ id ] = {}; - - // Avoids exposing jQuery metadata on plain JS objects when the object - // is serialized using JSON.stringify - if ( !isNode ) { - cache[ id ].toJSON = jQuery.noop; - } - } - - // An object can be passed to jQuery.data instead of a key/value pair; this gets - // shallow copied over onto the existing cache - if ( typeof name === "object" || typeof name === "function" ) { - if ( pvt ) { - cache[ id ] = jQuery.extend( cache[ id ], name ); - } else { - cache[ id ].data = jQuery.extend( cache[ id ].data, name ); - } - } - - privateCache = thisCache = cache[ id ]; - - // jQuery data() is stored in a separate object inside the object's internal data - // cache in order to avoid key collisions between internal data and user-defined - // data. - if ( !pvt ) { - if ( !thisCache.data ) { - thisCache.data = {}; - } - - thisCache = thisCache.data; - } - - if ( data !== undefined ) { - thisCache[ jQuery.camelCase( name ) ] = data; - } - - // Users should not attempt to inspect the internal events object using jQuery.data, - // it is undocumented and subject to change. But does anyone listen? No. - if ( isEvents && !thisCache[ name ] ) { - return privateCache.events; - } - - // Check for both converted-to-camel and non-converted data property names - // If a data property was specified - if ( getByName ) { - - // First Try to find as-is property data - ret = thisCache[ name ]; - - // Test for null|undefined property data - if ( ret == null ) { - - // Try to find the camelCased property - ret = thisCache[ jQuery.camelCase( name ) ]; - } - } else { - ret = thisCache; - } - - return ret; - }, - - removeData: function( elem, name, pvt /* Internal Use Only */ ) { - if ( !jQuery.acceptData( elem ) ) { - return; - } - - var thisCache, i, l, - - // Reference to internal data cache key - internalKey = jQuery.expando, - - isNode = elem.nodeType, - - // See jQuery.data for more information - cache = isNode ? jQuery.cache : elem, - - // See jQuery.data for more information - id = isNode ? elem[ internalKey ] : internalKey; - - // If there is already no cache entry for this object, there is no - // purpose in continuing - if ( !cache[ id ] ) { - return; - } - - if ( name ) { - - thisCache = pvt ? cache[ id ] : cache[ id ].data; - - if ( thisCache ) { - - // Support array or space separated string names for data keys - if ( !jQuery.isArray( name ) ) { - - // try the string as a key before any manipulation - if ( name in thisCache ) { - name = [ name ]; - } else { - - // split the camel cased version by spaces unless a key with the spaces exists - name = jQuery.camelCase( name ); - if ( name in thisCache ) { - name = [ name ]; - } else { - name = name.split( " " ); - } - } - } - - for ( i = 0, l = name.length; i < l; i++ ) { - delete thisCache[ name[i] ]; - } - - // If there is no data left in the cache, we want to continue - // and let the cache object itself get destroyed - if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) { - return; - } - } - } - - // See jQuery.data for more information - if ( !pvt ) { - delete cache[ id ].data; - - // Don't destroy the parent cache unless the internal data object - // had been the only thing left in it - if ( !isEmptyDataObject(cache[ id ]) ) { - return; - } - } - - // Browsers that fail expando deletion also refuse to delete expandos on - // the window, but it will allow it on all other JS objects; other browsers - // don't care - // Ensure that `cache` is not a window object #10080 - if ( jQuery.support.deleteExpando || !cache.setInterval ) { - delete cache[ id ]; - } else { - cache[ id ] = null; - } - - // We destroyed the cache and need to eliminate the expando on the node to avoid - // false lookups in the cache for entries that no longer exist - if ( isNode ) { - // IE does not allow us to delete expando properties from nodes, - // nor does it have a removeAttribute function on Document nodes; - // we must handle all of these cases - if ( jQuery.support.deleteExpando ) { - delete elem[ internalKey ]; - } else if ( elem.removeAttribute ) { - elem.removeAttribute( internalKey ); - } else { - elem[ internalKey ] = null; - } - } - }, - - // For internal use only. - _data: function( elem, name, data ) { - return jQuery.data( elem, name, data, true ); - }, - - // A method for determining if a DOM node can handle the data expando - acceptData: function( elem ) { - if ( elem.nodeName ) { - var match = jQuery.noData[ elem.nodeName.toLowerCase() ]; - - if ( match ) { - return !(match === true || elem.getAttribute("classid") !== match); - } - } - - return true; - } -}); - -jQuery.fn.extend({ - data: function( key, value ) { - var parts, attr, name, - data = null; - - if ( typeof key === "undefined" ) { - if ( this.length ) { - data = jQuery.data( this[0] ); - - if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) { - attr = this[0].attributes; - for ( var i = 0, l = attr.length; i < l; i++ ) { - name = attr[i].name; - - if ( name.indexOf( "data-" ) === 0 ) { - name = jQuery.camelCase( name.substring(5) ); - - dataAttr( this[0], name, data[ name ] ); - } - } - jQuery._data( this[0], "parsedAttrs", true ); - } - } - - return data; - - } else if ( typeof key === "object" ) { - return this.each(function() { - jQuery.data( this, key ); - }); - } - - parts = key.split("."); - parts[1] = parts[1] ? "." + parts[1] : ""; - - if ( value === undefined ) { - data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]); - - // Try to fetch any internally stored data first - if ( data === undefined && this.length ) { - data = jQuery.data( this[0], key ); - data = dataAttr( this[0], key, data ); - } - - return data === undefined && parts[1] ? - this.data( parts[0] ) : - data; - - } else { - return this.each(function() { - var self = jQuery( this ), - args = [ parts[0], value ]; - - self.triggerHandler( "setData" + parts[1] + "!", args ); - jQuery.data( this, key, value ); - self.triggerHandler( "changeData" + parts[1] + "!", args ); - }); - } - }, - - removeData: function( key ) { - return this.each(function() { - jQuery.removeData( this, key ); - }); - } -}); - -function dataAttr( elem, key, data ) { - // If nothing was found internally, try to fetch any - // data from the HTML5 data-* attribute - if ( data === undefined && elem.nodeType === 1 ) { - - var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); - - data = elem.getAttribute( name ); - - if ( typeof data === "string" ) { - try { - data = data === "true" ? true : - data === "false" ? false : - data === "null" ? null : - jQuery.isNumeric( data ) ? parseFloat( data ) : - rbrace.test( data ) ? jQuery.parseJSON( data ) : - data; - } catch( e ) {} - - // Make sure we set the data so it isn't changed later - jQuery.data( elem, key, data ); - - } else { - data = undefined; - } - } - - return data; -} - -// checks a cache object for emptiness -function isEmptyDataObject( obj ) { - for ( var name in obj ) { - - // if the public data object is empty, the private is still empty - if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) { - continue; - } - if ( name !== "toJSON" ) { - return false; - } - } - - return true; -} - - - - -function handleQueueMarkDefer( elem, type, src ) { - var deferDataKey = type + "defer", - queueDataKey = type + "queue", - markDataKey = type + "mark", - defer = jQuery._data( elem, deferDataKey ); - if ( defer && - ( src === "queue" || !jQuery._data(elem, queueDataKey) ) && - ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) { - // Give room for hard-coded callbacks to fire first - // and eventually mark/queue something else on the element - setTimeout( function() { - if ( !jQuery._data( elem, queueDataKey ) && - !jQuery._data( elem, markDataKey ) ) { - jQuery.removeData( elem, deferDataKey, true ); - defer.fire(); - } - }, 0 ); - } -} - -jQuery.extend({ - - _mark: function( elem, type ) { - if ( elem ) { - type = ( type || "fx" ) + "mark"; - jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 ); - } - }, - - _unmark: function( force, elem, type ) { - if ( force !== true ) { - type = elem; - elem = force; - force = false; - } - if ( elem ) { - type = type || "fx"; - var key = type + "mark", - count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 ); - if ( count ) { - jQuery._data( elem, key, count ); - } else { - jQuery.removeData( elem, key, true ); - handleQueueMarkDefer( elem, type, "mark" ); - } - } - }, - - queue: function( elem, type, data ) { - var q; - if ( elem ) { - type = ( type || "fx" ) + "queue"; - q = jQuery._data( elem, type ); - - // Speed up dequeue by getting out quickly if this is just a lookup - if ( data ) { - if ( !q || jQuery.isArray(data) ) { - q = jQuery._data( elem, type, jQuery.makeArray(data) ); - } else { - q.push( data ); - } - } - return q || []; - } - }, - - dequeue: function( elem, type ) { - type = type || "fx"; - - var queue = jQuery.queue( elem, type ), - fn = queue.shift(), - hooks = {}; - - // If the fx queue is dequeued, always remove the progress sentinel - if ( fn === "inprogress" ) { - fn = queue.shift(); - } - - if ( fn ) { - // Add a progress sentinel to prevent the fx queue from being - // automatically dequeued - if ( type === "fx" ) { - queue.unshift( "inprogress" ); - } - - jQuery._data( elem, type + ".run", hooks ); - fn.call( elem, function() { - jQuery.dequeue( elem, type ); - }, hooks ); - } - - if ( !queue.length ) { - jQuery.removeData( elem, type + "queue " + type + ".run", true ); - handleQueueMarkDefer( elem, type, "queue" ); - } - } -}); - -jQuery.fn.extend({ - queue: function( type, data ) { - if ( typeof type !== "string" ) { - data = type; - type = "fx"; - } - - if ( data === undefined ) { - return jQuery.queue( this[0], type ); - } - return this.each(function() { - var queue = jQuery.queue( this, type, data ); - - if ( type === "fx" && queue[0] !== "inprogress" ) { - jQuery.dequeue( this, type ); - } - }); - }, - dequeue: function( type ) { - return this.each(function() { - jQuery.dequeue( this, type ); - }); - }, - // Based off of the plugin by Clint Helfers, with permission. - // http://blindsignals.com/index.php/2009/07/jquery-delay/ - delay: function( time, type ) { - time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; - type = type || "fx"; - - return this.queue( type, function( next, hooks ) { - var timeout = setTimeout( next, time ); - hooks.stop = function() { - clearTimeout( timeout ); - }; - }); - }, - clearQueue: function( type ) { - return this.queue( type || "fx", [] ); - }, - // Get a promise resolved when queues of a certain type - // are emptied (fx is the type by default) - promise: function( type, object ) { - if ( typeof type !== "string" ) { - object = type; - type = undefined; - } - type = type || "fx"; - var defer = jQuery.Deferred(), - elements = this, - i = elements.length, - count = 1, - deferDataKey = type + "defer", - queueDataKey = type + "queue", - markDataKey = type + "mark", - tmp; - function resolve() { - if ( !( --count ) ) { - defer.resolveWith( elements, [ elements ] ); - } - } - while( i-- ) { - if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) || - ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) || - jQuery.data( elements[ i ], markDataKey, undefined, true ) ) && - jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) { - count++; - tmp.add( resolve ); - } - } - resolve(); - return defer.promise(); - } -}); - - - - -var rclass = /[\n\t\r]/g, - rspace = /\s+/, - rreturn = /\r/g, - rtype = /^(?:button|input)$/i, - rfocusable = /^(?:button|input|object|select|textarea)$/i, - rclickable = /^a(?:rea)?$/i, - rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i, - getSetAttribute = jQuery.support.getSetAttribute, - nodeHook, boolHook, fixSpecified; - -jQuery.fn.extend({ - attr: function( name, value ) { - return jQuery.access( this, name, value, true, jQuery.attr ); - }, - - removeAttr: function( name ) { - return this.each(function() { - jQuery.removeAttr( this, name ); - }); - }, - - prop: function( name, value ) { - return jQuery.access( this, name, value, true, jQuery.prop ); - }, - - removeProp: function( name ) { - name = jQuery.propFix[ name ] || name; - return this.each(function() { - // try/catch handles cases where IE balks (such as removing a property on window) - try { - this[ name ] = undefined; - delete this[ name ]; - } catch( e ) {} - }); - }, - - addClass: function( value ) { - var classNames, i, l, elem, - setClass, c, cl; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( j ) { - jQuery( this ).addClass( value.call(this, j, this.className) ); - }); - } - - if ( value && typeof value === "string" ) { - classNames = value.split( rspace ); - - for ( i = 0, l = this.length; i < l; i++ ) { - elem = this[ i ]; - - if ( elem.nodeType === 1 ) { - if ( !elem.className && classNames.length === 1 ) { - elem.className = value; - - } else { - setClass = " " + elem.className + " "; - - for ( c = 0, cl = classNames.length; c < cl; c++ ) { - if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { - setClass += classNames[ c ] + " "; - } - } - elem.className = jQuery.trim( setClass ); - } - } - } - } - - return this; - }, - - removeClass: function( value ) { - var classNames, i, l, elem, className, c, cl; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( j ) { - jQuery( this ).removeClass( value.call(this, j, this.className) ); - }); - } - - if ( (value && typeof value === "string") || value === undefined ) { - classNames = ( value || "" ).split( rspace ); - - for ( i = 0, l = this.length; i < l; i++ ) { - elem = this[ i ]; - - if ( elem.nodeType === 1 && elem.className ) { - if ( value ) { - className = (" " + elem.className + " ").replace( rclass, " " ); - for ( c = 0, cl = classNames.length; c < cl; c++ ) { - className = className.replace(" " + classNames[ c ] + " ", " "); - } - elem.className = jQuery.trim( className ); - - } else { - elem.className = ""; - } - } - } - } - - return this; - }, - - toggleClass: function( value, stateVal ) { - var type = typeof value, - isBool = typeof stateVal === "boolean"; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( i ) { - jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal ); - }); - } - - return this.each(function() { - if ( type === "string" ) { - // toggle individual class names - var className, - i = 0, - self = jQuery( this ), - state = stateVal, - classNames = value.split( rspace ); - - while ( (className = classNames[ i++ ]) ) { - // check each className given, space seperated list - state = isBool ? state : !self.hasClass( className ); - self[ state ? "addClass" : "removeClass" ]( className ); - } - - } else if ( type === "undefined" || type === "boolean" ) { - if ( this.className ) { - // store className if set - jQuery._data( this, "__className__", this.className ); - } - - // toggle whole className - this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || ""; - } - }); - }, - - hasClass: function( selector ) { - var className = " " + selector + " ", - i = 0, - l = this.length; - for ( ; i < l; i++ ) { - if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) { - return true; - } - } - - return false; - }, - - val: function( value ) { - var hooks, ret, isFunction, - elem = this[0]; - - if ( !arguments.length ) { - if ( elem ) { - hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; - - if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { - return ret; - } - - ret = elem.value; - - return typeof ret === "string" ? - // handle most common string cases - ret.replace(rreturn, "") : - // handle cases where value is null/undef or number - ret == null ? "" : ret; - } - - return; - } - - isFunction = jQuery.isFunction( value ); - - return this.each(function( i ) { - var self = jQuery(this), val; - - if ( this.nodeType !== 1 ) { - return; - } - - if ( isFunction ) { - val = value.call( this, i, self.val() ); - } else { - val = value; - } - - // Treat null/undefined as ""; convert numbers to string - if ( val == null ) { - val = ""; - } else if ( typeof val === "number" ) { - val += ""; - } else if ( jQuery.isArray( val ) ) { - val = jQuery.map(val, function ( value ) { - return value == null ? "" : value + ""; - }); - } - - hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; - - // If set returns undefined, fall back to normal setting - if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { - this.value = val; - } - }); - } -}); - -jQuery.extend({ - valHooks: { - option: { - get: function( elem ) { - // attributes.value is undefined in Blackberry 4.7 but - // uses .value. See #6932 - var val = elem.attributes.value; - return !val || val.specified ? elem.value : elem.text; - } - }, - select: { - get: function( elem ) { - var value, i, max, option, - index = elem.selectedIndex, - values = [], - options = elem.options, - one = elem.type === "select-one"; - - // Nothing was selected - if ( index < 0 ) { - return null; - } - - // Loop through all the selected options - i = one ? index : 0; - max = one ? index + 1 : options.length; - for ( ; i < max; i++ ) { - option = options[ i ]; - - // Don't return options that are disabled or in a disabled optgroup - if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && - (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) { - - // Get the specific value for the option - value = jQuery( option ).val(); - - // We don't need an array for one selects - if ( one ) { - return value; - } - - // Multi-Selects return an array - values.push( value ); - } - } - - // Fixes Bug #2551 -- select.val() broken in IE after form.reset() - if ( one && !values.length && options.length ) { - return jQuery( options[ index ] ).val(); - } - - return values; - }, - - set: function( elem, value ) { - var values = jQuery.makeArray( value ); - - jQuery(elem).find("option").each(function() { - this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0; - }); - - if ( !values.length ) { - elem.selectedIndex = -1; - } - return values; - } - } - }, - - attrFn: { - val: true, - css: true, - html: true, - text: true, - data: true, - width: true, - height: true, - offset: true - }, - - attr: function( elem, name, value, pass ) { - var ret, hooks, notxml, - nType = elem.nodeType; - - // don't get/set attributes on text, comment and attribute nodes - if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { - return; - } - - if ( pass && name in jQuery.attrFn ) { - return jQuery( elem )[ name ]( value ); - } - - // Fallback to prop when attributes are not supported - if ( typeof elem.getAttribute === "undefined" ) { - return jQuery.prop( elem, name, value ); - } - - notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); - - // All attributes are lowercase - // Grab necessary hook if one is defined - if ( notxml ) { - name = name.toLowerCase(); - hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); - } - - if ( value !== undefined ) { - - if ( value === null ) { - jQuery.removeAttr( elem, name ); - return; - - } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { - return ret; - - } else { - elem.setAttribute( name, "" + value ); - return value; - } - - } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { - return ret; - - } else { - - ret = elem.getAttribute( name ); - - // Non-existent attributes return null, we normalize to undefined - return ret === null ? - undefined : - ret; - } - }, - - removeAttr: function( elem, value ) { - var propName, attrNames, name, l, - i = 0; - - if ( value && elem.nodeType === 1 ) { - attrNames = value.toLowerCase().split( rspace ); - l = attrNames.length; - - for ( ; i < l; i++ ) { - name = attrNames[ i ]; - - if ( name ) { - propName = jQuery.propFix[ name ] || name; - - // See #9699 for explanation of this approach (setting first, then removal) - jQuery.attr( elem, name, "" ); - elem.removeAttribute( getSetAttribute ? name : propName ); - - // Set corresponding property to false for boolean attributes - if ( rboolean.test( name ) && propName in elem ) { - elem[ propName ] = false; - } - } - } - } - }, - - attrHooks: { - type: { - set: function( elem, value ) { - // We can't allow the type property to be changed (since it causes problems in IE) - if ( rtype.test( elem.nodeName ) && elem.parentNode ) { - jQuery.error( "type property can't be changed" ); - } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) { - // Setting the type on a radio button after the value resets the value in IE6-9 - // Reset value to it's default in case type is set after value - // This is for element creation - var val = elem.value; - elem.setAttribute( "type", value ); - if ( val ) { - elem.value = val; - } - return value; - } - } - }, - // Use the value property for back compat - // Use the nodeHook for button elements in IE6/7 (#1954) - value: { - get: function( elem, name ) { - if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { - return nodeHook.get( elem, name ); - } - return name in elem ? - elem.value : - null; - }, - set: function( elem, value, name ) { - if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { - return nodeHook.set( elem, value, name ); - } - // Does not return so that setAttribute is also used - elem.value = value; - } - } - }, - - propFix: { - tabindex: "tabIndex", - readonly: "readOnly", - "for": "htmlFor", - "class": "className", - maxlength: "maxLength", - cellspacing: "cellSpacing", - cellpadding: "cellPadding", - rowspan: "rowSpan", - colspan: "colSpan", - usemap: "useMap", - frameborder: "frameBorder", - contenteditable: "contentEditable" - }, - - prop: function( elem, name, value ) { - var ret, hooks, notxml, - nType = elem.nodeType; - - // don't get/set properties on text, comment and attribute nodes - if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { - return; - } - - notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); - - if ( notxml ) { - // Fix name and attach hooks - name = jQuery.propFix[ name ] || name; - hooks = jQuery.propHooks[ name ]; - } - - if ( value !== undefined ) { - if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { - return ret; - - } else { - return ( elem[ name ] = value ); - } - - } else { - if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { - return ret; - - } else { - return elem[ name ]; - } - } - }, - - propHooks: { - tabIndex: { - get: function( elem ) { - // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set - // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/ - var attributeNode = elem.getAttributeNode("tabindex"); - - return attributeNode && attributeNode.specified ? - parseInt( attributeNode.value, 10 ) : - rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ? - 0 : - undefined; - } - } - } -}); - -// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional) -jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex; - -// Hook for boolean attributes -boolHook = { - get: function( elem, name ) { - // Align boolean attributes with corresponding properties - // Fall back to attribute presence where some booleans are not supported - var attrNode, - property = jQuery.prop( elem, name ); - return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ? - name.toLowerCase() : - undefined; - }, - set: function( elem, value, name ) { - var propName; - if ( value === false ) { - // Remove boolean attributes when set to false - jQuery.removeAttr( elem, name ); - } else { - // value is true since we know at this point it's type boolean and not false - // Set boolean attributes to the same name and set the DOM property - propName = jQuery.propFix[ name ] || name; - if ( propName in elem ) { - // Only set the IDL specifically if it already exists on the element - elem[ propName ] = true; - } - - elem.setAttribute( name, name.toLowerCase() ); - } - return name; - } -}; - -// IE6/7 do not support getting/setting some attributes with get/setAttribute -if ( !getSetAttribute ) { - - fixSpecified = { - name: true, - id: true - }; - - // Use this for any attribute in IE6/7 - // This fixes almost every IE6/7 issue - nodeHook = jQuery.valHooks.button = { - get: function( elem, name ) { - var ret; - ret = elem.getAttributeNode( name ); - return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? - ret.nodeValue : - undefined; - }, - set: function( elem, value, name ) { - // Set the existing or create a new attribute node - var ret = elem.getAttributeNode( name ); - if ( !ret ) { - ret = document.createAttribute( name ); - elem.setAttributeNode( ret ); - } - return ( ret.nodeValue = value + "" ); - } - }; - - // Apply the nodeHook to tabindex - jQuery.attrHooks.tabindex.set = nodeHook.set; - - // Set width and height to auto instead of 0 on empty string( Bug #8150 ) - // This is for removals - jQuery.each([ "width", "height" ], function( i, name ) { - jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { - set: function( elem, value ) { - if ( value === "" ) { - elem.setAttribute( name, "auto" ); - return value; - } - } - }); - }); - - // Set contenteditable to false on removals(#10429) - // Setting to empty string throws an error as an invalid value - jQuery.attrHooks.contenteditable = { - get: nodeHook.get, - set: function( elem, value, name ) { - if ( value === "" ) { - value = "false"; - } - nodeHook.set( elem, value, name ); - } - }; -} - - -// Some attributes require a special call on IE -if ( !jQuery.support.hrefNormalized ) { - jQuery.each([ "href", "src", "width", "height" ], function( i, name ) { - jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { - get: function( elem ) { - var ret = elem.getAttribute( name, 2 ); - return ret === null ? undefined : ret; - } - }); - }); -} - -if ( !jQuery.support.style ) { - jQuery.attrHooks.style = { - get: function( elem ) { - // Return undefined in the case of empty string - // Normalize to lowercase since IE uppercases css property names - return elem.style.cssText.toLowerCase() || undefined; - }, - set: function( elem, value ) { - return ( elem.style.cssText = "" + value ); - } - }; -} - -// Safari mis-reports the default selected property of an option -// Accessing the parent's selectedIndex property fixes it -if ( !jQuery.support.optSelected ) { - jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, { - get: function( elem ) { - var parent = elem.parentNode; - - if ( parent ) { - parent.selectedIndex; - - // Make sure that it also works with optgroups, see #5701 - if ( parent.parentNode ) { - parent.parentNode.selectedIndex; - } - } - return null; - } - }); -} - -// IE6/7 call enctype encoding -if ( !jQuery.support.enctype ) { - jQuery.propFix.enctype = "encoding"; -} - -// Radios and checkboxes getter/setter -if ( !jQuery.support.checkOn ) { - jQuery.each([ "radio", "checkbox" ], function() { - jQuery.valHooks[ this ] = { - get: function( elem ) { - // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified - return elem.getAttribute("value") === null ? "on" : elem.value; - } - }; - }); -} -jQuery.each([ "radio", "checkbox" ], function() { - jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], { - set: function( elem, value ) { - if ( jQuery.isArray( value ) ) { - return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); - } - } - }); -}); - - - - -var rformElems = /^(?:textarea|input|select)$/i, - rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/, - rhoverHack = /\bhover(\.\S+)?\b/, - rkeyEvent = /^key/, - rmouseEvent = /^(?:mouse|contextmenu)|click/, - rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, - rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/, - quickParse = function( selector ) { - var quick = rquickIs.exec( selector ); - if ( quick ) { - // 0 1 2 3 - // [ _, tag, id, class ] - quick[1] = ( quick[1] || "" ).toLowerCase(); - quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" ); - } - return quick; - }, - quickIs = function( elem, m ) { - var attrs = elem.attributes || {}; - return ( - (!m[1] || elem.nodeName.toLowerCase() === m[1]) && - (!m[2] || (attrs.id || {}).value === m[2]) && - (!m[3] || m[3].test( (attrs[ "class" ] || {}).value )) - ); - }, - hoverHack = function( events ) { - return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" ); - }; - -/* - * Helper functions for managing events -- not part of the public interface. - * Props to Dean Edwards' addEvent library for many of the ideas. - */ -jQuery.event = { - - add: function( elem, types, handler, data, selector ) { - - var elemData, eventHandle, events, - t, tns, type, namespaces, handleObj, - handleObjIn, quick, handlers, special; - - // Don't attach events to noData or text/comment nodes (allow plain objects tho) - if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) { - return; - } - - // Caller can pass in an object of custom data in lieu of the handler - if ( handler.handler ) { - handleObjIn = handler; - handler = handleObjIn.handler; - } - - // Make sure that the handler has a unique ID, used to find/remove it later - if ( !handler.guid ) { - handler.guid = jQuery.guid++; - } - - // Init the element's event structure and main handler, if this is the first - events = elemData.events; - if ( !events ) { - elemData.events = events = {}; - } - eventHandle = elemData.handle; - if ( !eventHandle ) { - elemData.handle = eventHandle = function( e ) { - // Discard the second event of a jQuery.event.trigger() and - // when an event is called after a page has unloaded - return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? - jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : - undefined; - }; - // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events - eventHandle.elem = elem; - } - - // Handle multiple events separated by a space - // jQuery(...).bind("mouseover mouseout", fn); - types = jQuery.trim( hoverHack(types) ).split( " " ); - for ( t = 0; t < types.length; t++ ) { - - tns = rtypenamespace.exec( types[t] ) || []; - type = tns[1]; - namespaces = ( tns[2] || "" ).split( "." ).sort(); - - // If event changes its type, use the special event handlers for the changed type - special = jQuery.event.special[ type ] || {}; - - // If selector defined, determine special event api type, otherwise given type - type = ( selector ? special.delegateType : special.bindType ) || type; - - // Update special based on newly reset type - special = jQuery.event.special[ type ] || {}; - - // handleObj is passed to all event handlers - handleObj = jQuery.extend({ - type: type, - origType: tns[1], - data: data, - handler: handler, - guid: handler.guid, - selector: selector, - quick: quickParse( selector ), - namespace: namespaces.join(".") - }, handleObjIn ); - - // Init the event handler queue if we're the first - handlers = events[ type ]; - if ( !handlers ) { - handlers = events[ type ] = []; - handlers.delegateCount = 0; - - // Only use addEventListener/attachEvent if the special events handler returns false - if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { - // Bind the global event handler to the element - if ( elem.addEventListener ) { - elem.addEventListener( type, eventHandle, false ); - - } else if ( elem.attachEvent ) { - elem.attachEvent( "on" + type, eventHandle ); - } - } - } - - if ( special.add ) { - special.add.call( elem, handleObj ); - - if ( !handleObj.handler.guid ) { - handleObj.handler.guid = handler.guid; - } - } - - // Add to the element's handler list, delegates in front - if ( selector ) { - handlers.splice( handlers.delegateCount++, 0, handleObj ); - } else { - handlers.push( handleObj ); - } - - // Keep track of which events have ever been used, for event optimization - jQuery.event.global[ type ] = true; - } - - // Nullify elem to prevent memory leaks in IE - elem = null; - }, - - global: {}, - - // Detach an event or set of events from an element - remove: function( elem, types, handler, selector, mappedTypes ) { - - var elemData = jQuery.hasData( elem ) && jQuery._data( elem ), - t, tns, type, origType, namespaces, origCount, - j, events, special, handle, eventType, handleObj; - - if ( !elemData || !(events = elemData.events) ) { - return; - } - - // Once for each type.namespace in types; type may be omitted - types = jQuery.trim( hoverHack( types || "" ) ).split(" "); - for ( t = 0; t < types.length; t++ ) { - tns = rtypenamespace.exec( types[t] ) || []; - type = origType = tns[1]; - namespaces = tns[2]; - - // Unbind all events (on this namespace, if provided) for the element - if ( !type ) { - for ( type in events ) { - jQuery.event.remove( elem, type + types[ t ], handler, selector, true ); - } - continue; - } - - special = jQuery.event.special[ type ] || {}; - type = ( selector? special.delegateType : special.bindType ) || type; - eventType = events[ type ] || []; - origCount = eventType.length; - namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null; - - // Remove matching events - for ( j = 0; j < eventType.length; j++ ) { - handleObj = eventType[ j ]; - - if ( ( mappedTypes || origType === handleObj.origType ) && - ( !handler || handler.guid === handleObj.guid ) && - ( !namespaces || namespaces.test( handleObj.namespace ) ) && - ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) { - eventType.splice( j--, 1 ); - - if ( handleObj.selector ) { - eventType.delegateCount--; - } - if ( special.remove ) { - special.remove.call( elem, handleObj ); - } - } - } - - // Remove generic event handler if we removed something and no more handlers exist - // (avoids potential for endless recursion during removal of special event handlers) - if ( eventType.length === 0 && origCount !== eventType.length ) { - if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) { - jQuery.removeEvent( elem, type, elemData.handle ); - } - - delete events[ type ]; - } - } - - // Remove the expando if it's no longer used - if ( jQuery.isEmptyObject( events ) ) { - handle = elemData.handle; - if ( handle ) { - handle.elem = null; - } - - // removeData also checks for emptiness and clears the expando if empty - // so use it instead of delete - jQuery.removeData( elem, [ "events", "handle" ], true ); - } - }, - - // Events that are safe to short-circuit if no handlers are attached. - // Native DOM events should not be added, they may have inline handlers. - customEvent: { - "getData": true, - "setData": true, - "changeData": true - }, - - trigger: function( event, data, elem, onlyHandlers ) { - // Don't do events on text and comment nodes - if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) { - return; - } - - // Event object or event type - var type = event.type || event, - namespaces = [], - cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType; - - // focus/blur morphs to focusin/out; ensure we're not firing them right now - if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { - return; - } - - if ( type.indexOf( "!" ) >= 0 ) { - // Exclusive events trigger only for the exact event (no namespaces) - type = type.slice(0, -1); - exclusive = true; - } - - if ( type.indexOf( "." ) >= 0 ) { - // Namespaced trigger; create a regexp to match event type in handle() - namespaces = type.split("."); - type = namespaces.shift(); - namespaces.sort(); - } - - if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { - // No jQuery handlers for this event type, and it can't have inline handlers - return; - } - - // Caller can pass in an Event, Object, or just an event type string - event = typeof event === "object" ? - // jQuery.Event object - event[ jQuery.expando ] ? event : - // Object literal - new jQuery.Event( type, event ) : - // Just the event type (string) - new jQuery.Event( type ); - - event.type = type; - event.isTrigger = true; - event.exclusive = exclusive; - event.namespace = namespaces.join( "." ); - event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null; - ontype = type.indexOf( ":" ) < 0 ? "on" + type : ""; - - // Handle a global trigger - if ( !elem ) { - - // TODO: Stop taunting the data cache; remove global events and always attach to document - cache = jQuery.cache; - for ( i in cache ) { - if ( cache[ i ].events && cache[ i ].events[ type ] ) { - jQuery.event.trigger( event, data, cache[ i ].handle.elem, true ); - } - } - return; - } - - // Clean up the event in case it is being reused - event.result = undefined; - if ( !event.target ) { - event.target = elem; - } - - // Clone any incoming data and prepend the event, creating the handler arg list - data = data != null ? jQuery.makeArray( data ) : []; - data.unshift( event ); - - // Allow special events to draw outside the lines - special = jQuery.event.special[ type ] || {}; - if ( special.trigger && special.trigger.apply( elem, data ) === false ) { - return; - } - - // Determine event propagation path in advance, per W3C events spec (#9951) - // Bubble up to document, then to window; watch for a global ownerDocument var (#9724) - eventPath = [[ elem, special.bindType || type ]]; - if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) { - - bubbleType = special.delegateType || type; - cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode; - old = null; - for ( ; cur; cur = cur.parentNode ) { - eventPath.push([ cur, bubbleType ]); - old = cur; - } - - // Only add window if we got to document (e.g., not plain obj or detached DOM) - if ( old && old === elem.ownerDocument ) { - eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]); - } - } - - // Fire handlers on the event path - for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) { - - cur = eventPath[i][0]; - event.type = eventPath[i][1]; - - handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" ); - if ( handle ) { - handle.apply( cur, data ); - } - // Note that this is a bare JS function and not a jQuery handler - handle = ontype && cur[ ontype ]; - if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) { - event.preventDefault(); - } - } - event.type = type; - - // If nobody prevented the default action, do it now - if ( !onlyHandlers && !event.isDefaultPrevented() ) { - - if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) && - !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { - - // Call a native DOM method on the target with the same name name as the event. - // Can't use an .isFunction() check here because IE6/7 fails that test. - // Don't do default actions on window, that's where global variables be (#6170) - // IE<9 dies on focus/blur to hidden element (#1486) - if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) { - - // Don't re-trigger an onFOO event when we call its FOO() method - old = elem[ ontype ]; - - if ( old ) { - elem[ ontype ] = null; - } - - // Prevent re-triggering of the same event, since we already bubbled it above - jQuery.event.triggered = type; - elem[ type ](); - jQuery.event.triggered = undefined; - - if ( old ) { - elem[ ontype ] = old; - } - } - } - } - - return event.result; - }, - - dispatch: function( event ) { - - // Make a writable jQuery.Event from the native event object - event = jQuery.event.fix( event || window.event ); - - var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []), - delegateCount = handlers.delegateCount, - args = [].slice.call( arguments, 0 ), - run_all = !event.exclusive && !event.namespace, - handlerQueue = [], - i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related; - - // Use the fix-ed jQuery.Event rather than the (read-only) native event - args[0] = event; - event.delegateTarget = this; - - // Determine handlers that should run if there are delegated events - // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861) - if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) { - - // Pregenerate a single jQuery object for reuse with .is() - jqcur = jQuery(this); - jqcur.context = this.ownerDocument || this; - - for ( cur = event.target; cur != this; cur = cur.parentNode || this ) { - selMatch = {}; - matches = []; - jqcur[0] = cur; - for ( i = 0; i < delegateCount; i++ ) { - handleObj = handlers[ i ]; - sel = handleObj.selector; - - if ( selMatch[ sel ] === undefined ) { - selMatch[ sel ] = ( - handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel ) - ); - } - if ( selMatch[ sel ] ) { - matches.push( handleObj ); - } - } - if ( matches.length ) { - handlerQueue.push({ elem: cur, matches: matches }); - } - } - } - - // Add the remaining (directly-bound) handlers - if ( handlers.length > delegateCount ) { - handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) }); - } - - // Run delegates first; they may want to stop propagation beneath us - for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) { - matched = handlerQueue[ i ]; - event.currentTarget = matched.elem; - - for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) { - handleObj = matched.matches[ j ]; - - // Triggered event must either 1) be non-exclusive and have no namespace, or - // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). - if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) { - - event.data = handleObj.data; - event.handleObj = handleObj; - - ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) - .apply( matched.elem, args ); - - if ( ret !== undefined ) { - event.result = ret; - if ( ret === false ) { - event.preventDefault(); - event.stopPropagation(); - } - } - } - } - } - - return event.result; - }, - - // Includes some event props shared by KeyEvent and MouseEvent - // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 *** - props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), - - fixHooks: {}, - - keyHooks: { - props: "char charCode key keyCode".split(" "), - filter: function( event, original ) { - - // Add which for key events - if ( event.which == null ) { - event.which = original.charCode != null ? original.charCode : original.keyCode; - } - - return event; - } - }, - - mouseHooks: { - props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "), - filter: function( event, original ) { - var eventDoc, doc, body, - button = original.button, - fromElement = original.fromElement; - - // Calculate pageX/Y if missing and clientX/Y available - if ( event.pageX == null && original.clientX != null ) { - eventDoc = event.target.ownerDocument || document; - doc = eventDoc.documentElement; - body = eventDoc.body; - - event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); - event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); - } - - // Add relatedTarget, if necessary - if ( !event.relatedTarget && fromElement ) { - event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; - } - - // Add which for click: 1 === left; 2 === middle; 3 === right - // Note: button is not normalized, so don't use it - if ( !event.which && button !== undefined ) { - event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); - } - - return event; - } - }, - - fix: function( event ) { - if ( event[ jQuery.expando ] ) { - return event; - } - - // Create a writable copy of the event object and normalize some properties - var i, prop, - originalEvent = event, - fixHook = jQuery.event.fixHooks[ event.type ] || {}, - copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; - - event = jQuery.Event( originalEvent ); - - for ( i = copy.length; i; ) { - prop = copy[ --i ]; - event[ prop ] = originalEvent[ prop ]; - } - - // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2) - if ( !event.target ) { - event.target = originalEvent.srcElement || document; - } - - // Target should not be a text node (#504, Safari) - if ( event.target.nodeType === 3 ) { - event.target = event.target.parentNode; - } - - // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8) - if ( event.metaKey === undefined ) { - event.metaKey = event.ctrlKey; - } - - return fixHook.filter? fixHook.filter( event, originalEvent ) : event; - }, - - special: { - ready: { - // Make sure the ready event is setup - setup: jQuery.bindReady - }, - - load: { - // Prevent triggered image.load events from bubbling to window.load - noBubble: true - }, - - focus: { - delegateType: "focusin" - }, - blur: { - delegateType: "focusout" - }, - - beforeunload: { - setup: function( data, namespaces, eventHandle ) { - // We only want to do this special case on windows - if ( jQuery.isWindow( this ) ) { - this.onbeforeunload = eventHandle; - } - }, - - teardown: function( namespaces, eventHandle ) { - if ( this.onbeforeunload === eventHandle ) { - this.onbeforeunload = null; - } - } - } - }, - - simulate: function( type, elem, event, bubble ) { - // Piggyback on a donor event to simulate a different one. - // Fake originalEvent to avoid donor's stopPropagation, but if the - // simulated event prevents default then we do the same on the donor. - var e = jQuery.extend( - new jQuery.Event(), - event, - { type: type, - isSimulated: true, - originalEvent: {} - } - ); - if ( bubble ) { - jQuery.event.trigger( e, null, elem ); - } else { - jQuery.event.dispatch.call( elem, e ); - } - if ( e.isDefaultPrevented() ) { - event.preventDefault(); - } - } -}; - -// Some plugins are using, but it's undocumented/deprecated and will be removed. -// The 1.7 special event interface should provide all the hooks needed now. -jQuery.event.handle = jQuery.event.dispatch; - -jQuery.removeEvent = document.removeEventListener ? - function( elem, type, handle ) { - if ( elem.removeEventListener ) { - elem.removeEventListener( type, handle, false ); - } - } : - function( elem, type, handle ) { - if ( elem.detachEvent ) { - elem.detachEvent( "on" + type, handle ); - } - }; - -jQuery.Event = function( src, props ) { - // Allow instantiation without the 'new' keyword - if ( !(this instanceof jQuery.Event) ) { - return new jQuery.Event( src, props ); - } - - // Event object - if ( src && src.type ) { - this.originalEvent = src; - this.type = src.type; - - // Events bubbling up the document may have been marked as prevented - // by a handler lower down the tree; reflect the correct value. - this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false || - src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse; - - // Event type - } else { - this.type = src; - } - - // Put explicitly provided properties onto the event object - if ( props ) { - jQuery.extend( this, props ); - } - - // Create a timestamp if incoming event doesn't have one - this.timeStamp = src && src.timeStamp || jQuery.now(); - - // Mark it as fixed - this[ jQuery.expando ] = true; -}; - -function returnFalse() { - return false; -} -function returnTrue() { - return true; -} - -// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding -// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html -jQuery.Event.prototype = { - preventDefault: function() { - this.isDefaultPrevented = returnTrue; - - var e = this.originalEvent; - if ( !e ) { - return; - } - - // if preventDefault exists run it on the original event - if ( e.preventDefault ) { - e.preventDefault(); - - // otherwise set the returnValue property of the original event to false (IE) - } else { - e.returnValue = false; - } - }, - stopPropagation: function() { - this.isPropagationStopped = returnTrue; - - var e = this.originalEvent; - if ( !e ) { - return; - } - // if stopPropagation exists run it on the original event - if ( e.stopPropagation ) { - e.stopPropagation(); - } - // otherwise set the cancelBubble property of the original event to true (IE) - e.cancelBubble = true; - }, - stopImmediatePropagation: function() { - this.isImmediatePropagationStopped = returnTrue; - this.stopPropagation(); - }, - isDefaultPrevented: returnFalse, - isPropagationStopped: returnFalse, - isImmediatePropagationStopped: returnFalse -}; - -// Create mouseenter/leave events using mouseover/out and event-time checks -jQuery.each({ - mouseenter: "mouseover", - mouseleave: "mouseout" -}, function( orig, fix ) { - jQuery.event.special[ orig ] = { - delegateType: fix, - bindType: fix, - - handle: function( event ) { - var target = this, - related = event.relatedTarget, - handleObj = event.handleObj, - selector = handleObj.selector, - ret; - - // For mousenter/leave call the handler if related is outside the target. - // NB: No relatedTarget if the mouse left/entered the browser window - if ( !related || (related !== target && !jQuery.contains( target, related )) ) { - event.type = handleObj.origType; - ret = handleObj.handler.apply( this, arguments ); - event.type = fix; - } - return ret; - } - }; -}); - -// IE submit delegation -if ( !jQuery.support.submitBubbles ) { - - jQuery.event.special.submit = { - setup: function() { - // Only need this for delegated form submit events - if ( jQuery.nodeName( this, "form" ) ) { - return false; - } - - // Lazy-add a submit handler when a descendant form may potentially be submitted - jQuery.event.add( this, "click._submit keypress._submit", function( e ) { - // Node name check avoids a VML-related crash in IE (#9807) - var elem = e.target, - form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined; - if ( form && !form._submit_attached ) { - jQuery.event.add( form, "submit._submit", function( event ) { - // If form was submitted by the user, bubble the event up the tree - if ( this.parentNode && !event.isTrigger ) { - jQuery.event.simulate( "submit", this.parentNode, event, true ); - } - }); - form._submit_attached = true; - } - }); - // return undefined since we don't need an event listener - }, - - teardown: function() { - // Only need this for delegated form submit events - if ( jQuery.nodeName( this, "form" ) ) { - return false; - } - - // Remove delegated handlers; cleanData eventually reaps submit handlers attached above - jQuery.event.remove( this, "._submit" ); - } - }; -} - -// IE change delegation and checkbox/radio fix -if ( !jQuery.support.changeBubbles ) { - - jQuery.event.special.change = { - - setup: function() { - - if ( rformElems.test( this.nodeName ) ) { - // IE doesn't fire change on a check/radio until blur; trigger it on click - // after a propertychange. Eat the blur-change in special.change.handle. - // This still fires onchange a second time for check/radio after blur. - if ( this.type === "checkbox" || this.type === "radio" ) { - jQuery.event.add( this, "propertychange._change", function( event ) { - if ( event.originalEvent.propertyName === "checked" ) { - this._just_changed = true; - } - }); - jQuery.event.add( this, "click._change", function( event ) { - if ( this._just_changed && !event.isTrigger ) { - this._just_changed = false; - jQuery.event.simulate( "change", this, event, true ); - } - }); - } - return false; - } - // Delegated event; lazy-add a change handler on descendant inputs - jQuery.event.add( this, "beforeactivate._change", function( e ) { - var elem = e.target; - - if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) { - jQuery.event.add( elem, "change._change", function( event ) { - if ( this.parentNode && !event.isSimulated && !event.isTrigger ) { - jQuery.event.simulate( "change", this.parentNode, event, true ); - } - }); - elem._change_attached = true; - } - }); - }, - - handle: function( event ) { - var elem = event.target; - - // Swallow native change events from checkbox/radio, we already triggered them above - if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) { - return event.handleObj.handler.apply( this, arguments ); - } - }, - - teardown: function() { - jQuery.event.remove( this, "._change" ); - - return rformElems.test( this.nodeName ); - } - }; -} - -// Create "bubbling" focus and blur events -if ( !jQuery.support.focusinBubbles ) { - jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) { - - // Attach a single capturing handler while someone wants focusin/focusout - var attaches = 0, - handler = function( event ) { - jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true ); - }; - - jQuery.event.special[ fix ] = { - setup: function() { - if ( attaches++ === 0 ) { - document.addEventListener( orig, handler, true ); - } - }, - teardown: function() { - if ( --attaches === 0 ) { - document.removeEventListener( orig, handler, true ); - } - } - }; - }); -} - -jQuery.fn.extend({ - - on: function( types, selector, data, fn, /*INTERNAL*/ one ) { - var origFn, type; - - // Types can be a map of types/handlers - if ( typeof types === "object" ) { - // ( types-Object, selector, data ) - if ( typeof selector !== "string" ) { - // ( types-Object, data ) - data = selector; - selector = undefined; - } - for ( type in types ) { - this.on( type, selector, data, types[ type ], one ); - } - return this; - } - - if ( data == null && fn == null ) { - // ( types, fn ) - fn = selector; - data = selector = undefined; - } else if ( fn == null ) { - if ( typeof selector === "string" ) { - // ( types, selector, fn ) - fn = data; - data = undefined; - } else { - // ( types, data, fn ) - fn = data; - data = selector; - selector = undefined; - } - } - if ( fn === false ) { - fn = returnFalse; - } else if ( !fn ) { - return this; - } - - if ( one === 1 ) { - origFn = fn; - fn = function( event ) { - // Can use an empty set, since event contains the info - jQuery().off( event ); - return origFn.apply( this, arguments ); - }; - // Use same guid so caller can remove using origFn - fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); - } - return this.each( function() { - jQuery.event.add( this, types, fn, data, selector ); - }); - }, - one: function( types, selector, data, fn ) { - return this.on.call( this, types, selector, data, fn, 1 ); - }, - off: function( types, selector, fn ) { - if ( types && types.preventDefault && types.handleObj ) { - // ( event ) dispatched jQuery.Event - var handleObj = types.handleObj; - jQuery( types.delegateTarget ).off( - handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type, - handleObj.selector, - handleObj.handler - ); - return this; - } - if ( typeof types === "object" ) { - // ( types-object [, selector] ) - for ( var type in types ) { - this.off( type, selector, types[ type ] ); - } - return this; - } - if ( selector === false || typeof selector === "function" ) { - // ( types [, fn] ) - fn = selector; - selector = undefined; - } - if ( fn === false ) { - fn = returnFalse; - } - return this.each(function() { - jQuery.event.remove( this, types, fn, selector ); - }); - }, - - bind: function( types, data, fn ) { - return this.on( types, null, data, fn ); - }, - unbind: function( types, fn ) { - return this.off( types, null, fn ); - }, - - live: function( types, data, fn ) { - jQuery( this.context ).on( types, this.selector, data, fn ); - return this; - }, - die: function( types, fn ) { - jQuery( this.context ).off( types, this.selector || "**", fn ); - return this; - }, - - delegate: function( selector, types, data, fn ) { - return this.on( types, selector, data, fn ); - }, - undelegate: function( selector, types, fn ) { - // ( namespace ) or ( selector, types [, fn] ) - return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn ); - }, - - trigger: function( type, data ) { - return this.each(function() { - jQuery.event.trigger( type, data, this ); - }); - }, - triggerHandler: function( type, data ) { - if ( this[0] ) { - return jQuery.event.trigger( type, data, this[0], true ); - } - }, - - toggle: function( fn ) { - // Save reference to arguments for access in closure - var args = arguments, - guid = fn.guid || jQuery.guid++, - i = 0, - toggler = function( event ) { - // Figure out which function to execute - var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; - jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); - - // Make sure that clicks stop - event.preventDefault(); - - // and execute the function - return args[ lastToggle ].apply( this, arguments ) || false; - }; - - // link all the functions, so any of them can unbind this click handler - toggler.guid = guid; - while ( i < args.length ) { - args[ i++ ].guid = guid; - } - - return this.click( toggler ); - }, - - hover: function( fnOver, fnOut ) { - return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); - } -}); - -jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + - "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + - "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { - - // Handle event binding - jQuery.fn[ name ] = function( data, fn ) { - if ( fn == null ) { - fn = data; - data = null; - } - - return arguments.length > 0 ? - this.on( name, null, data, fn ) : - this.trigger( name ); - }; - - if ( jQuery.attrFn ) { - jQuery.attrFn[ name ] = true; - } - - if ( rkeyEvent.test( name ) ) { - jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks; - } - - if ( rmouseEvent.test( name ) ) { - jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks; - } -}); - - - -/*! - * Sizzle CSS Selector Engine - * Copyright 2012, The Dojo Foundation - * Released under the MIT, BSD, and GPL Licenses. - * More information: http://sizzlejs.com/ - */ -(function(){ - -var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, - expando = "sizcache" + (Math.random() + '').replace('.', ''), - done = 0, - toString = Object.prototype.toString, - hasDuplicate = false, - baseHasDuplicate = true, - rBackslash = /\\/g, - rReturn = /\r\n/g, - rNonWord = /\W/; - -// Here we check if the JavaScript engine is using some sort of -// optimization where it does not always call our comparision -// function. If that is the case, discard the hasDuplicate value. -// Thus far that includes Google Chrome. -[0, 0].sort(function() { - baseHasDuplicate = false; - return 0; -}); - -var Sizzle = function( selector, context, results, seed ) { - results = results || []; - context = context || document; - - var origContext = context; - - if ( context.nodeType !== 1 && context.nodeType !== 9 ) { - return []; - } - - if ( !selector || typeof selector !== "string" ) { - return results; - } - - var m, set, checkSet, extra, ret, cur, pop, i, - prune = true, - contextXML = Sizzle.isXML( context ), - parts = [], - soFar = selector; - - // Reset the position of the chunker regexp (start from head) - do { - chunker.exec( "" ); - m = chunker.exec( soFar ); - - if ( m ) { - soFar = m[3]; - - parts.push( m[1] ); - - if ( m[2] ) { - extra = m[3]; - break; - } - } - } while ( m ); - - if ( parts.length > 1 && origPOS.exec( selector ) ) { - - if ( parts.length === 2 && Expr.relative[ parts[0] ] ) { - set = posProcess( parts[0] + parts[1], context, seed ); - - } else { - set = Expr.relative[ parts[0] ] ? - [ context ] : - Sizzle( parts.shift(), context ); - - while ( parts.length ) { - selector = parts.shift(); - - if ( Expr.relative[ selector ] ) { - selector += parts.shift(); - } - - set = posProcess( selector, set, seed ); - } - } - - } else { - // Take a shortcut and set the context if the root selector is an ID - // (but not if it'll be faster if the inner selector is an ID) - if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML && - Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) { - - ret = Sizzle.find( parts.shift(), context, contextXML ); - context = ret.expr ? - Sizzle.filter( ret.expr, ret.set )[0] : - ret.set[0]; - } - - if ( context ) { - ret = seed ? - { expr: parts.pop(), set: makeArray(seed) } : - Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML ); - - set = ret.expr ? - Sizzle.filter( ret.expr, ret.set ) : - ret.set; - - if ( parts.length > 0 ) { - checkSet = makeArray( set ); - - } else { - prune = false; - } - - while ( parts.length ) { - cur = parts.pop(); - pop = cur; - - if ( !Expr.relative[ cur ] ) { - cur = ""; - } else { - pop = parts.pop(); - } - - if ( pop == null ) { - pop = context; - } - - Expr.relative[ cur ]( checkSet, pop, contextXML ); - } - - } else { - checkSet = parts = []; - } - } - - if ( !checkSet ) { - checkSet = set; - } - - if ( !checkSet ) { - Sizzle.error( cur || selector ); - } - - if ( toString.call(checkSet) === "[object Array]" ) { - if ( !prune ) { - results.push.apply( results, checkSet ); - - } else if ( context && context.nodeType === 1 ) { - for ( i = 0; checkSet[i] != null; i++ ) { - if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) { - results.push( set[i] ); - } - } - - } else { - for ( i = 0; checkSet[i] != null; i++ ) { - if ( checkSet[i] && checkSet[i].nodeType === 1 ) { - results.push( set[i] ); - } - } - } - - } else { - makeArray( checkSet, results ); - } - - if ( extra ) { - Sizzle( extra, origContext, results, seed ); - Sizzle.uniqueSort( results ); - } - - return results; -}; - -Sizzle.uniqueSort = function( results ) { - if ( sortOrder ) { - hasDuplicate = baseHasDuplicate; - results.sort( sortOrder ); - - if ( hasDuplicate ) { - for ( var i = 1; i < results.length; i++ ) { - if ( results[i] === results[ i - 1 ] ) { - results.splice( i--, 1 ); - } - } - } - } - - return results; -}; - -Sizzle.matches = function( expr, set ) { - return Sizzle( expr, null, null, set ); -}; - -Sizzle.matchesSelector = function( node, expr ) { - return Sizzle( expr, null, null, [node] ).length > 0; -}; - -Sizzle.find = function( expr, context, isXML ) { - var set, i, len, match, type, left; - - if ( !expr ) { - return []; - } - - for ( i = 0, len = Expr.order.length; i < len; i++ ) { - type = Expr.order[i]; - - if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { - left = match[1]; - match.splice( 1, 1 ); - - if ( left.substr( left.length - 1 ) !== "\\" ) { - match[1] = (match[1] || "").replace( rBackslash, "" ); - set = Expr.find[ type ]( match, context, isXML ); - - if ( set != null ) { - expr = expr.replace( Expr.match[ type ], "" ); - break; - } - } - } - } - - if ( !set ) { - set = typeof context.getElementsByTagName !== "undefined" ? - context.getElementsByTagName( "*" ) : - []; - } - - return { set: set, expr: expr }; -}; - -Sizzle.filter = function( expr, set, inplace, not ) { - var match, anyFound, - type, found, item, filter, left, - i, pass, - old = expr, - result = [], - curLoop = set, - isXMLFilter = set && set[0] && Sizzle.isXML( set[0] ); - - while ( expr && set.length ) { - for ( type in Expr.filter ) { - if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { - filter = Expr.filter[ type ]; - left = match[1]; - - anyFound = false; - - match.splice(1,1); - - if ( left.substr( left.length - 1 ) === "\\" ) { - continue; - } - - if ( curLoop === result ) { - result = []; - } - - if ( Expr.preFilter[ type ] ) { - match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter ); - - if ( !match ) { - anyFound = found = true; - - } else if ( match === true ) { - continue; - } - } - - if ( match ) { - for ( i = 0; (item = curLoop[i]) != null; i++ ) { - if ( item ) { - found = filter( item, match, i, curLoop ); - pass = not ^ found; - - if ( inplace && found != null ) { - if ( pass ) { - anyFound = true; - - } else { - curLoop[i] = false; - } - - } else if ( pass ) { - result.push( item ); - anyFound = true; - } - } - } - } - - if ( found !== undefined ) { - if ( !inplace ) { - curLoop = result; - } - - expr = expr.replace( Expr.match[ type ], "" ); - - if ( !anyFound ) { - return []; - } - - break; - } - } - } - - // Improper expression - if ( expr === old ) { - if ( anyFound == null ) { - Sizzle.error( expr ); - - } else { - break; - } - } - - old = expr; - } - - return curLoop; -}; - -Sizzle.error = function( msg ) { - throw new Error( "Syntax error, unrecognized expression: " + msg ); -}; - -/** - * Utility function for retreiving the text value of an array of DOM nodes - * @param {Array|Element} elem - */ -var getText = Sizzle.getText = function( elem ) { - var i, node, - nodeType = elem.nodeType, - ret = ""; - - if ( nodeType ) { - if ( nodeType === 1 || nodeType === 9 ) { - // Use textContent || innerText for elements - if ( typeof elem.textContent === 'string' ) { - return elem.textContent; - } else if ( typeof elem.innerText === 'string' ) { - // Replace IE's carriage returns - return elem.innerText.replace( rReturn, '' ); - } else { - // Traverse it's children - for ( elem = elem.firstChild; elem; elem = elem.nextSibling) { - ret += getText( elem ); - } - } - } else if ( nodeType === 3 || nodeType === 4 ) { - return elem.nodeValue; - } - } else { - - // If no nodeType, this is expected to be an array - for ( i = 0; (node = elem[i]); i++ ) { - // Do not traverse comment nodes - if ( node.nodeType !== 8 ) { - ret += getText( node ); - } - } - } - return ret; -}; - -var Expr = Sizzle.selectors = { - order: [ "ID", "NAME", "TAG" ], - - match: { - ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, - CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, - NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, - ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/, - TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, - CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/, - POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, - PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ - }, - - leftMatch: {}, - - attrMap: { - "class": "className", - "for": "htmlFor" - }, - - attrHandle: { - href: function( elem ) { - return elem.getAttribute( "href" ); - }, - type: function( elem ) { - return elem.getAttribute( "type" ); - } - }, - - relative: { - "+": function(checkSet, part){ - var isPartStr = typeof part === "string", - isTag = isPartStr && !rNonWord.test( part ), - isPartStrNotTag = isPartStr && !isTag; - - if ( isTag ) { - part = part.toLowerCase(); - } - - for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) { - if ( (elem = checkSet[i]) ) { - while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {} - - checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ? - elem || false : - elem === part; - } - } - - if ( isPartStrNotTag ) { - Sizzle.filter( part, checkSet, true ); - } - }, - - ">": function( checkSet, part ) { - var elem, - isPartStr = typeof part === "string", - i = 0, - l = checkSet.length; - - if ( isPartStr && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - - for ( ; i < l; i++ ) { - elem = checkSet[i]; - - if ( elem ) { - var parent = elem.parentNode; - checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false; - } - } - - } else { - for ( ; i < l; i++ ) { - elem = checkSet[i]; - - if ( elem ) { - checkSet[i] = isPartStr ? - elem.parentNode : - elem.parentNode === part; - } - } - - if ( isPartStr ) { - Sizzle.filter( part, checkSet, true ); - } - } - }, - - "": function(checkSet, part, isXML){ - var nodeCheck, - doneName = done++, - checkFn = dirCheck; - - if ( typeof part === "string" && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - nodeCheck = part; - checkFn = dirNodeCheck; - } - - checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML ); - }, - - "~": function( checkSet, part, isXML ) { - var nodeCheck, - doneName = done++, - checkFn = dirCheck; - - if ( typeof part === "string" && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - nodeCheck = part; - checkFn = dirNodeCheck; - } - - checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML ); - } - }, - - find: { - ID: function( match, context, isXML ) { - if ( typeof context.getElementById !== "undefined" && !isXML ) { - var m = context.getElementById(match[1]); - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - return m && m.parentNode ? [m] : []; - } - }, - - NAME: function( match, context ) { - if ( typeof context.getElementsByName !== "undefined" ) { - var ret = [], - results = context.getElementsByName( match[1] ); - - for ( var i = 0, l = results.length; i < l; i++ ) { - if ( results[i].getAttribute("name") === match[1] ) { - ret.push( results[i] ); - } - } - - return ret.length === 0 ? null : ret; - } - }, - - TAG: function( match, context ) { - if ( typeof context.getElementsByTagName !== "undefined" ) { - return context.getElementsByTagName( match[1] ); - } - } - }, - preFilter: { - CLASS: function( match, curLoop, inplace, result, not, isXML ) { - match = " " + match[1].replace( rBackslash, "" ) + " "; - - if ( isXML ) { - return match; - } - - for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) { - if ( elem ) { - if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) { - if ( !inplace ) { - result.push( elem ); - } - - } else if ( inplace ) { - curLoop[i] = false; - } - } - } - - return false; - }, - - ID: function( match ) { - return match[1].replace( rBackslash, "" ); - }, - - TAG: function( match, curLoop ) { - return match[1].replace( rBackslash, "" ).toLowerCase(); - }, - - CHILD: function( match ) { - if ( match[1] === "nth" ) { - if ( !match[2] ) { - Sizzle.error( match[0] ); - } - - match[2] = match[2].replace(/^\+|\s*/g, ''); - - // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6' - var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec( - match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" || - !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]); - - // calculate the numbers (first)n+(last) including if they are negative - match[2] = (test[1] + (test[2] || 1)) - 0; - match[3] = test[3] - 0; - } - else if ( match[2] ) { - Sizzle.error( match[0] ); - } - - // TODO: Move to normal caching system - match[0] = done++; - - return match; - }, - - ATTR: function( match, curLoop, inplace, result, not, isXML ) { - var name = match[1] = match[1].replace( rBackslash, "" ); - - if ( !isXML && Expr.attrMap[name] ) { - match[1] = Expr.attrMap[name]; - } - - // Handle if an un-quoted value was used - match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" ); - - if ( match[2] === "~=" ) { - match[4] = " " + match[4] + " "; - } - - return match; - }, - - PSEUDO: function( match, curLoop, inplace, result, not ) { - if ( match[1] === "not" ) { - // If we're dealing with a complex expression, or a simple one - if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) { - match[3] = Sizzle(match[3], null, null, curLoop); - - } else { - var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not); - - if ( !inplace ) { - result.push.apply( result, ret ); - } - - return false; - } - - } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) { - return true; - } - - return match; - }, - - POS: function( match ) { - match.unshift( true ); - - return match; - } - }, - - filters: { - enabled: function( elem ) { - return elem.disabled === false && elem.type !== "hidden"; - }, - - disabled: function( elem ) { - return elem.disabled === true; - }, - - checked: function( elem ) { - return elem.checked === true; - }, - - selected: function( elem ) { - // Accessing this property makes selected-by-default - // options in Safari work properly - if ( elem.parentNode ) { - elem.parentNode.selectedIndex; - } - - return elem.selected === true; - }, - - parent: function( elem ) { - return !!elem.firstChild; - }, - - empty: function( elem ) { - return !elem.firstChild; - }, - - has: function( elem, i, match ) { - return !!Sizzle( match[3], elem ).length; - }, - - header: function( elem ) { - return (/h\d/i).test( elem.nodeName ); - }, - - text: function( elem ) { - var attr = elem.getAttribute( "type" ), type = elem.type; - // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc) - // use getAttribute instead to test this case - return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null ); - }, - - radio: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type; - }, - - checkbox: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type; - }, - - file: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "file" === elem.type; - }, - - password: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "password" === elem.type; - }, - - submit: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return (name === "input" || name === "button") && "submit" === elem.type; - }, - - image: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "image" === elem.type; - }, - - reset: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return (name === "input" || name === "button") && "reset" === elem.type; - }, - - button: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return name === "input" && "button" === elem.type || name === "button"; - }, - - input: function( elem ) { - return (/input|select|textarea|button/i).test( elem.nodeName ); - }, - - focus: function( elem ) { - return elem === elem.ownerDocument.activeElement; - } - }, - setFilters: { - first: function( elem, i ) { - return i === 0; - }, - - last: function( elem, i, match, array ) { - return i === array.length - 1; - }, - - even: function( elem, i ) { - return i % 2 === 0; - }, - - odd: function( elem, i ) { - return i % 2 === 1; - }, - - lt: function( elem, i, match ) { - return i < match[3] - 0; - }, - - gt: function( elem, i, match ) { - return i > match[3] - 0; - }, - - nth: function( elem, i, match ) { - return match[3] - 0 === i; - }, - - eq: function( elem, i, match ) { - return match[3] - 0 === i; - } - }, - filter: { - PSEUDO: function( elem, match, i, array ) { - var name = match[1], - filter = Expr.filters[ name ]; - - if ( filter ) { - return filter( elem, i, match, array ); - - } else if ( name === "contains" ) { - return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0; - - } else if ( name === "not" ) { - var not = match[3]; - - for ( var j = 0, l = not.length; j < l; j++ ) { - if ( not[j] === elem ) { - return false; - } - } - - return true; - - } else { - Sizzle.error( name ); - } - }, - - CHILD: function( elem, match ) { - var first, last, - doneName, parent, cache, - count, diff, - type = match[1], - node = elem; - - switch ( type ) { - case "only": - case "first": - while ( (node = node.previousSibling) ) { - if ( node.nodeType === 1 ) { - return false; - } - } - - if ( type === "first" ) { - return true; - } - - node = elem; - - case "last": - while ( (node = node.nextSibling) ) { - if ( node.nodeType === 1 ) { - return false; - } - } - - return true; - - case "nth": - first = match[2]; - last = match[3]; - - if ( first === 1 && last === 0 ) { - return true; - } - - doneName = match[0]; - parent = elem.parentNode; - - if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) { - count = 0; - - for ( node = parent.firstChild; node; node = node.nextSibling ) { - if ( node.nodeType === 1 ) { - node.nodeIndex = ++count; - } - } - - parent[ expando ] = doneName; - } - - diff = elem.nodeIndex - last; - - if ( first === 0 ) { - return diff === 0; - - } else { - return ( diff % first === 0 && diff / first >= 0 ); - } - } - }, - - ID: function( elem, match ) { - return elem.nodeType === 1 && elem.getAttribute("id") === match; - }, - - TAG: function( elem, match ) { - return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match; - }, - - CLASS: function( elem, match ) { - return (" " + (elem.className || elem.getAttribute("class")) + " ") - .indexOf( match ) > -1; - }, - - ATTR: function( elem, match ) { - var name = match[1], - result = Sizzle.attr ? - Sizzle.attr( elem, name ) : - Expr.attrHandle[ name ] ? - Expr.attrHandle[ name ]( elem ) : - elem[ name ] != null ? - elem[ name ] : - elem.getAttribute( name ), - value = result + "", - type = match[2], - check = match[4]; - - return result == null ? - type === "!=" : - !type && Sizzle.attr ? - result != null : - type === "=" ? - value === check : - type === "*=" ? - value.indexOf(check) >= 0 : - type === "~=" ? - (" " + value + " ").indexOf(check) >= 0 : - !check ? - value && result !== false : - type === "!=" ? - value !== check : - type === "^=" ? - value.indexOf(check) === 0 : - type === "$=" ? - value.substr(value.length - check.length) === check : - type === "|=" ? - value === check || value.substr(0, check.length + 1) === check + "-" : - false; - }, - - POS: function( elem, match, i, array ) { - var name = match[2], - filter = Expr.setFilters[ name ]; - - if ( filter ) { - return filter( elem, i, match, array ); - } - } - } -}; - -var origPOS = Expr.match.POS, - fescape = function(all, num){ - return "\\" + (num - 0 + 1); - }; - -for ( var type in Expr.match ) { - Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ); - Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) ); -} - -var makeArray = function( array, results ) { - array = Array.prototype.slice.call( array, 0 ); - - if ( results ) { - results.push.apply( results, array ); - return results; - } - - return array; -}; - -// Perform a simple check to determine if the browser is capable of -// converting a NodeList to an array using builtin methods. -// Also verifies that the returned array holds DOM nodes -// (which is not the case in the Blackberry browser) -try { - Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; - -// Provide a fallback method if it does not work -} catch( e ) { - makeArray = function( array, results ) { - var i = 0, - ret = results || []; - - if ( toString.call(array) === "[object Array]" ) { - Array.prototype.push.apply( ret, array ); - - } else { - if ( typeof array.length === "number" ) { - for ( var l = array.length; i < l; i++ ) { - ret.push( array[i] ); - } - - } else { - for ( ; array[i]; i++ ) { - ret.push( array[i] ); - } - } - } - - return ret; - }; -} - -var sortOrder, siblingCheck; - -if ( document.documentElement.compareDocumentPosition ) { - sortOrder = function( a, b ) { - if ( a === b ) { - hasDuplicate = true; - return 0; - } - - if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) { - return a.compareDocumentPosition ? -1 : 1; - } - - return a.compareDocumentPosition(b) & 4 ? -1 : 1; - }; - -} else { - sortOrder = function( a, b ) { - // The nodes are identical, we can exit early - if ( a === b ) { - hasDuplicate = true; - return 0; - - // Fallback to using sourceIndex (in IE) if it's available on both nodes - } else if ( a.sourceIndex && b.sourceIndex ) { - return a.sourceIndex - b.sourceIndex; - } - - var al, bl, - ap = [], - bp = [], - aup = a.parentNode, - bup = b.parentNode, - cur = aup; - - // If the nodes are siblings (or identical) we can do a quick check - if ( aup === bup ) { - return siblingCheck( a, b ); - - // If no parents were found then the nodes are disconnected - } else if ( !aup ) { - return -1; - - } else if ( !bup ) { - return 1; - } - - // Otherwise they're somewhere else in the tree so we need - // to build up a full list of the parentNodes for comparison - while ( cur ) { - ap.unshift( cur ); - cur = cur.parentNode; - } - - cur = bup; - - while ( cur ) { - bp.unshift( cur ); - cur = cur.parentNode; - } - - al = ap.length; - bl = bp.length; - - // Start walking down the tree looking for a discrepancy - for ( var i = 0; i < al && i < bl; i++ ) { - if ( ap[i] !== bp[i] ) { - return siblingCheck( ap[i], bp[i] ); - } - } - - // We ended someplace up the tree so do a sibling check - return i === al ? - siblingCheck( a, bp[i], -1 ) : - siblingCheck( ap[i], b, 1 ); - }; - - siblingCheck = function( a, b, ret ) { - if ( a === b ) { - return ret; - - var cur = a.nextSibling; - } - - while ( cur ) { - if ( cur === b ) { - return -1; - } - - cur = cur.nextSibling; - } - - return 1; - }; -} - -// Check to see if the browser returns elements by name when -// querying by getElementById (and provide a workaround) -(function(){ - // We're going to inject a fake input element with a specified name - var form = document.createElement("div"), - id = "script" + (new Date()).getTime(), - root = document.documentElement; - - form.innerHTML = ""; - - // Inject it into the root element, check its status, and remove it quickly - root.insertBefore( form, root.firstChild ); - - // The workaround has to do additional checks after a getElementById - // Which slows things down for other browsers (hence the branching) - if ( document.getElementById( id ) ) { - Expr.find.ID = function( match, context, isXML ) { - if ( typeof context.getElementById !== "undefined" && !isXML ) { - var m = context.getElementById(match[1]); - - return m ? - m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? - [m] : - undefined : - []; - } - }; - - Expr.filter.ID = function( elem, match ) { - var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id"); - - return elem.nodeType === 1 && node && node.nodeValue === match; - }; - } - - root.removeChild( form ); - - // release memory in IE - root = form = null; -})(); - -(function(){ - // Check to see if the browser returns only elements - // when doing getElementsByTagName("*") - - // Create a fake element - var div = document.createElement("div"); - div.appendChild( document.createComment("") ); - - // Make sure no comments are found - if ( div.getElementsByTagName("*").length > 0 ) { - Expr.find.TAG = function( match, context ) { - var results = context.getElementsByTagName( match[1] ); - - // Filter out possible comments - if ( match[1] === "*" ) { - var tmp = []; - - for ( var i = 0; results[i]; i++ ) { - if ( results[i].nodeType === 1 ) { - tmp.push( results[i] ); - } - } - - results = tmp; - } - - return results; - }; - } - - // Check to see if an attribute returns normalized href attributes - div.innerHTML = ""; - - if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" && - div.firstChild.getAttribute("href") !== "#" ) { - - Expr.attrHandle.href = function( elem ) { - return elem.getAttribute( "href", 2 ); - }; - } - - // release memory in IE - div = null; -})(); - -if ( document.querySelectorAll ) { - (function(){ - var oldSizzle = Sizzle, - div = document.createElement("div"), - id = "__sizzle__"; - - div.innerHTML = "

        "; - - // Safari can't handle uppercase or unicode characters when - // in quirks mode. - if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { - return; - } - - Sizzle = function( query, context, extra, seed ) { - context = context || document; - - // Only use querySelectorAll on non-XML documents - // (ID selectors don't work in non-HTML documents) - if ( !seed && !Sizzle.isXML(context) ) { - // See if we find a selector to speed up - var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query ); - - if ( match && (context.nodeType === 1 || context.nodeType === 9) ) { - // Speed-up: Sizzle("TAG") - if ( match[1] ) { - return makeArray( context.getElementsByTagName( query ), extra ); - - // Speed-up: Sizzle(".CLASS") - } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) { - return makeArray( context.getElementsByClassName( match[2] ), extra ); - } - } - - if ( context.nodeType === 9 ) { - // Speed-up: Sizzle("body") - // The body element only exists once, optimize finding it - if ( query === "body" && context.body ) { - return makeArray( [ context.body ], extra ); - - // Speed-up: Sizzle("#ID") - } else if ( match && match[3] ) { - var elem = context.getElementById( match[3] ); - - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - if ( elem && elem.parentNode ) { - // Handle the case where IE and Opera return items - // by name instead of ID - if ( elem.id === match[3] ) { - return makeArray( [ elem ], extra ); - } - - } else { - return makeArray( [], extra ); - } - } - - try { - return makeArray( context.querySelectorAll(query), extra ); - } catch(qsaError) {} - - // qSA works strangely on Element-rooted queries - // We can work around this by specifying an extra ID on the root - // and working up from there (Thanks to Andrew Dupont for the technique) - // IE 8 doesn't work on object elements - } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { - var oldContext = context, - old = context.getAttribute( "id" ), - nid = old || id, - hasParent = context.parentNode, - relativeHierarchySelector = /^\s*[+~]/.test( query ); - - if ( !old ) { - context.setAttribute( "id", nid ); - } else { - nid = nid.replace( /'/g, "\\$&" ); - } - if ( relativeHierarchySelector && hasParent ) { - context = context.parentNode; - } - - try { - if ( !relativeHierarchySelector || hasParent ) { - return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra ); - } - - } catch(pseudoError) { - } finally { - if ( !old ) { - oldContext.removeAttribute( "id" ); - } - } - } - } - - return oldSizzle(query, context, extra, seed); - }; - - for ( var prop in oldSizzle ) { - Sizzle[ prop ] = oldSizzle[ prop ]; - } - - // release memory in IE - div = null; - })(); -} - -(function(){ - var html = document.documentElement, - matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector; - - if ( matches ) { - // Check to see if it's possible to do matchesSelector - // on a disconnected node (IE 9 fails this) - var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ), - pseudoWorks = false; - - try { - // This should fail with an exception - // Gecko does not error, returns false instead - matches.call( document.documentElement, "[test!='']:sizzle" ); - - } catch( pseudoError ) { - pseudoWorks = true; - } - - Sizzle.matchesSelector = function( node, expr ) { - // Make sure that attribute selectors are quoted - expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']"); - - if ( !Sizzle.isXML( node ) ) { - try { - if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) { - var ret = matches.call( node, expr ); - - // IE 9's matchesSelector returns false on disconnected nodes - if ( ret || !disconnectedMatch || - // As well, disconnected nodes are said to be in a document - // fragment in IE 9, so check for that - node.document && node.document.nodeType !== 11 ) { - return ret; - } - } - } catch(e) {} - } - - return Sizzle(expr, null, null, [node]).length > 0; - }; - } -})(); - -(function(){ - var div = document.createElement("div"); - - div.innerHTML = "
        "; - - // Opera can't find a second classname (in 9.6) - // Also, make sure that getElementsByClassName actually exists - if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) { - return; - } - - // Safari caches class attributes, doesn't catch changes (in 3.2) - div.lastChild.className = "e"; - - if ( div.getElementsByClassName("e").length === 1 ) { - return; - } - - Expr.order.splice(1, 0, "CLASS"); - Expr.find.CLASS = function( match, context, isXML ) { - if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { - return context.getElementsByClassName(match[1]); - } - }; - - // release memory in IE - div = null; -})(); - -function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { - for ( var i = 0, l = checkSet.length; i < l; i++ ) { - var elem = checkSet[i]; - - if ( elem ) { - var match = false; - - elem = elem[dir]; - - while ( elem ) { - if ( elem[ expando ] === doneName ) { - match = checkSet[elem.sizset]; - break; - } - - if ( elem.nodeType === 1 && !isXML ){ - elem[ expando ] = doneName; - elem.sizset = i; - } - - if ( elem.nodeName.toLowerCase() === cur ) { - match = elem; - break; - } - - elem = elem[dir]; - } - - checkSet[i] = match; - } - } -} - -function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { - for ( var i = 0, l = checkSet.length; i < l; i++ ) { - var elem = checkSet[i]; - - if ( elem ) { - var match = false; - - elem = elem[dir]; - - while ( elem ) { - if ( elem[ expando ] === doneName ) { - match = checkSet[elem.sizset]; - break; - } - - if ( elem.nodeType === 1 ) { - if ( !isXML ) { - elem[ expando ] = doneName; - elem.sizset = i; - } - - if ( typeof cur !== "string" ) { - if ( elem === cur ) { - match = true; - break; - } - - } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) { - match = elem; - break; - } - } - - elem = elem[dir]; - } - - checkSet[i] = match; - } - } -} - -if ( document.documentElement.contains ) { - Sizzle.contains = function( a, b ) { - return a !== b && (a.contains ? a.contains(b) : true); - }; - -} else if ( document.documentElement.compareDocumentPosition ) { - Sizzle.contains = function( a, b ) { - return !!(a.compareDocumentPosition(b) & 16); - }; - -} else { - Sizzle.contains = function() { - return false; - }; -} - -Sizzle.isXML = function( elem ) { - // documentElement is verified for cases where it doesn't yet exist - // (such as loading iframes in IE - #4833) - var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement; - - return documentElement ? documentElement.nodeName !== "HTML" : false; -}; - -var posProcess = function( selector, context, seed ) { - var match, - tmpSet = [], - later = "", - root = context.nodeType ? [context] : context; - - // Position selectors must be done after the filter - // And so must :not(positional) so we move all PSEUDOs to the end - while ( (match = Expr.match.PSEUDO.exec( selector )) ) { - later += match[0]; - selector = selector.replace( Expr.match.PSEUDO, "" ); - } - - selector = Expr.relative[selector] ? selector + "*" : selector; - - for ( var i = 0, l = root.length; i < l; i++ ) { - Sizzle( selector, root[i], tmpSet, seed ); - } - - return Sizzle.filter( later, tmpSet ); -}; - -// EXPOSE -// Override sizzle attribute retrieval -Sizzle.attr = jQuery.attr; -Sizzle.selectors.attrMap = {}; -jQuery.find = Sizzle; -jQuery.expr = Sizzle.selectors; -jQuery.expr[":"] = jQuery.expr.filters; -jQuery.unique = Sizzle.uniqueSort; -jQuery.text = Sizzle.getText; -jQuery.isXMLDoc = Sizzle.isXML; -jQuery.contains = Sizzle.contains; - - -})(); - - -var runtil = /Until$/, - rparentsprev = /^(?:parents|prevUntil|prevAll)/, - // Note: This RegExp should be improved, or likely pulled from Sizzle - rmultiselector = /,/, - isSimple = /^.[^:#\[\.,]*$/, - slice = Array.prototype.slice, - POS = jQuery.expr.match.POS, - // methods guaranteed to produce a unique set when starting from a unique set - guaranteedUnique = { - children: true, - contents: true, - next: true, - prev: true - }; - -jQuery.fn.extend({ - find: function( selector ) { - var self = this, - i, l; - - if ( typeof selector !== "string" ) { - return jQuery( selector ).filter(function() { - for ( i = 0, l = self.length; i < l; i++ ) { - if ( jQuery.contains( self[ i ], this ) ) { - return true; - } - } - }); - } - - var ret = this.pushStack( "", "find", selector ), - length, n, r; - - for ( i = 0, l = this.length; i < l; i++ ) { - length = ret.length; - jQuery.find( selector, this[i], ret ); - - if ( i > 0 ) { - // Make sure that the results are unique - for ( n = length; n < ret.length; n++ ) { - for ( r = 0; r < length; r++ ) { - if ( ret[r] === ret[n] ) { - ret.splice(n--, 1); - break; - } - } - } - } - } - - return ret; - }, - - has: function( target ) { - var targets = jQuery( target ); - return this.filter(function() { - for ( var i = 0, l = targets.length; i < l; i++ ) { - if ( jQuery.contains( this, targets[i] ) ) { - return true; - } - } - }); - }, - - not: function( selector ) { - return this.pushStack( winnow(this, selector, false), "not", selector); - }, - - filter: function( selector ) { - return this.pushStack( winnow(this, selector, true), "filter", selector ); - }, - - is: function( selector ) { - return !!selector && ( - typeof selector === "string" ? - // If this is a positional selector, check membership in the returned set - // so $("p:first").is("p:last") won't return true for a doc with two "p". - POS.test( selector ) ? - jQuery( selector, this.context ).index( this[0] ) >= 0 : - jQuery.filter( selector, this ).length > 0 : - this.filter( selector ).length > 0 ); - }, - - closest: function( selectors, context ) { - var ret = [], i, l, cur = this[0]; - - // Array (deprecated as of jQuery 1.7) - if ( jQuery.isArray( selectors ) ) { - var level = 1; - - while ( cur && cur.ownerDocument && cur !== context ) { - for ( i = 0; i < selectors.length; i++ ) { - - if ( jQuery( cur ).is( selectors[ i ] ) ) { - ret.push({ selector: selectors[ i ], elem: cur, level: level }); - } - } - - cur = cur.parentNode; - level++; - } - - return ret; - } - - // String - var pos = POS.test( selectors ) || typeof selectors !== "string" ? - jQuery( selectors, context || this.context ) : - 0; - - for ( i = 0, l = this.length; i < l; i++ ) { - cur = this[i]; - - while ( cur ) { - if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { - ret.push( cur ); - break; - - } else { - cur = cur.parentNode; - if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { - break; - } - } - } - } - - ret = ret.length > 1 ? jQuery.unique( ret ) : ret; - - return this.pushStack( ret, "closest", selectors ); - }, - - // Determine the position of an element within - // the matched set of elements - index: function( elem ) { - - // No argument, return index in parent - if ( !elem ) { - return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1; - } - - // index in selector - if ( typeof elem === "string" ) { - return jQuery.inArray( this[0], jQuery( elem ) ); - } - - // Locate the position of the desired element - return jQuery.inArray( - // If it receives a jQuery object, the first element is used - elem.jquery ? elem[0] : elem, this ); - }, - - add: function( selector, context ) { - var set = typeof selector === "string" ? - jQuery( selector, context ) : - jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ), - all = jQuery.merge( this.get(), set ); - - return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ? - all : - jQuery.unique( all ) ); - }, - - andSelf: function() { - return this.add( this.prevObject ); - } -}); - -// A painfully simple check to see if an element is disconnected -// from a document (should be improved, where feasible). -function isDisconnected( node ) { - return !node || !node.parentNode || node.parentNode.nodeType === 11; -} - -jQuery.each({ - parent: function( elem ) { - var parent = elem.parentNode; - return parent && parent.nodeType !== 11 ? parent : null; - }, - parents: function( elem ) { - return jQuery.dir( elem, "parentNode" ); - }, - parentsUntil: function( elem, i, until ) { - return jQuery.dir( elem, "parentNode", until ); - }, - next: function( elem ) { - return jQuery.nth( elem, 2, "nextSibling" ); - }, - prev: function( elem ) { - return jQuery.nth( elem, 2, "previousSibling" ); - }, - nextAll: function( elem ) { - return jQuery.dir( elem, "nextSibling" ); - }, - prevAll: function( elem ) { - return jQuery.dir( elem, "previousSibling" ); - }, - nextUntil: function( elem, i, until ) { - return jQuery.dir( elem, "nextSibling", until ); - }, - prevUntil: function( elem, i, until ) { - return jQuery.dir( elem, "previousSibling", until ); - }, - siblings: function( elem ) { - return jQuery.sibling( elem.parentNode.firstChild, elem ); - }, - children: function( elem ) { - return jQuery.sibling( elem.firstChild ); - }, - contents: function( elem ) { - return jQuery.nodeName( elem, "iframe" ) ? - elem.contentDocument || elem.contentWindow.document : - jQuery.makeArray( elem.childNodes ); - } -}, function( name, fn ) { - jQuery.fn[ name ] = function( until, selector ) { - var ret = jQuery.map( this, fn, until ); - - if ( !runtil.test( name ) ) { - selector = until; - } - - if ( selector && typeof selector === "string" ) { - ret = jQuery.filter( selector, ret ); - } - - ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret; - - if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) { - ret = ret.reverse(); - } - - return this.pushStack( ret, name, slice.call( arguments ).join(",") ); - }; -}); - -jQuery.extend({ - filter: function( expr, elems, not ) { - if ( not ) { - expr = ":not(" + expr + ")"; - } - - return elems.length === 1 ? - jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] : - jQuery.find.matches(expr, elems); - }, - - dir: function( elem, dir, until ) { - var matched = [], - cur = elem[ dir ]; - - while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) { - if ( cur.nodeType === 1 ) { - matched.push( cur ); - } - cur = cur[dir]; - } - return matched; - }, - - nth: function( cur, result, dir, elem ) { - result = result || 1; - var num = 0; - - for ( ; cur; cur = cur[dir] ) { - if ( cur.nodeType === 1 && ++num === result ) { - break; - } - } - - return cur; - }, - - sibling: function( n, elem ) { - var r = []; - - for ( ; n; n = n.nextSibling ) { - if ( n.nodeType === 1 && n !== elem ) { - r.push( n ); - } - } - - return r; - } -}); - -// Implement the identical functionality for filter and not -function winnow( elements, qualifier, keep ) { - - // Can't pass null or undefined to indexOf in Firefox 4 - // Set to 0 to skip string check - qualifier = qualifier || 0; - - if ( jQuery.isFunction( qualifier ) ) { - return jQuery.grep(elements, function( elem, i ) { - var retVal = !!qualifier.call( elem, i, elem ); - return retVal === keep; - }); - - } else if ( qualifier.nodeType ) { - return jQuery.grep(elements, function( elem, i ) { - return ( elem === qualifier ) === keep; - }); - - } else if ( typeof qualifier === "string" ) { - var filtered = jQuery.grep(elements, function( elem ) { - return elem.nodeType === 1; - }); - - if ( isSimple.test( qualifier ) ) { - return jQuery.filter(qualifier, filtered, !keep); - } else { - qualifier = jQuery.filter( qualifier, filtered ); - } - } - - return jQuery.grep(elements, function( elem, i ) { - return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep; - }); -} - - - - -function createSafeFragment( document ) { - var list = nodeNames.split( "|" ), - safeFrag = document.createDocumentFragment(); - - if ( safeFrag.createElement ) { - while ( list.length ) { - safeFrag.createElement( - list.pop() - ); - } - } - return safeFrag; -} - -var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" + - "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video", - rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g, - rleadingWhitespace = /^\s+/, - rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, - rtagName = /<([\w:]+)/, - rtbody = /", "" ], - legend: [ 1, "
        ", "
        " ], - thead: [ 1, "", "
        " ], - tr: [ 2, "", "
        " ], - td: [ 3, "", "
        " ], - col: [ 2, "", "
        " ], - area: [ 1, "", "" ], - _default: [ 0, "", "" ] - }, - safeFragment = createSafeFragment( document ); - -wrapMap.optgroup = wrapMap.option; -wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead; -wrapMap.th = wrapMap.td; - -// IE can't serialize and - @@ -1642,8 +2180,14 @@

        Examples

        + + + + + + diff --git a/docs/build/index.js b/docs/build/index.js index 5321fa75..1a9cb387 100644 --- a/docs/build/index.js +++ b/docs/build/index.js @@ -2,6 +2,7 @@ var hogan = require('hogan.js') , fs = require('fs') , prod = process.argv[2] == 'production' + , title = 'Bootstrap' var layout, pages @@ -23,6 +24,16 @@ pages.forEach(function (name) { context[name.replace(/\.mustache$/, '')] = 'active' context._i = true context.production = prod + context.title = name + .replace(/\.mustache/, '') + .replace(/\-.*/, '') + .replace(/(.)/, function ($1) { return $1.toUpperCase() }) + + if (context.title == 'Index') { + context.title = title + } else { + context.title += ' · ' + title + } page = hogan.compile(page, { sectionTags: [{o:'_i', c:'i'}] }) page = layout.render(context, { diff --git a/docs/components.html b/docs/components.html index 183ad10d..bd528866 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2,13 +2,13 @@ - Bootstrap, from Twitter + Components · Bootstrap - + @@ -19,30 +19,34 @@ - - - - - + + + + + - + + - -
        +
        - + Bootstrap -
        +
        @@ -72,97 +69,235 @@
        -
        - -
        -

        Components

        -

        Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

        -
        - +
        +

        Components

        +

        Dozens of reusable components built to provide navigation, alerts, popovers, and more.

        +
        - -
        -
        -

        Button groups Join buttons for more toolbar-like functionality

        -
        -
        -
        -

        Button groups

        -

        Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

        -

        Best practices

        -

        We recommend the following guidelines for using button groups and toolbars:

        -
          -
        • Always use the same element in a single button group, <a> or <button>.
          • -
        • Don't mix buttons of different colors in the same button group.
          • -
        • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
          • -
        -

        Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

        -
        -
        -

        Default example

        -

        Here's how the HTML looks for a standard button group built with anchor tag buttons:

        -
        -
        - Left - Middle - Right -
        + +
        +
        +
        +
        + + + + + + + + + + +
        +
        +

        Button groups

        +
        + +

        Examples

        +

        Two basic options, along with two more specific variations.

        + +

        Single button group

        +

        Wrap a series of buttons with .btn in .btn-group.

        +
        +
        + + + +
        + 
         <div class="btn-group">
-  <a class="btn" href="#">1</a>
-  <a class="btn" href="#">2</a>
-  <a class="btn" href="#">3</a>
+  <button class="btn">1</button>
+  <button class="btn">2</button>
+  <button class="btn">3</button>
 </div>
        -

        Toolbar example

        -

        Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

        -
        -
        - 1 - 2 - 3 - 4 -
        -
        - 5 - 6 - 7 -
        -
        - 8 -
        -
        + +

        Multiple button groups

        +

        Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

        +
        +
        +
        + + + + +
        +
        + + + +
        +
        + +
        +
        + 
         <div class="btn-toolbar">
   <div class="btn-group">
@@ -170,91 +305,120 @@ 
        Toolbar example
        
   </div>
 </div>
        -
        -
        -

        Checkbox and radio flavors

        -

        Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

        -

        Get the javascript »

        -
        -

        Heads up

        -

        CSS for button groups is in a separate file, button-groups.less.

        -
        -
        -
        + +

        Vertical button groups

        +

        Make a set of buttons appear vertically stacked rather than horizontally.

        +
        +
        + + + + +
        +
        +
        +<div class="btn-group btn-group-vertical">
+  ...
+</div>
+
        +
        - -
        -
        -

        Buttons dropdowns Contextual dropdown menus built on button groups

        -
        -
        -
        -

        Button dropdowns

        -

        Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

        -
        -
        - Action - -
        -
        - Action - -
        -
        - Danger - -
        -
        -
        -
        - Success - -
        -
        - Info - -
        -
        -
        -

        Heads up! Button dropdowns require the Bootstrap dropdown plugin to function.

        -
        -
        -

        Example markup

        -

        Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

        +

        Checkbox and radio flavors

        +

        Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that.

        + +

        Dropdowns in button groups

        +

        Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

        +
        + + + + +
        +
        +

        Button dropdown menus

        +
        + + +

        Overview and examples

        +

        Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

        +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + 
         <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -266,118 +430,265 @@ 
        Example markup
        
   </ul>
 </div>
        -
        -
        -
        -
        -

        Split button dropdowns

        -

        Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

        -
        -
        - Action - - -
        -
        - Action - - -
        -
        - Danger - - -
        -
        -
        -
        - Success - - -
        -
        - Info - - -
        -
        -
        -
        -

        Example markup

        -

        We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

        +

        Works with all button sizes

        +

        Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

        +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        +
        + +

        Requires JavaScript

        +

        Button dropdowns require the Bootstrap dropdown plugin to function.

        +

        In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.

        + + +
        + + +

        Split button dropdowns

        +

        Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

        +
        +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + 
         <div class="btn-group">
-  <a class="btn" href="#">Action</a>
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+  <button class="btn">Action</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
-  </a>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
        + +

        Sizes

        +

        Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

        +
        +
        +
        + + + +
        +
        +
        +
        + + + +
        +
        +
        +
        + + + +
        +
        +
        +
        +<div class="btn-group">
+  <button class="btn btn-mini">Action</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
        + +

        Dropup menus

        +

        Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

        +
        +
        +
        + + + +
        +
        + + + +
        +
        +
        +
        +<div class="btn-group dropup">
+  <button class="btn">Dropup</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
   <ul class="dropdown-menu">
     <!-- dropdown menu links -->
   </ul>
 </div>
        -
        -
        - + - - + - - - - - -
        -
        -

        Pagination Two options for paging through content

        -
        + +
        +
        +

        Pagination Two options for paging through content

        +
        -

        Multicon-page pagination

        -
        -
        -

        When to use

        -

        Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

        -

        Stateful page links

        -

        Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

        -

        Flexible alignment

        -

        Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

        -
        -
        -

        Examples

        -

        The default pagination component is flexible and works in a number of variations.

        - - - - -
        -
        -

        Markup

        -

        Wrapped in a <div>, pagination is just a <ul>.

        +

        Standard pagination

        +

        Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

        +
        + + 
         <div class="pagination">
   <ul>
-    <li><a href="#">Prev</a></li>
-    <li class="active">
-      <a href="#">1</a>
-    </li>
+    <li><a href="#">Prev</a></li>
+    <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
-    <li><a href="#">Next</a></li>
+    <li><a href="#">Next</a></li>
   </ul>
 </div>
        -
        -
        -

        Pager For quick previous and next links

        -
        -
        -

        About pager

        -

        The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

        -
        -
        -

        Default example

        -

        By default, the pager centers links.

        - + +
        + + +

        Options

        + +

        Disabled and active states

        +

        Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

        +
        + +
        +
        +<div class="pagination">
+  <ul>
+    <li class="disabled"><a href="#">Prev</a></li>
+    <li class="active"><a href="#">1</a></li>
+    ...
+  </ul>
+</div>
+
        +

        You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

        +
        +<div class="pagination">
+  <ul>
+    <li class="disabled"><span>Prev</span></li>
+    <li class="active"><span>1</span></li>
+    ...
+  </ul>
+</div>
+
        + +

        Sizes

        +

        Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

        +
        + + + + +
        +
        +<div class="pagination pagination-large">
+  <ul>
+    ...
+  </ul>
+</div>
+<div class="pagination">
+  <ul>
+    ...
+  </ul>
+</div>
+<div class="pagination pagination-small">
+  <ul>
+    ...
+  </ul>
+</div>
+<div class="pagination pagination-mini">
+  <ul>
+    ...
+  </ul>
+</div>
+
        + +

        Alignment

        +

        Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

        +
        + +
        +
        +<div class="pagination pagination-centered">
+  ...
+</div>
+
        +
        + +
        +
        +<div class="pagination pagination-right">
+  ...
+</div>
+
        + + +
        + + +

        Pager

        +

        Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

        + +

        Default example

        +

        By default, the pager centers links.

        +
        + + 
         <ul class="pager">
-  <li>
-    <a href="#">Previous</a>
-  </li>
-  <li>
-    <a href="#">Next</a>
-  </li>
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
 </ul>
        -
        -
        -

        Aligned links

        -

        Alternatively, you can align each link to the sides:

        - + +

        Aligned links

        +

        Alternatively, you can align each link to the sides:

        +
        + + 
         <ul class="pager">
   <li class="previous">
@@ -1084,84 +1692,196 @@ 
        Aligned links
        
   </li>
 </ul>
        -
        -
        -
        +

        Optional disabled state

        +

        Pager links also use the general .disabled utility class from the pagination.

        +
        + +
        +
        +<ul class="pager">
+  <li class="previous disabled">
+    <a href="#">&larr; Older</a>
+  </li>
+  ...
+</ul>
+
        +
        - -
        -
        -

        Inline labels Label and annotate text

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        LabelsMarkup
        - Default - - <span class="label">Default</span> -
        - Success - - <span class="label label-success">Success</span> -
        - Warning - - <span class="label label-warning">Warning</span> -
        - Important - - <span class="label label-important">Important</span> -
        - Info - - <span class="label label-info">Info</span> -
        -
        + +
        +
        +

        Labels and badges

        +
        +

        Labels

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        LabelsMarkup
        + Default + + <span class="label">Default</span> +
        + Success + + <span class="label label-success">Success</span> +
        + Warning + + <span class="label label-warning">Warning</span> +
        + Important + + <span class="label label-important">Important</span> +
        + Info + + <span class="label label-info">Info</span> +
        + Inverse + + <span class="label label-inverse">Inverse</span> +
        + +

        Badges

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        NameExampleMarkup
        + Default + + 1 + + <span class="badge">1</span> +
        + Success + + 2 + + <span class="badge badge-success">2</span> +
        + Warning + + 4 + + <span class="badge badge-warning">4</span> +
        + Important + + 6 + + <span class="badge badge-important">6</span> +
        + Info + + 8 + + <span class="badge badge-info">8</span> +
        + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
        + +

        Easily collapsible

        +

        For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

        + +
        + + + + +
        +
        +

        Typographic components

        +
        - -
        -
        -

        Typographic components Page header and hero unit for segmenting content

        -
        -

        Hero unit

        -
        -
        -

        Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

        -

        Markup

        -

        Wrap your content in a div like so:

        +

        Hero unit

        +

        A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

        +
        +
        +

        Hello, world!

        +

        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        +

        Learn more

        +
        + 
         <div class="hero-unit">
   <h1>Heading</h1>
@@ -1173,346 +1893,546 @@ 
        Markup
        
   </p>
 </div>
        -
        -
        -
        -

        Hello, world!

        -

        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        -

        Learn more

        -
        -
        -
        -

        Page header

        -
        -
        -

        A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

        -
        -
        + +

        Page header

        +

        A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

        +
        +
        +

        Example page header Subtext for header

        +
        + 
        -<div class="page-haeder">
-  <h1>Example page header</h1>
+<div class="page-header">
+  <h1>Example page header <small>Subtext for header</small></h1>
 </div>
        -
        -
        -
        +
        - -
        -
        -

        Thumbnails Grids of images, videos, text, and more

        -
        -
        -
        -

        Default thumbnails

        -

        By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

        - -
        -
        -

        Highly customizable

        -

        With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

        -
          -
        • -
          - -
          -
          Thumbnail label
          -

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          -

          Action Action

          -
          + +
          +
          +

          Thumbnails Grids of images, videos, text, and more

          -
          • -
        • -
          - -
          -
          Thumbnail label
          -

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          -

          Action Action

          -
          + +

          Default thumbnails

          +

          By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

          +
          +
          -
          • -
        -
        -
        -
        -
        -

        Why use thumbnails

        -

        Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

        -
        -
        -

        Simple, flexible markup

        -

        Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

        -
        -
        -

        Uses grid column sizes

        -

        Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

        -
        -
        +

        Highly customizable

        +

        With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

        +
        +
          +
        • +
          + +
          +

          Thumbnail label

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          Action Action

          +
          +
          +
          • +
        • +
          + +
          +

          Thumbnail label

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          Action Action

          +
          +
          +
          • +
        • +
          + +
          +

          Thumbnail label

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          Action Action

          +
          +
          +
          • +
        +
        + +

        Why use thumbnails

        +

        Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

        + +

        Simple, flexible markup

        +

        Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

        -
        -
        -

        The markup

        -

        As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

        +

        Uses grid column sizes

        +

        Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

        + +

        Markup

        +

        As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

         <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/300x200" alt="">
     </a>
   </li>
   ...
 </ul>
        -

        For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

        +

        For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

         <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <img data-src="holder.js/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
     </div>
   </li>
   ...
 </ul>
        -
        -
        -

        More examples

        -

        Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

        - -
        -
        -
        +

        More examples

        +

        Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

        + + - -
        -
        -

        Alerts Styles for success, warning, and error messages

        -
        -

        Lightweight defaults

        -
        -
        -

        Rewritten base class

        -

        With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

        -

        Single alert message

        -

        For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

        -
        -

        Goes great with javascript

        -

        Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

        -

        Get the plugin »

        -
        -
        -

        Example alerts

        -

        Wrap your message and an optional close icon in a div with simple class.

        -
        - × - Warning! Best check yo self, you're not looking too good. -
        + + +
        +
        +

        Alerts Styles for success, warning, and error messages

        +
        + +

        Default alert

        +

        Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

        +
        +
        + + Warning! Best check yo self, you're not looking too good. +
        + 
         <div class="alert">
-  <a class="close" data-dismiss="alert">×</a>
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
        -

        Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

        -
        - × -

        Warning!

        -

        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.

        -
        + +

        Dismiss buttons

        +

        Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

        + 
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        +

        Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

        + 
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        + +

        Dismiss alerts via JavaScript

        +

        Use the alerts jQuery plugin for quick and easy dismissal of alerts.

        + + +
        + + +

        Options

        +

        For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

        +
        +
        + +

        Warning!

        +

        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.

        +
        + 
         <div class="alert alert-block">
-  <a class="close" data-dismiss="alert">×</a>
-  <h4 class="alert-heading">Warning!</h4>
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <h4>Warning!</h4>
   Best check yo self, you're not...
 </div>
        -
        -
        -

        Contextual alternatives Add optional classes to change an alert's connotation

        -
        -
        -

        Error or danger

        -
        - × - Oh snap! Change a few things up and try submitting again. -
        + +
        + + +

        Contextual alternatives

        +

        Add optional classes to change an alert's connotation.

        + +

        Error or danger

        +
        +
        + + Oh snap! Change a few things up and try submitting again. +
        + 
         <div class="alert alert-error">
   ...
 </div>
        -
        -
        -

        Success

        -
        - × - Well done! You successfully read this important alert message. -
        + +

        Success

        +
        +
        + + Well done! You successfully read this important alert message. +
        + 
         <div class="alert alert-success">
   ...
 </div>
        -
        -
        -

        Information

        -
        - × - Heads up! This alert needs your attention, but it's not super important. -
        + +

        Information

        +
        +
        + + Heads up! This alert needs your attention, but it's not super important. +
        + 
         <div class="alert alert-info">
   ...
 </div>
        -
        -
        -
        + - -
        -
        -

        Progress bars For loading, redirecting, or action status

        -
        -

        Examples and markup

        -
        -
        -

        Basic

        -

        Default progress bar with a vertical gradient.

        -
        -
        -
        + +
        +
        +

        Progress bars For loading, redirecting, or action status

        +
        + +

        Examples and markup

        + +

        Basic

        +

        Default progress bar with a vertical gradient.

        +
        +
        +
        +
        + 
         <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
        -
        -
        -

        Striped

        -

        Uses a gradient to create a striped effect.

        -
        -
        -
        + +

        Striped

        +

        Uses a gradient to create a striped effect. Not available in IE7-8.

        +
        +
        +
        +
        + 
        -<div class="progress progress-info
-     progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+<div class="progress progress-striped">
+  <div class="bar" style="width: 20%;"></div>
 </div>
        -
        -
        -

        Animated

        -

        Takes the striped example and animates it.

        -
        -
        -
        + +

        Animated

        +

        Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

        +
        +
        +
        +
        + 
        -<div class="progress progress-danger
-     progress-striped active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
        -
        -
        -

        Options and browser support

        -
        -
        -

        Additional colors

        -

        Progress bars utilize some of the same class names as buttons and alerts for similar styling.

        -
          -
        • .progress-info
          • -
        • .progress-success
          • -
        • .progress-danger
          • -
        -

        Alternatively, you can customize the LESS files and roll your own colors and sizes.

        -
        -
        -

        Behavior

        -

        Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

        -

        If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

        -
        -
        -

        Browser support

        -

        Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

        -

        Opera does not support animations at this time.

        -
        -
        +

        Stacked

        +

        Place multiple bars into the same .progress to stack them.

        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress">
+  <div class="bar bar-success" style="width: 35%;"></div>
+  <div class="bar bar-warning" style="width: 20%;"></div>
+  <div class="bar bar-danger" style="width: 10%;"></div>
+</div>
+
        + + +
        + + +

        Options

        + +

        Additional colors

        +

        Progress bars use some of the same button and alert classes for consistent styles.

        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
        + +

        Striped bars

        +

        Similar to the solid colors, we have varied striped progress bars.

        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
        + + +
        + + +

        Browser support

        +

        Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

        +

        Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

        + +
        + + + + + +
        +
        +

        Media object

        +
        +

        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.

        + +

        Default example

        +

        The default media allow to float a media object (images, video, audio) to the left or right of a content block.

        +
        +
        + + + +
        +

        Media heading

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        +
        +
        + + + +
        +

        Media heading

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        + + + +
        +

        Media heading

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        +
        +
        +
        +
        +
        +<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" data-src="holder.js/64x64">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Media heading</h4>
+    ...
+
+    <!-- Nested media object -->
+    <div class="media">
+      ...
+    </div>
+  </div>
+</div>
+
        + + +
        + + +

        Media list

        +

        With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

        +
        +
          +
        • + + + +
          +

          Media heading

          +

          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

          + +
          + + + +
          +

          Nested media heading

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + +
          + + + +
          +

          Nested media heading

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          +
          +
          + +
          + + + +
          +

          Nested media heading

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          +
          +
          • +
        • + + + +
          +

          Media heading

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          • +
        +
        +
        +<ul class="media-list">
+  <li class="media">
+    <a class="pull-left" href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+    <div class="media-body">
+      <h4 class="media-heading">Media heading</h4>
+      ...
+
+      <!-- Nested media object -->
+      <div class="media">
+        ...
+     </div>
+    </div>
+  </li>
+</ul>
+
        @@ -1520,50 +2440,139 @@

        Browser support

        - -
        -
        -

        Miscellaneous Wells, badges, and close icon

        -
        -
        -
        -

        Wells

        -

        Use the well as a simple effect on an element to give it an inset effect.

        -
        - Look, I'm in a well! -
        + +
        +
        +

        Miscellaneous Lightweight utility components

        +
        + +

        Wells

        +

        Use the well as a simple effect on an element to give it an inset effect.

        +
        +
        + Look, I'm in a well! +
        + 
         <div class="well">
   ...
 </div>
        -
        - -
        -

        Close icon

        -

        Use the generic close icon for dismissing content like modals and alerts.

        -

        ×

        -
        <a class="close">&times;</a>
        -
        -
        -
        +

        Optional classes

        +

        Control padding and rounded corners with two optional modifier classes.

        +
        +
        + Look, I'm in a well! +
        +
        +
        +<div class="well well-large">
+  ...
+</div>
+
        +
        +
        + Look, I'm in a well! +
        +
        +
        +<div class="well well-small">
+  ...
+</div>
+
        + +

        Close icon

        +

        Use the generic close icon for dismissing content like modals and alerts.

        +
        +

        +
        + 
        <button class="close">&times;</button>
        +

        iOS devices require an href="#" for click events if you would rather use an anchor.

        + 
        <a class="close" href="#">&times;</a>
        + +

        Helper classes

        +

        Simple, focused classes for small display or behavior tweaks.

        + +

        .pull-left

        +

        Float an element left

        +
        +class="pull-left"
+
        +
        +.pull-left {
+  float: left;
+}
+
        + +

        .pull-right

        +

        Float an element right

        +
        +class="pull-right"
+
        +
        +.pull-right {
+  float: right;
+}
+
        + +

        .muted

        +

        Change an element's color to #999

        +
        +class="muted"
+
        +
        +.muted {
+  color: #999;
+}
+
        + +

        .clearfix

        +

        Clear the float on any element

        +
        +class="clearfix"
+
        +
        +.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
        + + - - -
        +
        +
        + +
        + + + + + @@ -1572,7 +2581,6 @@

        Close icon

        - @@ -1585,8 +2593,14 @@

        Close icon

        + + + + + + diff --git a/docs/customize.html b/docs/customize.html new file mode 100644 index 00000000..d7432465 --- /dev/null +++ b/docs/customize.html @@ -0,0 +1,514 @@ + + + + + Customize · Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        +
        + + Bootstrap +
        + +
        +
        +
        +
        + + +
        +
        +

        Customize and download

        +

        Download Bootstrap or customize variables, components, JavaScript plugins, and more.

        +
        +
        + + +
        + + +
        +
        + +
        +
        + + + +
        +
        +
        + Toggle all +

        + 1. Choose components +

        +
        +
        +
        +

        Scaffolding

        + + + + +

        Base CSS

        + + + + + + + +
        +
        +

        Components

        + + + + + + + + + + + +

        JS Components

        + + + + + + +
        +
        +

        Miscellaneous

        + + + + +

        Responsive

        + + + + + +
        +
        +
        + +
        +
        + Toggle all +

        + 2. Select jQuery plugins +

        +
        +
        +
        + + + + + + + +
        +
        + + + + + + +
        +
        +

        Heads up!

        +

        All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

        +
        +
        +
        + + +
        +
        + Reset to defaults +

        + 3. Customize variables +

        +
        +
        +
        +

        Scaffolding

        + + + + + +

        Links

        + + + + +

        Colors

        + + + + + + + + + + + + + + + +

        Sprites

        + + + + + +

        Grid system

        + + + + + + + + + + + + + + + +
        +
        + +

        Typography

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

        Tables

        + + + + + + + + + +

        Forms

        + + + + + + + + + + + + + + + + + +
        +
        + +

        Form states & alerts

        + + + + + + + + + + + + + + + + + +

        Navbar

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

        Dropdowns

        + + + + + + + + + + +
        +
        +
        + +
        +
        +

        + 4. Download +

        +
        +
        + Customize and Download +

        What's included?

        +

        Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

        +
        +
        +
        + + + +
        +
        + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/download.html b/docs/download.html deleted file mode 100644 index 1e81c912..00000000 --- a/docs/download.html +++ /dev/null @@ -1,362 +0,0 @@ - - - - - Bootstrap, from Twitter - - - - - - - - - - - - - - - - - - - - - - - - -
        -
        -
        - - - - - - Bootstrap -
        - -
        -
        -
        -
        - -
        - - -
        -

        Customize and download

        -

        Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.

        -
        - -
        -
        - -
        -
        - Toggle all -

        - 1. Choose components - Get just the CSS you need -

        -
        -
        -
        -

        Scaffolding

        - - - - -

        Base CSS

        - - - - - - - -
        -
        -

        Components

        - - - - - - - - - - -
        -
        -

        JS Components

        - - - - - - -
        -
        -

        Miscellaneous

        - - - - -

        Responsive

        - -
        -
        -
        - -
        -
        - Toggle all -

        - 2. Select jQuery plugins - Quickly add only the necessary javascript -

        -
        -
        -
        - - - - - - -
        -
        - - - - - - -
        -
        -

        Heads up!

        -

        All plugins require the latest version of jQuery to be included.

        -
        -
        -
        - - -
        -
        - Reset to defaults -

        - 3. Customize variables - Optionally modify Bootstrap without a compiler -

        -
        -
        -
        -

        Links

        - - - - -

        Colors

        - - - - - - - - - - - - - - -
        -
        -

        Grid system

        - - - - - - -

        Fluid grid system

        - - - - -

        Typography

        - - - - - - -
        -
        -

        Forms

        - - - - -

        Navbar

        - - - - - - - - - - - - -
        -
        -

        Form states & alerts

        - - - - - - - - - - - - - - - - -
        -
        -
        - -
        -
        -

        - 4. Download -

        -
        -
        - Customize and Download -

        What's included?

        -

        Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

        -
        -
        - - - - - -
        - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/examples.html b/docs/examples.html deleted file mode 100644 index 01296216..00000000 --- a/docs/examples.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - Bootstrap, from Twitter - - - - - - - - - - - - - - - - - - - - - - - - -
        -
        -
        - - - - - - Bootstrap -
        - -
        -
        -
        -
        - -
        - - -
        -

        Bootstrap examples

        -

        We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.

        -
        - - -
          -
        • - - - -

          Basic marketing site

          -

          Featuring a hero unit for a primary message and three supporting elements.

          -
          • -
        • - - - -

          Fluid layout

          -

          Uses our new responsive, fluid grid system to create seamless liquid layout.

          -
          • -
        • - - - -

          Starter template

          -

          A barebones HTML document with all the Bootstrap CSS and javascript included.

          -
          • -
        - - - - - -
        - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html new file mode 100644 index 00000000..ed7740a9 --- /dev/null +++ b/docs/examples/carousel.html @@ -0,0 +1,452 @@ + + + + + Carousel Template · Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
        + +
        + +
        +
        + + + + + + + Project name + +
        + +
        +
        +
        + +
        +
        + + + + + + + + + + + +
        + + +
        +
        + +

        Heading

        +

        Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

        +

        View details »

        +
        +
        + +

        Heading

        +

        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        +

        View details »

        +
        +
        + +

        Heading

        +

        Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        +

        View details »

        +
        +
        + + + + +
        + +
        + +

        First featurette headling. It'll blow your mind.

        +

        Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

        +
        + +
        + +
        + +

        Oh yeah, it's that good. See for yourself.

        +

        Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

        +
        + +
        + +
        + +

        And lastly, this one. Checkmate.

        +

        Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

        +
        + +
        + + + + + + + +
        + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html index 3c7059f9..4ca2920e 100644 --- a/docs/examples/fluid.html +++ b/docs/examples/fluid.html @@ -20,21 +20,22 @@ - + - - - - - + + + + + + -
        +
        @@ -43,13 +44,15 @@ Project name -
        +
        +

        + Logged in as Username +

        -

        Logged in as username

        @@ -129,7 +132,7 @@

        Heading

        - + diff --git a/docs/examples/hero.html b/docs/examples/hero.html index ee64646f..f0a5e170 100644 --- a/docs/examples/hero.html +++ b/docs/examples/hero.html @@ -17,21 +17,22 @@ - + - - - - - + + + + + + -
        +
        @@ -40,12 +41,29 @@ Project name -
        +
        +
        + + + +
        @@ -64,12 +82,12 @@

        Hello, world!

        Heading

        -

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        +

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        View details »

        Heading

        -

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        +

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        View details »

        diff --git a/docs/examples/marketing-alternate.html b/docs/examples/marketing-alternate.html new file mode 100644 index 00000000..8cbeb02a --- /dev/null +++ b/docs/examples/marketing-alternate.html @@ -0,0 +1,172 @@ + + + + + Template · Bootstrap + + + + + + + + + + + + + + + + + + + + + + +
        + +
        +

        Project name

        +
        +
        +
        + +
        +
        +
        +
        + + +
        +

        Marketing stuff!

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        + Get started today +
        + +
        + + +
        +
        +

        Heading

        +

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        +

        View details »

        +
        +
        +

        Heading

        +

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

        +

        View details »

        +
        +
        +

        Heading

        +

        Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

        +

        View details »

        +
        +
        + +
        + +
        +

        © Company 2012

        +
        + +
        + + + + + + + + + + + + + + + + + + + diff --git a/docs/examples/marketing-narrow.html b/docs/examples/marketing-narrow.html new file mode 100644 index 00000000..9ce1cd5b --- /dev/null +++ b/docs/examples/marketing-narrow.html @@ -0,0 +1,137 @@ + + + + + Template · Bootstrap + + + + + + + + + + + + + + + + + + + + + + +
        + +
        + +

        Project name

        +
        + +
        + +
        +

        Super awesome marketing speak!

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        + Sign up today +
        + +
        + +
        +
        +

        Subheading

        +

        Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

        + +

        Subheading

        +

        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

        + +

        Subheading

        +

        Maecenas sed diam eget risus varius blandit sit amet non magna.

        +
        + +
        +

        Subheading

        +

        Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

        + +

        Subheading

        +

        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

        + +

        Subheading

        +

        Maecenas sed diam eget risus varius blandit sit amet non magna.

        +
        +
        + +
        + +
        +

        © Company 2012

        +
        + +
        + + + + + + + + + + + + + + + + + + + diff --git a/docs/examples/signin.html b/docs/examples/signin.html new file mode 100644 index 00000000..17578483 --- /dev/null +++ b/docs/examples/signin.html @@ -0,0 +1,94 @@ + + + + + Sign in · Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + +
        + + + +
        + + + + + + + + + + + + + + + + + + + diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html index 31cc57cf..93ba809e 100644 --- a/docs/examples/starter-template.html +++ b/docs/examples/starter-template.html @@ -16,21 +16,22 @@ - + - - - - - + + + + + + -
        +
        @@ -39,7 +40,7 @@ Project name -
        +
        • Home
        • About
          • diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html new file mode 100644 index 00000000..1c9c3614 --- /dev/null +++ b/docs/examples/sticky-footer.html @@ -0,0 +1,124 @@ + + + + + Sticky footer · Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + +
          + + +
          +
          +

          Sticky footer

          +
          +

          Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

          +
          + +
          +
          + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/extend.html b/docs/extend.html new file mode 100644 index 00000000..dfbe436f --- /dev/null +++ b/docs/extend.html @@ -0,0 +1,290 @@ + + + + + Extend · Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          +
          + + Bootstrap +
          + +
          +
          +
          +
          + + +
          +
          +

          Extending Bootstrap

          +

          Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

          +
          +
          + +
          + + +
          +
          + +
          +
          + + + + +
          +
          +

          Built with LESS

          +
          + + LESS CSS +

          Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

          + +

          Why LESS?

          +

          One of Bootstrap's creators wrote a quick blog post about this, summarized here:

          +
            +
          • Bootstrap compiles faster ~6x faster with Less compared to Sass
            • +
          • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
            • +
          • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.
            • +
          + +

          What's included?

          +

          As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

          + +

          Learn more

          +

          Visit the official website at http://lesscss.org to learn more.

          +
          + + + + +
          +
          +

          Compiling Bootstrap with Less

          +
          + +

          Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

          + +
          + Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. +
          + +

          Tools for compiling

          + +

          Node with makefile

          +

          Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

          + 
          $ npm install -g less jshint recess uglify-js
          +

          Once installed just run make from the root of your bootstrap directory and you're all set.

          +

          Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

          + +

          Command line

          +

          Install the LESS command line tool via Node and run the following command:

          + 
          $ lessc ./less/bootstrap.less > bootstrap.css
          +

          Be sure to include --compress in that command if you're trying to save some bytes!

          + +

          JavaScript

          +

          Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

          +
          +<link rel="stylesheet/less" href="/path/to/bootstrap.less">
+<script src="/path/to/less.js"></script>
+
          +

          To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

          + +

          Unofficial Mac app

          +

          The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

          + +

          More apps

          +

          Crunch

          +

          Crunch is a great looking LESS editor and compiler built on Adobe Air.

          +

          CodeKit

          +

          Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

          +

          Simpless

          +

          Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

          + +
          + + + + +
          +
          +

          Use as static assets

          +
          +

          Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

          + +

          Setup file structure

          +

          Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

          +
          +   app/
+       layouts/
+       templates/
+   public/
+       css/
+           bootstrap.min.css
+       js/
+           bootstrap.min.js
+       img/
+           glyphicons-halflings.png
+           glyphicons-halflings-white.png
+
          + +

          Utilize starter template

          +

          Copy the following base HTML to get started.

          +
          +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <!-- Bootstrap -->
+    <script src="public/js/bootstrap.min.js"></script>
+  </body>
+</html>
+
          + +

          Layer on custom code

          +

          Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

          +
          +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <!-- Bootstrap -->
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <script src="public/js/application.js"></script>
+  </body>
+</html>
+
          + +
          + +
          +
          + +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/getting-started.html b/docs/getting-started.html new file mode 100644 index 00000000..cc6e0b71 --- /dev/null +++ b/docs/getting-started.html @@ -0,0 +1,368 @@ + + + + + Getting · Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          +
          + + Bootstrap +
          + +
          +
          +
          +
          + + +
          +
          +

          Getting started

          +

          Overview of the project, its contents, and how to get started with a simple template.

          +
          +
          + + +
          + + +
          +
          + +
          +
          + + + + +
          +
          +

          1. Download

          +
          +

          Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.

          + +
          +
          +

          Download compiled

          +

          Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

          +

          Download Bootstrap

          +
          +
          +

          Download source

          +

          Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.

          +

          Download Bootstrap source

          +
          +
          +
          + + + + +
          +
          +

          2. File structure

          +
          +

          Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.

          +

          Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

          +
          +  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
          +

          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 (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

          +

          Please note that all JavaScript plugins require jQuery to be included.

          +
          + + + + +
          +
          +

          3. What's included

          +
          +

          Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.

          + +

          Docs sections

          +

          Scaffolding

          +

          Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

          +

          Base CSS

          +

          Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

          +

          Components

          +

          Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

          +

          JavaScript plugins

          +

          Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

          + +

          List of components

          +

          Together, the Components and JavaScript plugins sections provide the following interface elements:

          +
            +
          • Button groups
            • +
          • Button dropdowns
            • +
          • Navigational tabs, pills, and lists
            • +
          • Navbar
            • +
          • Labels
            • +
          • Badges
            • +
          • Page headers and hero unit
            • +
          • Thumbnails
            • +
          • Alerts
            • +
          • Progress bars
            • +
          • Modals
            • +
          • Dropdowns
            • +
          • Tooltips
            • +
          • Popovers
            • +
          • Accordion
            • +
          • Carousel
            • +
          • Typeahead
            • +
          +

          In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

          +
          + + + + +
          +
          +

          4. Basic HTML template

          +
          +

          With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

          +

          Now, here's a look at a typical HTML file:

          +
          +<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+  </body>
+</html>
+
          +

          To make this a Bootstrapped template, just include the appropriate CSS and JS files:

          +
          +<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</html>
+
          +

          And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

          +
          + + + + +
          +
          +

          5. Examples

          +
          +

          Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

          +
            +
          • + + + +

            Starter template

            +

            A barebones HTML document with all the Bootstrap CSS and JavaScript included.

            +
            • +
          • + + + +

            Basic marketing site

            +

            Featuring a hero unit for a primary message and three supporting elements.

            +
            • +
          • + + + +

            Fluid layout

            +

            Uses our new responsive, fluid grid system to create a seamless liquid layout.

            +
            • + +
          • + + + +

            Narrow marketing

            +

            Slim, lightweight marketing template for small projects or teams.

            +
            • +
          • + + + +

            Sign in

            +

            Barebones sign in form with custom, larger form controls and a flexible layout.

            +
            • +
          • + + + +

            Sticky footer

            +

            Pin a fixed-height footer to the bottom of the user's viewport.

            +
            • + +
          • + + + +

            Carousel jumbotron

            +

            A more interactive riff on the basic marketing site featuring a prominent carousel.

            +
            • +
          +
          + + + + + +
          +
          +

          What next?

          +
          +

          Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

          + Visit the Bootstrap docs + Customize Bootstrap +
          + + + + +
          +
          + +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 5243b5c6..05786b15 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,13 +2,13 @@ - Bootstrap, from Twitter + Bootstrap - + @@ -19,30 +19,34 @@ - - - - - + + + + + - + + - -
          +
          - + Bootstrap -
          +
          @@ -72,154 +69,125 @@
          -
          - - -
          -
          -

          Bootstrap, from Twitter

          -

          Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

          -

          - View project on GitHub - Download Bootstrap +

          +
          +

          Bootstrap

          +

          Sleek, intuitive, and powerful front-end framework for faster and easier web development.

          +

          + Download Bootstrap

          +
          +
          + +
          +
          + +
          +
          - -
          - -
          - -
          -

          Designed for everyone, everywhere.

          -

          Need reasons to love Bootstrap? Look no further.

          -
          -
          - -

          Built for and by nerds

          -

          Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

          -
          -
          - -

          For all skill levels

          -

          Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

          -
          -
          - -

          Cross-everything

          -

          Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

          -
          -
          -
          -
          - -

          12-column grid

          -

          Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

          -
          -
          - -

          Responsive design

          -

          With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

          -
          -
          - -

          Styleguide docs

          -

          Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

          -
          -
          -
          -
          - -

          Growing library

          -

          Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

          -
          -
          - -

          Custom jQuery plugins

          -

          What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

          -
          -
          - -

          Built on LESS

          -

          Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

          -
          -
          -
          -
          - -

          HTML5

          -

          Built to support new HTML5 elements and syntax.

          -
          -
          - -

          CSS3

          -

          Progressively enhanced components for ultimate style.

          -
          -
          - -

          Open-source

          -

          Built for and maintained by the community via GitHub.

          -
          -
          - -

          Made at Twitter

          -

          Brought to you by an experienced engineer and designer.

          +
          + +
          + +

          Introducing Bootstrap.

          +

          Need reasons to love Bootstrap? Look no further.

          + +
          +
          + +

          By nerds, for nerds.

          +

          Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

          +
          +
          + +

          Made for everyone.

          +

          Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

          +
          +
          + +

          Packed with features.

          +

          A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

          +
          -
          - -
          - -

          Built with Bootstrap.

          -

          For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

          - - -
          - - - - -
          + +
          + +

          Built with Bootstrap.

          +

          For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

          +
          + +
          + +
          + +
          + + + + + @@ -228,7 +196,6 @@

          Built with Bootstrap.

          - @@ -241,8 +208,14 @@

          Built with Bootstrap.

          + + + + + + diff --git a/docs/javascript.html b/docs/javascript.html index a8197f60..35327319 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -2,13 +2,13 @@ - Bootstrap, from Twitter + Javascript · Bootstrap - + @@ -19,30 +19,34 @@ - - - - - + + + + + - + + - -
          +
          - + Bootstrap -
          +
          @@ -72,185 +69,229 @@
          -
          + +
          +
          +

          JavaScript

          +

          Bring Bootstrap's components to life—now with 13 custom jQuery plugins. +

          +
          - -
          -

          Javascript for Bootstrap

          -

          Bring Bootstrap's components to life—now with 12 custom jQuery plugins. -

          -
            -
          • All plugins
            • -
          • Modal
            • -
          • Dropdown
            • -
          • Scrollspy
            • -
          • Tab
            • -
          • Tooltip
            • -
          • Popover
            • -
          • Alert
            • -
          • Button
            • -
          • Collapse
            • -
          • Carousel
            • -
          • Typeahead
            • +
            + + +
            +
            + +
            +
            + + + +
            +
            +

            JavaScript in Bootstrap

            +
            + +

            Individual or compiled

            +

            Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

            + +

            Data attributes

            +

            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.

            + +

            That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: + 

            $('body').off('.data-api')
            + +

            Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

            + 
            $('body').off('.alert.data-api')
            + +

            Programmatic API

            +

            We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

            + 
            $(".btn.danger").button("toggle").addClass("fat")
            +

            All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

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

            Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').

            + +

            No Conflict

            +

            Sometimes it's neccessary to use bootstrap plugins with other ui frameworks. In these circumstances, occasionally namespace collisions can occur. If this happens, you may call .noCoflict on the plugin you wish to revert the value of.

            + +
            +var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+
            + +

            Events

            +

            Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.

            +

            All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

            +
            +$('#myModal').on('show', function (e) {
+    if (!data) return e.preventDefault() // stops modal from being shown
+})
+
            +
            + + + + +
            +
            +

            Transitions bootstrap-transition.js

            +
            +

            About transitions

            +

            For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

            +

            Use cases

            +

            A few examples of the transition plugin:

            +
              +
            • Sliding or fading in modals
              • +
            • Fading out tabs
              • +
            • Fading out alerts
              • +
            • Sliding carousel panes
            -
            -
          + - -
          -
          -

          jQuery plugins A dozen Bootstrap plugins to get you started

          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          Heads up! All javascript plugins require the latest version of jQuery.
          -
          + +
          +
          +

          Modals bootstrap-modal.js

          +
          - -
          -
          -

          Modals bootstrap-modal.js

          -
          -
          -
          -

          About modals

          -

          A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

          - Download file -
          -
          -

          Static example

          -

          Below is a statically rendered modal.

          -
          -
          + +

          Examples

          +

          Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

          + +

          Static example

          +

          A rendered modal with header, body, and set of actions in the footer.

          +
          +
          - × +

          Modal header

          -

          One fine body…

          +

          One fine body…

          - Save changes Close + Save changes
          -
          +
          +
          +<div class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Modal header</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body…</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn">Close</a>
+    <a href="#" class="btn btn-primary">Save changes</a>
+  </div>
+</div>
+
          -

          Live demo

          -

          Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

          +

          Live demo

          +

          Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

          - -
          -
          +}) + +
          - -
        +
        + + +
        + +

        Usage

        + +

        Via data attributes

        +

        Add data-toggle="dropdown" to a link or button to toggle a dropdown.

        -<ul class="nav pills">
-  <li class="active"><a href="#">Regular link</a></li>
-  <li class="dropdown" id="menu1">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
-      Dropdown
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
-  </li>
-  ...
-</ul>
        +<div class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + ... + </ul> +</div> + +

        To keep URLs intact, use the data-target attribute instead of href="#".

        +
        +<div class="dropdown">
+  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+    Dropdown
+    <b class="caret"></b>
+  </a>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+
        + +

        Via JavaScript

        +

        Call the dropdowns via JavaScript:

        + 
        $('.dropdown-toggle').dropdown()
        + +

        Options

        +

        None

        +

        Methods

        -

        $().dropdown()

        -

        A programatic api for activating menus for a given navbar or tabbed navigation.

        -
        -
        - +

        $().dropdown('toggle')

        +

        A programmatic api for toggling menus for a given navbar or tabbed navigation.

        + - -
        -
        -

        ScrollSpy bootstrap-scrollspy.js

        -
        -
        -
        -

        The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

        - Download file -
        -
        -

        Example navbar with scrollspy

        -

        Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

        -
        +

        Events

        + + + + + + + + + + + + + +
        EventDescription
        activateThis event fires whenever a new item becomes activated by the scrollspy.
        + + + + + +
        +
        +

        Togglable tabs bootstrap-tab.js

        +
        - -
        -
        -

        Togglable tabs bootstrap-tab.js

        -
        -
        -
        -

        This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

        - Download file -
        -

        Example tabs

        -

        Click the tabs below to toggle between hidden panes, even via dropdown menus.

        - -
        -
        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -
        -
        -

        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

        -
        - - -
        -
        +}) + +
        - -
        -
        -

        Tooltips bootstrap-tooltip.js

        -
        -
        -
        -

        About Tooltips

        -

        Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.

        - Download file -
        -
        -

        Example use of Tooltips

        + +
        +
        +

        Tooltips bootstrap-tooltip.js

        +
        + + +

        Examples

        +

        Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

        Hover over the links below to see tooltips:

        -
        -

        Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. +

        +

        Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

        -
        -

        Using bootstrap-tooltip.js

        -

        Trigger the tooltip via javascript:

        - 
        $('#example').tooltip(options)
        -

        Options

        - - - + +

        Four directions

        +
        + +
        + + +
        + + +

        Usage

        +

        Trigger the tooltip via JavaScript:

        + 
        $('#example').tooltip(options)
        + +

        Options

        +

        Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

        +
        + + @@ -731,6 +809,12 @@

        Options

        + + + + + + @@ -753,14 +837,14 @@

        Options

        - + @@ -771,540 +855,602 @@

        Options

        Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes. +

        Markup

        For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

        -
        -<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
-
        + 
        <a href="#" rel="tooltip" title="first tooltip">hover over me</a>
        +

        Methods

        $().tooltip(options)

        Attaches a tooltip handler to an element collection.

        .tooltip('show')

        -

        Reveals an elements tooltip.

        +

        Reveals an element's tooltip.

        $('#element').tooltip('show')

        .tooltip('hide')

        -

        Hides an elements tooltip.

        +

        Hides an element's tooltip.

        $('#element').tooltip('hide')

        .tooltip('toggle')

        -

        Toggles an elements tooltip.

        +

        Toggles an element's tooltip.

        $('#element').tooltip('toggle')
        - - - +

        .tooltip('destroy')

        +

        Hides and destroys an element's tooltip.

        + 
        $('#element').tooltip('destroy')
        + - -
        -
        -

        Popovers bootstrap-popover.js

        -
        -
        -
        -

        About popovers

        -

        Add small overlays of content, like those on the iPad, to any element for housing secondary information.

        -

        * Requires Tooltip to be included

        - Download file + +
        +
        +

        Popovers bootstrap-popover.js

        -
        -

        Example hover popover

        -

        Hover over the button to trigger the popover.

        -
        - hover for popover + +

        Examples

        +

        Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.

        + +

        Static popover

        +

        Four options are available: top, right, bottom, and left aligned.

        +
        +
        +
        +

        Popover top

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        -
        -

        Using bootstrap-popover.js

        -

        Enable popovers via javascript:

        - 
        $('#example').popover(options)
        -

        Options

        -
        Name type default true apply a css fade transition to the tooltip
        htmlbooleanfalseInsert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
        placement string|function trigger string 'hover'how tooltip is triggered - hover | focus | manualhow tooltip is triggered - click | hover | focus | manual
        delay number | object 0 -

        delay showing and hiding the tooltip (ms)

        +

        delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

        If a number is supplied, delay is applied to both hide/show

        Object structure is: delay: { show: 500, hide: 100 }
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        Nametypedefaultdescription
        animationbooleantrueapply a css fade transition to the tooltip
        placementstring|function'right'how to position the popover - top | bottom | left | right
        selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
        triggerstring'hover'how tooltip is triggered - hover | focus | manual
        titlestring | function''default title value if `title` attribute isn't present
        contentstring | function''default content value if `data-content` attribute isn't present
        delaynumber | object0 -

        delay showing and hiding the popover (ms)

        -

        If a number is supplied, delay is applied to both hide/show

        -

        Object structure is: delay: { show: 500, hide: 100 }

        -
        -
        - Heads up! - Options for individual popovers can alternatively be specified through the use of data attributes. + +
        +
        +

        Popover right

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        -

        Markup

        -

        - For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. -

        -

        Methods

        -

        $().popover(options)

        -

        Initializes popovers for an element collection.

        -

        .popover('show')

        -

        Reveals an elements popover.

        - 
        $('#element').popover('show')
        -

        .popover('hide')

        -

        Hides an elements popover.

        - 
        $('#element').popover('hide')
        -

        .popover('toggle')

        -

        Toggles an elements popover.

        - 
        $('#element').popover('toggle')
        + +
        +
        +

        Popover bottom

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        +
        + +
        +
        +

        Popover left

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        +
        + +
        +
        +

        No markup shown as popovers are generated from JavaScript and content within a data attribute.

        + +

        Live demo

        +
        + Click to toggle popover
        -
        -
        +

        Four directions

        +
        + +
        - -
        -
        -

        Alert messages bootstrap-alert.js

        -
        -
        -
        -

        About alerts

        -

        The alert plugin is a tiny class for adding close functionality to alerts.

        - Download +
        + + +

        Usage

        +

        Enable popovers via JavaScript:

        + 
        $('#example').popover(options)
        + +

        Options

        +

        Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Nametypedefaultdescription
        animationbooleantrueapply a css fade transition to the tooltip
        htmlbooleanfalseInsert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
        placementstring|function'right'how to position the popover - top | bottom | left | right
        selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
        triggerstring'click'how popover is triggered - click | hover | focus | manual
        titlestring | function''default title value if `title` attribute isn't present
        contentstring | function''default content value if `data-content` attribute isn't present
        delaynumber | object0 +

        delay showing and hiding the popover (ms) - does not apply to manual trigger type

        +

        If a number is supplied, delay is applied to both hide/show

        +

        Object structure is: delay: { show: 500, hide: 100 }

        +
        +
        + Heads up! + Options for individual popovers can alternatively be specified through the use of data attributes.
        -
        -

        Example alerts

        -

        The alerts plugin works on regular alert messages, and block messages.

        + +

        Markup

        +

        For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

        + +

        Methods

        +

        $().popover(options)

        +

        Initializes popovers for an element collection.

        +

        .popover('show')

        +

        Reveals an elements popover.

        + 
        $('#element').popover('show')
        +

        .popover('hide')

        +

        Hides an elements popover.

        + 
        $('#element').popover('hide')
        +

        .popover('toggle')

        +

        Toggles an elements popover.

        + 
        $('#element').popover('toggle')
        +

        .popover('destroy')

        +

        Hides and destroys an element's popover.

        + 
        $('#element').popover('destroy')
        +
        + + + + +
        +
        +

        Alert messages bootstrap-alert.js

        +
        + + +

        Example alerts

        +

        Add dismiss functionality to all alert messages with this plugin.

        +
        - × + Holy guacamole! Best check yo self, you're not looking too good.
        +
        + +
        - × +

        Oh snap! You got an error!

        Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

        Take this action Or do this

        -
        -

        Using bootstrap-alert.js

        -

        Enable dismissal of an alert via javascript:

        - 
        $(".alert").alert()
        -

        Markup

        -

        Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

        - 
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        -

        Methods

        -

        $().alert()

        -

        Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

        -

        .alert('close')

        -

        Closes an alert.

        - 
        $(".alert").alert('close')
        -

        Events

        -

        Bootstrap's alert class exposes a few events for hooking into alert functionality.

        - - - - - - - - - - - - - - - - - -
        EventDescription
        closeThis event fires immediately when the close instance method is called.
        closedThis event is fired when the alert has been closed (will wait for css transitions to complete).
        +
        + + +
        + + +

        Usage

        +

        Enable dismissal of an alert via JavaScript:

        + 
        $(".alert").alert()
        + +

        Markup

        +

        Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

        + 
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        + +

        Methods

        +

        $().alert()

        +

        Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

        +

        .alert('close')

        +

        Closes an alert.

        + 
        $(".alert").alert('close')
        + + +

        Events

        +

        Bootstrap's alert class exposes a few events for hooking into alert functionality.

        + + + + + + + + + + + + + + + + + +
        EventDescription
        closeThis event fires immediately when the close instance method is called.
        closedThis event is fired when the alert has been closed (will wait for css transitions to complete).
         $('#my-alert').bind('closed', function () {
   // do something…
-})
        -
        -
        -
        +}) + + - -
        -
        -

        Buttons bootstrap-button.js

        -
        -
        -
        -

        About

        -

        Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

        - Download file -
        -
        -

        Example uses

        -

        Use the buttons plugin for states and toggles.

        - - - - - - - - - - - - - - - - - - - -
        Stateful - -
        Single toggle - -
        Checkbox -
        - - - -
        -
        Radio -
        - - - -
        -
        -
        -

        Using bootstrap-button.js

        -

        Enable buttons via javascript:

        - 
        $('.tabs').button()
        -

        Markup

        -

        Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

        -
        -<!-- Add data-toggle="button" to activate toggling on a single button -->
-<button class="btn" data-toggle="button">Single Toggle</button>
+          
+          
        
+            
        
+              
        Buttons bootstrap-button.js
        
+            
        
+
+            
        Example uses
        
+            
        Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
        
 
-<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
+            
        Stateful
        
+            
        Add data-loading-text="Loading..." to use a loading state on a button.
        
+            
        
+              
+            
        
+            
        <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
        
+
+            
        Single toggle
        
+            
        Add data-toggle="button" to activate toggling on a single button.
        
+            
        
+              
+            
        
+            
        <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
        
+
+            
        Checkbox
        
+            
        Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.
        
+            
        
+              
        
+                
+                
+                
+              
        
+            
        
+
         <div class="btn-group" data-toggle="buttons-checkbox">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
+  <button type="button" class="btn btn-primary">Left</button>
+  <button type="button" class="btn btn-primary">Middle</button>
+  <button type="button" class="btn btn-primary">Right</button>
 </div>
+
        
 
-<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
+            
        Radio
        
+            
        Add data-toggle="buttons-radio" for radio style toggling on btn-group.
        
+            
        
+              
        
+                
+                
+                
+              
        
+            
        
+
         <div class="btn-group" data-toggle="buttons-radio">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
+  <button type="button" class="btn btn-primary">Left</button>
+  <button type="button" class="btn btn-primary">Middle</button>
+  <button type="button" class="btn btn-primary">Right</button>
 </div>
 
        
-          
        Methods
        
-          
        $().button('toggle')
        
-          
        Toggles push state. Gives btn the look that it hass been activated.
        
-          
        
-            Heads up!
-            You can enable auto toggling of a button by using the data-toggle attribute.
-          
        
-          
        <button class="btn" data-toggle="button" >…</button>
        
-          
        $().button('loading')
        
-          
        Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.
-          
        
-          
        <button class="btn" data-loading-text="loading stuff..." >...</button>
        
-          
        
-            Heads up!
-            Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
-          
        
-          
        $().button('reset')
        
-          
        Resets button state - swaps text to original text.
        
-          
        $().button(string)
        
-          
        Resets button state - swaps text to any data defined text state.
        
-
        <button class="btn" data-complete-text="finished!" >...</button>
+
+
+            
        
+
+
+            
        Usage
        
+            
        Enable buttons via JavaScript:
        
+            
        $('.nav-tabs').button()
        
+
+            
        Markup
        
+            
        Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
        
+
+            
        Options
        
+            
        None
        
+
+            
        Methods
        
+            
        $().button('toggle')
        
+            
        Toggles push state. Gives the button the appearance that it has been activated.
        
+            
        
+              Heads up!
+              You can enable auto toggling of a button by using the data-toggle attribute.
+            
        
+            
        <button type="button" class="btn" data-toggle="button" >…</button>
        
+            
        $().button('loading')
        
+            
        Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.
+            
        
+            
        <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
        
+            
        
+              Heads up!
+              Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
+            
        
+            
        $().button('reset')
        
+            
        Resets button state - swaps text to original text.
        
+            
        $().button(string)
        
+            
        Resets button state - swaps text to any data defined text state.
        
+
        <button type="button" class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
-</script>
        
-
        -
        -
        +</script> + + - -
        -
        -

        Collapse bootstrap-collapse.js

        -
        -
        -
        -

        About

        -

        Get base styles and flexible support for collapsible components like accordions and navigation.

        - Download file -
        -
        -

        Example accordion

        -

        Using the collapse plugin, we built a simple accordion style widget:

        - -
        -
        -
        - - Collapsible Group Item #1 - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
        -
        + +
        +
        +

        Collapse bootstrap-collapse.js

        -
        -
        - - Collapsible Group Item #2 - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + +

        About

        +

        Get base styles and flexible support for collapsible components like accordions and navigation.

        +

        * Requires the Transitions plugin to be included.

        + +

        Example accordion

        +

        Using the collapse plugin, we built a simple accordion style widget:

        + +
        +
        +
        +
        + + Collapsible Group Item #1 + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        -
        -
        -
        -
        - - Collapsible Group Item #3 - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        + + Collapsible Group Item #2 + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        +
        +
        +
        + + Collapsible Group Item #3 + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        -
        - - -
        -

        Using bootstrap-collapse.js

        -

        Enable via javascript:

        - 
        $(".collapse").collapse()
        -

        Options

        - - - - - - - - - - - - - - - - - - - - - - - -
        Nametypedefaultdescription
        parentselectorfalseIf selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
        togglebooleantrueToggles the collapsible element on invocation
        -

        Markup

        -

        Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

        - 
        -<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+
        +<div class="accordion" id="accordion2">
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+        Collapsible Group Item #1
+      </a>
+    </div>
+    <div id="collapseOne" class="accordion-body collapse in">
+      <div class="accordion-inner">
+        Anim pariatur cliche...
+      </div>
+    </div>
+  </div>
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+        Collapsible Group Item #2
+      </a>
+    </div>
+    <div id="collapseTwo" class="accordion-body collapse">
+      <div class="accordion-inner">
+        Anim pariatur cliche...
+      </div>
+    </div>
+  </div>
+</div>
+...
+
        
+            
        You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
        
+
        +<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   simple collapsible
 </button>
 
-<div id="demo" class="collapse in"> … </div>
        
-          
        
-            Heads up!
-            To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.
-          
        
-          
        Methods
        
-          
        .collapse(options)
        
-          
        Activates your content as a collapsible element. Accepts an optional options object.
+<div id="demo" class="collapse in"> … </div>
+
        + + +
        + + +

        Usage

        + +

        Via data attributes

        +

        Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

        +

        To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

        + +

        Via JavaScript

        +

        Enable manually with:

        + 
        $(".collapse").collapse()
        + +

        Options

        +

        Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

        + + + + + + + + + + + + + + + + + + + + + + + +
        Nametypedefaultdescription
        parentselectorfalseIf selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
        togglebooleantrueToggles the collapsible element on invocation
        + + +

        Methods

        +

        .collapse(options)

        +

        Activates your content as a collapsible element. Accepts an optional options object. 

         $('#myCollapsible').collapse({
   toggle: false
-})
        -

        .collapse('toggle')

        -

        Toggles a collapsible element to shown or hidden.

        -

        .collapse('show')

        -

        Shows a collapsible element.

        -

        .collapse('hide')

        -

        Hides a collapsible element.

        -

        Events

        -

        - Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        EventDescription
        showThis event fires immediately when the show instance method is called.
        shownThis event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
        hide - This event is fired immediately when the hide method has been called. -
        hiddenThis event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
        - +}) + +

        .collapse('toggle')

        +

        Toggles a collapsible element to shown or hidden.

        +

        .collapse('show')

        +

        Shows a collapsible element.

        +

        .collapse('hide')

        +

        Hides a collapsible element.

        + +

        Events

        +

        Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

        + + + + + + + + + + + + + + + + + + + + + + + + + +
        EventDescription
        showThis event fires immediately when the show instance method is called.
        shownThis event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
        hide + This event is fired immediately when the hide method has been called. +
        hiddenThis event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
         $('#myCollapsible').on('hidden', function () {
   // do something…
 })
        -
        -
        -
        +
        - - +

        .carousel('cycle')

        +

        Cycles through the carousel items from left to right.

        +

        .carousel('pause')

        +

        Stops the carousel from cycling through items.

        +

        .carousel(number)

        +

        Cycles the carousel to a particular frame (0 based, similar to an array).

        +

        .carousel('prev')

        +

        Cycles to the previous item.

        +

        .carousel('next')

        +

        Cycles to the next item.

        + +

        Events

        +

        Bootstrap's carousel class exposes two events for hooking into carousel functionality.

        + + + + + + + + + + + + + + + + + +
        EventDescription
        slideThis event fires immediately when the slide instance method is invoked.
        slidThis event is fired when the carousel has completed its slide transition.
        + + + + + +
        +
        +

        Typeahead bootstrap-typeahead.js

        +
        +

        Example

        +

        A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

        +
        + +
        + 
        <input type="text" data-provide="typeahead">
        + + +
        + + +

        Usage

        + +

        Via data attributes

        +

        Add data attributes to register an element with typeahead functionality as shown in the example above.

        + +

        Via JavaScript

        +

        Call the typeahead manually with:

        + 
        $('.typeahead').typeahead()
        + +

        Options

        +

        Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Nametypedefaultdescription
        sourcearray, function[ ]The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
        itemsnumber8The max number of items to display in the dropdown.
        minLengthnumber1The minimum character length needed before triggering autocomplete suggestions
        matcherfunctioncase insensitiveThe method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
        sorterfunctionexact match,
        case sensitive,
        case insensitive        		Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
        updaterfunctionreturns selected itemThe method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
        highlighterfunctionhighlights all default matchesMethod used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.
        + +

        Methods

        +

        .typeahead(options)

        +

        Initializes an input with a typeahead.

        +
        + + + + +
        +
        +

        Affix bootstrap-affix.js

        +
        - -
        -
        -

        Typeahead bootstrap-typeahead.js

        -
        -
        -
        -

        About

        -

        A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

        - Download file -
        -
        -

        Example

        -

        Start typing in the field below to show the typeahead results.

        -
        - -
        -
        -

        Using bootstrap-typeahead.js

        -

        Call the typeahead via javascript:

        - 
        $('.typeahead').typeahead()
        +

        Example

        +

        The subnavigation on the left is a live demo of the affix plugin.

        + +
        + +

        Usage

        + +

        Via data attributes

        +

        To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

        + + 
        <div data-spy="affix" data-offset-top="200">...</div>
        + +
        + Heads up! + You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page. +
        + +

        Via JavaScript

        +

        Call the affix plugin via JavaScript:

        + 
        $('#navbar').affix()
        + +

        Methods

        +

        .affix('refresh')

        +

        When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

        +
        +$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
+

        Options

        +

        Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

        - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
        Nametypedefaulttypedefault description
        sourcearray[ ]The data source to query against.
        itemsnumber8The max number of items to display in the dropdown.
        matcherfunctioncase insensitiveThe method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
        sorterfunctionexact match,
        case sensitive,
        case insensitive        		Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
        highlighterfunctionhighlights all default matchesMethod used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).
        +
        + + -

        Markup

        -

        Add data attributes to register an element with typeahead functionality.

        -
        -<input type="text" data-provide="typeahead">
-
        -

        Methods

        -

        .typeahead(options)

        -

        Initializes an input with a typeahead.

        -
        - +
        - - +
        -
        + + + + @@ -1456,7 +1734,6 @@

        .typeahead(options)

        - @@ -1469,8 +1746,14 @@

        .typeahead(options)

        + + + + + + diff --git a/docs/less.html b/docs/less.html deleted file mode 100644 index 8e71721a..00000000 --- a/docs/less.html +++ /dev/null @@ -1,795 +0,0 @@ - - - - - Bootstrap, from Twitter - - - - - - - - - - - - - - - - - - - - - - - - -
        -
        -
        - - - - - - Bootstrap -
        - -
        -
        -
        -
        - -
        - - -
        -

        Using LESS with Bootstrap

        -

        Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

        -
        - -
        -
        - - - - -
        -
        -

        Built with LESS

        -
        -
        -
        -

        Why LESS?

        -

        Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

        -
        -
        -

        What's included?

        -

        As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

        -
        -
        -

        Learn more

        - LESS CSS -

        Visit the official website at http://lesscss.org to learn more.

        -
        -
        -
        -
        -

        Variables

        -

        Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

        -
        -
        -

        Mixins

        -

        Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

        -
        -
        -

        Operations

        -

        Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.

        -
        -
        -
        - - - - -
        -
        -

        Bootstrap variables LESS variables, their values, and usage guidelines

        -
        - -
        -
        -

        Hyperlinks

        - - - - - - - - - - - - - - - -
        @linkColor#08cDefault link text color
        @linkColorHoverdarken(@linkColor, 15%)Default link text hover color
        -

        Grid system

        - - - - - - - - - - - - - - - - - - - - - - - -
        @gridColumns12
        @gridColumnWidth60px
        @gridGutterWidth20px
        @fluidGridColumnWidth6.382978723%
        @fluidGridGutterWidth2.127659574%
        -

        Typography

        - - - - - - - - - - - - - - - -
        @baseFontSize13px
        @baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
        @baseLineHeight18px
        -
        -
        -

        Grayscale colors

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @black#000
        @grayDarker#222
        @grayDark#333
        @gray#555
        @grayLight#999
        @grayLighter#eee
        @white#fff
        -

        Accent colors

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @blue#049cdb
        @green#46a546
        @red#9d261d
        @yellow#ffc40d
        @orange#f89406
        @pink#c3325f
        @purple#7a43b6
        -
        -
        - -

        Components

        -
        -
        -

        Buttons

        - - - - - - - - -
        @primaryButtonBackground@linkColor
        -

        Forms

        - - - - - - - - -
        @placeholderText@grayLight
        -

        Navbar

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @navbarHeight40px
        @navbarBackground@grayDarker
        @navbarBackgroundHighlight@grayDark
        @navbarText@grayLight
        @navbarLinkColor@grayLight
        @navbarLinkColorHover@white
        -
        -
        -

        Form states and alerts

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @warningText#c09853
        @warningBackground#f3edd2
        @errorText#b94a48
        @errorBackground#f2dede
        @successText#468847
        @successBackground#dff0d8
        @infoText#3a87ad
        @infoBackground#d9edf7
        -
        -
        - -
        - - - - -
        -
        -

        Bootstrap mixins

        -
        -

        About mixins

        -
        -
        -

        Basic mixins

        -

        A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.

        -
        -.element {
-  .clearfix();
-}
-
        -
        -
        -

        Parametric mixins

        -

        A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.

        -
        -.element {
-  .border-radius(4px);
-}
-
        -
        -
        -

        Easily add your own

        -

        Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.

        -

        So, go ahead and use the existing ones or feel free to add your own as you need.

        -
        -
        -

        Included mixins

        -

        Utilities

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MixinParametersUsage
        .clearfix()noneAdd to any parent to clear floats within
        .tab-focus()noneApply the Webkit focus style and round Firefox outline
        .center-block()noneAuto center a block-level element using margin: auto
        .ie7-inline-block()noneUse in addition to regular display: inline-block to get IE7 support
        .size()@height: 5px, @width: 5pxQuickly set the height and width on one line
        .square()@size: 5pxBuilds on .size() to set the width and height as same value
        .opacity()@opacity: 100Set, in whole numbers, the opacity percentage (e.g., "50" or "75")
        -

        Forms

        - - - - - - - - - - - - - - - -
        MixinParametersUsage
        .placeholder()@color: @placeholderTextSet the placeholder text color for inputs
        -

        Typography

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MixinParametersUsage
        #font > #family > .serif()noneMake an element use a serif font stack
        #font > #family > .sans-serif()noneMake an element use a sans-serif font stack
        #font > #family > .monospace()noneMake an element use a monospace font stack
        #font > .shorthand()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightEasily set font size, weight, and leading
        #font > .serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to serif, and control size, weight, and leading
        #font > .sans-serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to sans-serif, and control size, weight, and leading
        #font > .monospace()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to monospace, and control size, weight, and leading
        -

        Grid system

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MixinParametersUsage
        .container-fixed()noneProvide a fixed-width (set with @siteWidth) container for holding your content
        .columns()@columns: 1Build a grid column that spans any number of columns (defaults to 1 column)
        .offset()@columns: 1Offset a grid column with left margin that spans any number of columns
        .gridColumn()noneMake an element float like a grid column
        -

        CSS3 properties

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MixinParametersUsage
        .border-radius()@radius: 5pxRound the corners of an element. Can be a single value or four space-separated values
        .box-shadow()@shadow: 0 1px 3px rgba(0,0,0,.25)Add a drop shadow to an element
        .transition()@transitionAdd CSS3 transition effect (e.g., all .2s linear)
        .rotate()@degreesRotate an element n degrees
        .scale()@ratioScale an element to n times its original size
        .translate()@x: 0, @y: 0Move an element on the x and y planes
        .background-clip()@clipCrop the background of an element (useful for border-radius)
        .background-size()@sizeControl the size of background images via CSS3
        .box-sizing()@boxmodelChange the box model for an element (e.g., border-box for a full-width input)
        .user-select()@selectControl cursor selection of text on a page
        .resizable()@direction: bothMake any element resizable on the right and bottom
        .content-columns()@columnCount, @columnGap: @gridColumnGutterMake the content of any element use CSS3 columns
        -

        Backgrounds and gradients

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MixinParametersUsage
        .#translucent > .background()@color: @white, @alpha: 1Give an element a translucent background color
        .#translucent > .border()@color: @white, @alpha: 1Give an element a translucent border color
        .#gradient > .vertical()@startColor, @endColorCreate a cross-browser vertical background gradient
        .#gradient > .horizontal()@startColor, @endColorCreate a cross-browser horizontal background gradient
        .#gradient > .directional()@startColor, @endColor, @degCreate a cross-browser directional background gradient
        .#gradient > .vertical-three-colors()@startColor, @midColor, @colorStop, @endColorCreate a cross-browser three-color background gradient
        .#gradient > .radial()@innerColor, @outerColorCreate a cross-browser radial background gradient
        .#gradient > .striped()@color, @angleCreate a cross-browser striped background gradient
        .#gradientBar()@primaryColor, @secondaryColorUsed for buttons to assign a gradient and slightly darker border
        -
        - - - - -
        -
        -

        Compiling Bootstrap with LESS

        -
        -
        - Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -
        -

        Tools for compiling

        -
        -
        -

        Node with makefile

        -

        Install the LESS command line compiler globally with npm by running the following command:

        - 
        $ npm install -g less
        -

        Once installed just run make from the root of your bootstrap directory and you're all set.

        -

        Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

        -
        -
        -

        Command line

        -

        Install the LESS command line tool via Node and run the following command:

        - 
        $ lessc ./lib/bootstrap.less > bootstrap.css
        -

        Be sure to include --compress in that command if you're trying to save some bytes!

        -
        -
        -

        Javascript

        -

        Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

        -
        -<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-
        -

        To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

        -
        -
        -
        -
        -

        Unofficial Mac app

        -

        The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

        -

        If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

        -
        -
        -

        More Mac apps

        -

        Crunch

        -

        Crunch is a great looking LESS editor and compiler built on Adobe Air.

        -

        CodeKit

        -

        Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

        -

        Simpless

        -

        Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

        -
        -
        -
        - - - - - -
        - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 7f53fadd..c934165f 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -2,13 +2,13 @@ - Bootstrap, from Twitter + Scaffolding · Bootstrap - + @@ -19,30 +19,34 @@ - - - - - + + + + + - + + - -
        +
        - + Bootstrap -
        +
        @@ -72,308 +69,295 @@
        -
        - - -
        -

        Scaffolding

        -

        Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

        -
        -
          -
        • Grid system
          • -
        • Fluid gird system
          • -
        • Customizing
          • -
        • Layouts
          • -
        • Responsive design
          • + +
          +
          +

          Scaffolding

          +

          Bootstrap is built on responsive 12-column grids, layouts, and components.

          +
          +
          + +
          + + +
          +
          + +
          +
          + + + + +
          +
          +

          Global settings

          +
          + +

          Requires HTML5 doctype

          +

          Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

          +
          +<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+
          + +

          Typography and links

          +

          Bootstrap sets basic global display, typography, and link styles. Specifically, we:

          +
            +
          • Remove margin on the body
            • +
          • Set background-color: white; on the body
            • +
          • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base
            • +
          • Set the global link color via @linkColor and apply link underlines only on :hover
          -
          -
        +

        These styles can be found within scaffolding.less.

        +

        Reset via Normalize

        +

        With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

        + - -
        -
        -

        Default grid system 12 columns with a responsive twist

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        -
        -
        -

        The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

        -

        It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

        -
        -
        + + + +
        +
        +

        Default grid system

        +
        + +

        Live grid example

        +

        The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        2
        +
        3
        +
        4
        +
        +
        +
        4
        +
        5
        +
        +
        +
        9
        +
        +
        + +

        Basic grid HTML

        +

        For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

         <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -
        -
        -

        As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.

        -
        -
        - -
        - -

        Offsetting columns

        -
        -
        4
        -
        4 offset 4
        -
        -
        -
        3 offset 3
        -
        3 offset 3
        -
        -
        -
        8 offset 4
        -
        +

        Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

        + +

        Offsetting columns

        +

        Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

        +
        +
        +
        4
        +
        3 offset 2
        +
        +
        +
        3 offset 1
        +
        3 offset 2
        +
        +
        +
        6 offset 3
        +
        + 
         <div class="row">
   <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
+  <div class="span3 offset2">...</div>
 </div>
        -
        - -

        Nesting columns

        -
        -
        -

        With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

        -

        Example

        -

        Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

        -
        -
        - Level 1 of column +

        Nesting columns

        +

        To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

        -
        - Level 2 -
        -
        - Level 2 +
        + Level 1 column +
        +
        + Level 2 +
        +
        + Level 2 +
        +
        -
        -
        -
        - 
         <div class="row">
-  <div class="span12">
-    Level 1 of column
+  <div class="span9">
+    Level 1 column
     <div class="row">
       <div class="span6">Level 2</div>
-      <div class="span6">Level 2</div>
+      <div class="span3">Level 2</div>
     </div>
   </div>
 </div>
        -
        -
        -
        + - -
        -
        -

        Fluid grid system 12 responsive, percent-based columns

        -
        + +
        +
        +

        Fluid grid system

        +
        -

        Fluid columns

        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        +

        Live fluid grid example

        +

        The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        4
        +
        4
        +
        4
        +
        +
        +
        4
        +
        8
        +
        +
        +
        6
        +
        6
        +
        +
        +
        12
        +
        +
        -
        -
        -

        Percents, not pixels

        -

        The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

        -
        -
        -

        Fluid rows

        -

        Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

        -
        -
        -

        Markup

        +

        Basic fluid grid HTML

        +

        Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

         <div class="row-fluid">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -
        -
        - -

        Fluid nesting

        -
        -
        -

        Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

        -
        -
        - Fluid 12 + +

        Fluid offsetting

        +

        Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

        +
        +
        +
        4
        +
        4 offset 4
        +
        +
        +
        3 offset 3
        +
        3 offset 3
        +
        +
        +
        6 offset 6
        +
        +
        +
        +<div class="row-fluid">
+  <div class="span4">...</div>
+  <div class="span4 offset2">...</div>
+</div>
+
        + +

        Fluid nesting

        +

        Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

        -
        - Fluid 6 -
        -
        - Fluid 6 +
        + Fluid 12 +
        +
        + Fluid 6 +
        +
        + Fluid 6 +
        +
        + Fluid 6 +
        +
        +
        +
        + Fluid 6 +
        +
        -
        -
        -
        - 
         <div class="row-fluid">
   <div class="span12">
-    Level 1 of column
+    Fluid 12
     <div class="row-fluid">
-      <div class="span6">Level 2</div>
-      <div class="span6">Level 2</div>
+      <div class="span6">
+        Fluid 6
+        <div class="row-fluid">
+          <div class="span6">Fluid 6</div>
+          <div class="span6">Fluid 6</div>
+        </div>
+      </div>
+      <div class="span6">Fluid 6</div>
     </div>
   </div>
 </div>
        -
        -
        -
        - - - - -
        -
        -

        Grid customization

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        VariableDefault valueDescription
        @gridColumns12Number of columns
        @gridColumnWidth60pxWidth of each column
        @gridGutterWidth20pxNegative space between columns
        @siteWidthComputed sum of all columns and guttersCounts number of columns and gutters to set width of the .container-fixed() mixin
        -
        -
        -

        Variables in LESS

        -

        Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

        -
        -
        -

        How to customize

        -

        Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

        -
        -
        -

        Staying responsive

        -

        Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

        -
        -
        +
        -
        - -
        -
        -

        Layouts Basic templates to create webpages

        -
        + +
        +
        +

        Layouts

        +
        -
        -
        -

        Fixed layout

        -

        The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

        -
        -
        -
        +

        Fixed layout

        +

        Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

        +
        +
        + 
         <body>
   <div class="container">
@@ -381,14 +365,13 @@ 
        Fixed layout
        
   </div>
 </body>
        -
        -
        -

        Fluid layout

        -

        <div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

        -
        -
        -
        -
        + +

        Fluid layout

        +

        Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

        +
        +
        +
        + 
         <div class="container-fluid">
   <div class="row-fluid">
@@ -401,125 +384,191 @@ 
        Fluid layout
        
   </div>
 </div>
        -
        -
        -
        +
        - -
        -
        -

        Responsive design Media queries for various devices and resolutions

        -
        - -
        -
        - Responsive devices -
        -
        -

        Supported devices

        -

        Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        LabelLayout widthColumn widthGutter width
        Smartphones480px and belowFluid columns, no fixed widths
        Portrait tablets480px to 768pxFluid columns, no fixed widths
        Landscape tablets768px to 979px42px20px
        Default980px and up60px20px
        Large display1210px and up70px30px
        - -

        Requires meta tag

        -

        To ensure devices display responsive pages properly, include the viewport meta tag.

        - 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        - -

        What they do

        -

        Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

        -
          -
        • Modify the width of column in our grid
          • -
        • Stack elements instead of float wherever necessary
          • -
        • Resize headings and text to be more appropriate for devices
          • -
        -
        -
        + +
        +
        +

        Responsive design

        +
        -
        - - -

        Using the media queries

        -
        -
        -

        Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

        -
          -
        1. Use the compiled responsive version, bootstrap-responsive.css
          2. -
        2. Add @import "responsive.less" and recompile Bootstrap
          3. -
        3. Modify and recompile responsive.less as a separate file
          4. -
        -

        Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

        -
        -
        +

        Enabling responsive features

        +

        Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

        +
        +<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+
        +

        Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

        + +

        About responsive Bootstrap

        + Responsive devices +

        Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

        +
          +
        • Modify the width of column in our grid
          • +
        • Stack elements instead of float wherever necessary
          • +
        • Resize headings and text to be more appropriate for devices
          • +
        +

        Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

        + +

        Supported devices

        +

        Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        LabelLayout widthColumn widthGutter width
        Large display1200px and up70px30px
        Default980px and up60px20px
        Portrait tablets768px and above42px20px
        Phones to tablets767px and belowFluid columns, no fixed widths
        Phones480px and belowFluid columns, no fixed widths
        -  // Landscape phones and down
-  @media (max-width: 480px) { ... }
+/* Large desktop */
+@media (min-width: 1200px) { ... }
 
-  // Landscape phone to portrait tablet
-  @media (max-width: 768px) { ... }
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) { ... }
 
-  // Portrait tablet to landscape and desktop
-  @media (min-width: 768px) and (max-width: 980px) { ... }
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) { ... }
 
-  // Large desktop
-  @media (min-width: 1200px) { .. }
+/* Landscape phones and down */
+@media (max-width: 480px) { ... }
        + + +

        Responsive utility classes

        +

        For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
        .visible-phoneVisible
        .visible-tabletVisible
        .visible-desktopVisible
        .hidden-phoneVisibleVisible
        .hidden-tabletVisibleVisible
        .hidden-desktopVisibleVisible
        + +

        When to use

        +

        Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

        + +

        Responsive utilities test case

        +

        Resize your browser or load on different devices to test the above classes.

        +

        Visible on...

        +

        Green checkmarks indicate that class is visible in your current viewport.

        +
          +
        • Phone✔ Phone
          • +
        • Tablet✔ Tablet
          • +
        • Desktop✔ Desktop
          • +
        +

        Hidden on...

        +

        Here, green checkmarks indicate that class is hidden in your current viewport.

        +
          +
        • Phone✔ Phone
          • +
        • Tablet✔ Tablet
          • +
        • Desktop✔ Desktop
          • +
        + +
        + + + +
        +
        - - - -
        + + @@ -528,7 +577,6 @@

        Using the media queries

        - @@ -541,8 +589,14 @@

        Using the media queries

        + + + + + + diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 832983e1..b3f36e99 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -2,7 +2,7 @@ - Bootstrap, from Twitter + {{title}} @@ -19,30 +19,46 @@ - - - - - + + + + + - + {{#production}} + + {{/production}} + + - -
        +
        - + Bootstrap -
        +
        @@ -72,21 +81,26 @@
        -
        - {{>body}} - - -
        + + @@ -95,7 +109,6 @@ - @@ -108,8 +121,14 @@ + + + + + + {{#production}} diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 84d48fb1..6136d009 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1,1051 +1,1379 @@ -
        -

        {{_i}}Base CSS{{/i}}

        -

        {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}

        -
        - +
        +

        {{_i}}Base CSS{{/i}}

        +

        {{_i}}Fundamental HTML elements styled and enhanced with extensible classes.{{/i}}

        - -
        -
        -

        {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

        -
        +
        -

        {{_i}}Headings & body copy{{/i}}

        - - -
        -
        -

        {{_i}}Typographic scale{{/i}}

        -

        {{_i}}The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.{{/i}}

        -

        {{_i}}We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.{{/i}}

        -
        -
        -

        {{_i}}Example body text{{/i}}

        -

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

        -
        -
        -
        -

        h1. {{_i}}Heading 1{{/i}}

        -

        h2. {{_i}}Heading 2{{/i}}

        -

        h3. {{_i}}Heading 3{{/i}}

        -

        h4. {{_i}}Heading 4{{/i}}

        -
        h5. {{_i}}Heading 5{{/i}}
        -
        h6. {{_i}}Heading 6{{/i}}
        + +
        +
        +
        -
        -
        +
        + + + + +
        +
        +

        {{_i}}Typography{{/i}}

        +
        + + {{! Headings }} +

        {{_i}}Headings{{/i}}

        +

        {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

        +
        +

        h1. {{_i}}Heading 1{{/i}}

        +

        h2. {{_i}}Heading 2{{/i}}

        +

        h3. {{_i}}Heading 3{{/i}}

        +

        h4. {{_i}}Heading 4{{/i}}

        +
        h5. {{_i}}Heading 5{{/i}}
        +
        h6. {{_i}}Heading 6{{/i}}
        +
        + + {{! Body copy }} +

        {{_i}}Body copy{{/i}}

        +

        {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).{{/i}}

        +
        +

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

        +

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        +

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        +
        + 
        <p>...</p>
        + + {{! Body copy .lead }} +

        {{_i}}Lead body copy{{/i}}

        +

        {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

        +
        +

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        +
        + 
        <p class="lead">...</p>
        + + {{! Using LESS }} +

        {{_i}}Built with Less{{/i}}

        +

        {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

        - -

        {{_i}}Emphasis, address, and abbreviation{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Element{{/i}}{{_i}}Usage{{/i}}{{_i}}Optional{{/i}}
        - <strong> - - {{_i}}For emphasizing a snippet of text with important{{/i}} - - {{_i}}None{{/i}} -
        - <em> - - {{_i}}For emphasizing a snippet of text with stress{{/i}} - - {{_i}}None{{/i}} -
        - <abbr> - - {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}} - - {{_i}}Include optional title for expanded text{{/i}} -
        - <address> - - {{_i}}For contact information for its nearest ancestor or the entire body of work{{/i}} - - {{_i}}Preserve formatting by ending all lines with <br>{{/i}} -
        - -
        -
        -

        {{_i}}Using emphasis{{/i}}

        -

        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

        -

        {{_i}}Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

        -
        -
        -

        {{_i}}Example addresses{{/i}}

        -

        {{_i}}Here are two examples of how the <address> tag can be used:{{/i}}

        -
        - Twitter, Inc.
        - 795 Folsom Ave, Suite 600
        - San Francisco, CA 94107
        - P: (123) 456-7890 -
        -
        - {{_i}}Full Name{{/i}}
        - {{_i}}first.last@gmail.com{{/i}} -
        -
        -
        -

        {{_i}}Example abbreviations{{/i}}

        -

        {{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}

        -

        {{_i}}HTML is the best thing since sliced bread.{{/i}}

        -

        {{_i}}An abbreviation of the word attribute is attr.{{/i}}

        -
        -
        +
        - -

        {{_i}}Blockquotes{{/i}}

        - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Element{{/i}}{{_i}}Usage{{/i}}{{_i}}Optional{{/i}}
        - <blockquote> - - {{_i}}Block-level element for quoting content from another source{{/i}} - -

        {{_i}}Add cite attribute for source URL{{/i}}

        - {{_i}}Use .pull-left and .pull-right classes for floated options{{/i}} -
        - <small> - - {{_i}}Optional element for adding a user-facing citation, typically an author with title of work{{/i}} - - {{_i}}Place the <cite> around the title or name of source{{/i}} -
        -
        -
        -

        {{_i}}To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

        -

        {{_i}}Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.{{/i}}

        -
        -
        + + {{! Emphasis }} +

        {{_i}}Emphasis{{/i}}

        +

        {{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}

        + +

        <small>

        +

        {{_i}}For de-emphasizing inline or blocks of text, use the small tag.{{/i}}

        +
        +

        This line of text is meant to be treated as fine print.

        +
        +
        +<p>
+  <small>This line of text is meant to be treated as fine print.</small>
+</p>
+
        + +

        {{_i}}Bold{{/i}}

        +

        {{_i}}For emphasizing a snippet of text with a heavier font-weight.{{/i}}

        +
        +

        The following snippet of text is rendered as bold text.

        +
        + 
        <strong>rendered as bold text</strong>
        + +

        {{_i}}Italics{{/i}}

        +

        {{_i}}For emphasizing a snippet of text with italics.{{/i}}

        +
        +

        The following snippet of text is rendered as italicized text.

        +
        + 
        <em>rendered as italicized text</em>
        + +

        {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

        + +

        {{_i}}Emphasis classes{{/i}}

        +

        {{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}

        +
        +

        Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

        +

        Etiam porta sem malesuada magna mollis euismod.

        +

        Donec ullamcorper nulla non metus auctor fringilla.

        +

        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

        +

        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

        +
        +
        +<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
+<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
        + + +
        + + + {{! Abbreviations }} +

        {{_i}}Abbreviations{{/i}}

        +

        {{_i}}Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

        + +

        <abbr>

        +

        {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

        +
        +

        {{_i}}An abbreviation of the word attribute is attr.{{/i}}

        +
        + 
        <abbr title="attribute">attr</abbr>
        + +

        <abbr class="initialism">

        +

        {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

        +
        +

        {{_i}}HTML is the best thing since sliced bread.{{/i}}

        +
        + 
        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
        + + +
        + + + {{! Addresses }} +

        {{_i}}Addresses{{/i}}

        +

        {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

        + +

        <address>

        +

        {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

        +
        +
        + Twitter, Inc.
        + 795 Folsom Ave, Suite 600
        + San Francisco, CA 94107
        + P: (123) 456-7890 +
        +
        + {{_i}}Full Name{{/i}}
        + {{_i}}first.last@example.com{{/i}} +
        +
        +
        +<address>
+  <strong>Twitter, Inc.</strong><br>
+  795 Folsom Ave, Suite 600<br>
+  San Francisco, CA 94107<br>
+  <abbr title="Phone">P:</abbr> (123) 456-7890
+</address>
+
+<address>
+  <strong>{{_i}}Full Name{{/i}}</strong><br>
+  <a href="mailto:#">{{_i}}first.last@example.com{{/i}}</a>
+</address>
+
        + + +
        + + + {{! Blockquotes }} +

        {{_i}}Blockquotes{{/i}}

        +

        {{_i}}For quoting blocks of content from another source within your document.{{/i}}

        + +

        {{_i}}Default blockquote{{/i}}

        +

        {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        +
        + 
         <blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
-  <small>{{_i}}Someone famous{{/i}}</small>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
        -
        -
        - -

        {{_i}}Example blockquotes{{/i}}

        -
        -
        -

        {{_i}}Default blockquotes are styled as such:{{/i}}

        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

        - {{_i}}Someone famous in Body of work{{/i}} -
        -
        -
        -

        {{_i}}To float your blockquote to the right, add class="pull-right":{{/i}}

        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

        - {{_i}}Someone famous in Body of work{{/i}} -
        -
        -
        +

        {{_i}}Blockquote options{{/i}}

        +

        {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

        - -

        {{_i}}Lists{{/i}}

        -
        -
        -

        {{_i}}Unordered{{/i}}

        -

        <ul>

        -
          -
        • Lorem ipsum dolor sit amet
          • -
        • Consectetur adipiscing elit
          • -
        • Integer molestie lorem at massa
          • -
        • Facilisis in pretium nisl aliquet
          • -
        • Nulla volutpat aliquam velit -
            -
          • Phasellus iaculis neque
            • -
          • Purus sodales ultricies
            • -
          • Vestibulum laoreet porttitor sem
            • -
          • Ac tristique libero volutpat at
            • +

            {{_i}}Naming a source{{/i}}

            +

            {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

            +
            +
            +

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

            + {{_i}}Someone famous in Source Title{{/i}} +
            +
            +
            +<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <small>{{_i}}Someone famous <cite title="Source Title">Source Title</cite>{{/i}}</small>
+</blockquote>
+
            + +

            {{_i}}Alternate displays{{/i}}

            +

            {{_i}}Use .pull-right for a floated, right-aligned blockquote.{{/i}}

            +
            +
            +

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

            + {{_i}}Someone famous in Source Title{{/i}} +
            +
            +
            +<blockquote class="pull-right">
+  ...
+</blockquote>
+
            + + +
            + + + +

            {{_i}}Lists{{/i}}

            + +

            {{_i}}Unordered{{/i}}

            +

            {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

            +
            +
              +
            • Lorem ipsum dolor sit amet
              • +
            • Consectetur adipiscing elit
              • +
            • Integer molestie lorem at massa
              • +
            • Facilisis in pretium nisl aliquet
              • +
            • Nulla volutpat aliquam velit +
                +
              • Phasellus iaculis neque
                • +
              • Purus sodales ultricies
                • +
              • Vestibulum laoreet porttitor sem
                • +
              • Ac tristique libero volutpat at
                • +
              +
              • +
            • Faucibus porta lacus fringilla vel
              • +
            • Aenean sit amet erat nunc
              • +
            • Eget porttitor lorem
              • +
            +
            +
            +<ul>
+  <li>...</li>
+</ul>
+
            + +

            {{_i}}Ordered{{/i}}

            +

            {{_i}}A list of items in which the order does explicitly matter.{{/i}}

            +
            +
              +
            1. Lorem ipsum dolor sit amet
              2. +
            2. Consectetur adipiscing elit
              3. +
            3. Integer molestie lorem at massa
              4. +
            4. Facilisis in pretium nisl aliquet
              5. +
            5. Nulla volutpat aliquam velit
              6. +
            6. Faucibus porta lacus fringilla vel
              7. +
            7. Aenean sit amet erat nunc
              8. +
            8. Eget porttitor lorem
              9. +
            +
            +
            +<ol>
+  <li>...</li>
+</ol>
+
            + +

            {{_i}}Unstyled{{/i}}

            +

            {{_i}}Remove the default list-style and left padding on list items (immediate children only).{{/i}}

            +
            +
              +
            • Lorem ipsum dolor sit amet
              • +
            • Consectetur adipiscing elit
              • +
            • Integer molestie lorem at massa
              • +
            • Facilisis in pretium nisl aliquet
              • +
            • Nulla volutpat aliquam velit +
                +
              • Phasellus iaculis neque
                • +
              • Purus sodales ultricies
                • +
              • Vestibulum laoreet porttitor sem
                • +
              • Ac tristique libero volutpat at
                • +
              +
              • +
            • Faucibus porta lacus fringilla vel
              • +
            • Aenean sit amet erat nunc
              • +
            • Eget porttitor lorem
            - -
          • Faucibus porta lacus fringilla vel
            • -
          • Aenean sit amet erat nunc
            • -
          • Eget porttitor lorem
            • -
          -
        -
        -

        {{_i}}Unstyled{{/i}}

        -

        <ul class="unstyled">

        -
          -
        • Lorem ipsum dolor sit amet
          • -
        • Consectetur adipiscing elit
          • -
        • Integer molestie lorem at massa
          • -
        • Facilisis in pretium nisl aliquet
          • -
        • Nulla volutpat aliquam velit -
            -
          • Phasellus iaculis neque
            • -
          • Purus sodales ultricies
            • -
          • Vestibulum laoreet porttitor sem
            • -
          • Ac tristique libero volutpat at
            • +
        +
        +<ul class="unstyled">
+  <li>...</li>
+</ul>
+
        + +

        {{_i}}Inline{{/i}}

        +

        {{_i}}Place all list items on a single line with inline-block and some light padding.{{/i}}

        +
        +
          +
        • Lorem ipsum
          • +
        • Phasellus iaculis
          • +
        • Nulla volutpat
        - -
      • Faucibus porta lacus fringilla vel
        • -
      • Aenean sit amet erat nunc
        • -
      • Eget porttitor lorem
        • - -
        -
        -

        {{_i}}Ordered{{/i}}

        -

        <ol>

        -
          -
        1. Lorem ipsum dolor sit amet
          2. -
        2. Consectetur adipiscing elit
          3. -
        3. Integer molestie lorem at massa
          4. -
        4. Facilisis in pretium nisl aliquet
          5. -
        5. Nulla volutpat aliquam velit
          6. -
        6. Faucibus porta lacus fringilla vel
          7. -
        7. Aenean sit amet erat nunc
          8. -
        8. Eget porttitor lorem
          9. -
        -
        -
        -

        {{_i}}Description{{/i}}

        -

        <dl>

        -
        -
        {{_i}}Description lists{{/i}}
        -
        {{_i}}A description list is perfect for defining terms.{{/i}}
        -
        Euismod
        -
        Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        -
        Donec id elit non mi porta gravida at eget metus.
        -
        Malesuada porta
        -
        Etiam porta sem malesuada magna mollis euismod.
        -
        -
        -
        -
        - - - - -
        -
        -

        {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

        -
        -
        -
        -

        Inline

        -

        Wrap inline snippets of code with <code>.

        + 
        -{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
+<ul class="inline">
+  <li>...</li>
+</ul>
        -
        -
        -

        Basic block

        -

        {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

        -
        -<p>{{_i}}Sample text here...{{/i}}</p>
+
+        
        {{_i}}Description{{/i}}
        
+        
        {{_i}}A list of terms with their associated descriptions.{{/i}}
        
+        
        
+          
        
+            
        {{_i}}Description lists{{/i}}
        
+            
        {{_i}}A description list is perfect for defining terms.{{/i}}
        
+            
        Euismod
        
+            
        Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        
+            
        Donec id elit non mi porta gravida at eget metus.
        
+            
        Malesuada porta
        
+            
        Etiam porta sem malesuada magna mollis euismod.
        
+          
        
+        
        
+
        +<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
 
        
-
        -<pre>
-  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
-</pre>
+
+        
        {{_i}}Horizontal description{{/i}}
        
+        
        {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}
        
+        
        
+          
        
+            
        {{_i}}Description lists{{/i}}
        
+            
        {{_i}}A description list is perfect for defining terms.{{/i}}
        
+            
        Euismod
        
+            
        Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        
+            
        Donec id elit non mi porta gravida at eget metus.
        
+            
        Malesuada porta
        
+            
        Etiam porta sem malesuada magna mollis euismod.
        
+            
        Felis euismod semper eget lacinia
        
+            
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        
+          
        
+        
        
+
        +<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
 
        
-      
        {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}
        
-      
        {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}
        
-
        -
        -

        Google Prettify

        -

        Take the same <pre> element and add two optional classes for enhanced rendering.

        -
        -<p>{{_i}}Sample text here...{{/i}}</p>
+        
        
+          {{_i}}Heads up!{{/i}}
+          {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}}
+        
        
+
        + + + + +
        +
        +

        {{_i}}Code{{/i}}

        +
        + +

        Inline

        +

        Wrap inline snippets of code with <code>.

        +
        + For example, <section> should be wrapped as inline. +
        +
        +{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}}
        + +

        Basic block

        +

        {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

        +
        + 
        <p>{{_i}}Sample text here...{{/i}}</p>
        +
        -<pre class="prettyprint
-     linenums">
+<pre>
   &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
 </pre>
        -

        {{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}

        -
        -
        -
        +

        {{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

        +

        {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

        + - -
        -
        -

        {{_i}}Tables For, you guessed it, tabular data{{/i}}

        -
        + +
        +
        +

        {{_i}}Tables{{/i}}

        +
        -

        {{_i}}Table markup{{/i}}

        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
        - <table> - - {{_i}}Wrapping element for displaying data in a tabular format{{/i}} -
        - <thead> - - {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} -
        - <tbody> - - {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} -
        - <tr> - - {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} -
        - <td> - - {{_i}}Default table cell{{/i}} -
        - <th> - - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
        - {{_i}}Must be used within a <thead>{{/i}} -
        - <caption> - - {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} -
        -
        -
        +

        {{_i}}Default styles{{/i}}

        +

        {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
        1MarkOtto@mdo
        2JacobThornton@fat
        3Larrythe Bird@twitter
        +
        {{! /example }} 
        -<table>
-  <thead>
-    <tr>
-      <th>…</th>
-      <th>…</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>…</td>
-      <td>…</td>
-    </tr>
-  </tbody>
+<table class="table">
+  …
 </table>
        -
        -
        -

        {{_i}}Table options{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
        {{_i}}Default{{/i}}{{_i}}None{{/i}}{{_i}}No styles, just columns and rows{{/i}}
        {{_i}}Basic{{/i}} - .table - {{_i}}Only horizontal lines between rows{{/i}}
        {{_i}}Bordered{{/i}} - .table-bordered - {{_i}}Rounds corners and adds outer border{{/i}}
        {{_i}}Zebra-stripe{{/i}} - .table-striped - {{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}
        {{_i}}Condensed{{/i}} - .table-condensed - {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}}
        - - -

        {{_i}}Example tables{{/i}}

        - -

        1. {{_i}}Default table styles{{/i}}

        -
        -
        -

        {{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}

        -
        -<table class="table">
-  …
-</table>
        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Language{{/i}}
        1MarkOttoCSS
        2JacobThorntonJavascript
        3StuDentHTML
        -
        -
        +
        + + +

        {{_i}}Optional classes{{/i}}

        +

        {{_i}}Add any of the following classes to the .table base class.{{/i}}

        -

        2. {{_i}}Striped table{{/i}}

        -
        -
        -

        {{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}

        -

        {{_i}}Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}

        +

        {{_i}}.table-striped{{/i}}

        +

        {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
        1MarkOtto@mdo
        2JacobThornton@fat
        3Larrythe Bird@twitter
        +
        {{! /example }} 
         <table class="table table-striped">
   …
-</table>
        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Language{{/i}}
        1MarkOttoCSS
        2JacobThorntonJavascript
        3StuDentHTML
        -
        -
        - +</table> + -

        3. {{_i}}Bordered table{{/i}}

        -
        -
        -

        {{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}

        +

        {{_i}}.table-bordered{{/i}}

        +

        {{_i}}Add borders and rounded corners to the table.{{/i}}

        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
        1MarkOtto@mdo
        MarkOtto@TwBootstrap
        2JacobThornton@fat
        3Larry the Bird@twitter
        +
        {{! /example }} 
         <table class="table table-bordered">
   …
-</table>
        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Language{{/i}}
        1Mark OttoCSS
        2JacobThorntonJavascript
        3StuDent
        3BrosefStalinHTML
        -
        -
        +</table> + +

        {{_i}}.table-hover{{/i}}

        +

        {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
        1MarkOtto@mdo
        2JacobThornton@fat
        3Larry the Bird@twitter
        +
        {{! /example }} +
        +<table class="table table-hover">
+  …
+</table>
+
        -

        4. {{_i}}Condensed table{{/i}}

        -
        -
        -

        {{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}

        +

        {{_i}}.table-condensed{{/i}}

        +

        {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
        1MarkOtto@mdo
        2JacobThornton@fat
        3Larry the Bird@twitter
        +
        {{! /example }} 
         <table class="table table-condensed">
   …
-</table>
        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Language{{/i}}
        1MarkOttoCSS
        2JacobThorntonJavascript
        3StuDentHTML
        -
        -
        +</table> + +
        -

        5. {{_i}}Combine them all!{{/i}}

        -
        -
        -

        {{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}

        -
        -<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
        -
        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Language{{/i}}
        1MarkOttoCSS
        2JacobThorntonJavascript
        3StuDentHTML
        4BrosefStalinHTML
        -
        -
        -
        +

        {{_i}}Optional row classes{{/i}}

        +

        {{_i}}Use contextual classes to color table rows.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Class{{/i}}{{_i}}Description{{/i}}
        + .success + {{_i}}Indicates a successful or positive action.{{/i}}
        + .error + {{_i}}Indicates a dangerous or potentially negative action.{{/i}}
        + .warning + {{_i}}Indicates a warning that might need attention.{{/i}}
        + .info + {{_i}}Used as an alternative to the default styles.{{/i}}
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        #{{_i}}Product{{/i}}{{_i}}Payment Taken{{/i}}{{_i}}Status{{/i}}
        1TB - Monthly01/04/2012Approved
        2TB - Monthly02/04/2012Declined
        3TB - Monthly03/04/2012Pending
        4TB - Monthly04/04/2012Call in to confirm
        +
        {{! /example }} +
        +...
+  <tr class="success">
+    <td>1</td>
+    <td>TB - Monthly</td>
+    <td>01/04/2012</td>
+    <td>Approved</td>
+  </tr>
+...
+
        - -
        -
        -

        {{_i}}Forms{{/i}}

        -
        -
        -
        -

        {{_i}}Flexible HTML and CSS{{/i}}

        -

        {{_i}}The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.{{/i}}

        -

        {{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}

        -
        -
        -

        {{_i}}Four layouts included{{/i}}

        -

        {{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}

        -
          -
        • {{_i}}Vertical (default){{/i}}
          • -
        • {{_i}}Search{{/i}}
          • -
        • {{_i}}Inline{{/i}}
          • -
        • {{_i}}Horizontal{{/i}}
          • -
        -

        {{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}

        -
        -
        -

        {{_i}}Control states and more{{/i}}

        -

        {{_i}}Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}

        -

        {{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}

        -
        -
        +
        -

        {{_i}}Four types of forms{{/i}}

        -

        {{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
        {{_i}}Vertical (default){{/i}}.form-vertical ({{_i}}not required{{/i}}){{_i}}Stacked, left-aligned labels over controls{{/i}}
        {{_i}}Inline{{/i}}.form-inline{{_i}}Left-aligned label and inline-block controls for compact style{{/i}}
        {{_i}}Search{{/i}}.form-search{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}
        {{_i}}Horizontal{{/i}}.form-horizontal{{_i}}Float left, right-aligned labels on same line as controls{{/i}}
        - - -

        {{_i}}Example forms using just form controls, no extra markup{{/i}}

        -
        -
        -

        {{_i}}Basic form{{/i}}

        -

        {{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}

        -
        -
        -
        - - Associated help text! - - -
        + +

        {{_i}}Supported table markup{{/i}}

        +

        {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
        + <table> + + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} +
        + <thead> + + {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} +
        + <tbody> + + {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} +
        + <tr> + + {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} +
        + <td> + + {{_i}}Default table cell{{/i}} +
        + <th> + + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
        + {{_i}}Must be used within a <thead>{{/i}} +
        + <caption> + + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} + 
        -<form class="well">
-  <label>{{_i}}Label name{{/i}}</label>
-  <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
-  <span class="help-inline">Associated help text!</span>
-  <label class="checkbox">
-    <input type="checkbox"> {{_i}}Check me out{{/i}}
-  </label>
-  <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
+<table>
+  <caption>...</caption>
+  <thead>
+    <tr>
+      <th>...</th>
+      <th>...</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>
+
        + +
        + + + + +
        +
        +

        {{_i}}Forms{{/i}}

        +
        + +

        {{_i}}Default styles{{/i}}

        +

        {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

        +
        +
        + Legend + + + {{_i}}Example block-level help text here.{{/i}} + + +
        +
        {{! /example }} +
        +<form>
+  <fieldset>
+    <legend>{{_i}}Legend{{/i}}</legend>
+    <label>{{_i}}Label name{{/i}}</label>
+    <input type="text" placeholder="{{_i}}Type something…{{/i}}">
+    <span class="help-block">Example block-level help text here.</span>
+    <label class="checkbox">
+      <input type="checkbox"> {{_i}}Check me out{{/i}}
+    </label>
+    <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
+  </fieldset>
 </form>
        -
        -
        -
        -
        -

        {{_i}}Search form{{/i}}

        -

        {{_i}}Reflecting default WebKit styles, just add .form-search for extra rounded search fields.{{/i}}

        -
        -
        -
        - - -
        + + +
        + + +

        {{_i}}Optional layouts{{/i}}

        +

        {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

        + +

        {{_i}}Search form{{/i}}

        +

        {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

        +
        + + +
        {{! /example }} 
        -<form class="well form-search">
+<form class="form-search">
   <input type="text" class="input-medium search-query">
   <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 </form>
        -
        -
        -
        -
        -

        {{_i}}Inline form{{/i}}

        -

        {{_i}}Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.{{/i}}

        -
        -
        -
        - - - - -
        + +

        {{_i}}Inline form{{/i}}

        +

        {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

        +
        + + + + +
        {{! /example }} 
        -<form class="well form-inline">
+<form class="form-inline">
   <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
   <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
-  <button type="submit" class="btn">{{_i}}Go{{/i}}</button>
+  <label class="checkbox">
+    <input type="checkbox"> {{_i}}Remember me{{/i}}
+  </label>
+  <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
 </form>
        -
        -
        - -
        -

        {{_i}}Horizontal forms{{/i}}

        -
        -
        -
        -
        - {{_i}}Controls Bootstrap supports{{/i}} -
        - -
        - -

        {{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}

        -
        -
        -
        - -
        - -
        -
        -
        - -
        - -
        -
        -
        - -
        - +

        {{_i}}Horizontal form{{/i}}

        +

        {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

        +
          +
        • {{_i}}Add .form-horizontal to the form{{/i}}
          • +
        • {{_i}}Wrap labels and controls in .control-group{{/i}}
          • +
        • {{_i}}Add .control-label to the label{{/i}}
          • +
        • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
          • +
        + +
        + +
        + +
        -
        -
        - -
        - +
        + +
        + +
        -
        -
        - -
        - +
        +
        + + +
        -
        -
        - - -
        -
        -
        -

        {{_i}}Example markup{{/i}}

        -

        {{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.{{/i}}

        + 
         <form class="form-horizontal">
-  <fieldset>
-    <legend>{{_i}}Legend text{{/i}}</legend>
-    <div class="control-group">
-      <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
-      <div class="controls">
-        <input type="text" class="input-xlarge" id="input01">
-        <p class="help-block">{{_i}}Supporting help text{{/i}}</p>
-      </div>
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}">
     </div>
-  </fieldset>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> {{_i}}Remember me{{/i}}
+      </label>
+      <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
+    </div>
+  </div>
 </form>
        -
        -
        -

        {{_i}}What's included{{/i}}

        -

        {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}

        -
          -
        • {{_i}}text inputs (text, password, email, etc){{/i}}
          • -
        • {{_i}}checkbox{{/i}}
          • -
        • {{_i}}radio{{/i}}
          • -
        • {{_i}}select{{/i}}
          • -
        • {{_i}}multiple select{{/i}}
          • -
        • {{_i}}file input{{/i}}
          • -
        • {{_i}}textarea{{/i}}
          • -
        -
        -

        {{_i}}New defaults with v2.0{{/i}}

        -

        {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}

        -
        -
        -
        -
        -
        -
        -
        - {{_i}}Form control states{{/i}} -
        - -
        - +
        + + +

        {{_i}}Supported form controls{{/i}}

        +

        {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

        + +

        {{_i}}Inputs{{/i}}

        +

        {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

        +

        {{_i}}Requires the use of a specified type at all times.{{/i}}

        + + + +
        +<input type="text" placeholder="Text input">
+
        + +

        {{_i}}Textarea{{/i}}

        +

        {{_i}}Form control which supports multiple lines of text. Change rows attribute as necessary.{{/i}}

        +
        + +
        +
        +<textarea rows="3"></textarea>
+
        + +

        {{_i}}Checkboxes and radios{{/i}}

        +

        {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

        +

        {{_i}}Default (stacked){{/i}}

        +
        + +
        + + +
        +
        +<label class="checkbox">
+  <input type="checkbox" value="">
+  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
+</label>
+
        + +

        {{_i}}Inline checkboxes{{/i}}

        +

        {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

        +
        + + + +
        +
        +<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+
        + +

        {{_i}}Selects{{/i}}

        +

        {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

        +
        + +
        + +
        +
        +<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
        + + +
        + + +

        {{_i}}Extending form controls{{/i}}

        +

        {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

        + +

        {{_i}}Prepended and appended inputs{{/i}}

        +

        {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

        + +

        {{_i}}Default options{{/i}}

        +

        {{_i}}Wrap an .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

        +
        +
        + @ +
        -
        -
        - -
        - Some value here +
        +
        + + .00
        -
        -
        - -
        - + +
        +<div class="input-prepend">
+  <span class="add-on">@</span>
+  <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
+</div>
+<div class="input-append">
+  <input class="span2" id="appendedInput" type="text">
+  <span class="add-on">.00</span>
+</div>
+
        + +

        {{_i}}Combined{{/i}}

        +

        {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

        +
        +
        + $ + + .00
        -
        -
        - -
        - + +
        +<div class="input-prepend input-append">
+  <span class="add-on">$</span>
+  <input class="span2" id="appendedPrependedInput" type="text">
+  <span class="add-on">.00</span>
+</div>
+
        + +

        {{_i}}Buttons instead of text{{/i}}

        +

        {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

        +
        +
        + +
        -
        -
        - -
        - - {{_i}}Something may have gone wrong{{/i}} + +
        +<div class="input-append">
+  <input class="span2" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Go!</button>
+</div>
+
        +
        +
        + + +
        -
        -
        - -
        - - {{_i}}Please correct the error{{/i}} + +
        +<div class="input-append">
+  <input class="span2" id="appendedInputButtons" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
+</div>
+
        + +

        {{_i}}Button dropdowns{{/i}}

        +

        {{_i}}{{/i}}

        +
        +
        + +
        + + +
        +
        +
        +
        +<div class="input-append">
+  <input class="span2" id="appendedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
        + +
        +
        +
        + + +
        + +
        +
        +
        +<div class="input-prepend">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="prependedDropdownButton" type="text">
+</div>
+
        + +
        +
        +
        + + +
        + +
        + + +
        +
        +
        +
        +<div class="input-prepend input-append">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="appendedPrependedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
        + +

        {{_i}}Segmented dropdown groups{{/i}}

        +
        +
        +
        + + + +
        +
        -
        -
        - -
        - - {{_i}}Woohoo!{{/i}} +
        + +
        + + + +
        -
        -
        - + +
        +<form>
+  <div class="input-prepend">
+    <div class="btn-group">...</div>
+    <input type="text">
+  </div>
+  <div class="input-append">
+    <input type="text">
+    <div class="btn-group">...</div>
+  </div>
+</form>
+
        + +

        {{_i}}Search form{{/i}}

        +
        +
        + + +
        +
        + + +
        +
        {{! /example }} +
        +<form class="form-search">
+  <div class="input-append">
+    <input type="text" class="span2 search-query">
+    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+  </div>
+  <div class="input-prepend">
+    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+    <input type="text" class="span2 search-query">
+  </div>
+</form>
+
        + +

        {{_i}}Control sizing{{/i}}

        +

        {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

        + +

        {{_i}}Block level inputs{{/i}}

        +

        {{_i}}Make any <input> or <textarea> element behave like a block level element.{{/i}}

        +
        - - {{_i}}Woohoo!{{/i}} +
        -
        -
        - - -
        -
        - -
        -
        -

        {{_i}}Redesigned browser states{{/i}}

        -

        {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.{{/i}}

        -
        -

        {{_i}}Form validation{{/i}}

        -

        {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.{{/i}}

        + 
        -<fieldset
-  class="control-group error">
-  …
-</fieldset>
+<input class="input-block-level" type="text" placeholder=".input-block-level">
        -
        -
        -
        +

        {{_i}}Relative sizing{{/i}}

        +
        +
        + + + + + + +
        +
        +
        +<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+
        +

        + {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

        -
        -
        -
        -
        - {{_i}}Extending form controls{{/i}} -
        - +

        {{_i}}Grid sizing{{/i}}

        +

        {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

        +
        @@ -1071,465 +1399,682 @@ -

        {{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}

        -
        -
        - -
        - - - -

        {{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).{{/i}}

        -
        -
        -
        - + +
        +<input class="span1" type="text" placeholder=".span1">
+<input class="span2" type="text" placeholder=".span2">
+<input class="span3" type="text" placeholder=".span3">
+<select class="span1">
+  ...
+</select>
+<select class="span2">
+  ...
+</select>
+<select class="span3">
+  ...
+</select>
+
        + +

        {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.{{/i}}

        +
        -
        - @ - + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        + +
        +<div class="controls">
+  <input class="span5" type="text" placeholder=".span5">
+</div>
+<div class="controls controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span1" type="text" placeholder=".span1">
+</div>
+...
+
        + +

        {{_i}}Uneditable inputs{{/i}}

        +

        {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

        +
        + Some value here +
        +
        +<span class="input-xlarge uneditable-input">Some value here</span>
+
        + +

        {{_i}}Form actions{{/i}}

        +

        {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

        +
        +
        + + +
        +
        +
        +<div class="form-actions">
+  <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
+  <button type="button" class="btn">{{_i}}Cancel{{/i}}</button>
+</div>
+
        + +

        {{_i}}Help text{{/i}}

        +

        {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

        +

        {{_i}}Inline help{{/i}}

        +
        + Inline help text +
        +
        +<input type="text"><span class="help-inline">Inline help text</span>
+
        + +

        {{_i}}Block help{{/i}}

        +
        + + A longer block of help text that breaks onto a new line and may extend beyond one line. +
        +
        +<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+
        + + +
        + + +

        {{_i}}Form control states{{/i}}

        +

        {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

        + +

        {{_i}}Input focus{{/i}}

        +

        {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

        +
        + +
        +
        +<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+
        + +

        {{_i}}Invalid inputs{{/i}}

        +

        {{_i}}Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.{{/i}}

        +
        + +
        +
        +<input class="span3" type="email" required>
+
        + +

        {{_i}}Disabled inputs{{/i}}

        +

        {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

        +
        + +
        +
        +<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
+
        + +

        {{_i}}Validation states{{/i}}

        +

        {{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

        + +
        +
        + +
        + + {{_i}}Something may have gone wrong{{/i}}
        -

        {{_i}}Here's some help text{{/i}}

        -
        -
        - -
        -
        - - .00 +
        + +
        + + {{_i}}Please correct the error{{/i}}
        -

        {{_i}}Here's more help text{{/i}}

        -
        -
        - -
        - - - +
        + +
        + + {{_i}}Username is taken{{/i}} +
        -
        -
        - -
        - - - -

        {{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}

        +
        + +
        + + {{_i}}Woohoo!{{/i}} +
        + +
        +<div class="control-group warning">
+  <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputWarning">
+    <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
+  </div>
+</div>
+<div class="control-group error">
+  <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputError">
+    <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
+  </div>
+</div>
+<div class="control-group success">
+  <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputSuccess">
+    <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+  </div>
+</div>
+
        + + + + + + +
        +
        +

        {{_i}}Buttons{{/i}}

        -
        - -
        - - -
        + +

        Default buttons

        +

        {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
        btn{{_i}}Standard gray button with gradient{{/i}}
        btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
        btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
        btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
        btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
        btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
        btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
        btn btn-link{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}
        + +

        {{_i}}Cross browser compatibility{{/i}}

        +

        {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

        + + +

        {{_i}}Button sizes{{/i}}

        +

        {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.{{/i}}

        +
        +

        + + +

        +

        + + +

        +

        + + +

        +

        + + +

        -
        - - +
        +<p>
+  <button class="btn btn-large btn-primary" type="button">{{_i}}Large button{{/i}}</button>
+  <button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-primary" type="button">{{_i}}Default button{{/i}}</button>
+  <button class="btn" type="button">{{_i}}Default button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-small btn-primary" type="button">{{_i}}Small button{{/i}}</button>
+  <button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-mini btn-primary" type="button">{{_i}}Mini button{{/i}}</button>
+  <button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+</p>
+
        +

        {{_i}}Create block level buttons—those that span the full width of a parent— by adding .btn-block.{{/i}}

        +
        +
        + + +
        -
        - -
        -
        -

        {{_i}}Prepend & append inputs{{/i}}

        -

        {{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

        -
        -

        {{_i}}Checkboxes and radios{{/i}}

        -

        {{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}

        -

        {{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}

        -
        -

        {{_i}}Inline forms and append/prepend{{/i}}

        -

        {{_i}}To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.{{/i}}

        -
        -

        {{_i}}Form help text{{/i}}

        -

        {{_i}}To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.{{/i}}

        -
        -
        - - - - - -
        -
        -

        {{_i}}Buttons{{/i}}

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Button{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
        .btn{{_i}}Standard gray button with gradient{{/i}}
        .btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
        .btn-info{{_i}}Used as an alternate to the default styles{{/i}}
        .btn-success{{_i}}Indicates a successful or positive action{{/i}}
        .btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
        .btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
        .btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
        - -
        -
        -

        {{_i}}Buttons for actions{{/i}}

        -

        {{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}

        -

        {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}

        -

        {{_i}}Cross browser compatibility{{/i}}

        -

        {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

        -
        -
        -

        {{_i}}Multiple sizes{{/i}}

        -

        {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

        -

        - - -

        -

        - - -

        -

        - - -

        -
        -

        {{_i}}Disabled state{{/i}}

        -

        {{_i}}For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.{{/i}}

        -

        - {{_i}}Primary link{{/i}} - {{_i}}Link{{/i}} -

        -

        - - -

        -

        - {{_i}}Heads up!{{/i}} - {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} -

        -
        -
        -

        {{_i}}One class, multiple tags{{/i}}

        -

        {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

        -
        -{{_i}}Link{{/i}} - - - -
        +
        +<button class="btn btn-large btn-block btn-primary" type="button">{{_i}}Block level button{{/i}}</button>
+<button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button>
+
        + + +

        {{_i}}Disabled state{{/i}}

        +

        {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

        + +

        Anchor element

        +

        {{_i}}Add the .disabled class to <a> buttons.{{/i}}

        +

        + {{_i}}Primary link{{/i}} + {{_i}}Link{{/i}} +

        +
        +<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+
        +

        + {{_i}}Heads up!{{/i}} + {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.{{/i}} +

        + +

        Button element

        +

        {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

        +

        + + +

        +
        +<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+<button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
+
        + + +

        {{_i}}One class, multiple tags{{/i}}

        +

        {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

        +
        + {{_i}}Link{{/i}} + + + + 
         <a class="btn" href="">{{_i}}Link{{/i}}</a>
-<button class="btn" type="submit">
-  {{_i}}Button{{/i}}
-</button>
-<input class="btn" type="button"
-         value="{{_i}}Input{{/i}}">
-<input class="btn" type="submit"
-         value="{{_i}}Submit{{/i}}">
-
        -

        {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

        -
        -
        -
        +<button class="btn" type="submit">{{_i}}Button{{/i}}</button> +<input class="btn" type="button" value="{{_i}}Input{{/i}}"> +<input class="btn" type="submit" value="{{_i}}Submit{{/i}}"> + +

        {{_i}}As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

        + - -
        -
        -

        {{_i}}Icons Graciously provided by Glyphicons{{/i}}

        -
        -
        -
        -
          -
        • icon-glass
          • -
        • icon-music
          • -
        • icon-search
          • -
        • icon-envelope
          • -
        • icon-heart
          • -
        • icon-star
          • -
        • icon-star-empty
          • -
        • icon-user
          • -
        • icon-film
          • -
        • icon-th-large
          • -
        • icon-th
          • -
        • icon-th-list
          • -
        • icon-ok
          • -
        • icon-remove
          • -
        • icon-zoom-in
          • -
        • icon-zoom-out
          • -
        • icon-off
          • -
        • icon-signal
          • -
        • icon-cog
          • -
        • icon-trash
          • -
        • icon-home
          • -
        • icon-file
          • -
        • icon-time
          • -
        • icon-road
          • -
        • icon-download-alt
          • -
        • icon-download
          • -
        • icon-upload
          • -
        • icon-inbox
          • -
        • icon-play-circle
          • -
        • icon-repeat
          • -
        -
        -
        -
          -
        • icon-refresh
          • -
        • icon-list-alt
          • -
        • icon-lock
          • -
        • icon-flag
          • -
        • icon-headphones
          • -
        • icon-volume-off
          • -
        • icon-volume-down
          • -
        • icon-volume-up
          • -
        • icon-qrcode
          • -
        • icon-barcode
          • -
        • icon-tag
          • -
        • icon-tags
          • -
        • icon-book
          • -
        • icon-bookmark
          • -
        • icon-print
          • -
        • icon-camera
          • -
        • icon-font
          • -
        • icon-bold
          • -
        • icon-italic
          • -
        • icon-text-height
          • -
        • icon-text-width
          • -
        • icon-align-left
          • -
        • icon-align-center
          • -
        • icon-align-right
          • -
        • icon-align-justify
          • -
        • icon-list
          • -
        • icon-indent-left
          • -
        • icon-indent-right
          • -
        • icon-facetime-video
          • -
        • icon-picture
          • -
        -
        -
        -
          -
        • icon-pencil
          • -
        • icon-map-marker
          • -
        • icon-adjust
          • -
        • icon-tint
          • -
        • icon-edit
          • -
        • icon-share
          • -
        • icon-check
          • -
        • icon-move
          • -
        • icon-step-backward
          • -
        • icon-fast-backward
          • -
        • icon-backward
          • -
        • icon-play
          • -
        • icon-pause
          • -
        • icon-stop
          • -
        • icon-forward
          • -
        • icon-fast-forward
          • -
        • icon-step-forward
          • -
        • icon-eject
          • -
        • icon-chevron-left
          • -
        • icon-chevron-right
          • -
        • icon-plus-sign
          • -
        • icon-minus-sign
          • -
        • icon-remove-sign
          • -
        • icon-ok-sign
          • -
        • icon-question-sign
          • -
        • icon-info-sign
          • -
        • icon-screenshot
          • -
        • icon-remove-circle
          • -
        • icon-ok-circle
          • -
        • icon-ban-circle
          • -
        -
        -
        -
          -
        • icon-arrow-left
          • -
        • icon-arrow-right
          • -
        • icon-arrow-up
          • -
        • icon-arrow-down
          • -
        • icon-share-alt
          • -
        • icon-resize-full
          • -
        • icon-resize-small
          • -
        • icon-plus
          • -
        • icon-minus
          • -
        • icon-asterisk
          • -
        • icon-exclamation-sign
          • -
        • icon-gift
          • -
        • icon-leaf
          • -
        • icon-fire
          • -
        • icon-eye-open
          • -
        • icon-eye-close
          • -
        • icon-warning-sign
          • -
        • icon-plane
          • -
        • icon-calendar
          • -
        • icon-random
          • -
        • icon-comment
          • -
        • icon-magnet
          • -
        • icon-chevron-up
          • -
        • icon-chevron-down
          • -
        • icon-retweet
          • -
        • icon-shopping-cart
          • -
        • icon-folder-close
          • -
        • icon-folder-open
          • -
        • icon-resize-vertical
          • -
        • icon-resize-horizontal
          • -
        -
        -
        -
        - {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}} -
        -
        - -
        -
        -

        {{_i}}Built as a sprite{{/i}}

        -

        {{_i}}Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}

        -

        {{_i}}All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}

        -

        {{_i}}Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}

        -
        -
        -

        {{_i}}How to use{{/i}}

        -

        {{_i}}With v2.0.1, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}

        + +
        +
        +

        {{_i}}Images{{/i}}

        +
        + +

        {{_i}}Add classes to an <img> element to easily style images in any project.{{/i}}

        +
        + + + +
        +
        +<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
+
        +

        {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.{{/i}}

        + + +
        + + + + +
        +
        +

        {{_i}}Icons by Glyphicons{{/i}}

        +
        + +

        {{_i}}Icon glyphs{{/i}}

        +

        {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

        +
          +
        • icon-glass
          • +
        • icon-music
          • +
        • icon-search
          • +
        • icon-envelope
          • +
        • icon-heart
          • +
        • icon-star
          • +
        • icon-star-empty
          • +
        • icon-user
          • +
        • icon-film
          • +
        • icon-th-large
          • +
        • icon-th
          • +
        • icon-th-list
          • +
        • icon-ok
          • +
        • icon-remove
          • +
        • icon-zoom-in
          • +
        • icon-zoom-out
          • +
        • icon-off
          • +
        • icon-signal
          • +
        • icon-cog
          • +
        • icon-trash
          • +
        • icon-home
          • +
        • icon-file
          • +
        • icon-time
          • +
        • icon-road
          • +
        • icon-download-alt
          • +
        • icon-download
          • +
        • icon-upload
          • +
        • icon-inbox
          • + +
        • icon-play-circle
          • +
        • icon-repeat
          • +
        • icon-refresh
          • +
        • icon-list-alt
          • +
        • icon-lock
          • +
        • icon-flag
          • +
        • icon-headphones
          • +
        • icon-volume-off
          • +
        • icon-volume-down
          • +
        • icon-volume-up
          • +
        • icon-qrcode
          • +
        • icon-barcode
          • +
        • icon-tag
          • +
        • icon-tags
          • +
        • icon-book
          • +
        • icon-bookmark
          • +
        • icon-print
          • +
        • icon-camera
          • +
        • icon-font
          • +
        • icon-bold
          • +
        • icon-italic
          • +
        • icon-text-height
          • +
        • icon-text-width
          • +
        • icon-align-left
          • +
        • icon-align-center
          • +
        • icon-align-right
          • +
        • icon-align-justify
          • +
        • icon-list
          • + +
        • icon-indent-left
          • +
        • icon-indent-right
          • +
        • icon-facetime-video
          • +
        • icon-picture
          • +
        • icon-pencil
          • +
        • icon-map-marker
          • +
        • icon-adjust
          • +
        • icon-tint
          • +
        • icon-edit
          • +
        • icon-share
          • +
        • icon-check
          • +
        • icon-move
          • +
        • icon-step-backward
          • +
        • icon-fast-backward
          • +
        • icon-backward
          • +
        • icon-play
          • +
        • icon-pause
          • +
        • icon-stop
          • +
        • icon-forward
          • +
        • icon-fast-forward
          • +
        • icon-step-forward
          • +
        • icon-eject
          • +
        • icon-chevron-left
          • +
        • icon-chevron-right
          • +
        • icon-plus-sign
          • +
        • icon-minus-sign
          • +
        • icon-remove-sign
          • +
        • icon-ok-sign
          • + +
        • icon-question-sign
          • +
        • icon-info-sign
          • +
        • icon-screenshot
          • +
        • icon-remove-circle
          • +
        • icon-ok-circle
          • +
        • icon-ban-circle
          • +
        • icon-arrow-left
          • +
        • icon-arrow-right
          • +
        • icon-arrow-up
          • +
        • icon-arrow-down
          • +
        • icon-share-alt
          • +
        • icon-resize-full
          • +
        • icon-resize-small
          • +
        • icon-plus
          • +
        • icon-minus
          • +
        • icon-asterisk
          • +
        • icon-exclamation-sign
          • +
        • icon-gift
          • +
        • icon-leaf
          • +
        • icon-fire
          • +
        • icon-eye-open
          • +
        • icon-eye-close
          • +
        • icon-warning-sign
          • +
        • icon-plane
          • +
        • icon-calendar
          • +
        • icon-random
          • +
        • icon-comment
          • +
        • icon-magnet
          • + +
        • icon-chevron-up
          • +
        • icon-chevron-down
          • +
        • icon-retweet
          • +
        • icon-shopping-cart
          • +
        • icon-folder-close
          • +
        • icon-folder-open
          • +
        • icon-resize-vertical
          • +
        • icon-resize-horizontal
          • +
        • icon-hdd
          • +
        • icon-bullhorn
          • +
        • icon-bell
          • +
        • icon-certificate
          • +
        • icon-thumbs-up
          • +
        • icon-thumbs-down
          • +
        • icon-hand-right
          • +
        • icon-hand-left
          • +
        • icon-hand-up
          • +
        • icon-hand-down
          • +
        • icon-circle-arrow-right
          • +
        • icon-circle-arrow-left
          • +
        • icon-circle-arrow-up
          • +
        • icon-circle-arrow-down
          • +
        • icon-globe
          • +
        • icon-wrench
          • +
        • icon-tasks
          • +
        • icon-filter
          • +
        • icon-briefcase
          • +
        • icon-fullscreen
          • +
        + +

        Glyphicons attribution

        +

        {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

        + + +
        + + +

        {{_i}}How to use{{/i}}

        +

        {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

         <i class="icon-search"></i>
        -

        {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

        +

        {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.{{/i}}

         <i class="icon-search icon-white"></i>
        -

        {{_i}}There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}

        -
        -
        -

        {{_i}}Use cases{{/i}}

        -

        {{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}

        -
          -
        • {{_i}}As visuals for your sidebar navigation{{/i}}
          • -
        • {{_i}}For a purely icon-driven navigation{{/i}}
          • -
        • {{_i}}For buttons to help convey the meaning of an action{{/i}}
          • -
        • {{_i}}With links to share context on a user's destination{{/i}}
          • -
        -

        {{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

        -
        -
        +

        + {{_i}}Heads up!{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} +

        -

        {{_i}}Examples{{/i}}

        -

        {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

        -
        -
        -
        -
        - - - - -
        -
        - {{_i}}User{{/i}} - - -
        -
        -

        - {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} -

        -

        - {{_i}}Comment{{/i}} - {{_i}}Settings{{/i}} - {{_i}}More Info{{/i}} -

        -
        -
        -
        - -
        -
        -
        -
        -
        - -
        -
        - - + +
        + + +

        {{_i}}Icon examples{{/i}}

        +

        {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

        + +

        {{_i}}Buttons{{/i}}

        + +
        {{_i}}Button group in a button toolbar{{/i}}
        +
        +
        +
        + + + + +
        -
        -
        - -
        -
        -
        +
        {{! /bs-docs-example }} +
        +<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
        + +
        {{_i}}Dropdown in a button group{{/i}}
        +
        +
        + {{_i}}User{{/i}} + + +
        +
        {{! /bs-docs-example }} +
        +<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
+    <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
+  </ul>
+</div>
+
        + +
        {{_i}}Button sizes{{/i}}
        +
        + Star + Star + Star +
        {{! /bs-docs-example }} +
        +<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
+<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
+
        + +

        {{_i}}Navigation{{/i}}

        +
        +
        + +
        {{! /well }} +
        {{! /bs-docs-example }} +
        +<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
+  <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+  <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
+</ul>
+
        + +

        {{_i}}Form fields{{/i}}

        +
        +
        + +
        +
        + +
        +
        +
        +
        +
        +<div class="control-group">
+  <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
+  <div class="controls">
+    <div class="input-prepend">
+      <span class="add-on"><i class="icon-envelope"></i></span>
+      <input class="span2" id="inputIcon" type="text">
+    </div>
+  </div>
+</div>
+
        + + + + + +
        {{! /span9 }} +
        {{! row}} + +
        {{! /.container }} diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 1887b6f7..96896b5b 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,92 +1,232 @@ -
        -

        {{_i}}Components{{/i}}

        -

        {{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

        -
        - +
        +

        {{_i}}Components{{/i}}

        +

        {{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}

        - - -
        -
        -

        {{_i}}Button groups{{/i}} {{_i}}Join buttons for more toolbar-like functionality{{/i}}

        -
        -
        -
        -

        {{_i}}Button groups{{/i}}

        -

        {{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

        -

        {{_i}}Best practices{{/i}}

        -

        {{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}

        -
          -
        • {{_i}}Always use the same element in a single button group, <a> or <button>.{{/i}}
          • -
        • {{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
          • -
        • {{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}
          • -
        -

        {{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}

        -
        -
        -

        {{_i}}Default example{{/i}}

        -

        {{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

        -
        -
        - {{_i}}Left{{/i}} - {{_i}}Middle{{/i}} - {{_i}}Right{{/i}} -
        +
        + + +
        +
        +
        +
        + + + + + + + + + + +
        +
        +

        {{_i}}Button groups{{/i}}

        +
        + +

        {{_i}}Examples{{/i}}

        +

        {{_i}}Two basic options, along with two more specific variations.{{/i}}

        + +

        {{_i}}Single button group{{/i}}

        +

        {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

        +
        +
        + + + +
        + 
         <div class="btn-group">
-  <a class="btn" href="#">1</a>
-  <a class="btn" href="#">2</a>
-  <a class="btn" href="#">3</a>
+  <button class="btn">1</button>
+  <button class="btn">2</button>
+  <button class="btn">3</button>
 </div>
        -

        {{_i}}Toolbar example{{/i}}

        -

        {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

        -
        -
        - 1 - 2 - 3 - 4 -
        -
        - 5 - 6 - 7 -
        -
        - 8 -
        -
        + +

        {{_i}}Multiple button groups{{/i}}

        +

        {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

        +
        +
        +
        + + + + +
        +
        + + + +
        +
        + +
        +
        + 
         <div class="btn-toolbar">
   <div class="btn-group">
@@ -94,91 +234,120 @@
   </div>
 </div>
        -
        -
        -

        {{_i}}Checkbox and radio flavors{{/i}}

        -

        {{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

        -

        {{_i}}Get the javascript »{{/i}}

        -
        -

        {{_i}}Heads up{{/i}}

        -

        {{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

        -
        -
        -
        +

        {{_i}}Vertical button groups{{/i}}

        +

        {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

        +
        +
        + + + + +
        +
        +
        +<div class="btn-group btn-group-vertical">
+  ...
+</div>
+
        - -
        -
        -

        {{_i}}Buttons dropdowns{{/i}} {{_i}}Contextual dropdown menus built on button groups{{/i}}

        -
        +
        -
        -
        -

        {{_i}}Button dropdowns{{/i}}

        -

        {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

        -
        -
        - {{_i}}Action{{/i}} - -
        -
        - {{_i}}Action{{/i}} - -
        -
        - {{_i}}Danger{{/i}} - -
        -
        -
        -
        - {{_i}}Success{{/i}} - -
        -
        - {{_i}}Info{{/i}} - -
        -
        -
        -

        {{_i}}Heads up!{{/i}} {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

        -
        -
        -

        {{_i}}Example markup{{/i}}

        -

        {{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

        + +

        {{_i}}Checkbox and radio flavors{{/i}}

        +

        {{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that.{{/i}}

        + +

        {{_i}}Dropdowns in button groups{{/i}}

        +

        {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}Button dropdown menus{{/i}}

        +
        + + +

        {{_i}}Overview and examples{{/i}}

        +

        {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

        +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        +
        {{! /example }} 
         <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -190,118 +359,265 @@
   </ul>
 </div>
        -
        -
        -
        -
        -

        {{_i}}Split button dropdowns{{/i}}

        -

        {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

        -
        -
        - {{_i}}Action{{/i}} - - -
        -
        - {{_i}}Action{{/i}} - - -
        -
        - {{_i}}Danger{{/i}} - - -
        -
        -
        -
        - {{_i}}Success{{/i}} - - -
        -
        - {{_i}}Info{{/i}} - - -
        -
        -
        -
        -

        {{_i}}Example markup{{/i}}

        -

        {{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}

        +

        {{_i}}Works with all button sizes{{/i}}

        +

        {{_i}}Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.{{/i}}

        +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        +
        {{! /example }} + +

        {{_i}}Requires JavaScript{{/i}}

        +

        {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

        +

        {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}

        + + +
        + + +

        {{_i}}Split button dropdowns{{/i}}

        +

        {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

        +
        +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        +
        {{! /example }} 
         <div class="btn-group">
-  <a class="btn" href="#">{{_i}}Action{{/i}}</a>
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+  <button class="btn">{{_i}}Action{{/i}}</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
-  </a>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- {{_i}}dropdown menu links{{/i}} -->
+  </ul>
+</div>
+
        + +

        {{_i}}Sizes{{/i}}

        +

        {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

        +
        +
        +
        + + + +
        +
        +
        +
        + + + +
        +
        +
        +
        + + + +
        +
        +
        {{! /example }} +
        +<div class="btn-group">
+  <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- {{_i}}dropdown menu links{{/i}} -->
+  </ul>
+</div>
+
        + +

        {{_i}}Dropup menus{{/i}}

        +

        {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

        +
        +
        +
        + + + +
        +
        + + + +
        +
        +
        {{! /example }} +
        +<div class="btn-group dropup">
+  <button class="btn">{{_i}}Dropup{{/i}}</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
   <ul class="dropdown-menu">
     <!-- {{_i}}dropdown menu links{{/i}} -->
   </ul>
 </div>
        -
        -
        - + - - + - -
        -
        - + - -
        -
        -

        {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

        -
        + +
        +
        +

        {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

        +
        -

        {{_i}}Multicon-page pagination{{/i}}

        -
        -
        -

        {{_i}}When to use{{/i}}

        -

        {{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

        -

        {{_i}}Stateful page links{{/i}}

        -

        {{_i}}Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.{{/i}}

        -

        {{_i}}Flexible alignment{{/i}}

        -

        {{_i}}Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

        -
        -
        -

        {{_i}}Examples{{/i}}

        -

        {{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}

        - - - - -
        -
        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Wrapped in a <div>, pagination is just a <ul>.{{/i}}

        +

        {{_i}}Standard pagination{{/i}}

        +

        {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

        +
        + + 
         <div class="pagination">
   <ul>
-    <li><a href="#">Prev</a></li>
-    <li class="active">
-      <a href="#">1</a>
-    </li>
+    <li><a href="#">Prev</a></li>
+    <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
-    <li><a href="#">Next</a></li>
+    <li><a href="#">Next</a></li>
+  </ul>
+</div>
+
        + + +
        + + +

        {{_i}}Options{{/i}}

        + +

        {{_i}}Disabled and active states{{/i}}

        +

        {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

        +
        + +
        +
        +<div class="pagination">
+  <ul>
+    <li class="disabled"><a href="#">Prev</a></li>
+    <li class="active"><a href="#">1</a></li>
+    ...
+  </ul>
+</div>
+
        +

        {{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}

        +
        +<div class="pagination">
+  <ul>
+    <li class="disabled"><span>Prev</span></li>
+    <li class="active"><span>1</span></li>
+    ...
+  </ul>
+</div>
+
        + +

        {{_i}}Sizes{{/i}}

        +

        {{_i}}Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.{{/i}}

        +
        + + + + +
        +
        +<div class="pagination pagination-large">
+  <ul>
+    ...
   </ul>
 </div>
+<div class="pagination">
+  <ul>
+    ...
+  </ul>
+</div>
+<div class="pagination pagination-small">
+  <ul>
+    ...
+  </ul>
+</div>
+<div class="pagination pagination-mini">
+  <ul>
+    ...
+  </ul>
+</div>
+
        + +

        {{_i}}Alignment{{/i}}

        +

        {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

        +
        + +
        +
        +<div class="pagination pagination-centered">
+  ...
+</div>
+
        +
        + +
        +
        +<div class="pagination pagination-right">
+  ...
+</div>
        -
        -
        - -

        {{_i}}Pager{{/i}} {{_i}}For quick previous and next links{{/i}}

        -
        -
        -

        {{_i}}About pager{{/i}}

        -

        {{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}

        -
        -
        -

        {{_i}}Default example{{/i}}

        -

        {{_i}}By default, the pager centers links.{{/i}}

        - + + +
        + + +

        {{_i}}Pager{{/i}}

        +

        {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

        + +

        {{_i}}Default example{{/i}}

        +

        {{_i}}By default, the pager centers links.{{/i}}

        +
        + + 
         <ul class="pager">
-  <li>
-    <a href="#">{{_i}}Previous{{/i}}</a>
-  </li>
-  <li>
-    <a href="#">{{_i}}Next{{/i}}</a>
-  </li>
+  <li><a href="#">{{_i}}Previous{{/i}}</a></li>
+  <li><a href="#">{{_i}}Next{{/i}}</a></li>
 </ul>
        -
        -
        -

        {{_i}}Aligned links{{/i}}

        -

        {{_i}}Alternatively, you can align each link to the sides:{{/i}}

        - + +

        {{_i}}Aligned links{{/i}}

        +

        {{_i}}Alternatively, you can align each link to the sides:{{/i}}

        +
        + + 
         <ul class="pager">
   <li class="previous">
@@ -1008,84 +1621,196 @@
   </li>
 </ul>
        -
        -
        -
        +

        {{_i}}Optional disabled state{{/i}}

        +

        {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

        +
        + +
        +
        +<ul class="pager">
+  <li class="previous disabled">
+    <a href="#">{{_i}}&larr; Older{{/i}}</a>
+  </li>
+  ...
+</ul>
+
        +
        - -
        -
        -

        {{_i}}Inline labels{{/i}} {{_i}}Label and annotate text{{/i}}

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
        - {{_i}}Default{{/i}} - - <span class="label">{{_i}}Default{{/i}}</span> -
        - {{_i}}Success{{/i}} - - <span class="label label-success">{{/_i}}Success{{/i}}</span> -
        - {{_i}}Warning{{/i}} - - <span class="label label-warning">{{_i}}Warning{{/i}}</span> -
        - {{_i}}Important{{/i}} - - <span class="label label-important">{{_i}}Important{{/i}}</span> -
        - {{_i}}Info{{/i}} - - <span class="label label-info">{{_i}}Info{{/i}}</span> -
        -
        + +
        +
        +

        {{_i}}Labels and badges{{/i}}

        +
        +

        {{_i}}Labels{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
        + {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
        + {{_i}}Success{{/i}} + + <span class="label label-success">{{_i}}Success{{/i}}</span> +
        + {{_i}}Warning{{/i}} + + <span class="label label-warning">{{_i}}Warning{{/i}}</span> +
        + {{_i}}Important{{/i}} + + <span class="label label-important">{{_i}}Important{{/i}}</span> +
        + {{_i}}Info{{/i}} + + <span class="label label-info">{{_i}}Info{{/i}}</span> +
        + {{_i}}Inverse{{/i}} + + <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> +
        + +

        {{_i}}Badges{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
        + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
        + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
        + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
        + {{_i}}Important{{/i}} + + 6 + + <span class="badge badge-important">6</span> +
        + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
        + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
        + +

        {{_i}}Easily collapsible{{/i}}

        +

        {{_i}}For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.{{/i}}

        + +
        + + + + +
        +
        +

        {{_i}}Typographic components{{/i}}

        +
        - -
        -
        -

        {{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}

        -
        -

        {{_i}}Hero unit{{/i}}

        -
        -
        -

        {{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}

        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Wrap your content in a div like so:{{/i}}

        +

        {{_i}}Hero unit{{/i}}

        +

        {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

        +
        +
        +

        {{_i}}Hello, world!{{/i}}

        +

        {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

        +

        {{_i}}Learn more{{/i}}

        +
        + 
         <div class="hero-unit">
   <h1>{{_i}}Heading{{/i}}</h1>
@@ -1097,346 +1822,546 @@
   </p>
 </div>
        -
        -
        -
        -

        {{_i}}Hello, world!{{/i}}

        -

        {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

        -

        {{_i}}Learn more{{/i}}

        -
        -
        -
        -

        {{_i}}Page header{{/i}}

        -
        -
        -

        {{_i}}A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

        -
        -
        -
        -<div class="page-haeder">
-  <h1>{{_i}}Example page header{{/i}}</h1>
+
+          
        {{_i}}Page header{{/i}}
        
+          
        {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}
        
+          
        
+            
        
+              
        {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}
        
+            
        
+          
        
+
        +<div class="page-header">
+  <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
 </div>
 
        
-
        -
        -
        +
        - -
        -
        -

        {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

        -
        -
        -
        -

        {{_i}}Default thumbnails{{/i}}

        -

        {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

        - -
        -
        -

        {{_i}}Highly customizable{{/i}}

        -

        {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

        -
          -
        • -
          - -
          -
          {{_i}}Thumbnail label{{/i}}
          -

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          -

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          -
          + +
          +
          +

          {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

          -
          • -
        • -
          - -
          -
          {{_i}}Thumbnail label{{/i}}
          -

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          -

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          -
          + +

          {{_i}}Default thumbnails{{/i}}

          +

          {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

          +
          +
          -
          • -
        -
        -
        -
        -
        -

        {{_i}}Why use thumbnails{{/i}}

        -

        {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

        -
        -
        -

        {{_i}}Simple, flexible markup{{/i}}

        -

        {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

        -
        -
        -

        {{_i}}Uses grid column sizes{{/i}}

        -

        {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

        -
        -
        +

        {{_i}}Highly customizable{{/i}}

        +

        {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

        +
        +
          +
        • +
          + +
          +

          {{_i}}Thumbnail label{{/i}}

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          +
          +
          +
          • +
        • +
          + +
          +

          {{_i}}Thumbnail label{{/i}}

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          +
          +
          +
          • +
        • +
          + +
          +

          {{_i}}Thumbnail label{{/i}}

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          +
          +
          +
          • +
        +
        + +

        {{_i}}Why use thumbnails{{/i}}

        +

        {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

        -
        -
        -

        {{_i}}The markup{{/i}}

        -

        {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

        +

        {{_i}}Simple, flexible markup{{/i}}

        +

        {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

        + +

        {{_i}}Uses grid column sizes{{/i}}

        +

        {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

        + +

        {{_i}}Markup{{/i}}

        +

        {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

         <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/300x200" alt="">
     </a>
   </li>
   ...
 </ul>
        -

        {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

        +

        {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

         <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>{{_i}}Thumbnail label{{/i}}</h5>
-      <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
+      <img data-src="holder.js/300x200" alt="">
+      <h3>{{_i}}Thumbnail label{{/i}}</h3>
+      <p>{{_i}}Thumbnail caption...{{/i}}</p>
     </div>
   </li>
   ...
 </ul>
        -
        -
        -

        {{_i}}More examples{{/i}}

        -

        {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

        - -
        -
        -
        +

        {{_i}}More examples{{/i}}

        +

        {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

        + + - -
        -
        -

        {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

        -
        -

        {{_i}}Lightweight defaults{{/i}}

        -
        -
        -

        {{_i}}Rewritten base class{{/i}}

        -

        {{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.{{/i}}

        -

        {{_i}}Single alert message{{/i}}

        -

        {{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}

        -
        -

        {{_i}}Goes great with javascript{{/i}}

        -

        {{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}

        -

        {{_i}}Get the plugin »{{/i}}

        -
        -
        -

        {{_i}}Example alerts{{/i}}

        -

        {{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}

        -
        - × - {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} -
        + + +
        +
        +

        {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

        +
        + +

        {{_i}}Default alert{{/i}}

        +

        {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

        +
        +
        + + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
        + 
         <div class="alert">
-  <a class="close" data-dismiss="alert">×</a>
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
 </div>
        -

        {{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}

        -
        - × -

        {{_i}}Warning!{{/i}}

        -

        {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

        -
        + +

        {{_i}}Dismiss buttons{{/i}}

        +

        {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

        + 
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        +

        {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

        + 
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        + +

        {{_i}}Dismiss alerts via JavaScript{{/i}}

        +

        {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

        + + +
        + + +

        {{_i}}Options{{/i}}

        +

        {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

        +
        +
        + +

        {{_i}}Warning!{{/i}}

        +

        {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

        +
        + 
         <div class="alert alert-block">
-  <a class="close" data-dismiss="alert">×</a>
-  <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <h4>{{_i}}Warning!{{/i}}</h4>
   {{_i}}Best check yo self, you're not...{{/i}}
 </div>
        -
        -
        -

        {{_i}}Contextual alternatives{{/i}} {{_i}}Add optional classes to change an alert's connotation{{/i}}

        -
        -
        -

        {{_i}}Error or danger{{/i}}

        -
        - × - {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} -
        + +
        + + +

        {{_i}}Contextual alternatives{{/i}}

        +

        {{_i}}Add optional classes to change an alert's connotation.{{/i}}

        + +

        {{_i}}Error or danger{{/i}}

        +
        +
        + + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +
        + 
         <div class="alert alert-error">
   ...
 </div>
        -
        -
        -

        {{_i}}Success{{/i}}

        -
        - × - {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} -
        + +

        {{_i}}Success{{/i}}

        +
        +
        + + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +
        + 
         <div class="alert alert-success">
   ...
 </div>
        -
        -
        -

        {{_i}}Information{{/i}}

        -
        - × - {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} -
        + +

        {{_i}}Information{{/i}}

        +
        +
        + + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +
        + 
         <div class="alert alert-info">
   ...
 </div>
        -
        -
        -
        + - -
        -
        -

        {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

        -
        -

        {{_i}}Examples and markup{{/i}}

        -
        -
        -

        {{_i}}Basic{{/i}}

        -

        {{_i}}Default progress bar with a vertical gradient.{{/i}}

        -
        -
        -
        + +
        +
        +

        {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

        +
        + +

        {{_i}}Examples and markup{{/i}}

        + +

        {{_i}}Basic{{/i}}

        +

        {{_i}}Default progress bar with a vertical gradient.{{/i}}

        +
        +
        +
        +
        + 
         <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
        -
        -
        -

        {{_i}}Striped{{/i}}

        -

        {{_i}}Uses a gradient to create a striped effect.{{/i}}

        -
        -
        -
        + +

        {{_i}}Striped{{/i}}

        +

        {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

        +
        +
        +
        +
        + 
        -<div class="progress progress-info
-     progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+<div class="progress progress-striped">
+  <div class="bar" style="width: 20%;"></div>
 </div>
        -
        -
        -

        {{_i}}Animated{{/i}}

        -

        {{_i}}Takes the striped example and animates it.{{/i}}

        -
        -
        -
        + +

        {{_i}}Animated{{/i}}

        +

        {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

        +
        +
        +
        +
        + 
        -<div class="progress progress-danger
-     progress-striped active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
        -
        -
        -

        {{_i}}Options and browser support{{/i}}

        -
        -
        -

        {{_i}}Additional colors{{/i}}

        -

        {{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}

        -
          -
        • .progress-info
          • -
        • .progress-success
          • -
        • .progress-danger
          • -
        -

        {{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

        -
        -
        -

        {{_i}}Behavior{{/i}}

        -

        {{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}

        -

        {{_i}}If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.{{/i}}

        -
        -
        -

        {{_i}}Browser support{{/i}}

        -

        {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}

        -

        {{_i}}Opera does not support animations at this time.{{/i}}

        -
        -
        +

        Stacked

        +

        Place multiple bars into the same .progress to stack them.

        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress">
+  <div class="bar bar-success" style="width: 35%;"></div>
+  <div class="bar bar-warning" style="width: 20%;"></div>
+  <div class="bar bar-danger" style="width: 10%;"></div>
+</div>
+
        + + +
        + + +

        {{_i}}Options{{/i}}

        + +

        {{_i}}Additional colors{{/i}}

        +

        {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
        + +

        {{_i}}Striped bars{{/i}}

        +

        {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
        + + +
        + + +

        {{_i}}Browser support{{/i}}

        +

        {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

        +

        {{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}

        + +
        + + + + + +
        +
        +

        {{_i}}Media object{{/i}}

        +
        +

        {{_i}}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.{{/i}}

        + +

        {{_i}}Default example{{/i}}

        +

        {{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}

        +
        +
        + + + +
        +

        {{_i}}Media heading{{/i}}

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        +
        +
        + + + +
        +

        {{_i}}Media heading{{/i}}

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        + + + +
        +

        {{_i}}Media heading{{/i}}

        + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
        +
        +
        +
        +
        {{! /.bs-docs-example }} +
        +<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" data-src="holder.js/64x64">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
+    ...
+
+    <!-- Nested media object -->
+    <div class="media">
+      ...
+    </div>
+  </div>
+</div>
+
        + + +
        + + +

        {{_i}}Media list{{/i}}

        +

        {{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}

        +
        +
          +
        • + + + +
          +

          {{_i}}Media heading{{/i}}

          +

          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

          + +
          + + + +
          +

          {{_i}}Nested media heading{{/i}}

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + +
          + + + +
          +

          {{_i}}Nested media heading{{/i}}

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          +
          +
          + +
          + + + +
          +

          {{_i}}Nested media heading{{/i}}

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          +
          +
          • +
        • + + + +
          +

          {{_i}}Media heading{{/i}}

          + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
          +
          • +
        +
        +
        +<ul class="media-list">
+  <li class="media">
+    <a class="pull-left" href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+    <div class="media-body">
+      <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
+      ...
+
+      <!-- Nested media object -->
+      <div class="media">
+        ...
+     </div>
+    </div>
+  </li>
+</ul>
+
        @@ -1444,35 +2369,117 @@ - -
        -
        -

        {{_i}}Miscellaneous{{/i}} {{_i}}Wells, badges, and close icon{{/i}}

        -
        -
        -
        -

        {{_i}}Wells{{/i}}

        -

        {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

        -
        - {{_i}}Look, I'm in a well!{{/i}} -
        + +
        +
        +

        {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

        +
        + +

        {{_i}}Wells{{/i}}

        +

        {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

        +
        +
        + {{_i}}Look, I'm in a well!{{/i}} +
        + 
         <div class="well">
   ...
 </div>
        -
        - -
        -

        {{_i}}Close icon{{/i}}

        -

        {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

        -

        ×

        -
        <a class="close">&times;</a>
        -
        -
        -
        +

        {{_i}}Optional classes{{/i}}

        +

        {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

        +
        +
        + {{_i}}Look, I'm in a well!{{/i}} +
        +
        +
        +<div class="well well-large">
+  ...
+</div>
+
        +
        +
        + {{_i}}Look, I'm in a well!{{/i}} +
        +
        +
        +<div class="well well-small">
+  ...
+</div>
+
        + +

        {{_i}}Close icon{{/i}}

        +

        {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

        +
        +

        +
        + 
        <button class="close">&times;</button>
        +

        {{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}

        + 
        <a class="close" href="#">&times;</a>
        + +

        {{_i}}Helper classes{{/i}}

        +

        {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

        + +

        {{_i}}.pull-left{{/i}}

        +

        {{_i}}Float an element left{{/i}}

        +
        +class="pull-left"
+
        +
        +.pull-left {
+  float: left;
+}
+
        + +

        {{_i}}.pull-right{{/i}}

        +

        {{_i}}Float an element right{{/i}}

        +
        +class="pull-right"
+
        +
        +.pull-right {
+  float: right;
+}
+
        + +

        {{_i}}.muted{{/i}}

        +

        {{_i}}Change an element's color to #999{{/i}}

        +
        +class="muted"
+
        +
        +.muted {
+  color: #999;
+}
+
        + +

        {{_i}}.clearfix{{/i}}

        +

        {{_i}}Clear the float on any element{{/i}}

        +
        +class="clearfix"
+
        +
        +.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
        + + + + + +
        {{! /span9 }} + {{! row}} + + {{! /.container }} diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache new file mode 100644 index 00000000..8d8a2f92 --- /dev/null +++ b/docs/templates/pages/customize.mustache @@ -0,0 +1,393 @@ + +
        +
        +

        {{_i}}Customize and download{{/i}}

        +

        {{_i}}Download Bootstrap or customize variables, components, JavaScript plugins, and more.{{/i}}

        +
        +
        + + +
        + + +
        +
        + +
        +
        + + + +
        +
        +
        + {{_i}}Toggle all{{/i}} +

        + {{_i}}1. Choose components{{/i}} +

        +
        +
        +
        +

        {{_i}}Scaffolding{{/i}}

        + + + + +

        {{_i}}Base CSS{{/i}}

        + + + + + + + +
        +
        +

        {{_i}}Components{{/i}}

        + + + + + + + + + + + +

        {{_i}}JS Components{{/i}}

        + + + + + + +
        +
        +

        {{_i}}Miscellaneous{{/i}}

        + + + + +

        {{_i}}Responsive{{/i}}

        + + + + + +
        +
        +
        + +
        +
        + {{_i}}Toggle all{{/i}} +

        + {{_i}}2. Select jQuery plugins{{/i}} +

        +
        +
        +
        + + + + + + + +
        +
        + + + + + + +
        +
        +

        {{_i}}Heads up!{{/i}}

        +

        {{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.{{/i}}

        +
        +
        +
        + + +
        +
        + {{_i}}Reset to defaults{{/i}} +

        + {{_i}}3. Customize variables{{/i}} +

        +
        +
        +
        +

        {{_i}}Scaffolding{{/i}}

        + + + + + +

        {{_i}}Links{{/i}}

        + + + + +

        {{_i}}Colors{{/i}}

        + + + + + + + + + + + + + + + +

        {{_i}}Sprites{{/i}}

        + + + + + +

        {{_i}}Grid system{{/i}}

        + + + + + + + + + + + + + + + +
        +
        + +

        {{_i}}Typography{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

        {{_i}}Tables{{/i}}

        + + + + + + + + + +

        {{_i}}Forms{{/i}}

        + + + + + + + + + + + + + + + + + +
        +
        + +

        {{_i}}Form states & alerts{{/i}}

        + + + + + + + + + + + + + + + + + +

        {{_i}}Navbar{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

        {{_i}}Dropdowns{{/i}}

        + + + + + + + + + + +
        +
        +
        + +
        +
        +

        + {{_i}}4. Download{{/i}} +

        +
        +
        + {{_i}}Customize and Download{{/i}} +

        {{_i}}What's included?{{/i}}

        +

        {{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}

        +
        +
        +
        + + + +
        {{! /span9 }} +
        {{! row}} + +
        {{! /.container }} diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache deleted file mode 100644 index fe38d145..00000000 --- a/docs/templates/pages/download.mustache +++ /dev/null @@ -1,248 +0,0 @@ - -
        -

        {{_i}}Customize and download{{/i}}

        -

        {{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}

        -
        - -
        -
        - -
        -
        - {{_i}}Toggle all{{/i}} -

        - {{_i}}1. Choose components{{/i}} - {{_i}}Get just the CSS you need{{/i}} -

        -
        -
        -
        -

        {{_i}}Scaffolding{{/i}}

        - - - - -

        {{_i}}Base CSS{{/i}}

        - - - - - - - -
        -
        -

        {{_i}}Components{{/i}}

        - - - - - - - - - - -
        -
        -

        {{_i}}JS Components{{/i}}

        - - - - - - -
        -
        -

        {{_i}}Miscellaneous{{/i}}

        - - - - -

        {{_i}}Responsive{{/i}}

        - -
        -
        -
        - -
        -
        - {{_i}}Toggle all{{/i}} -

        - {{_i}}2. Select jQuery plugins{{/i}} - {{_i}}Quickly add only the necessary javascript{{/i}} -

        -
        -
        -
        - - - - - - -
        -
        - - - - - - -
        -
        -

        {{_i}}Heads up!{{/i}}

        -

        {{_i}}All plugins require the latest version of jQuery to be included.{{/i}}

        -
        -
        -
        - - -
        -
        - {{_i}}Reset to defaults{{/i}} -

        - {{_i}}3. Customize variables{{/i}} - {{_i}}Optionally modify Bootstrap without a compiler{{/i}} -

        -
        -
        -
        -

        {{_i}}Links{{/i}}

        - - - - -

        {{_i}}Colors{{/i}}

        - - - - - - - - - - - - - - -
        -
        -

        {{_i}}Grid system{{/i}}

        - - - - - - -

        {{_i}}Fluid grid system{{/i}}

        - - - - -

        {{_i}}Typography{{/i}}

        - - - - - - -
        -
        -

        {{_i}}Forms{{/i}}

        - - - - -

        {{_i}}Navbar{{/i}}

        - - - - - - - - - - - - -
        -
        -

        {{_i}}Form states & alerts{{/i}}

        - - - - - - - - - - - - - - - - -
        -
        -
        - -
        -
        -

        - {{_i}}4. Download{{/i}} -

        -
        -
        - {{_i}}Customize and Download{{/i}} -

        {{_i}}What's included?{{/i}}

        -

        {{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}

        -
        -
        diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache deleted file mode 100644 index 485fbc57..00000000 --- a/docs/templates/pages/examples.mustache +++ /dev/null @@ -1,31 +0,0 @@ - -
        -

        {{_i}}Bootstrap examples{{/i}}

        -

        {{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

        -
        - - -
          -
        • - - - -

          {{_i}}Basic marketing site{{/i}}

          -

          {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

          -
          • -
        • - - - -

          {{_i}}Fluid layout{{/i}}

          -

          {{_i}}Uses our new responsive, fluid grid system to create seamless liquid layout.{{/i}}

          -
          • -
        • - - - -

          {{_i}}Starter template{{/i}}

          -

          {{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}

          -
          • -
        diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache new file mode 100644 index 00000000..c1976427 --- /dev/null +++ b/docs/templates/pages/extend.mustache @@ -0,0 +1,169 @@ + +
        +
        +

        {{_i}}Extending Bootstrap{{/i}}

        +

        {{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}

        +
        +
        + +
        + + +
        +
        + +
        +
        + + + + +
        +
        +

        {{_i}}Built with LESS{{/i}}

        +
        + + LESS CSS +

        {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

        + +

        {{_i}}Why LESS?{{/i}}

        +

        {{_i}}One of Bootstrap's creators wrote a quick blog post about this, summarized here:{{/i}}

        +
          +
        • {{_i}}Bootstrap compiles faster ~6x faster with Less compared to Sass{{/i}}
          • +
        • {{_i}}Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.{{/i}}
          • +
        • {{_i}}Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.{{/i}}
          • +
        + +

        {{_i}}What's included?{{/i}}

        +

        {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

        + +

        {{_i}}Learn more{{/i}}

        +

        {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}Compiling Bootstrap with Less{{/i}}

        +
        + +

        {{_i}}Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.{{/i}}

        + +
        + {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} +
        + +

        {{_i}}Tools for compiling{{/i}}

        + +

        {{_i}}Node with makefile{{/i}}

        +

        {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

        + 
        $ npm install -g less jshint recess uglify-js
        +

        {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

        +

        {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

        + +

        {{_i}}Command line{{/i}}

        +

        {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

        + 
        $ lessc ./less/bootstrap.less > bootstrap.css
        +

        {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

        + +

        {{_i}}JavaScript{{/i}}

        +

        {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

        +
        +<link rel="stylesheet/less" href="/path/to/bootstrap.less">
+<script src="/path/to/less.js"></script>
+
        +

        {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

        + +

        {{_i}}Unofficial Mac app{{/i}}

        +

        {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

        + +

        {{_i}}More apps{{/i}}

        +

        Crunch

        +

        {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

        +

        CodeKit

        +

        {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

        +

        Simpless

        +

        {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

        + +
        + + + + +
        +
        +

        {{_i}}Use as static assets{{/i}}

        +
        +

        {{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

        + +

        {{_i}}Setup file structure{{/i}}

        +

        {{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

        +
        +   app/
+       layouts/
+       templates/
+   public/
+       css/
+           bootstrap.min.css
+       js/
+           bootstrap.min.js
+       img/
+           glyphicons-halflings.png
+           glyphicons-halflings-white.png
+
        + +

        {{_i}}Utilize starter template{{/i}}

        +

        {{_i}}Copy the following base HTML to get started.{{/i}}

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <!-- Bootstrap -->
+    <script src="public/js/bootstrap.min.js"></script>
+  </body>
+</html>
+
        + +

        {{_i}}Layer on custom code{{/i}}

        +

        {{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <!-- Bootstrap -->
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <script src="public/js/application.js"></script>
+  </body>
+</html>
+
        + +
        + +
        {{! /span9 }} +
        {{! row}} + +
        {{! /.container }} diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache new file mode 100644 index 00000000..2eec7ff7 --- /dev/null +++ b/docs/templates/pages/getting-started.mustache @@ -0,0 +1,247 @@ + +
        +
        +

        {{_i}}Getting started{{/i}}

        +

        {{_i}}Overview of the project, its contents, and how to get started with a simple template.{{/i}}

        +
        +
        + + +
        + + +
        +
        + +
        +
        + + + + +
        +
        +

        {{_i}}1. Download{{/i}}

        +
        +

        {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}

        + +
        +
        +

        {{_i}}Download compiled{{/i}}

        +

        {{_i}}Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}

        +

        {{_i}}Download Bootstrap{{/i}}

        +
        +
        +

        Download source

        +

        Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.

        +

        {{_i}}Download Bootstrap source{{/i}}

        +
        +
        +
        + + + + +
        +
        +

        {{_i}}2. File structure{{/i}}

        +
        +

        {{_i}}Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.{{/i}}

        +

        {{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}

        +
        +  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
        +

        {{_i}}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 (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

        +

        {{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}3. What's included{{/i}}

        +
        +

        {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

        + +

        {{_i}}Docs sections{{/i}}

        +

        {{_i}}Scaffolding{{/i}}

        +

        {{_i}}Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.{{/i}}

        +

        {{_i}}Base CSS{{/i}}

        +

        {{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.{{/i}}

        +

        {{_i}}Components{{/i}}

        +

        {{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}

        +

        {{_i}}JavaScript plugins{{/i}}

        +

        {{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}

        + +

        {{_i}}List of components{{/i}}

        +

        {{_i}}Together, the Components and JavaScript plugins sections provide the following interface elements:{{/i}}

        +
          +
        • {{_i}}Button groups{{/i}}
          • +
        • {{_i}}Button dropdowns{{/i}}
          • +
        • {{_i}}Navigational tabs, pills, and lists{{/i}}
          • +
        • {{_i}}Navbar{{/i}}
          • +
        • {{_i}}Labels{{/i}}
          • +
        • {{_i}}Badges{{/i}}
          • +
        • {{_i}}Page headers and hero unit{{/i}}
          • +
        • {{_i}}Thumbnails{{/i}}
          • +
        • {{_i}}Alerts{{/i}}
          • +
        • {{_i}}Progress bars{{/i}}
          • +
        • {{_i}}Modals{{/i}}
          • +
        • {{_i}}Dropdowns{{/i}}
          • +
        • {{_i}}Tooltips{{/i}}
          • +
        • {{_i}}Popovers{{/i}}
          • +
        • {{_i}}Accordion{{/i}}
          • +
        • {{_i}}Carousel{{/i}}
          • +
        • {{_i}}Typeahead{{/i}}
          • +
        +

        {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}4. Basic HTML template{{/i}}

        +
        +

        {{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

        +

        {{_i}}Now, here's a look at a typical HTML file:{{/i}}

        +
        +<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+  </body>
+</html>
+
        +

        {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

        +
        +<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</html>
+
        +

        {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}5. Examples{{/i}}

        +
        +

        {{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

        +
          +
        • + + + +

          {{_i}}Starter template{{/i}}

          +

          {{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}

          +
          • +
        • + + + +

          {{_i}}Basic marketing site{{/i}}

          +

          {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

          +
          • +
        • + + + +

          {{_i}}Fluid layout{{/i}}

          +

          {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}

          +
          • + +
        • + + + +

          {{_i}}Narrow marketing{{/i}}

          +

          {{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}

          +
          • +
        • + + + +

          {{_i}}Sign in{{/i}}

          +

          {{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}

          +
          • +
        • + + + +

          {{_i}}Sticky footer{{/i}}

          +

          {{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}

          +
          • + +
        • + + + +

          {{_i}}Carousel jumbotron{{/i}}

          +

          {{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}

          +
          • +
        +
        + + + + + +
        +
        +

        {{_i}}What next?{{/i}}

        +
        +

        {{_i}}Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.{{/i}}

        + {{_i}}Visit the Bootstrap docs{{/i}} + {{_i}}Customize Bootstrap{{/i}} +
        + + + + +
        {{! /span9 }} +
        {{! row}} + +
        {{! /.container }} diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index c95e8536..c4678449 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -1,135 +1,100 @@ - -
        -
        -

        {{_i}}Bootstrap, from Twitter{{/i}}

        -

        {{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}

        -

        - {{_i}}View project on GitHub{{/i}} - {{_i}}Download Bootstrap{{/i}} +

        +
        +

        {{_i}}Bootstrap{{/i}}

        +

        {{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}

        +

        + {{_i}}Download Bootstrap{{/i}}

        +
        +
        - -
        +
        +
        + +
        +
        -
        +
        -
        -

        {{_i}}Designed for everyone, everywhere.{{/i}}

        -

        {{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

        -
        -
        - -

        {{_i}}Built for and by nerds{{/i}}

        -

        {{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}

        -
        -
        - -

        {{_i}}For all skill levels{{/i}}

        -

        {{_i}}Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

        -
        -
        - -

        {{_i}}Cross-everything{{/i}}

        -

        {{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

        -
        -
        -
        -
        - -

        {{_i}}12-column grid{{/i}}

        -

        {{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

        -
        -
        - -

        {{_i}}Responsive design{{/i}}

        -

        {{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

        -
        -
        - -

        {{_i}}Styleguide docs{{/i}}

        -

        {{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

        -
        -
        -
        -
        - -

        {{_i}}Growing library{{/i}}

        -

        {{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

        -
        -
        - -

        {{_i}}Custom jQuery plugins{{/i}}

        -

        {{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

        -
        -
        - -

        {{_i}}Built on LESS{{/i}}

        -

        {{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

        -
        -
        -
        -
        - -

        HTML5

        -

        {{_i}}Built to support new HTML5 elements and syntax.{{/i}}

        -
        -
        - -

        CSS3

        -

        {{_i}}Progressively enhanced components for ultimate style.{{/i}}

        -
        -
        - -

        {{_i}}Open-source{{/i}}

        -

        {{_i}}Built for and maintained by the community via GitHub.{{/i}}

        -
        -
        - -

        {{_i}}Made at Twitter{{/i}}

        -

        {{_i}}Brought to you by an experienced engineer and designer.{{/i}}

        +
        + +

        {{_i}}Introducing Bootstrap.{{/i}}

        +

        {{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

        + +
        +
        + +

        {{_i}}By nerds, for nerds.{{/i}}

        +

        {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

        +
        +
        + +

        {{_i}}Made for everyone.{{/i}}

        +

        {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

        +
        +
        + +

        {{_i}}Packed with features.{{/i}}

        +

        {{_i}}A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

        +
        -
        -
        +
        + +

        {{_i}}Built with Bootstrap.{{/i}}

        +

        {{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

        +
        + +
        -

        {{_i}}Built with Bootstrap.{{/i}}

        -

        {{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

        - +
        {{! /.marketing }} -
        \ No newline at end of file +
        {{! /.container }} diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index ac989f3e..2fb2020c 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,180 +1,227 @@ - -
        -

        {{_i}}Javascript for Bootstrap{{/i}}

        -

        {{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}} -

        -
          -
        • {{_i}}All plugins{{/i}}
          • -
        • {{_i}}Modal{{/i}}
          • -
        • {{_i}}Dropdown{{/i}}
          • -
        • {{_i}}Scrollspy{{/i}}
          • -
        • {{_i}}Tab{{/i}}
          • -
        • {{_i}}Tooltip{{/i}}
          • -
        • {{_i}}Popover{{/i}}
          • -
        • {{_i}}Alert{{/i}}
          • -
        • {{_i}}Button{{/i}}
          • -
        • {{_i}}Collapse{{/i}}
          • -
        • {{_i}}Carousel{{/i}}
          • -
        • {{_i}}Typeahead{{/i}}
          • + +
          +
          +

          {{_i}}JavaScript{{/i}}

          +

          {{_i}}Bring Bootstrap's components to life—now with 13 custom jQuery plugins.{{/i}} +

          +
          + +
          + + +
          +
          + +
          +
          + + + +
          +
          +

          {{_i}}JavaScript in Bootstrap{{/i}}

          +
          + +

          {{_i}}Individual or compiled{{/i}}

          +

          {{_i}}Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.{{/i}}

          + +

          {{_i}}Data attributes{{/i}}

          +

          {{_i}}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.{{/i}}

          + +

          {{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}} + 

          $('body').off('.data-api')
          + +

          {{_i}}Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:{{/i}}

          + 
          $('body').off('.alert.data-api')
          + +

          {{_i}}Programmatic API{{/i}}

          +

          {{_i}}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.{{/i}}

          + 
          $(".btn.danger").button("toggle").addClass("fat")
          +

          {{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}

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

          {{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').{{/i}}

          + +

          {{_i}}No Conflict{{/i}}

          +

          {{_i}}Sometimes it's neccessary to use bootstrap plugins with other ui frameworks. In these circumstances, occasionally namespace collisions can occur. If this happens, you may call .noCoflict on the plugin you wish to revert the value of.{{/i}}

          + +
          +var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+
          + +

          {{_i}}Events{{/i}}

          +

          {{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.{{/i}}

          +

          {{_i}}All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.{{/i}}

          +
          +$('#myModal').on('show', function (e) {
+    if (!data) return e.preventDefault() // stops modal from being shown
+})
+
          +
          + + + + +
          +
          +

          {{_i}}Transitions{{/i}} bootstrap-transition.js

          +
          +

          {{_i}}About transitions{{/i}}

          +

          {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

          +

          {{_i}}Use cases{{/i}}

          +

          {{_i}}A few examples of the transition plugin:{{/i}}

          +
            +
          • {{_i}}Sliding or fading in modals{{/i}}
            • +
          • {{_i}}Fading out tabs{{/i}}
            • +
          • {{_i}}Fading out alerts{{/i}}
            • +
          • {{_i}}Sliding carousel panes{{/i}}
          -
          -
        + + {{! Ideas: include docs for .fade.in, .slide.in, etc }} + - -
        -
        -

        {{_i}}jQuery plugins{{/i}} {{_i}}A dozen Bootstrap plugins to get you started{{/i}}

        -
        -
        -
        - -
        -
        - -
        -
        - -
        -
        - -
        -
        -
        -
        - -
        -
        - -
        -
        - -
        -
        - -
        -
        -
        -
        - -
        -
        - -
        -
        - -
        -
        - -
        -
        -
        {{_i}}Heads up!{{/i}} {{_i}}All javascript plugins require the latest version of jQuery.{{/i}}
        -
        + +
        +
        +

        {{_i}}Modals{{/i}} bootstrap-modal.js

        +
        - -
        -
        -

        {{_i}}Modals{{/i}} bootstrap-modal.js

        -
        -
        -
        -

        {{_i}}About modals{{/i}}

        -

        {{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Static example{{/i}}

        -

        {{_i}}Below is a statically rendered modal.{{/i}}

        -
        -
        +

        {{_i}}Examples{{/i}}

        +

        {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

        + +

        {{_i}}Static example{{/i}}

        +

        {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

        +
        +
        - × +

        {{_i}}Modal header{{/i}}

        -

        {{_i}}One fine body…{{/i}}

        +

        {{_i}}One fine body…{{/i}}

        - {{_i}}Save changes{{/i}} {{_i}}Close{{/i}} + {{_i}}Save changes{{/i}}
        -
        +
        {{! /example }} +
        +<div class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>{{_i}}Modal header{{/i}}</h3>
+  </div>
+  <div class="modal-body">
+    <p>{{_i}}One fine body…{{/i}}</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn">{{_i}}Close{{/i}}</a>
+    <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
+  </div>
+</div>
+
        -

        {{_i}}Live demo{{/i}}

        -

        {{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

        +

        {{_i}}Live demo{{/i}}

        +

        {{_i}}Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

        - -
        -
        +}) + +
        - - +

        $().dropdown('toggle')

        +

        {{_i}}A programmatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}

        + - -
        -
        -

        {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

        -
        -
        -
        -

        {{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Example navbar with scrollspy{{/i}}

        -

        {{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}

        - -
        + +

        {{_i}}Events{{/i}}

        + + + + + + + + + + + + + +
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}activate{{/i}}{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}
        + - -
        -
        -

        {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

        -
        -
        -
        -

        {{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        + +
        +
        +

        {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

        +
        + +

        {{_i}}Example tabs{{/i}}

        -

        {{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}

        - -
        -
        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -
        -
        -

        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

        -
        - - {{! /example }} + + +
        + + +

        {{_i}}Usage{{/i}}

        +

        {{_i}}Enable tabbable tabs via JavaScript (each tab needs to be activated individually):{{/i}}

        +
        +$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})
        +

        {{_i}}You can activate individual tabs in several ways:{{/i}}

        +
        +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+
        +

        {{_i}}Markup{{/i}}

        -

        {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}

        +

        {{_i}}You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.{{/i}}

         <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -560,13 +631,14 @@ $('#myModal').on('hidden', function () {
   <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
   <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 </ul>
        +

        {{_i}}Methods{{/i}}

        $().tab

        - {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}} + {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} 

        -<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
   <li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
   <li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
@@ -582,9 +654,11 @@ $('#myModal').on('hidden', function () {
 
 <script>
   $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show');
   })
-</script>
        +</script> + +

        {{_i}}Events{{/i}}

        @@ -604,41 +678,51 @@ $('#myModal').on('hidden', function () {
        - - 
        +
         $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
-})
        
-
        -
        -
        +}) + + - -
        -
        -

        {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

        -
        -
        -
        -

        {{_i}}About Tooltips{{/i}}

        -

        {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Example use of Tooltips{{/i}}

        + +
        +
        +

        {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

        +
        + + +

        {{_i}}Examples{{/i}}

        +

        {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

        {{_i}}Hover over the links below to see tooltips:{{/i}}

        -
        -

        {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} +

        +

        {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}}

        -
        -
        -

        {{_i}}Using{{/i}} bootstrap-tooltip.js

        -

        {{_i}}Trigger the tooltip via javascript:{{/i}}

        +
        {{! /example }} + +

        {{_i}}Four directions{{/i}}

        +
        + +
        {{! /example }} + + +
        + + +

        {{_i}}Usage{{/i}}

        +

        {{_i}}Trigger the tooltip via JavaScript:{{/i}}

        $('#example').tooltip({{_i}}options{{/i}})
        +

        {{_i}}Options{{/i}}

        +

        {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

        @@ -655,6 +739,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) { + + + + + + @@ -677,14 +767,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) { - + @@ -695,540 +785,602 @@ $('a[data-toggle="tab"]').on('shown', function (e) { {{_i}}Heads up!{{/i}} {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}} +

        {{_i}}Markup{{/i}}

        {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

        -
        -<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
-
        + 
        <a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
        +

        {{_i}}Methods{{/i}}

        $().tooltip({{_i}}options{{/i}})

        {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

        .tooltip('show')

        -

        {{_i}}Reveals an elements tooltip.{{/i}}

        +

        {{_i}}Reveals an element's tooltip.{{/i}}

        $('#element').tooltip('show')

        .tooltip('hide')

        -

        {{_i}}Hides an elements tooltip.{{/i}}

        +

        {{_i}}Hides an element's tooltip.{{/i}}

        $('#element').tooltip('hide')

        .tooltip('toggle')

        -

        {{_i}}Toggles an elements tooltip.{{/i}}

        +

        {{_i}}Toggles an element's tooltip.{{/i}}

        $('#element').tooltip('toggle')
        - - - +

        .tooltip('destroy')

        +

        {{_i}}Hides and destroys an element's tooltip.{{/i}}

        + 
        $('#element').tooltip('destroy')
        + - -
        -
        -

        {{_i}}Popovers{{/i}} bootstrap-popover.js

        -
        -
        -
        -

        {{_i}}About popovers{{/i}}

        -

        {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}

        -

        * {{_i}}Requires Tooltip to be included{{/i}}

        - {{_i}}Download file{{/i}} + +
        +
        +

        {{_i}}Popovers{{/i}} bootstrap-popover.js

        -
        -

        {{_i}}Example hover popover{{/i}}

        -

        {{_i}}Hover over the button to trigger the popover.{{/i}}

        -
        - {{_i}}hover for popover{{/i}} + +

        {{_i}}Examples{{/i}}

        +

        {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

        + +

        {{_i}}Static popover{{/i}}

        +

        {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

        +
        +
        +
        +

        Popover top

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        -
        -

        {{_i}}Using bootstrap-popover.js{{/i}}

        -

        {{_i}}Enable popovers via javascript:{{/i}}

        - 
        $('#example').popover({{_i}}options{{/i}})
        -

        {{_i}}Options{{/i}}

        -
        true {{_i}}apply a css fade transition to the tooltip{{/i}}
        {{_i}}html{{/i}}{{_i}}boolean{{/i}}false{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
        {{_i}}placement{{/i}} {{_i}}string|function{{/i}}{{_i}}trigger{{/i}} {{_i}}string{{/i}} 'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual
        {{_i}}delay{{/i}} {{_i}}number | object{{/i}} 0 -

        {{_i}}delay showing and hiding the tooltip (ms){{/i}}

        +

        {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

        {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

        {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
        {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
        {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
        {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
        {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual
        {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
        {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
        {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

        {{_i}}delay showing and hiding the popover (ms){{/i}}

        -

        {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

        -

        {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

        -
        -
        - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} + +
        +
        +

        Popover right

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        -

        {{_i}}Markup{{/i}}

        -

        - {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}} -

        -

        {{_i}}Methods{{/i}}

        -

        $().popover({{_i}}options{{/i}})

        -

        {{_i}}Initializes popovers for an element collection.{{/i}}

        -

        .popover('show')

        -

        {{_i}}Reveals an elements popover.{{/i}}

        - 
        $('#element').popover('show')
        -

        .popover('hide')

        -

        {{_i}}Hides an elements popover.{{/i}}

        - 
        $('#element').popover('hide')
        -

        .popover('toggle')

        -

        {{_i}}Toggles an elements popover.{{/i}}

        - 
        $('#element').popover('toggle')
        + +
        +
        +

        Popover bottom

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        +
        + +
        +
        +

        Popover left

        +
        +

        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

        +
        +
        + +
        -
        -
        +

        {{_i}}No markup shown as popovers are generated from JavaScript and content within a data attribute.{{/i}}

        +

        Live demo

        +
        + {{_i}}Click to toggle popover{{/i}} +
        +

        {{_i}}Four directions{{/i}}

        +
        + +
        {{! /example }} - -
        -
        -

        {{_i}}Alert messages{{/i}} bootstrap-alert.js

        -
        -
        -
        -

        {{_i}}About alerts{{/i}}

        -

        {{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}

        - {{_i}}Download{{/i}} + +
        + + +

        {{_i}}Usage{{/i}}

        +

        {{_i}}Enable popovers via JavaScript:{{/i}}

        + 
        $('#example').popover({{_i}}options{{/i}})
        + +

        {{_i}}Options{{/i}}

        +

        {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
        {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
        {{_i}}html{{/i}}{{_i}}boolean{{/i}}false{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
        {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
        {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
        {{_i}}trigger{{/i}}{{_i}}string{{/i}}'click'{{_i}}how popover is triggered{{/i}} - click | hover | focus | manual
        {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
        {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
        {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

        {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

        +

        {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

        +

        {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

        +
        +
        + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} +
        + +

        {{_i}}Markup{{/i}}

        +

        {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

        + +

        {{_i}}Methods{{/i}}

        +

        $().popover({{_i}}options{{/i}})

        +

        {{_i}}Initializes popovers for an element collection.{{/i}}

        +

        .popover('show')

        +

        {{_i}}Reveals an elements popover.{{/i}}

        + 
        $('#element').popover('show')
        +

        .popover('hide')

        +

        {{_i}}Hides an elements popover.{{/i}}

        + 
        $('#element').popover('hide')
        +

        .popover('toggle')

        +

        {{_i}}Toggles an elements popover.{{/i}}

        + 
        $('#element').popover('toggle')
        +

        .popover('destroy')

        +

        {{_i}}Hides and destroys an element's popover.{{/i}}

        + 
        $('#element').popover('destroy')
        +
        + + + + +
        +
        +

        {{_i}}Alert messages{{/i}} bootstrap-alert.js

        -
        -

        {{_i}}Example alerts{{/i}}

        -

        {{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}

        + + +

        {{_i}}Example alerts{{/i}}

        +

        {{_i}}Add dismiss functionality to all alert messages with this plugin.{{/i}}

        +
        - × + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
        +
        {{! /example }} + +
        - × +

        {{_i}}Oh snap! You got an error!{{/i}}

        {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

        {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}

        -
        -

        {{_i}}Using bootstrap-alert.js{{/i}}

        -

        {{_i}}Enable dismissal of an alert via javascript:{{/i}}

        - 
        $(".alert").alert()
        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

        - 
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        -

        {{_i}}Methods{{/i}}

        -

        $().alert()

        -

        {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

        -

        .alert('close')

        -

        {{_i}}Closes an alert.{{/i}}

        - 
        $(".alert").alert('close')
        -

        {{_i}}Events{{/i}}

        -

        {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

        - - - - - - - - - - - - - - - - - -
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
        {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
        +
        {{! /example }} + + +
        + + +

        {{_i}}Usage{{/i}}

        +

        {{_i}}Enable dismissal of an alert via JavaScript:{{/i}}

        + 
        $(".alert").alert()
        + +

        {{_i}}Markup{{/i}}

        +

        {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

        + 
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        + +

        {{_i}}Methods{{/i}}

        +

        $().alert()

        +

        {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

        +

        .alert('close')

        +

        {{_i}}Closes an alert.{{/i}}

        + 
        $(".alert").alert('close')
        + + +

        {{_i}}Events{{/i}}

        +

        {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

        + + + + + + + + + + + + + + + + + +
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
        {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
         $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
-})
        -
        -
        - +}) + + - -
        -
        -

        {{_i}}Buttons{{/i}} bootstrap-button.js

        -
        -
        -
        -

        {{_i}}About{{/i}}

        -

        {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Example uses{{/i}}

        -

        {{_i}}Use the buttons plugin for states and toggles.{{/i}}

        - - - - - - - - - - - - - - - - - - - -
        {{_i}}Stateful{{/i}} - -
        {{_i}}Single toggle{{/i}} - -
        {{_i}}Checkbox{{/i}} -
        - - - -
        -
        {{_i}}Radio{{/i}} -
        - - - -
        -
        -
        -

        {{_i}}Using bootstrap-button.js{{/i}}

        -

        {{_i}}Enable buttons via javascript:{{/i}}

        - 
        $('.tabs').button()
        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

        -
        -<!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} -->
-<button class="btn" data-toggle="button">Single Toggle</button>
+          
+          
        
+            
        
+              
        {{_i}}Buttons{{/i}} bootstrap-button.js
        
+            
        
 
-<!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} -->
+            
        {{_i}}Example uses{{/i}}
        
+            
        {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}
        
+
+            
        {{_i}}Stateful{{/i}}
        
+            
        {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}
        
+            
        
+              
+            
        {{! /example }}
+            
        <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
        
+
+            
        {{_i}}Single toggle{{/i}}
        
+            
        {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}
        
+            
        
+              
+            
        {{! /example }}
+            
        <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
        
+
+            
        {{_i}}Checkbox{{/i}}
        
+            
        {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}
        
+            
        
+              
        
+                
+                
+                
+              
        
+            
        {{! /example }}
+
         <div class="btn-group" data-toggle="buttons-checkbox">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
+  <button type="button" class="btn btn-primary">Left</button>
+  <button type="button" class="btn btn-primary">Middle</button>
+  <button type="button" class="btn btn-primary">Right</button>
 </div>
+
        
 
-<!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} -->
+            
        {{_i}}Radio{{/i}}
        
+            
        {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}
        
+            
        
+              
        
+                
+                
+                
+              
        
+            
        {{! /example }}
+
         <div class="btn-group" data-toggle="buttons-radio">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
+  <button type="button" class="btn btn-primary">Left</button>
+  <button type="button" class="btn btn-primary">Middle</button>
+  <button type="button" class="btn btn-primary">Right</button>
 </div>
 
        
-          
        {{_i}}Methods{{/i}}
        
-          
        $().button('toggle')
        
-          
        {{_i}}Toggles push state. Gives btn the look that it hass been activated.{{/i}}
        
-          
        
-            {{_i}}Heads up!{{/i}}
-            {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
-          
        
-          
        <button class="btn" data-toggle="button" >…</button>
        
-          
        $().button('loading')
        
-          
        {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}}
-          
        
-          
        <button class="btn" data-loading-text="loading stuff..." >...</button>
        
-          
        
-            {{_i}}Heads up!{{/i}}
-            {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}}
-          
        
-          
        $().button('reset')
        
-          
        {{_i}}Resets button state - swaps text to original text.{{/i}}
        
-          
        $().button(string)
        
-          
        {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}
        
-
        <button class="btn" data-complete-text="finished!" >...</button>
+
+
+            
        
+
+
+            
        {{_i}}Usage{{/i}}
        
+            
        {{_i}}Enable buttons via JavaScript:{{/i}}
        
+            
        $('.nav-tabs').button()
        
+
+            
        {{_i}}Markup{{/i}}
        
+            
        {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}
        
+
+            
        {{_i}}Options{{/i}}
        
+            
        {{_i}}None{{/i}}
        
+
+            
        {{_i}}Methods{{/i}}
        
+            
        $().button('toggle')
        
+            
        {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}
        
+            
        
+              {{_i}}Heads up!{{/i}}
+              {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
+            
        
+            
        <button type="button" class="btn" data-toggle="button" >…</button>
        
+            
        $().button('loading')
        
+            
        {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}}
+            
        
+            
        <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
        
+            
        
+              {{_i}}Heads up!{{/i}}
+              {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}}
+            
        
+            
        $().button('reset')
        
+            
        {{_i}}Resets button state - swaps text to original text.{{/i}}
        
+            
        $().button(string)
        
+            
        {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}
        
+
        <button type="button" class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
-</script>
        
-
        -
        -
        +</script> + + - -
        -
        -

        {{_i}}Collapse{{/i}} bootstrap-collapse.js

        -
        -
        -
        -

        {{_i}}About{{/i}}

        -

        {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Example accordion{{/i}}

        -

        {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

        - -
        -
        -
        - - {{_i}}Collapsible Group Item #1{{/i}} - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
        -
        + +
        +
        +

        {{_i}}Collapse{{/i}} bootstrap-collapse.js

        -
        -
        - - {{_i}}Collapsible Group Item #2{{/i}} - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + +

        {{_i}}About{{/i}}

        +

        {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

        +

        * {{_i}}Requires the Transitions plugin to be included.{{/i}}

        + +

        {{_i}}Example accordion{{/i}}

        +

        {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

        + +
        +
        +
        +
        + + {{_i}}Collapsible Group Item #1{{/i}} + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        -
        -
        -
        -
        - - {{_i}}Collapsible Group Item #3{{/i}} - -
        -
        -
        - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        + + {{_i}}Collapsible Group Item #2{{/i}} + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        +
        +
        +
        + + {{_i}}Collapsible Group Item #3{{/i}} + +
        +
        +
        + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
        +
        -
        -
        - - -
        -

        {{_i}}Using bootstrap-collapse.js{{/i}}

        -

        {{_i}}Enable via javascript:{{/i}}

        - 
        $(".collapse").collapse()
        -

        {{_i}}Options{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
        {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
        {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

        - 
        -<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+
        {{! /example }} +
        +<div class="accordion" id="accordion2">
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+        {{_i}}Collapsible Group Item #1{{/i}}
+      </a>
+    </div>
+    <div id="collapseOne" class="accordion-body collapse in">
+      <div class="accordion-inner">
+        Anim pariatur cliche...
+      </div>
+    </div>
+  </div>
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+        {{_i}}Collapsible Group Item #2{{/i}}
+      </a>
+    </div>
+    <div id="collapseTwo" class="accordion-body collapse">
+      <div class="accordion-inner">
+        Anim pariatur cliche...
+      </div>
+    </div>
+  </div>
+</div>
+...
+
        +

        {{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}

        +
        +<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   {{_i}}simple collapsible{{/i}}
 </button>
 
-<div id="demo" class="collapse in"> … </div>
        -
        - {{_i}}Heads up!{{/i}} - {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}} -
        -

        {{_i}}Methods{{/i}}

        -

        .collapse({{_i}}options{{/i}})

        -

        {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} +<div id="demo" class="collapse in"> … </div> + + + +

        + + +

        {{_i}}Usage{{/i}}

        + +

        {{_i}}Via data attributes{{/i}}

        +

        {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

        +

        {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

        + +

        {{_i}}Via JavaScript{{/i}}

        +

        {{_i}}Enable manually with:{{/i}}

        + 
        $(".collapse").collapse()
        + +

        {{_i}}Options{{/i}}

        +

        {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
        {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
        {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
        + + +

        {{_i}}Methods{{/i}}

        +

        .collapse({{_i}}options{{/i}})

        +

        {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} 

         $('#myCollapsible').collapse({
   toggle: false
-})
        -

        .collapse('toggle')

        -

        {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

        -

        .collapse('show')

        -

        {{_i}}Shows a collapsible element.{{/i}}

        -

        .collapse('hide')

        -

        {{_i}}Hides a collapsible element.{{/i}}

        -

        {{_i}}Events{{/i}}

        -

        - {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}} -

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
        {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
        {{_i}}hide{{/i}} - {{_i}}This event is fired immediately when the hide method has been called.{{/i}} -
        {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
        +}) + +

        .collapse('toggle')

        +

        {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

        +

        .collapse('show')

        +

        {{_i}}Shows a collapsible element.{{/i}}

        +

        .collapse('hide')

        +

        {{_i}}Hides a collapsible element.{{/i}}

        +

        {{_i}}Events{{/i}}

        +

        {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
        {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
        {{_i}}hide{{/i}} + {{_i}}This event is fired immediately when the hide method has been called.{{/i}} +
        {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
         $('#myCollapsible').on('hidden', function () {
   // {{_i}}do something…{{/i}}
 })
        -
        -
        -
        +
        - - +

        .carousel('cycle')

        +

        {{_i}}Cycles through the carousel items from left to right.{{/i}}

        +

        .carousel('pause')

        +

        {{_i}}Stops the carousel from cycling through items.{{/i}}

        +

        .carousel(number)

        +

        {{_i}}Cycles the carousel to a particular frame (0 based, similar to an array).{{/i}}

        +

        .carousel('prev')

        +

        {{_i}}Cycles to the previous item.{{/i}}

        +

        .carousel('next')

        +

        {{_i}}Cycles to the next item.{{/i}}

        +

        {{_i}}Events{{/i}}

        +

        {{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}

        + + + + + + + + + + + + + + + + + +
        {{_i}}Event{{/i}}{{_i}}Description{{/i}}
        {{_i}}slide{{/i}}{{_i}}This event fires immediately when the slide instance method is invoked.{{/i}}
        {{_i}}slid{{/i}}{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}
        + - -
        -
        -

        {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

        -
        -
        -
        -

        {{_i}}About{{/i}}

        -

        {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

        - {{_i}}Download file{{/i}} -
        -
        -

        {{_i}}Example{{/i}}

        -

        {{_i}}Start typing in the field below to show the typeahead results.{{/i}}

        -
        - -
        -
        -

        {{_i}}Using bootstrap-typeahead.js{{/i}}

        -

        {{_i}}Call the typeahead via javascript:{{/i}}

        - 
        $('.typeahead').typeahead()
        + + +
        +
        +

        {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

        +
        + + +

        {{_i}}Example{{/i}}

        +

        {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

        +
        + +
        {{! /example }} + 
        <input type="text" data-provide="typeahead">
        + + +
        + + +

        {{_i}}Usage{{/i}}

        + +

        {{_i}}Via data attributes{{/i}}

        +

        {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

        + +

        {{_i}}Via JavaScript{{/i}}

        +

        {{_i}}Call the typeahead manually with:{{/i}}

        + 
        $('.typeahead').typeahead()
        + +

        {{_i}}Options{{/i}}

        +

        {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
        {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
        {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
        {{_i}}minLength{{/i}}{{_i}}number{{/i}}{{_i}}1{{/i}}{{_i}}The minimum character length needed before triggering autocomplete suggestions{{/i}}
        {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
        {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
        case sensitive,
        case insensitive{{/i}}        		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
        {{_i}}updater{{/i}}{{_i}}function{{/i}}{{_i}}returns selected item{{/i}}{{_i}}The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.{{/i}}
        {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
        + +

        {{_i}}Methods{{/i}}

        +

        .typeahead({{_i}}options{{/i}})

        +

        {{_i}}Initializes an input with a typeahead.{{/i}}

        +
        + + + + +
        +
        +

        {{_i}}Affix{{/i}} bootstrap-affix.js

        +
        + +

        {{_i}}Example{{/i}}

        +

        {{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}

        + +
        + +

        {{_i}}Usage{{/i}}

        + +

        {{_i}}Via data attributes{{/i}}

        +

        {{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.{{/i}}

        + + 
        <div data-spy="affix" data-offset-top="200">...</div>
        + +
        + {{_i}}Heads up!{{/i}} + {{_i}}You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.{{/i}} +
        + +

        {{_i}}Via JavaScript{{/i}}

        +

        {{_i}}Call the affix plugin via JavaScript:{{/i}}

        + 
        $('#navbar').affix()
        + +

        {{_i}}Methods{{/i}}

        +

        .affix('refresh')

        +

        {{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:{{/i}}

        +
        +$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
+

        {{_i}}Options{{/i}}

        +

        {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".{{/i}}

        - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
        {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}} {{_i}}description{{/i}}
        {{_i}}source{{/i}}{{_i}}array{{/i}}[ ]{{_i}}The data source to query against.{{/i}}
        {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
        {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
        {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
        case sensitive,
        case insensitive{{/i}}        		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
        {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}{{_i}}offset{{/i}}{{_i}}number | function | object{{/i}}{{_i}}10{{/i}}{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}
        +
        -

        {{_i}}Markup{{/i}}

        -

        {{_i}}Add data attributes to register an element with typeahead functionality.{{/i}}

        -
        -<input type="text" data-provide="typeahead">
-
        -

        {{_i}}Methods{{/i}}

        -

        .typeahead({{_i}}options{{/i}})

        -

        {{_i}}Initializes an input with a typeahead.{{/i}}

        -
        -
        -
        \ No newline at end of file + + + {{! /span9 }} + {{! row}} + + {{! /.container }} diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache deleted file mode 100644 index 742b166d..00000000 --- a/docs/templates/pages/less.mustache +++ /dev/null @@ -1,681 +0,0 @@ - -
        -

        {{_i}}Using LESS with Bootstrap{{/i}}

        -

        {{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

        -
        - -
        -
        - - - - -
        -
        -

        {{_i}}Built with LESS{{/i}}

        -
        -
        -
        -

        {{_i}}Why LESS?{{/i}}

        -

        {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

        -
        -
        -

        {{_i}}What's included?{{/i}}

        -

        {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

        -
        -
        -

        {{_i}}Learn more{{/i}}

        - LESS CSS -

        {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

        -
        -
        -
        -
        -

        {{_i}}Variables{{/i}}

        -

        {{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

        -
        -
        -

        {{_i}}Mixins{{/i}}

        -

        {{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

        -
        -
        -

        {{_i}}Operations{{/i}}

        -

        {{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}

        -
        -
        -
        - - - - -
        -
        -

        {{_i}}Bootstrap variables LESS variables, their values, and usage guidelines{{/i}}

        -
        - -
        -
        -

        {{_i}}Hyperlinks{{/i}}

        - - - - - - - - - - - - - - - -
        @linkColor#08c{{_i}}Default link text color{{/i}}
        @linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}
        -

        {{_i}}Grid system{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - -
        @gridColumns12
        @gridColumnWidth60px
        @gridGutterWidth20px
        @fluidGridColumnWidth6.382978723%
        @fluidGridGutterWidth2.127659574%
        -

        {{_i}}Typography{{/i}}

        - - - - - - - - - - - - - - - -
        @baseFontSize13px
        @baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
        @baseLineHeight18px
        -
        -
        -

        {{_i}}Grayscale colors{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @black#000
        @grayDarker#222
        @grayDark#333
        @gray#555
        @grayLight#999
        @grayLighter#eee
        @white#fff
        -

        {{_i}}Accent colors{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @blue#049cdb
        @green#46a546
        @red#9d261d
        @yellow#ffc40d
        @orange#f89406
        @pink#c3325f
        @purple#7a43b6
        -
        -
        - -

        {{_i}}Components{{/i}}

        -
        -
        -

        {{_i}}Buttons{{/i}}

        - - - - - - - - -
        @primaryButtonBackground@linkColor
        -

        {{_i}}Forms{{/i}}

        - - - - - - - - -
        @placeholderText@grayLight
        -

        {{_i}}Navbar{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @navbarHeight40px
        @navbarBackground@grayDarker
        @navbarBackgroundHighlight@grayDark
        @navbarText@grayLight
        @navbarLinkColor@grayLight
        @navbarLinkColorHover@white
        -
        -
        -

        {{_i}}Form states and alerts{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @warningText#c09853
        @warningBackground#f3edd2
        @errorText#b94a48
        @errorBackground#f2dede
        @successText#468847
        @successBackground#dff0d8
        @infoText#3a87ad
        @infoBackground#d9edf7
        -
        -
        - -
        - - - - -
        -
        -

        {{_i}}Bootstrap mixins {{/i}}

        -
        -

        {{_i}}About mixins{{/i}}

        -
        -
        -

        {{_i}}Basic mixins{{/i}}

        -

        {{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}

        -
        -.element {
-  .clearfix();
-}
-
        -
        -
        -

        {{_i}}Parametric mixins{{/i}}

        -

        {{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}

        -
        -.element {
-  .border-radius(4px);
-}
-
        -
        -
        -

        {{_i}}Easily add your own{{/i}}

        -

        {{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}

        -

        {{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}

        -
        -
        -

        {{_i}}Included mixins{{/i}}

        -

        {{_i}}Utilities{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        .clearfix()none{{_i}}Add to any parent to clear floats within{{/i}}
        .tab-focus()none{{_i}}Apply the Webkit focus style and round Firefox outline{{/i}}
        .center-block()none{{_i}}Auto center a block-level element using margin: auto{{/i}}
        .ie7-inline-block()none{{_i}}Use in addition to regular display: inline-block to get IE7 support{{/i}}
        .size()@height: 5px, @width: 5px{{_i}}Quickly set the height and width on one line{{/i}}
        .square()@size: 5px{{_i}}Builds on .size() to set the width and height as same value{{/i}}
        .opacity()@opacity: 100{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}
        -

        Forms

        - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        .placeholder()@color: @placeholderText{{_i}}Set the placeholder text color for inputs{{/i}}
        -

        Typography

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        #font > #family > .serif()none{{_i}}Make an element use a serif font stack{{/i}}
        #font > #family > .sans-serif()none{{_i}}Make an element use a sans-serif font stack{{/i}}
        #font > #family > .monospace()none{{_i}}Make an element use a monospace font stack{{/i}}
        #font > .shorthand()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Easily set font size, weight, and leading{{/i}}
        #font > .serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}
        #font > .sans-serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}
        #font > .monospace()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}
        -

        Grid system

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        .container-fixed()none{{_i}}Provide a fixed-width (set with @siteWidth) container for holding your content{{/i}}
        .columns()@columns: 1{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}
        .offset()@columns: 1{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}
        .gridColumn()none{{_i}}Make an element float like a grid column{{/i}}
        -

        {{_i}}CSS3 properties{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        .border-radius()@radius: 5px{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
        .box-shadow()@shadow: 0 1px 3px rgba(0,0,0,.25){{_i}}Add a drop shadow to an element{{/i}}
        .transition()@transition{{_i}}Add CSS3 transition effect (e.g., all .2s linear){{/i}}
        .rotate()@degrees{{_i}}Rotate an element n degrees{{/i}}
        .scale()@ratio{{_i}}Scale an element to n times its original size{{/i}}
        .translate()@x: 0, @y: 0{{_i}}Move an element on the x and y planes{{/i}}
        .background-clip()@clip{{_i}}Crop the background of an element (useful for border-radius){{/i}}
        .background-size()@size{{_i}}Control the size of background images via CSS3{{/i}}
        .box-sizing()@boxmodel{{_i}}Change the box model for an element (e.g., border-box for a full-width input){{/i}}
        .user-select()@select{{_i}}Control cursor selection of text on a page{{/i}}
        .resizable()@direction: both{{_i}}Make any element resizable on the right and bottom{{/i}}
        .content-columns()@columnCount, @columnGap: @gridColumnGutter{{_i}}Make the content of any element use CSS3 columns{{/i}}
        -

        {{_i}}Backgrounds and gradients{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
        .#translucent > .background()@color: @white, @alpha: 1{{_i}}Give an element a translucent background color{{/i}}
        .#translucent > .border()@color: @white, @alpha: 1{{_i}}Give an element a translucent border color{{/i}}
        .#gradient > .vertical()@startColor, @endColor{{_i}}Create a cross-browser vertical background gradient{{/i}}
        .#gradient > .horizontal()@startColor, @endColor{{_i}}Create a cross-browser horizontal background gradient{{/i}}
        .#gradient > .directional()@startColor, @endColor, @deg{{_i}}Create a cross-browser directional background gradient{{/i}}
        .#gradient > .vertical-three-colors()@startColor, @midColor, @colorStop, @endColor{{_i}}Create a cross-browser three-color background gradient{{/i}}
        .#gradient > .radial()@innerColor, @outerColor{{_i}}Create a cross-browser radial background gradient{{/i}}
        .#gradient > .striped()@color, @angle{{_i}}Create a cross-browser striped background gradient{{/i}}
        .#gradientBar()@primaryColor, @secondaryColor{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}
        -
        - - - - -
        -
        -

        {{_i}}Compiling Bootstrap with LESS{{/i}}

        -
        -
        - {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} -
        -

        {{_i}}Tools for compiling{{/i}}

        -
        -
        -

        {{_i}}Node with makefile{{/i}}

        -

        {{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}

        - 
        $ npm install -g less
        -

        {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

        -

        {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

        -
        -
        -

        {{_i}}Command line{{/i}}

        -

        {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

        - 
        $ lessc ./lib/bootstrap.less > bootstrap.css
        -

        {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

        -
        -
        -

        {{_i}}Javascript{{/i}}

        -

        {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

        -
        -<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-
        -

        {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

        -
        -
        -
        -
        -

        {{_i}}Unofficial Mac app{{/i}}

        -

        {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

        -

        {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

        -
        -
        -

        {{_i}}More Mac apps{{/i}}

        -

        Crunch

        -

        {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

        -

        CodeKit

        -

        {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

        -

        Simpless

        -

        {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

        -
        -
        -
        diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 50c776e2..a6f2f9da 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,303 +1,292 @@ - -
        -

        {{_i}}Scaffolding{{/i}}

        -

        {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

        -
        -
        +

        {{_i}}These styles can be found within scaffolding.less.{{/i}}

        +

        {{_i}}Reset via Normalize{{/i}}

        +

        {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

        + - -
        -
        -

        {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        -
        -
        -

        {{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

        -

        {{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}

        -
        -
        + + + +
        +
        +

        {{_i}}Default grid system{{/i}}

        +
        + +

        {{_i}}Live grid example{{/i}}

        +

        {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        2
        +
        3
        +
        4
        +
        +
        +
        4
        +
        5
        +
        +
        +
        9
        +
        +
        + +

        {{_i}}Basic grid HTML{{/i}}

        +

        {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}

         <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -
        -
        -

        {{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}

        -
        -
        - -
        - -

        {{_i}}Offsetting columns{{/i}}

        -
        -
        4
        -
        4 offset 4
        -
        -
        -
        3 offset 3
        -
        3 offset 3
        -
        -
        -
        8 offset 4
        -
        +

        {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

        + +

        {{_i}}Offsetting columns{{/i}}

        +

        {{_i}}Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

        +
        +
        +
        4
        +
        3 offset 2
        +
        +
        +
        3 offset 1
        +
        3 offset 2
        +
        +
        +
        6 offset 3
        +
        + 
         <div class="row">
   <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
+  <div class="span3 offset2">...</div>
 </div>
        -
        - -

        {{_i}}Nesting columns{{/i}}

        -
        -
        -

        {{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}

        -

        {{_i}}Example{{/i}}

        -

        {{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.{{/i}}

        -
        -
        - {{_i}}Level 1 of column{{/i}} +

        {{_i}}Nesting columns{{/i}}

        +

        {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

        -
        - {{_i}}Level 2{{/i}} -
        -
        - {{_i}}Level 2{{/i}} +
        + {{_i}}Level 1 column{{/i}} +
        +
        + {{_i}}Level 2{{/i}} +
        +
        + {{_i}}Level 2{{/i}} +
        +
        -
        -
        -
        - 
         <div class="row">
-  <div class="span12">
-    {{_i}}Level 1 of column{{/i}}
+  <div class="span9">
+    {{_i}}Level 1 column{{/i}}
     <div class="row">
       <div class="span6">{{_i}}Level 2{{/i}}</div>
-      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span3">{{_i}}Level 2{{/i}}</div>
     </div>
   </div>
 </div>
        -
        -
        -
        + - -
        -
        -

        {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

        -
        + +
        +
        +

        {{_i}}Fluid grid system{{/i}}

        +
        -

        {{_i}}Fluid columns{{/i}}

        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        +

        {{_i}}Live fluid grid example{{/i}}

        +

        {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        4
        +
        4
        +
        4
        +
        +
        +
        4
        +
        8
        +
        +
        +
        6
        +
        6
        +
        +
        +
        12
        +
        +
        -
        -
        -

        {{_i}}Percents, not pixels{{/i}}

        -

        {{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

        -
        -
        -

        {{_i}}Fluid rows{{/i}}

        -

        {{_i}}Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}

        -
        -
        -

        {{_i}}Markup{{/i}}

        +

        {{_i}}Basic fluid grid HTML{{/i}}

        +

        {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

         <div class="row-fluid">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -
        -
        - -

        {{_i}}Fluid nesting{{/i}}

        -
        -
        -

        {{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}

        -
        -
        - {{_i}}Fluid 12{{/i}} + +

        {{_i}}Fluid offsetting{{/i}}

        +

        {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

        +
        +
        +
        4
        +
        4 offset 4
        +
        +
        +
        3 offset 3
        +
        3 offset 3
        +
        +
        +
        6 offset 6
        +
        +
        +
        +<div class="row-fluid">
+  <div class="span4">...</div>
+  <div class="span4 offset2">...</div>
+</div>
+
        + +

        {{_i}}Fluid nesting{{/i}}

        +

        {{_i}}Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.{{/i}}

        -
        - {{_i}}Fluid 6{{/i}} -
        -
        - {{_i}}Fluid 6{{/i}} +
        + {{_i}}Fluid 12{{/i}} +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        -
        -
        -
        - 
         <div class="row-fluid">
   <div class="span12">
-    {{_i}}Level 1 of column{{/i}}
+    {{_i}}Fluid 12{{/i}}
     <div class="row-fluid">
-      <div class="span6">{{_i}}Level 2{{/i}}</div>
-      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span6">
+        {{_i}}Fluid 6{{/i}}
+        <div class="row-fluid">
+          <div class="span6">{{_i}}Fluid 6{{/i}}</div>
+          <div class="span6">{{_i}}Fluid 6{{/i}}</div>
+        </div>
+      </div>
+      <div class="span6">{{_i}}Fluid 6{{/i}}</div>
     </div>
   </div>
 </div>
        -
        -
        -
        +
        - -
        -
        -

        {{_i}}Grid customization{{/i}}

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Variable{{/i}}{{_i}}Default value{{/i}}{{_i}}Description{{/i}}
        @gridColumns12{{_i}}Number of columns{{/i}}
        @gridColumnWidth60px{{_i}}Width of each column{{/i}}
        @gridGutterWidth20px{{_i}}Negative space between columns{{/i}}
        @siteWidth{{_i}}Computed sum of all columns and gutters{{/i}}{{_i}}Counts number of columns and gutters to set width of the .container-fixed() mixin{{/i}}
        -
        -
        -

        {{_i}}Variables in LESS{{/i}}

        -

        {{_i}}Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.{{/i}}

        -
        -
        -

        {{_i}}How to customize{{/i}}

        -

        {{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}

        -
        -
        -

        {{_i}}Staying responsive{{/i}}

        -

        {{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.{{/i}}

        -
        -
        - -
        - - - - -
        -
        -

        {{_i}}Layouts Basic templates to create webpages{{/i}}

        -
        -
        -
        -

        {{_i}}Fixed layout{{/i}}

        -

        {{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}

        -
        -
        -
        + +
        +
        +

        {{_i}}Layouts{{/i}}

        +
        + +

        {{_i}}Fixed layout{{/i}}

        +

        {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

        +
        +
        + 
         <body>
   <div class="container">
@@ -305,14 +294,13 @@
   </div>
 </body>
        -
        -
        -

        {{_i}}Fluid layout{{/i}}

        -

        {{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}

        -
        -
        -
        -
        + +

        {{_i}}Fluid layout{{/i}}

        +

        {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

        +
        +
        +
        + 
         <div class="container-fluid">
   <div class="row-fluid">
@@ -325,110 +313,173 @@
   </div>
 </div>
        -
        -
        -
        + - -
        -
        -

        {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

        -
        - -
        -
        - Responsive devices -
        -
        -

        {{_i}}Supported devices{{/i}}

        -

        {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
        {{_i}}Smartphones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Portrait tablets{{/i}}480px to 768px{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Landscape tablets{{/i}}768px to 979px42px20px
        {{_i}}Default{{/i}}980px and up60px20px
        {{_i}}Large display{{/i}}1210px and up70px30px
        - -

        {{_i}}Requires meta tag{{/i}}

        -

        {{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}

        - 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        - -

        {{_i}}What they do{{/i}}

        -

        {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

        -
          -
        • {{_i}}Modify the width of column in our grid{{/i}}
          • -
        • {{_i}}Stack elements instead of float wherever necessary{{/i}}
          • -
        • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
          • -
        -
        -
        + +
        +
        +

        {{_i}}Responsive design{{/i}}

        +
        -
        - - -

        {{_i}}Using the media queries{{/i}}

        -
        -
        -

        {{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}

        -
          -
        1. {{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}
          2. -
        2. {{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
          3. -
        3. {{_i}}Modify and recompile responsive.less as a separate file{{/i}}
          4. -
        -

        {{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}

        -
        -
        + {{! Enabling }} +

        {{_i}}Enabling responsive features{{/i}}

        +

        {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

        +
        +<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+
        +

        {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

        + + {{! About }} +

        {{_i}}About responsive Bootstrap{{/i}}

        + Responsive devices +

        {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

        +
          +
        • {{_i}}Modify the width of column in our grid{{/i}}
          • +
        • {{_i}}Stack elements instead of float wherever necessary{{/i}}
          • +
        • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
          • +
        +

        {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

        + + {{! Supported }} +

        {{_i}}Supported devices{{/i}}

        +

        {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
        {{_i}}Large display{{/i}}1200px and up70px30px
        {{_i}}Default{{/i}}980px and up60px20px
        {{_i}}Portrait tablets{{/i}}768px and above42px20px
        {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        -  // {{_i}}Landscape phones and down{{/i}}
-  @media (max-width: 480px) { ... }
+/* {{_i}}Large desktop{{/i}} */
+@media (min-width: 1200px) { ... }
 
-  // {{_i}}Landscape phone to portrait tablet{{/i}}
-  @media (max-width: 768px) { ... }
+/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
+@media (min-width: 768px) and (max-width: 979px) { ... }
 
-  // {{_i}}Portrait tablet to landscape and desktop{{/i}}
-  @media (min-width: 768px) and (max-width: 980px) { ... }
+/* {{_i}}Landscape phone to portrait tablet{{/i}} */
+@media (max-width: 767px) { ... }
 
-  // {{_i}}Large desktop{{/i}}
-  @media (min-width: 1200px) { .. }
+/* {{_i}}Landscape phones and down{{/i}} */
+@media (max-width: 480px) { ... }
        -
        -
        -
        + + + {{! Responsive utility classes }} +

        {{_i}}Responsive utility classes{{/i}}

        +

        {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
        .visible-phone{{_i}}Visible{{/i}}
        .visible-tablet{{_i}}Visible{{/i}}
        .visible-desktop{{_i}}Visible{{/i}}
        .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        + +

        {{_i}}When to use{{/i}}

        +

        {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.{{/i}}

        + +

        {{_i}}Responsive utilities test case{{/i}}

        +

        {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

        +

        {{_i}}Visible on...{{/i}}

        +

        {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

        +
          +
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • +
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • +
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • +
        +

        {{_i}}Hidden on...{{/i}}

        +

        {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

        +
          +
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • +
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • +
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • +
        + +
        + + + + {{! /span9 }} + {{! row}} + + {{! /.container }} diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache deleted file mode 100644 index 5a82e2dc..00000000 --- a/docs/templates/pages/upgrading.mustache +++ /dev/null @@ -1,194 +0,0 @@ - -
        -

        {{_i}}Upgrading to Bootstrap 2{{/i}}

        -

        {{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}

        -
        - - - - -
        -
        -

        {{_i}}Project changes{{/i}}

        -
        -
          -
        • {{_i}}Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.{{/i}}
          • -
        • {{_i}}Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).{{/i}}
          • -
        • {{_i}}Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.{{/i}}
          • -
        • {{_i}}Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.{{/i}}
          • -
        -
        - - - - -
        -
        -

        {{_i}}Scaffolding{{/i}}

        -
        -

        {{_i}}Grid system{{/i}}

        -
          -
        • {{_i}}Updated grid system, now only 12 columns instead of 16{{/i}} -
        • {{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}
          • -
        • {{_i}}Removed unused (by default) grid columns support for 17-24 columns{{/i}}
          • -
        -

        {{_i}}Responsive (media queries){{/i}}

        -
          -
        • {{_i}}Media queries added for basic support across mobile and tablet devices{{/i}} -
        • {{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}
          • -
        -
        - - - - -
        -
        -

        {{_i}}Base CSS{{/i}}

        -
        -

        {{_i}}Typography{{/i}}

        -
          -
        • {{_i}}h4 elements were dropped from 16px to 14px with a default line-height of 18px{{/i}}
          • -
        • {{_i}}h5 elements were dropped from 14px to 12px{{/i}}
          • -
        • {{_i}}h6 elements were dropped from 13px to 11px{{/i}}
          • -
        • {{_i}}Right-aligned option for blockquotes if float: right;{{/i}}
          • -
        -

        {{_i}}Code{{/i}}

        -
          -
        • {{_i}}New graphical style for <code>{{/i}}
          • -
        • {{_i}}Google Code Prettify styles updated (based on GitHub's gists){{/i}}
          • -
        -

        {{_i}}Tables{{/i}}

        -
          -
        • {{_i}}Improved support for colspan and rowspan{{/i}}
          • -
        • {{_i}}Styles now restricted to new base class, .table{{/i}}
          • -
        • {{_i}}Table classes standardized with .table- required as a prefix{{/i}}
          • -
        • {{_i}}Removed unused table color options (too much code for such little impact){{/i}}
          • -
        • {{_i}}Dropped support for TableSorter{{/i}}
          • -
        -

        {{_i}}Buttons{{/i}}

        -
          -
        • {{_i}}New classes for colors and sizes, all prefixed with .btn-{{/i}}
          • -
        • {{_i}}IE9: removed gradients and added rounded corners{{/i}}
          • -
        • {{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}
          • -
        • {{_i}}New mixin, .buttonBackground, to set button gradients{{/i}}
          • -
        • {{_i}}The .secondary class was removed from modal examples in our docs as it never had associated styles.{{/i}}
          • -
        -

        {{_i}}Forms{{/i}}

        -
          -
        • {{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}
          • -
        • {{_i}}Form classes standardized with .form- required as a prefix{{/i}}
          • -
        • {{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}
          • -
        • {{_i}}For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.{{/i}}
          • -
        • {{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the label{{/i}}
          • -
        • {{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}
          • -
        -

        {{_i}}Icons, by Glyphicons{{/i}}

        -
          -
        • {{_i}}New Glyphicons Halflings icon set added in sprite form, in black and white{{/i}}
          • -
        • {{_i}}Simple markup required for an icon in tons of contexts: <i class="icon-cog"></>{{/i}}
          • -
        • {{_i}}Add another class, .icon-white, for white variation of the same icon{{/i}}
          • -
        -
        - - - - -
        -
        -

        {{_i}}Components{{/i}}

        -
        -

        {{_i}}Button groups and dropdowns{{/i}}

        -
          -
        • {{_i}}Two brand new components in 2.0: button groups and button dropdowns{{/i}}
          • -
        • {{_i}}Dependency: button dropdowns are built on button groups, and therefore require all their styles{{/i}}
          • -
        • {{_i}}Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar{{/i}}
          • -
        -

        {{_i}}Navigation{{/i}}

        -
          -
        • {{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.{{/i}}
          • -
        • {{_i}}New nav list variation added that uses the same base class, .nav{{/i}}
          • -
        • {{_i}}Vertical tabs and pills have been added—just add .nav-stacked to the <ul>{{/i}}
          • -
        • {{_i}}Pills were restyled to be less rounded by default{{/i}}
          • -
        • {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
          • -
        -

        {{_i}}Navbar (formerly topbar){{/i}}

        -
          -
        • {{_i}}Base class changed from .topbar to .navbar{{/i}}
          • -
        • {{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed){{/i}}
          • -
        • {{_i}}Added vertical dividers to top-level nav{{/i}}
          • -
        • {{_i}}Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.{{/i}}
          • -
        • {{_i}}Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.{{/i}}
          • -
        • {{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.{{/i}}
          • -
        -

        {{_i}}Dropdown menus{{/i}}

        -
          -
        • {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
          • -
        • {{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
          • -
        • {{_i}}Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior{{/i}}
          • -
        • {{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
          • -
        -

        {{_i}}Labels{{/i}}

        -
          -
        • {{_i}}Label colors updated to match form state colors{{/i}}
          • -
        • {{_i}}Not only do they match graphically, but they are powered by the same new variables{{/i}}
          • -
        -

        {{_i}}Thumbnails{{/i}}

        -
          -
        • {{_i}}Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.{{/i}}
          • -
        • {{_i}}Individual thumbnails now require .thumbnail class{{/i}}
          • -
        -

        {{_i}}Alerts{{/i}}

        -
          -
        • {{_i}}New base class: .alert instead of .alert-message{{/i}}
          • -
        • {{_i}}Class names standardized for other options, now all starting with .alert-{{/i}}
          • -
        • {{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}
          • -
        • {{_i}}Block level alert class changed: .alert-block instead of .block-message{{/i}}
          • -
        -

        {{_i}}Progress bars{{/i}}

        -
          -
        • {{_i}}New in 2.0{{/i}}
          • -
        • {{_i}}Features multiple styles via classes, including striped and animated variations via CSS3{{/i}}
          • -
        -

        {{_i}}Miscellaneous components{{/i}}

        -
          -
        • {{_i}}Added documentation for the well component and the close icon (used in modals and alerts){{/i}}
          • -
        -
        - - - - -
        -
        -

        {{_i}}Javascript plugins{{/i}}

        -
        -
        - {{_i}}Heads up!{{/i}} {{_i}}We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}} -
        -

        {{_i}}Tooltips{{/i}}

        -
          -
        • {{_i}}The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.{{/i}}
          • -
        • {{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
          • -
        • {{_i}}The animate option was renamed to animation.{{/i}}
          • -
        • {{_i}}The html option was removed, as the tooltips default to allowing HTML now.{{/i}}
          • -
        -

        {{_i}}Popovers{{/i}}

        -
          -
        • {{_i}}Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.{{/i}}
          • -
        • {{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
          • -
        -

        {{_i}}New plugins{{/i}}

        - -
        - diff --git a/docs/upgrading.html b/docs/upgrading.html deleted file mode 100644 index f9367cbf..00000000 --- a/docs/upgrading.html +++ /dev/null @@ -1,308 +0,0 @@ - - - - - Bootstrap, from Twitter - - - - - - - - - - - - - - - - - - - - - - - - -
        -
        -
        - - - - - - Bootstrap -
        - -
        -
        -
        -
        - -
        - - -
        -

        Upgrading to Bootstrap 2

        -

        Learn about significant changes and additions since v1.4 with this handy guide.

        -
        - - - - -
        -
        -

        Project changes

        -
        -
          -
        • Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.
          • -
        • Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).
          • -
        • Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.
          • -
        • Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.
          • -
        -
        - - - - -
        -
        -

        Scaffolding

        -
        -

        Grid system

        -
          -
        • Updated grid system, now only 12 columns instead of 16 -
        • Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
          • -
        • Removed unused (by default) grid columns support for 17-24 columns
          • -
        -

        Responsive (media queries)

        -
          -
        • Media queries added for basic support across mobile and tablet devices -
        • Responsive CSS is compiled separately, as bootstrap-responsive.css
          • -
        -
        - - - - -
        -
        -

        Base CSS

        -
        -

        Typography

        -
          -
        • h4 elements were dropped from 16px to 14px with a default line-height of 18px
          • -
        • h5 elements were dropped from 14px to 12px
          • -
        • h6 elements were dropped from 13px to 11px
          • -
        • Right-aligned option for blockquotes if float: right;
          • -
        -

        Code

        -
          -
        • New graphical style for <code>
          • -
        • Google Code Prettify styles updated (based on GitHub's gists)
          • -
        -

        Tables

        -
          -
        • Improved support for colspan and rowspan
          • -
        • Styles now restricted to new base class, .table
          • -
        • Table classes standardized with .table- required as a prefix
          • -
        • Removed unused table color options (too much code for such little impact)
          • -
        • Dropped support for TableSorter
          • -
        -

        Buttons

        -
          -
        • New classes for colors and sizes, all prefixed with .btn-
          • -
        • IE9: removed gradients and added rounded corners
          • -
        • Updated active state to make styling clearer in button groups (new) and look better with custom transition
          • -
        • New mixin, .buttonBackground, to set button gradients
          • -
        • The .secondary class was removed from modal examples in our docs as it never had associated styles.
          • -
        -

        Forms

        -
          -
        • Default form style is now vertical (stacked) to use less CSS and add greater flexibility
          • -
        • Form classes standardized with .form- required as a prefix
          • -
        • New built-in form defaults for search, inline, and horizontal forms
          • -
        • For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.
          • -
        • More flexible horizontal form markup with classes for all styling, including new optional class for the label
          • -
        • Form states: colors updated and customizable via new LESS variables
          • -
        -

        Icons, by Glyphicons

        -
          -
        • New Glyphicons Halflings icon set added in sprite form, in black and white
          • -
        • Simple markup required for an icon in tons of contexts: <i class="icon-cog"></>
          • -
        • Add another class, .icon-white, for white variation of the same icon
          • -
        -
        - - - - -
        -
        -

        Components

        -
        -

        Button groups and dropdowns

        -
          -
        • Two brand new components in 2.0: button groups and button dropdowns
          • -
        • Dependency: button dropdowns are built on button groups, and therefore require all their styles
          • -
        • Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar
          • -
        -

        Navigation

        -
          -
        • Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.
          • -
        • New nav list variation added that uses the same base class, .nav
          • -
        • Vertical tabs and pills have been added—just add .nav-stacked to the <ul>
          • -
        • Pills were restyled to be less rounded by default
          • -
        • Pills now have dropdown menu support (they share the same markup and styles as tabs)
          • -
        -

        Navbar (formerly topbar)

        -
          -
        • Base class changed from .topbar to .navbar
          • -
        • Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed)
          • -
        • Added vertical dividers to top-level nav
          • -
        • Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.
          • -
        • Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
          • -
        • Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.
          • -
        -

        Dropdown menus

        -
          -
        • Updated the .dropdown-menu to tighten up spacing
          • -
        • Now requires you to add a <span class="caret"></span> to show the dropdown arrow
          • -
        • Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior
          • -
        • The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
          • -
        -

        Labels

        -
          -
        • Label colors updated to match form state colors
          • -
        • Not only do they match graphically, but they are powered by the same new variables
          • -
        -

        Thumbnails

        -
          -
        • Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.
          • -
        • Individual thumbnails now require .thumbnail class
          • -
        -

        Alerts

        -
          -
        • New base class: .alert instead of .alert-message
          • -
        • Class names standardized for other options, now all starting with .alert-
          • -
        • Redesigned base alert styles to combine the default alerts and block-level alerts into one
          • -
        • Block level alert class changed: .alert-block instead of .block-message
          • -
        -

        Progress bars

        -
          -
        • New in 2.0
          • -
        • Features multiple styles via classes, including striped and animated variations via CSS3
          • -
        -

        Miscellaneous components

        -
          -
        • Added documentation for the well component and the close icon (used in modals and alerts)
          • -
        -
        - - - - -
        -
        -

        Javascript plugins

        -
        -
        - Heads up! We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more. -
        -

        Tooltips

        -
          -
        • The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.
          • -
        • The placement option value that was below is now bottom, and above is now top.
          • -
        • The animate option was renamed to animation.
          • -
        • The html option was removed, as the tooltips default to allowing HTML now.
          • -
        -

        Popovers

        -
          -
        • Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
          • -
        • The placement option value that was below is now bottom, and above is now top.
          • -
        -

        New plugins

        - -
        - - - - - - -
        - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/.jshintrc b/js/.jshintrc new file mode 100644 index 00000000..e0722690 --- /dev/null +++ b/js/.jshintrc @@ -0,0 +1,12 @@ +{ + "validthis": true, + "laxcomma" : true, + "laxbreak" : true, + "browser" : true, + "eqnull" : true, + "debug" : true, + "devel" : true, + "boss" : true, + "expr" : true, + "asi" : true +} \ No newline at end of file diff --git a/js/bootstrap-affix.js b/js/bootstrap-affix.js new file mode 100644 index 00000000..6020a19a --- /dev/null +++ b/js/bootstrap-affix.js @@ -0,0 +1,117 @@ +/* ========================================================== + * bootstrap-affix.js v2.2.2 + * http://twitter.github.com/bootstrap/javascript.html#affix + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) + this.$element = $(element) + this.checkPosition() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollHeight = $(document).height() + , scrollTop = this.$window.scrollTop() + , position = this.$element.offset() + , offset = this.options.offset + , offsetBottom = offset.bottom + , offsetTop = offset.top + , reset = 'affix affix-top affix-bottom' + , affix + + if (typeof offset != 'object') offsetBottom = offsetTop = offset + if (typeof offsetTop == 'function') offsetTop = offset.top() + if (typeof offsetBottom == 'function') offsetBottom = offset.bottom() + + affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? + false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? + 'bottom' : offsetTop != null && scrollTop <= offsetTop ? + 'top' : false + + if (this.affixed === affix) return + + this.affixed = affix + this.unpin = affix == 'bottom' ? position.top - scrollTop : null + + this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')) + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.affix + + $.fn.affix = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + /* AFFIX NO CONFLICT + * ================= */ + + $.fn.affix.noConflict = function () { + $.fn.affix = old + return this + } + + + /* AFFIX DATA-API + * ============== */ + + $(window).on('load', function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetBottom && (data.offset.bottom = data.offsetBottom) + data.offsetTop && (data.offset.top = data.offsetTop) + + $spy.affix(data) + }) + }) + + +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 2242dddc..5bc02644 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alert.js v2.0.1 + * bootstrap-alert.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2012 Twitter, Inc. @@ -18,61 +18,59 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* ALERT CLASS DEFINITION * ====================== */ var dismiss = '[data-dismiss="alert"]' - , Alert = function ( el ) { + , Alert = function (el) { $(el).on('click', dismiss, this.close) } - Alert.prototype = { + Alert.prototype.close = function (e) { + var $this = $(this) + , selector = $this.attr('data-target') + , $parent - constructor: Alert + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } - , close: function ( e ) { - var $this = $(this) - , selector = $this.attr('data-target') - , $parent + $parent = $(selector) - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + e && e.preventDefault() - $parent = $(selector) - $parent.trigger('close') + $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) - e && e.preventDefault() + $parent.trigger(e = $.Event('close')) - $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) + if (e.isDefaultPrevented()) return - $parent - .trigger('close') - .removeClass('in') - - function removeElement() { - $parent - .trigger('closed') - .remove() - } + $parent.removeClass('in') - $.support.transition && $parent.hasClass('fade') ? - $parent.on($.support.transition.end, removeElement) : - removeElement() + function removeElement() { + $parent + .trigger('closed') + .remove() } + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : + removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ - $.fn.alert = function ( option ) { + var old = $.fn.alert + + $.fn.alert = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('alert') @@ -84,11 +82,18 @@ $.fn.alert.Constructor = Alert + /* ALERT NO CONFLICT + * ================= */ + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + /* ALERT DATA-API * ============== */ - $(function () { - $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) - }) + $(document).on('click.alert.data-api', dismiss, Alert.prototype.close) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index a0e05354..39b83399 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-button.js v2.0.1 + * bootstrap-button.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#buttons * ============================================================ * Copyright 2012 Twitter, Inc. @@ -17,58 +17,56 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ - var Button = function ( element, options ) { + var Button = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.button.defaults, options) } - Button.prototype = { - - constructor: Button + Button.prototype.setState = function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' - , setState: function ( state ) { - var d = 'disabled' - , $el = this.$element - , data = $el.data() - , val = $el.is('input') ? 'val' : 'html' + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) - state = state + 'Text' - data.resetText || $el.data('resetText', $el[val]()) + $el[val](data[state] || this.options[state]) - $el[val](data[state] || this.options[state]) - - // push to event loop to allow forms to submit - setTimeout(function () { - state == 'loadingText' ? - $el.addClass(d).attr(d, d) : - $el.removeClass(d).removeAttr(d) - }, 0) - } - - , toggle: function () { - var $parent = this.$element.parent('[data-toggle="buttons-radio"]') + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } - $parent && $parent - .find('.active') - .removeClass('active') + Button.prototype.toggle = function () { + var $parent = this.$element.closest('[data-toggle="buttons-radio"]') - this.$element.toggleClass('active') - } + $parent && $parent + .find('.active') + .removeClass('active') + this.$element.toggleClass('active') } /* BUTTON PLUGIN DEFINITION * ======================== */ - $.fn.button = function ( option ) { + var old = $.fn.button + + $.fn.button = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('button') @@ -86,13 +84,22 @@ $.fn.button.Constructor = Button + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + /* BUTTON DATA-API * =============== */ - $(function () { - $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { - $(e.currentTarget).button('toggle') - }) + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 810256e8..238ff428 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-carousel.js v2.0.1 + * bootstrap-carousel.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#carousel * ========================================================== * Copyright 2012 Twitter, Inc. @@ -18,28 +18,34 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* CAROUSEL CLASS DEFINITION * ========================= */ var Carousel = function (element, options) { this.$element = $(element) - this.options = $.extend({}, $.fn.carousel.defaults, options) - this.options.slide && this.slide(this.options.slide) + this.options = options + this.options.pause == 'hover' && this.$element + .on('mouseenter', $.proxy(this.pause, this)) + .on('mouseleave', $.proxy(this.cycle, this)) } Carousel.prototype = { - cycle: function () { - this.interval = setInterval($.proxy(this.next, this), this.options.interval) + cycle: function (e) { + if (!e) this.paused = false + this.options.interval + && !this.paused + && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) return this } , to: function (pos) { - var $active = this.$element.find('.active') + var $active = this.$element.find('.item.active') , children = $active.parent().children() , activePos = children.index($active) , that = this @@ -59,7 +65,12 @@ return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) } - , pause: function () { + , pause: function (e) { + if (!e) this.paused = true + if (this.$element.find('.next, .prev').length && $.support.transition.end) { + this.$element.trigger($.support.transition.end) + this.cycle() + } clearInterval(this.interval) this.interval = null return this @@ -76,14 +87,13 @@ } , slide: function (type, next) { - var $active = this.$element.find('.active') + var $active = this.$element.find('.item.active') , $next = next || $active[type]() , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this - - if (!$next.length) return + , e this.sliding = true @@ -91,24 +101,32 @@ $next = $next.length ? $next : this.$element.find('.item')[fallback]() - if (!$.support.transition && this.$element.hasClass('slide')) { - this.$element.trigger('slide') - $active.removeClass('active') - $next.addClass('active') - this.sliding = false - this.$element.trigger('slid') - } else { + e = $.Event('slide', { + relatedTarget: $next[0] + }) + + if ($next.hasClass('active')) return + + if ($.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) - this.$element.trigger('slide') this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) that.sliding = false setTimeout(function () { that.$element.trigger('slid') }, 0) }) + } else { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return + $active.removeClass('active') + $next.addClass('active') + this.sliding = false + this.$element.trigger('slid') } isCycling && this.cycle() @@ -122,36 +140,46 @@ /* CAROUSEL PLUGIN DEFINITION * ========================== */ - $.fn.carousel = function ( option ) { + var old = $.fn.carousel + + $.fn.carousel = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('carousel') - , options = typeof option == 'object' && option + , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option) + , action = typeof option == 'string' ? option : options.slide if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (typeof option == 'number') data.to(option) - else if (typeof option == 'string' || (option = options.slide)) data[option]() - else data.cycle() + else if (action) data[action]() + else if (options.interval) data.cycle() }) } $.fn.carousel.defaults = { interval: 5000 + , pause: 'hover' } $.fn.carousel.Constructor = Carousel + /* CAROUSEL NO CONFLICT + * ==================== */ + + $.fn.carousel.noConflict = function () { + $.fn.carousel = old + return this + } + /* CAROUSEL DATA-API * ================= */ - $(function () { - $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) - $target.carousel(options) - e.preventDefault() - }) + $(document).on('click.carousel.data-api', '[data-slide]', function (e) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , options = $.extend({}, $target.data(), $this.data()) + $target.carousel(options) + e.preventDefault() }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index d195efc7..6ac0191a 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-collapse.js v2.0.1 + * bootstrap-collapse.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#collapse * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,16 +17,21 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { - var Collapse = function ( element, options ) { - this.$element = $(element) + "use strict"; // jshint ;_; + + + /* COLLAPSE PUBLIC CLASS DEFINITION + * ================================ */ + + var Collapse = function (element, options) { + this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) - if (this.options["parent"]) { - this.$parent = $(this.options["parent"]) + if (this.options.parent) { + this.$parent = $(this.options.parent) } this.options.toggle && this.toggle() @@ -42,31 +47,39 @@ } , show: function () { - var dimension = this.dimension() - , scroll = $.camelCase(['scroll', dimension].join('-')) - , actives = this.$parent && this.$parent.find('.in') + var dimension + , scroll + , actives , hasData + if (this.transitioning) return + + dimension = this.dimension() + scroll = $.camelCase(['scroll', dimension].join('-')) + actives = this.$parent && this.$parent.find('> .accordion-group > .in') + if (actives && actives.length) { hasData = actives.data('collapse') + if (hasData && hasData.transitioning) return actives.collapse('hide') hasData || actives.data('collapse', null) } this.$element[dimension](0) - this.transition('addClass', 'show', 'shown') - this.$element[dimension](this.$element[0][scroll]) - + this.transition('addClass', $.Event('show'), 'shown') + $.support.transition && this.$element[dimension](this.$element[0][scroll]) } , hide: function () { - var dimension = this.dimension() + var dimension + if (this.transitioning) return + dimension = this.dimension() this.reset(this.$element[dimension]()) - this.transition('removeClass', 'hide', 'hidden') + this.transition('removeClass', $.Event('hide'), 'hidden') this.$element[dimension](0) } - , reset: function ( size ) { + , reset: function (size) { var dimension = this.dimension() this.$element @@ -74,35 +87,45 @@ [dimension](size || 'auto') [0].offsetWidth - this.$element.addClass('collapse') + this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') + + return this } - , transition: function ( method, startEvent, completeEvent ) { + , transition: function (method, startEvent, completeEvent) { var that = this , complete = function () { - if (startEvent == 'show') that.reset() + if (startEvent.type == 'show') that.reset() + that.transitioning = 0 that.$element.trigger(completeEvent) } - this.$element - .trigger(startEvent) - [method]('in') + this.$element.trigger(startEvent) + + if (startEvent.isDefaultPrevented()) return + + this.transitioning = 1 + + this.$element[method]('in') $.support.transition && this.$element.hasClass('collapse') ? this.$element.one($.support.transition.end, complete) : complete() - } + } , toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']() - } + } } - /* COLLAPSIBLE PLUGIN DEFINITION - * ============================== */ - $.fn.collapse = function ( option ) { + /* COLLAPSE PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.collapse + + $.fn.collapse = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') @@ -119,18 +142,26 @@ $.fn.collapse.Constructor = Collapse - /* COLLAPSIBLE DATA-API + /* COLLAPSE NO CONFLICT * ==================== */ - $(function () { - $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) { - var $this = $(this), href - , target = $this.attr('data-target') - || e.preventDefault() - || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 - , option = $(target).data('collapse') ? 'toggle' : $this.data() - $(target).collapse(option) - }) + $.fn.collapse.noConflict = function () { + $.fn.collapse = old + return this + } + + + /* COLLAPSE DATA-API + * ================= */ + + $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { + var $this = $(this), href + , target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + , option = $(target).data('collapse') ? 'toggle' : $this.data() + $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') + $(target).collapse(option) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index f1f6c33f..900355d5 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-dropdown.js v2.0.1 + * bootstrap-dropdown.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#dropdowns * ============================================================ * Copyright 2012 Twitter, Inc. @@ -18,15 +18,16 @@ * ============================================================ */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* DROPDOWN CLASS DEFINITION * ========================= */ - var toggle = '[data-toggle="dropdown"]' - , Dropdown = function ( element ) { + var toggle = '[data-toggle=dropdown]' + , Dropdown = function (element) { var $el = $(element).on('click.dropdown.data-api', this.toggle) $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') @@ -37,39 +38,96 @@ constructor: Dropdown - , toggle: function ( e ) { + , toggle: function (e) { var $this = $(this) - , selector = $this.attr('data-target') , $parent , isActive - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + if ($this.is('.disabled, :disabled')) return - $parent = $(selector) - $parent.length || ($parent = $this.parent()) + $parent = getParent($this) isActive = $parent.hasClass('open') clearMenus() - !isActive && $parent.toggleClass('open') + + if (!isActive) { + $parent.toggleClass('open') + } + + $this.focus() return false } + , keydown: function (e) { + var $this + , $items + , $active + , $parent + , isActive + , index + + if (!/(38|40|27)/.test(e.keyCode)) return + + $this = $(this) + + e.preventDefault() + e.stopPropagation() + + if ($this.is('.disabled, :disabled')) return + + $parent = getParent($this) + + isActive = $parent.hasClass('open') + + if (!isActive || (isActive && e.keyCode == 27)) return $this.click() + + $items = $('[role=menu] li:not(.divider):visible a', $parent) + + if (!$items.length) return + + index = $items.index($items.filter(':focus')) + + if (e.keyCode == 38 && index > 0) index-- // up + if (e.keyCode == 40 && index < $items.length - 1) index++ // down + if (!~index) index = 0 + + $items + .eq(index) + .focus() + } + } function clearMenus() { - $(toggle).parent().removeClass('open') + $(toggle).each(function () { + getParent($(this)).removeClass('open') + }) + } + + function getParent($this) { + var selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = $(selector) + $parent.length || ($parent = $this.parent()) + + return $parent } /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( option ) { + var old = $.fn.dropdown + + $.fn.dropdown = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('dropdown') @@ -81,12 +139,23 @@ $.fn.dropdown.Constructor = Dropdown + /* DROPDOWN NO CONFLICT + * ==================== */ + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - $(function () { - $('html').on('click.dropdown.data-api', clearMenus) - $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) - }) + $(document) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index bceb3035..689a414e 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -1,5 +1,5 @@ /* ========================================================= - * bootstrap-modal.js v2.0.1 + * bootstrap-modal.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#modals * ========================================================= * Copyright 2012 Twitter, Inc. @@ -18,17 +18,19 @@ * ========================================================= */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function ( content, options ) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } Modal.prototype = { @@ -41,19 +43,22 @@ , show: function () { var that = this + , e = $.Event('show') - if (this.isShown) return + this.$element.trigger(e) - $('body').addClass('modal-open') + if (this.isShown || e.isDefaultPrevented()) return this.isShown = true - this.$element.trigger('show') - escape.call(this) - backdrop.call(this, function () { + this.escape() + + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') - !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position + if (!that.$element.parent().length) { + that.$element.appendTo(document.body) //don't move modals dom position + } that.$element .show() @@ -62,118 +67,135 @@ that.$element[0].offsetWidth // force reflow } - that.$element.addClass('in') + that.$element + .addClass('in') + .attr('aria-hidden', false) + + that.enforceFocus() transition ? - that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : - that.$element.trigger('shown') + that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : + that.$element.focus().trigger('shown') }) } - , hide: function ( e ) { + , hide: function (e) { e && e.preventDefault() - if (!this.isShown) return - var that = this + + e = $.Event('hide') + + this.$element.trigger(e) + + if (!this.isShown || e.isDefaultPrevented()) return + this.isShown = false - $('body').removeClass('modal-open') + this.escape() - escape.call(this) + $(document).off('focusin.modal') this.$element - .trigger('hide') .removeClass('in') + .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? - hideWithTransition.call(this) : - hideModal.call(this) + this.hideWithTransition() : + this.hideModal() } - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - function hideWithTransition() { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - hideModal.call(that) - }, 500) + , enforceFocus: function () { + var that = this + $(document).on('focusin.modal', function (e) { + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) + } - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - hideModal.call(that) - }) - } + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + this.$element.on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.modal') + } + } - function hideModal( that ) { - this.$element - .hide() - .trigger('hidden') + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) + + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } - backdrop.call(this) - } + , hideModal: function (that) { + this.$element + .hide() + .trigger('hidden') - function backdrop( callback ) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' + this.backdrop() + } - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate + , removeBackdrop: function () { + this.$backdrop.remove() + this.$backdrop = null + } - this.$backdrop = $('
        ') - .appendTo(document.body) + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) - } + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + this.$backdrop = $('
        ') + .appendTo(document.body) - this.$backdrop.addClass('in') + this.$backdrop.click( + this.options.backdrop == 'static' ? + $.proxy(this.$element[0].focus, this.$element[0]) + : $.proxy(this.hide, this) + ) - doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : - callback() + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') + this.$backdrop.addClass('in') - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : - removeBackdrop.call(this) + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() - } else if (callback) { - callback() - } - } + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') - function removeBackdrop() { - this.$backdrop.remove() - this.$backdrop = null - } + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : + this.removeBackdrop() - function escape() { - var that = this - if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') - } + } else if (callback) { + callback() + } + } } /* MODAL PLUGIN DEFINITION * ======================= */ - $.fn.modal = function ( option ) { + var old = $.fn.modal + + $.fn.modal = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('modal') @@ -193,18 +215,31 @@ $.fn.modal.Constructor = Modal + /* MODAL NO CONFLICT + * ================= */ + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + /* MODAL DATA-API * ============== */ - $(function () { - $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) + $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + , href = $this.attr('href') + , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) - e.preventDefault() - $target.modal(option) - }) + e.preventDefault() + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 924844e8..1a4f532a 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-popover.js v2.0.1 + * bootstrap-popover.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#popovers * =========================================================== * Copyright 2012 Twitter, Inc. @@ -18,14 +18,19 @@ * =========================================================== */ -!function( $ ) { +!function ($) { - "use strict" + "use strict"; // jshint ;_; - var Popover = function ( element, options ) { + + /* POPOVER PUBLIC CLASS DEFINITION + * =============================== */ + + var Popover = function (element, options) { this.init('popover', element, options) } + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js ========================================== */ @@ -38,8 +43,8 @@ , title = this.getTitle() , content = this.getContent() - $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title) - $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content) + $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) + $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') } @@ -56,25 +61,29 @@ content = $e.attr('data-content') || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) - content = content.toString().replace(/(^\s*|\s*$)/, "") - return content } - , tip: function() { + , tip: function () { if (!this.$tip) { this.$tip = $(this.options.template) } return this.$tip } + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) + } + }) /* POPOVER PLUGIN DEFINITION * ======================= */ - $.fn.popover = function ( option ) { + var old = $.fn.popover + + $.fn.popover = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('popover') @@ -88,8 +97,18 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' - , template: '

        ' + , template: '

        ' }) -}( window.jQuery ); \ No newline at end of file + + /* POPOVER NO CONFLICT + * =================== */ + + $.fn.popover.noConflict = function () { + $.fn.popover = old + return this + } + +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 5f09cfe8..07a5c3a5 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-scrollspy.js v2.0.1 + * bootstrap-scrollspy.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#scrollspy * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,23 +17,25 @@ * limitations under the License. * ============================================================== */ -!function ( $ ) { - "use strict" +!function ($) { - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + "use strict"; // jshint ;_; - function ScrollSpy( element, options) { + + /* SCROLLSPY CLASS DEFINITION + * ========================== */ + + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' - this.$body = $('body').on('click.scroll.data-api', this.selector, process) + this.$body = $('body') this.refresh() this.process() } @@ -43,25 +45,43 @@ constructor: ScrollSpy , refresh: function () { - this.targets = this.$body + var self = this + , $targets + + this.offsets = $([]) + this.targets = $([]) + + $targets = this.$body .find(this.selector) .map(function () { - var href = $(this).attr('href') - return /^#\w/.test(href) && $(href).length ? href : null + var $el = $(this) + , href = $el.data('target') || $el.attr('href') + , $href = /^#\w/.test(href) && $(href) + return ( $href + && $href.length + && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null + }) + .sort(function (a, b) { return a[0] - b[0] }) + .each(function () { + self.offsets.push(this[0]) + self.targets.push(this[1]) }) - - this.offsets = $.map(this.targets, function (id) { - return $(id).position().top - }) } , process: function () { var scrollTop = this.$scrollElement.scrollTop() + this.options.offset + , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight + , maxScroll = scrollHeight - this.$scrollElement.height() , offsets = this.offsets , targets = this.targets , activeTarget = this.activeTarget , i + if (scrollTop >= maxScroll) { + return activeTarget != (i = targets.last()[0]) + && this.activate ( i ) + } + for (i = offsets.length; i--;) { activeTarget != targets[i] && scrollTop >= offsets[i] @@ -72,21 +92,27 @@ , activate: function (target) { var active + , selector this.activeTarget = target - this.$body - .find(this.selector).parent('.active') + $(this.selector) + .parent('.active') .removeClass('active') - active = this.$body - .find(this.selector + '[href="' + target + '"]') + selector = this.selector + + '[data-target="' + target + '"],' + + this.selector + '[href="' + target + '"]' + + active = $(selector) .parent('li') .addClass('active') - if ( active.parent('.dropdown-menu') ) { - active.closest('li.dropdown').addClass('active') + if (active.parent('.dropdown-menu').length) { + active = active.closest('li.dropdown').addClass('active') } + + active.trigger('activate') } } @@ -95,7 +121,9 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + var old = $.fn.scrollspy + + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -112,14 +140,23 @@ } + /* SCROLLSPY NO CONFLICT + * ===================== */ + + $.fn.scrollspy.noConflict = function () { + $.fn.scrollspy = old + return this + } + + /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) }) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index 26c9ece7..84d4834a 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -1,5 +1,5 @@ /* ======================================================== - * bootstrap-tab.js v2.0.1 + * bootstrap-tab.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2012 Twitter, Inc. @@ -18,14 +18,15 @@ * ======================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } @@ -39,6 +40,7 @@ , selector = $this.attr('data-target') , previous , $target + , e if (!selector) { selector = $this.attr('href') @@ -47,13 +49,16 @@ if ( $this.parent('li').hasClass('active') ) return - previous = $ul.find('.active a').last()[0] + previous = $ul.find('.active:last a')[0] - $this.trigger({ - type: 'show' - , relatedTarget: previous + e = $.Event('show', { + relatedTarget: previous }) + $this.trigger(e) + + if (e.isDefaultPrevented()) return + $target = $(selector) this.activate($this.parent('li'), $ul) @@ -105,6 +110,8 @@ /* TAB PLUGIN DEFINITION * ===================== */ + var old = $.fn.tab + $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) @@ -117,14 +124,21 @@ $.fn.tab.Constructor = Tab + /* TAB NO CONFLICT + * =============== */ + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + /* TAB DATA-API * ============ */ - $(function () { - $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { - e.preventDefault() - $(this).tab('show') - }) + $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index d76e51e8..a08952a4 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-tooltip.js v2.0.1 + * bootstrap-tooltip.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tooltips * Inspired by the original jQuery.tipsy by Jason Frame * =========================================================== @@ -18,14 +18,16 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* TOOLTIP PUBLIC CLASS DEFINITION * =============================== */ - var Tooltip = function ( element, options ) { + var Tooltip = function (element, options) { this.init('tooltip', element, options) } @@ -33,7 +35,7 @@ constructor: Tooltip - , init: function ( type, element, options ) { + , init: function (type, element, options) { var eventIn , eventOut @@ -42,11 +44,13 @@ this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? @@ -54,7 +58,7 @@ this.fixTitle() } - , getOptions: function ( options ) { + , getOptions: function (options) { options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) if (options.delay && typeof options.delay == 'number') { @@ -67,34 +71,28 @@ return options } - , enter: function ( e ) { + , enter: function (e) { var self = $(e.currentTarget)[this.type](this._options).data(this.type) - if (!self.options.delay || !self.options.delay.show) { - self.show() - } else { - self.hoverState = 'in' - setTimeout(function() { - if (self.hoverState == 'in') { - self.show() - } - }, self.options.delay.show) - } + if (!self.options.delay || !self.options.delay.show) return self.show() + + clearTimeout(this.timeout) + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) } - , leave: function ( e ) { + , leave: function (e) { var self = $(e.currentTarget)[this.type](this._options).data(this.type) - if (!self.options.delay || !self.options.delay.hide) { - self.hide() - } else { - self.hoverState = 'out' - setTimeout(function() { - if (self.hoverState == 'out') { - self.hide() - } - }, self.options.delay.hide) - } + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) } , show: function () { @@ -121,9 +119,9 @@ inside = /in/.test(placement) $tip - .remove() + .detach() .css({ top: 0, left: 0, display: 'block' }) - .appendTo(inside ? this.$element : document.body) + .insertAfter(this.$element) pos = this.getPosition(inside) @@ -146,7 +144,7 @@ } $tip - .css(tp) + .offset(tp) .addClass(placement) .addClass('in') } @@ -154,7 +152,9 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.tooltip-inner').html(this.getTitle()) + , title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) $tip.removeClass('fade in top bottom left right') } @@ -166,18 +166,20 @@ function removeWithAnimation() { var timeout = setTimeout(function () { - $tip.off($.support.transition.end).remove() + $tip.off($.support.transition.end).detach() }, 500) $tip.one($.support.transition.end, function () { clearTimeout(timeout) - $tip.remove() + $tip.detach() }) } $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : - $tip.remove() + $tip.detach() + + return this } , fixTitle: function () { @@ -206,8 +208,6 @@ title = $e.attr('data-original-title') || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) - title = title.toString().replace(/(^\s*|\s*$)/, "") - return title } @@ -235,8 +235,13 @@ this.enabled = !this.enabled } - , toggle: function () { - this[this.tip().hasClass('in') ? 'hide' : 'show']() + , toggle: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + self[self.tip().hasClass('in') ? 'hide' : 'show']() + } + + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) } } @@ -245,6 +250,8 @@ /* TOOLTIP PLUGIN DEFINITION * ========================= */ + var old = $.fn.tooltip + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) @@ -259,12 +266,22 @@ $.fn.tooltip.defaults = { animation: true - , delay: 0 - , selector: false , placement: 'top' + , selector: false + , template: '
        ' , trigger: 'hover' , title: '' - , template: '
        ' + , delay: 0 + , html: false + } + + + /* TOOLTIP NO CONFLICT + * =================== */ + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this } -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 52196c40..b0f12c26 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -1,5 +1,5 @@ /* =================================================== - * bootstrap-transition.js v2.0.1 + * bootstrap-transition.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#transitions * =================================================== * Copyright 2012 Twitter, Inc. @@ -17,35 +17,44 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - $(function () { +!function ($) { + + "use strict"; // jshint ;_; - "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ + /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) + * ======================================================= */ + + $(function () { $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - - return support && { - end: (function () { - var transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" + + var transitionEnd = (function () { + + var el = document.createElement('bootstrap') + , transEndEventNames = { + 'WebkitTransition' : 'webkitTransitionEnd' + , 'MozTransition' : 'transitionend' + , 'OTransition' : 'oTransitionEnd otransitionend' + , 'transition' : 'transitionend' + } + , name + + for (name in transEndEventNames){ + if (el.style[name] !== undefined) { + return transEndEventNames[name] } - return transitionEnd - }()) + } + + }()) + + return transitionEnd && { + end: transitionEnd } + })() }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 50315595..088e7ce9 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-typeahead.js v2.0.1 + * bootstrap-typeahead.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#typeahead * ============================================================= * Copyright 2012 Twitter, Inc. @@ -17,18 +17,24 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function($){ - var Typeahead = function ( element, options ) { + "use strict"; // jshint ;_; + + + /* TYPEAHEAD PUBLIC CLASS DEFINITION + * ================================= */ + + var Typeahead = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter - this.$menu = $(this.options.menu).appendTo('body') + this.updater = this.options.updater || this.updater this.source = this.options.source + this.$menu = $(this.options.menu) this.shown = false this.listen() } @@ -39,21 +45,29 @@ , select: function () { var val = this.$menu.find('.active').attr('data-value') - this.$element.val(val) + this.$element + .val(this.updater(val)) + .change() return this.hide() } + , updater: function (item) { + return item + } + , show: function () { - var pos = $.extend({}, this.$element.offset(), { + var pos = $.extend({}, this.$element.position(), { height: this.$element[0].offsetHeight }) - this.$menu.css({ - top: pos.top + pos.height - , left: pos.left - }) + this.$menu + .insertAfter(this.$element) + .css({ + top: pos.top + pos.height + , left: pos.left + }) + .show() - this.$menu.show() this.shown = true return this } @@ -65,18 +79,24 @@ } , lookup: function (event) { - var that = this - , items - , q + var items this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } - items = $.grep(this.source, function (item) { - if (that.matcher(item)) return item + items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source + + return items ? this.process(items) : this + } + + , process: function (items) { + var that = this + + items = $.grep(items, function (item) { + return that.matcher(item) }) items = this.sorter(items) @@ -108,7 +128,8 @@ } , highlighter: function (item) { - return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) { + var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') + return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '' + match + '' }) } @@ -155,8 +176,8 @@ .on('keypress', $.proxy(this.keypress, this)) .on('keyup', $.proxy(this.keyup, this)) - if ($.browser.webkit || $.browser.msie) { - this.$element.on('keydown', $.proxy(this.keypress, this)) + if (this.eventSupported('keydown')) { + this.$element.on('keydown', $.proxy(this.keydown, this)) } this.$menu @@ -164,33 +185,16 @@ .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } - , keyup: function (e) { - e.stopPropagation() - e.preventDefault() - - switch(e.keyCode) { - case 40: // down arrow - case 38: // up arrow - break - - case 9: // tab - case 13: // enter - if (!this.shown) return - this.select() - break - - case 27: // escape - this.hide() - break - - default: - this.lookup() + , eventSupported: function(eventName) { + var isSupported = eventName in this.$element + if (!isSupported) { + this.$element.setAttribute(eventName, 'return;') + isSupported = typeof this.$element[eventName] === 'function' } + return isSupported + } - } - - , keypress: function (e) { - e.stopPropagation() + , move: function (e) { if (!this.shown) return switch(e.keyCode) { @@ -210,12 +214,50 @@ this.next() break } + + e.stopPropagation() } - , blur: function (e) { - var that = this + , keydown: function (e) { + this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) + this.move(e) + } + + , keypress: function (e) { + if (this.suppressKeyPressRepeat) return + this.move(e) + } + + , keyup: function (e) { + switch(e.keyCode) { + case 40: // down arrow + case 38: // up arrow + case 16: // shift + case 17: // ctrl + case 18: // alt + break + + case 9: // tab + case 13: // enter + if (!this.shown) return + this.select() + break + + case 27: // escape + if (!this.shown) return + this.hide() + break + + default: + this.lookup() + } + e.stopPropagation() e.preventDefault() + } + + , blur: function (e) { + var that = this setTimeout(function () { that.hide() }, 150) } @@ -236,7 +278,9 @@ /* TYPEAHEAD PLUGIN DEFINITION * =========================== */ - $.fn.typeahead = function ( option ) { + var old = $.fn.typeahead + + $.fn.typeahead = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('typeahead') @@ -251,21 +295,29 @@ , items: 8 , menu: '
          ' , item: '
          • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead + /* TYPEAHEAD NO CONFLICT + * =================== */ + + $.fn.typeahead.noConflict = function () { + $.fn.typeahead = old + return this + } + + /* TYPEAHEAD DATA-API * ================== */ - $(function () { - $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { - var $this = $(this) - if ($this.data('typeahead')) return - e.preventDefault() - $this.typeahead($this.data()) - }) + $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + e.preventDefault() + $this.typeahead($this.data()) }) -}( window.jQuery ); \ No newline at end of file +}(window.jQuery); diff --git a/js/bootstrap.js b/js/bootstrap.js index c587aa10..8c988ed0 100644 --- a/js/bootstrap.js +++ b/js/bootstrap.js @@ -12,7 +12,7 @@ var path = require('path'); module.exports = function(){ return function(style){ - style.include(__dirname + '/../styl/bootstrap.styl'); + style.include(__dirname + '/../styl/'); style.use(nib()); - } + }; }; diff --git a/js/tests/index.html b/js/tests/index.html index 8c710de3..976ca168 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -11,10 +11,14 @@ + + + + @@ -23,11 +27,13 @@ + + @@ -36,7 +42,8 @@ - + +

          Bootstrap Plugin Test Suite

          diff --git a/js/tests/phantom.js b/js/tests/phantom.js new file mode 100644 index 00000000..4105bf52 --- /dev/null +++ b/js/tests/phantom.js @@ -0,0 +1,63 @@ +// Simple phantom.js integration script +// Adapted from Modernizr + +function waitFor(testFx, onReady, timeOutMillis) { + var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 5001 //< Default Max Timout is 5s + , start = new Date().getTime() + , condition = false + , interval = setInterval(function () { + if ((new Date().getTime() - start < maxtimeOutMillis) && !condition) { + // If not time-out yet and condition not yet fulfilled + condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()) //< defensive code + } else { + if (!condition) { + // If condition still not fulfilled (timeout but condition is 'false') + console.log("'waitFor()' timeout") + phantom.exit(1) + } else { + // Condition fulfilled (timeout and/or condition is 'true') + typeof(onReady) === "string" ? eval(onReady) : onReady() //< Do what it's supposed to do once the condition is fulfilled + clearInterval(interval) //< Stop this interval + } + } + }, 100) //< repeat check every 100ms +} + + +if (phantom.args.length === 0 || phantom.args.length > 2) { + console.log('Usage: phantom.js URL') + phantom.exit() +} + +var page = new WebPage() + +// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this") +page.onConsoleMessage = function(msg) { + console.log(msg) +}; + +page.open(phantom.args[0], function(status){ + if (status !== "success") { + console.log("Unable to access network") + phantom.exit() + } else { + waitFor(function(){ + return page.evaluate(function(){ + var el = document.getElementById('qunit-testresult') + if (el && el.innerText.match('completed')) { + return true + } + return false + }) + }, function(){ + var failedNum = page.evaluate(function(){ + var el = document.getElementById('qunit-testresult') + try { + return el.getElementsByClassName('failed')[0].innerHTML + } catch (e) { } + return 10000 + }); + phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0) + }) + } +}) \ No newline at end of file diff --git a/js/tests/server.js b/js/tests/server.js new file mode 100644 index 00000000..7c8445fe --- /dev/null +++ b/js/tests/server.js @@ -0,0 +1,14 @@ +/* + * Simple connect server for phantom.js + * Adapted from Modernizr + */ + +var connect = require('connect') + , http = require('http') + , fs = require('fs') + , app = connect() + .use(connect.static(__dirname + '/../../')); + +http.createServer(app).listen(3000); + +fs.writeFileSync(__dirname + '/pid.txt', process.pid, 'utf-8') \ No newline at end of file diff --git a/js/tests/unit/bootstrap-affix.js b/js/tests/unit/bootstrap-affix.js new file mode 100644 index 00000000..c9788789 --- /dev/null +++ b/js/tests/unit/bootstrap-affix.js @@ -0,0 +1,25 @@ +$(function () { + + module("bootstrap-affix") + + test("should provide no conflict", function () { + var affix = $.fn.affix.noConflict() + ok(!$.fn.affix, 'affix was set back to undefined (org value)') + $.fn.affix = affix + }) + + test("should be defined on jquery object", function () { + ok($(document.body).affix, 'affix method is defined') + }) + + test("should return element", function () { + ok($(document.body).affix()[0] == document.body, 'document.body returned') + }) + + test("should exit early if element is not visible", function () { + var $affix = $('
          ').affix() + $affix.data('affix').checkPosition() + ok(!$affix.hasClass('affix'), 'affix class was not added') + }) + +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-alert.js b/js/tests/unit/bootstrap-alert.js index e607f434..9a6b514c 100644 --- a/js/tests/unit/bootstrap-alert.js +++ b/js/tests/unit/bootstrap-alert.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-alerts") + test("should provide no conflict", function () { + var alert = $.fn.alert.noConflict() + ok(!$.fn.alert, 'alert was set back to undefined (org value)') + $.fn.alert = alert + }) + test("should be defined on jquery object", function () { ok($(document.body).alert, 'alert method is defined') }) @@ -38,4 +44,19 @@ $(function () { ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom') }) + test("should not fire closed when close is prevented", function () { + $.support.transition = false + stop(); + $('
          ') + .bind('close', function (e) { + e.preventDefault(); + ok(true); + start(); + }) + .bind('closed', function () { + ok(false); + }) + .alert('close') + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-button.js b/js/tests/unit/bootstrap-button.js index 8aed857e..e23ff9e3 100644 --- a/js/tests/unit/bootstrap-button.js +++ b/js/tests/unit/bootstrap-button.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-buttons") + test("should provide no conflict", function () { + var button = $.fn.button.noConflict() + ok(!$.fn.button, 'button was set back to undefined (org value)') + $.fn.button = button + }) + test("should be defined on jquery object", function () { ok($(document.body).button, 'button method is defined') }) @@ -45,10 +51,52 @@ $(function () { }) test("should toggle active", function () { - var btn = $('') + var btn = $('') ok(!btn.hasClass('active'), 'btn does not have active class') btn.button('toggle') ok(btn.hasClass('active'), 'btn has class active') }) + test("should toggle active when btn children are clicked", function () { + var btn = $('') + , inner = $('') + btn + .append(inner) + .appendTo($('#qunit-fixture')) + ok(!btn.hasClass('active'), 'btn does not have active class') + inner.click() + ok(btn.hasClass('active'), 'btn has class active') + }) + + test("should toggle active when btn children are clicked within btn-group", function () { + var btngroup = $('
          ') + , btn = $('') + , inner = $('') + btngroup + .append(btn.append(inner)) + .appendTo($('#qunit-fixture')) + ok(!btn.hasClass('active'), 'btn does not have active class') + inner.click() + ok(btn.hasClass('active'), 'btn has class active') + }) + + test("should check for closest matching toggle", function () { + var group = $("
          ") + , btn1 = $("") + , btn2 = $("") + , wrap = $("
          ") + + wrap.append(btn1, btn2) + + group + .append(wrap) + .appendTo($('#qunit-fixture')) + + ok(btn1.hasClass('active'), 'btn1 has active class') + ok(!btn2.hasClass('active'), 'btn2 does not have active class') + btn2.click() + ok(!btn1.hasClass('active'), 'btn1 does not have active class') + ok(btn2.hasClass('active'), 'btn2 has active class') + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-carousel.js b/js/tests/unit/bootstrap-carousel.js new file mode 100644 index 00000000..13b8f721 --- /dev/null +++ b/js/tests/unit/bootstrap-carousel.js @@ -0,0 +1,69 @@ +$(function () { + + module("bootstrap-carousel") + + test("should provide no conflict", function () { + var carousel = $.fn.carousel.noConflict() + ok(!$.fn.carousel, 'carousel was set back to undefined (org value)') + $.fn.carousel = carousel + }) + + test("should be defined on jquery object", function () { + ok($(document.body).carousel, 'carousel method is defined') + }) + + test("should return element", function () { + ok($(document.body).carousel()[0] == document.body, 'document.body returned') + }) + + test("should not fire sliden when slide is prevented", function () { + $.support.transition = false + stop() + $('
          ') + .bind('slide', function (e) { + e.preventDefault(); + ok(true); + start(); + }) + .bind('slid', function () { + ok(false); + }) + .carousel('next') + }) + + test("should fire slide event with relatedTarget", function () { + var template = '' + $.support.transition = false + stop() + $(template) + .on('slide', function (e) { + e.preventDefault(); + ok(e.relatedTarget); + ok($(e.relatedTarget).hasClass('item')); + start(); + }) + .carousel('next') + }) + + test("should set interval from data attribute", 3,function () { + var template = $(''); + template.attr("data-interval", 1814); + + template.appendTo("body"); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('carousel').options.interval == 1814); + $('#myCarousel').remove(); + + template.appendTo("body").attr("data-modal", "foobar"); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('carousel').options.interval == 1814, "even if there is an data-modal attribute set"); + $('#myCarousel').remove(); + + template.appendTo("body"); + $('[data-slide]').first().click(); + $('#myCarousel').attr('data-interval', 1860); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('carousel').options.interval == 1814, "attributes should be read only on intitialization"); + $('#myCarousel').remove(); + }) +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-collapse.js b/js/tests/unit/bootstrap-collapse.js index 698238d9..4c5916ec 100644 --- a/js/tests/unit/bootstrap-collapse.js +++ b/js/tests/unit/bootstrap-collapse.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-collapse") + test("should provide no conflict", function () { + var collapse = $.fn.collapse.noConflict() + ok(!$.fn.collapse, 'collapse was set back to undefined (org value)') + $.fn.collapse = collapse + }) + test("should be defined on jquery object", function () { ok($(document.body).collapse, 'collapse method is defined') }) @@ -22,4 +28,67 @@ $(function () { ok(/height/.test(el.attr('style')), 'has height set') }) + test("should not fire shown when show is prevented", function () { + $.support.transition = false + stop() + $('
          ') + .bind('show', function (e) { + e.preventDefault(); + ok(true); + start(); + }) + .bind('shown', function () { + ok(false); + }) + .collapse('show') + }) + + test("should reset style to auto after finishing opening collapse", function () { + $.support.transition = false + stop() + $('
          ') + .bind('show', function () { + ok(this.style.height == '0px') + }) + .bind('shown', function () { + ok(this.style.height == 'auto') + start() + }) + .collapse('show') + }) + + test("should add active class to target when collapse shown", function () { + $.support.transition = false + stop() + + var target = $('') + .appendTo($('#qunit-fixture')) + + var collapsible = $('
          ') + .appendTo($('#qunit-fixture')) + .on('show', function () { + ok(!target.hasClass('collapsed')) + start() + }) + + target.click() + }) + + test("should remove active class to target when collapse hidden", function () { + $.support.transition = false + stop() + + var target = $('') + .appendTo($('#qunit-fixture')) + + var collapsible = $('
          ') + .appendTo($('#qunit-fixture')) + .on('hide', function () { + ok(target.hasClass('collapsed')) + start() + }) + + target.click() + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-dropdown.js b/js/tests/unit/bootstrap-dropdown.js index 368ced2a..2f0d2d29 100644 --- a/js/tests/unit/bootstrap-dropdown.js +++ b/js/tests/unit/bootstrap-dropdown.js @@ -2,12 +2,53 @@ $(function () { module("bootstrap-dropdowns") + test("should provide no conflict", function () { + var dropdown = $.fn.dropdown.noConflict() + ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)') + $.fn.dropdown = dropdown + }) + test("should be defined on jquery object", function () { ok($(document.body).dropdown, 'dropdown method is defined') }) test("should return element", function () { - ok($(document.body).dropdown()[0] == document.body, 'document.body returned') + var el = $("
          ") + ok(el.dropdown()[0] === el[0], 'same element returned') + }) + + test("should not open dropdown if target is disabled", function () { + var dropdownHTML = '' + , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() + + ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') + }) + + test("should not open dropdown if target is disabled", function () { + var dropdownHTML = '' + , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() + + ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') }) test("should add class open to menu if clicked", function () { @@ -27,6 +68,24 @@ $(function () { ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') }) + test("should test if element has a # before assuming it's a selector", function () { + var dropdownHTML = '' + , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() + + ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') + }) + + test("should remove open class if body clicked", function () { var dropdownHTML = '
            ' + '
          • ' @@ -50,4 +109,43 @@ $(function () { dropdown.remove() }) + test("should remove open class if body clicked, with multiple drop downs", function () { + var dropdownHTML = + '' + + '
            ' + + ' ' + + ' ' + + ' ' + + '
            ' + , dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') + , first = dropdowns.first() + , last = dropdowns.last() + + ok(dropdowns.length == 2, "Should be two dropdowns") + + first.click() + ok(first.parents('.open').length == 1, 'open class added on click') + ok($('#qunit-fixture .open').length == 1, 'only one object is open') + $('body').click() + ok($("#qunit-fixture .open").length === 0, 'open class removed') + + last.click() + ok(last.parent('.open').length == 1, 'open class added on click') + ok($('#qunit-fixture .open').length == 1, 'only one object is open') + $('body').click() + ok($("#qunit-fixture .open").length === 0, 'open class removed') + + $("#qunit-fixture").html("") + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-modal.js b/js/tests/unit/bootstrap-modal.js index 22f5781e..98aa990a 100644 --- a/js/tests/unit/bootstrap-modal.js +++ b/js/tests/unit/bootstrap-modal.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-modal") + test("should provide no conflict", function () { + var modal = $.fn.modal.noConflict() + ok(!$.fn.modal, 'modal was set back to undefined (org value)') + $.fn.modal = modal + }) + test("should be defined on jquery object", function () { var div = $("") ok(div.modal, 'modal method is defined') @@ -29,6 +35,35 @@ $(function () { .modal("show") }) + test("should fire show event", function () { + stop() + $.support.transition = false + $("") + .bind("show", function () { + ok(true, "show was called") + }) + .bind("shown", function () { + $(this).remove() + start() + }) + .modal("show") + }) + + test("should not fire shown when default prevented", function () { + stop() + $.support.transition = false + $("") + .bind("show", function (e) { + e.preventDefault() + ok(true, "show was called") + start() + }) + .bind("shown", function () { + ok(false, "shown was called") + }) + .modal("show") + }) + test("should hide modal when hide is called", function () { stop() $.support.transition = false diff --git a/js/tests/unit/bootstrap-phantom.js b/js/tests/unit/bootstrap-phantom.js new file mode 100644 index 00000000..a04aeaa8 --- /dev/null +++ b/js/tests/unit/bootstrap-phantom.js @@ -0,0 +1,21 @@ +// Logging setup for phantom integration +// adapted from Modernizr + +QUnit.begin = function () { + console.log("Starting test suite") + console.log("================================================\n") +} + +QUnit.moduleDone = function (opts) { + if (opts.failed === 0) { + console.log("\u2714 All tests passed in '" + opts.name + "' module") + } else { + console.log("\u2716 " + opts.failed + " tests failed in '" + opts.name + "' module") + } +} + +QUnit.done = function (opts) { + console.log("\n================================================") + console.log("Tests completed in " + opts.runtime + " milliseconds") + console.log(opts.passed + " tests of " + opts.total + " passed, " + opts.failed + " failed.") +} \ No newline at end of file diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js index afd6b170..20234e14 100644 --- a/js/tests/unit/bootstrap-popover.js +++ b/js/tests/unit/bootstrap-popover.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-popover") + test("should provide no conflict", function () { + var popover = $.fn.popover.noConflict() + ok(!$.fn.popover, 'popover was set back to undefined (org value)') + $.fn.popover = popover + }) + test("should be defined on jquery object", function () { var div = $('
            ') ok(div.popover, 'popover method is defined') @@ -70,7 +76,7 @@ $(function () { ok(!$('.popover').length, 'popover was removed') $('#qunit-fixture').empty() }) - + test("should respect custom classes", function() { $.support.transition = false var popover = $('@fat') @@ -80,7 +86,7 @@ $(function () { , content: 'Test' , template: '

            ' }) - + popover.popover('show') ok($('.popover').length, 'popover was inserted') @@ -90,4 +96,18 @@ $(function () { ok(!$('.popover').length, 'popover was removed') $('#qunit-fixture').empty() }) + + test("should destroy popover", function () { + var popover = $('
            ').popover({trigger: 'hover'}).on('click.foo', function(){}) + ok(popover.data('popover'), 'popover has data') + ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event') + ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event') + popover.popover('show') + popover.popover('destroy') + ok(!popover.hasClass('in'), 'popover is hidden') + ok(!popover.data('popover'), 'popover does not have data') + ok($._data(popover[0],'events').click[0].namespace == 'foo', 'popover still has click.foo') + ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events') + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-scrollspy.js b/js/tests/unit/bootstrap-scrollspy.js index bee46a92..32bfa713 100644 --- a/js/tests/unit/bootstrap-scrollspy.js +++ b/js/tests/unit/bootstrap-scrollspy.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-scrollspy") + test("should provide no conflict", function () { + var scrollspy = $.fn.scrollspy.noConflict() + ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)') + $.fn.scrollspy = scrollspy + }) + test("should be defined on jquery object", function () { ok($(document.body).scrollspy, 'scrollspy method is defined') }) diff --git a/js/tests/unit/bootstrap-tab.js b/js/tests/unit/bootstrap-tab.js index 18f490fa..ba5910d5 100644 --- a/js/tests/unit/bootstrap-tab.js +++ b/js/tests/unit/bootstrap-tab.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-tabs") + test("should provide no conflict", function () { + var tab = $.fn.tab.noConflict() + ok(!$.fn.tab, 'tab was set back to undefined (org value)') + $.fn.tab = tab + }) + test("should be defined on jquery object", function () { ok($(document.body).tab, 'tabs method is defined') }) @@ -42,4 +48,39 @@ $(function () { equals($("#qunit-fixture").find('.active').attr('id'), "home") }) + + test("should not fire closed when close is prevented", function () { + $.support.transition = false + stop(); + $('
            ') + .bind('show', function (e) { + e.preventDefault(); + ok(true); + start(); + }) + .bind('shown', function () { + ok(false); + }) + .tab('show') + }) + + test("show and shown events should reference correct relatedTarget", function () { + var dropHTML = + '
              ' + + '
            • 1' + + '' + + '
              • ' + + '
            ' + + $(dropHTML).find('ul>li:first a').tab('show').end() + .find('ul>li:last a').on('show', function(event){ + equals(event.relatedTarget.hash, "#1-1") + }).on('shown', function(event){ + equals(event.relatedTarget.hash, "#1-1") + }).tab('show') + }) + }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js index 8543162c..ba513474 100644 --- a/js/tests/unit/bootstrap-tooltip.js +++ b/js/tests/unit/bootstrap-tooltip.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-tooltip") + test("should provide no conflict", function () { + var tooltip = $.fn.tooltip.noConflict() + ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)') + $.fn.tooltip = tooltip + }) + test("should be defined on jquery object", function () { var div = $("
            ") ok(div.tooltip, 'popover method is defined') @@ -33,14 +39,15 @@ $(function () { .tooltip({placement: 'bottom'}) .tooltip('show') - ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied') + ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied') tooltip.tooltip('hide') }) - test("should always allow html entities", function () { + test("should allow html entities", function () { $.support.transition = false var tooltip = $('') .appendTo('#qunit-fixture') + .tooltip({html: true}) .tooltip('show') ok($('.tooltip b').length, 'b tag was inserted') @@ -59,4 +66,94 @@ $(function () { ok(!$(".tooltip").length, 'tooltip removed') }) + test("should not show tooltip if leave event occurs before delay expires", function () { + var tooltip = $('') + .appendTo('#qunit-fixture') + .tooltip({ delay: 200 }) + + stop() + + tooltip.trigger('mouseenter') + + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + tooltip.trigger('mouseout') + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + start() + }, 200) + }, 100) + }) + + test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () { + var tooltip = $('') + .appendTo('#qunit-fixture') + .tooltip({ delay: { show: 200, hide: 0} }) + + stop() + + tooltip.trigger('mouseenter') + + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + tooltip.trigger('mouseout') + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + start() + }, 200) + }, 100) + }) + + test("should not show tooltip if leave event occurs before delay expires", function () { + var tooltip = $('') + .appendTo('#qunit-fixture') + .tooltip({ delay: 100 }) + stop() + tooltip.trigger('mouseenter') + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + tooltip.trigger('mouseout') + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + start() + }, 100) + }, 50) + }) + + test("should show tooltip if leave event hasn't occured before delay expires", function () { + var tooltip = $('') + .appendTo('#qunit-fixture') + .tooltip({ delay: 150 }) + stop() + tooltip.trigger('mouseenter') + setTimeout(function () { + ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') + }, 100) + setTimeout(function () { + ok($(".tooltip").is('.fade.in'), 'tooltip has faded in') + start() + }, 200) + }) + + test("should destroy tooltip", function () { + var tooltip = $('
            ').tooltip().on('click.foo', function(){}) + ok(tooltip.data('tooltip'), 'tooltip has data') + ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event') + ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') + tooltip.tooltip('show') + tooltip.tooltip('destroy') + ok(!tooltip.hasClass('in'), 'tooltip is hidden') + ok(!$._data(tooltip[0], 'tooltip'), 'tooltip does not have data') + ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo') + ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events') + }) + + test("should show tooltip with delegate selector on click", function () { + var div = $('
            ') + var tooltip = div.appendTo('#qunit-fixture') + .tooltip({ selector: 'a[rel=tooltip]', + trigger: 'click' }) + div.find('a').trigger('click') + ok($(".tooltip").is('.fade.in'), 'tooltip is faded in') + }) }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-transition.js b/js/tests/unit/bootstrap-transition.js index 3f28d267..086773fa 100644 --- a/js/tests/unit/bootstrap-transition.js +++ b/js/tests/unit/bootstrap-transition.js @@ -3,7 +3,7 @@ $(function () { module("bootstrap-transition") test("should be defined on jquery support object", function () { - ok($.support.transition != undefined, 'transition object is defined') + ok($.support.transition !== undefined, 'transition object is defined') }) test("should provide an end object", function () { diff --git a/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js index 455ed415..4bdbce97 100644 --- a/js/tests/unit/bootstrap-typeahead.js +++ b/js/tests/unit/bootstrap-typeahead.js @@ -2,6 +2,12 @@ $(function () { module("bootstrap-typeahead") + test("should provide no conflict", function () { + var typeahead = $.fn.typeahead.noConflict() + ok(!$.fn.typeahead, 'typeahead was set back to undefined (org value)') + $.fn.typeahead = typeahead + }) + test("should be defined on jquery object", function () { ok($(document.body).typeahead, 'alert method is defined') }) @@ -13,14 +19,9 @@ $(function () { test("should listen to an input", function () { var $input = $('') $input.typeahead() - ok($input.data('events').blur, 'has a blur event') - ok($input.data('events').keypress, 'has a keypress event') - ok($input.data('events').keyup, 'has a keyup event') - if ($.browser.webkit || $.browser.msie) { - ok($input.data('events').keydown, 'has a keydown event') - } else { - ok($input.data('events').keydown, 'does not have a keydown event') - } + ok($._data($input[0], 'events').blur, 'has a blur event') + ok($._data($input[0], 'events').keypress, 'has a keypress event') + ok($._data($input[0], 'events').keyup, 'has a keyup event') }) test("should create a menu", function () { @@ -32,12 +33,14 @@ $(function () { var $input = $('') , $menu = $input.typeahead().data('typeahead').$menu - ok($menu.data('events').mouseover, 'has a mouseover(pseudo: mouseenter)') - ok($menu.data('events').click, 'has a click') + ok($._data($menu[0], 'events').mouseover, 'has a mouseover(pseudo: mouseenter)') + ok($._data($menu[0], 'events').click, 'has a click') }) test("should show menu when query entered", function () { - var $input = $('').typeahead({ + var $input = $('') + .appendTo('body') + .typeahead({ source: ['aa', 'ab', 'ac'] }) , typeahead = $input.data('typeahead') @@ -49,6 +52,62 @@ $(function () { equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + $input.remove() + typeahead.$menu.remove() + }) + + test("should accept data source via synchronous function", function () { + var $input = $('').typeahead({ + source: function () { + return ['aa', 'ab', 'ac'] + } + }).appendTo('body') + , typeahead = $input.data('typeahead') + + $input.val('a') + typeahead.lookup() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + $input.remove() + typeahead.$menu.remove() + }) + + test("should accept data source via asynchronous function", function () { + var $input = $('').typeahead({ + source: function (query, process) { + process(['aa', 'ab', 'ac']) + } + }).appendTo('body') + , typeahead = $input.data('typeahead') + + $input.val('a') + typeahead.lookup() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + $input.remove() + typeahead.$menu.remove() + }) + + test("should not explode when regex chars are entered", function () { + var $input = $('').typeahead({ + source: ['aa', 'ab', 'ac', 'mdo*', 'fat+'] + }).appendTo('body') + , typeahead = $input.data('typeahead') + + $input.val('+') + typeahead.lookup() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 1, 'has 1 item in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + $input.remove() typeahead.$menu.remove() }) @@ -56,7 +115,7 @@ $(function () { stop() var $input = $('').typeahead({ source: ['aa', 'ab', 'ac'] - }) + }).appendTo('body') , typeahead = $input.data('typeahead') $input.val('a') @@ -73,13 +132,14 @@ $(function () { start() }, 200) + $input.remove() typeahead.$menu.remove() }) test("should set next item when down arrow is pressed", function () { var $input = $('').typeahead({ source: ['aa', 'ab', 'ac'] - }) + }).appendTo('body') , typeahead = $input.data('typeahead') $input.val('a') @@ -90,21 +150,38 @@ $(function () { equals(typeahead.$menu.find('.active').length, 1, 'one item is active') ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active") + // simulate entire key pressing event $input.trigger({ + type: 'keydown' + , keyCode: 40 + }) + .trigger({ type: 'keypress' , keyCode: 40 }) + .trigger({ + type: 'keyup' + , keyCode: 40 + }) ok(typeahead.$menu.find('li').first().next().hasClass('active'), "second item is active") - $input.trigger({ + type: 'keydown' + , keyCode: 38 + }) + .trigger({ type: 'keypress' , keyCode: 38 }) + .trigger({ + type: 'keyup' + , keyCode: 38 + }) ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active") + $input.remove() typeahead.$menu.remove() }) @@ -112,17 +189,43 @@ $(function () { test("should set input value to selected item", function () { var $input = $('').typeahead({ source: ['aa', 'ab', 'ac'] - }) + }).appendTo('body') , typeahead = $input.data('typeahead') + , changed = false $input.val('a') typeahead.lookup() + $input.change(function() { changed = true }); + $(typeahead.$menu.find('li')[2]).mouseover().click() equals($input.val(), 'ac', 'input value was correctly set') ok(!typeahead.$menu.is(':visible'), 'the menu was hidden') + ok(changed, 'a change event was fired') + + $input.remove() + typeahead.$menu.remove() + }) + + test("should start querying when minLength is met", function () { + var $input = $('').typeahead({ + source: ['aaaa', 'aaab', 'aaac'], + minLength: 3 + }).appendTo('body') + , typeahead = $input.data('typeahead') + + $input.val('aa') + typeahead.lookup() + + equals(typeahead.$menu.find('li').length, 0, 'has 0 items in menu') + + $input.val('aaa') + typeahead.lookup() + + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + $input.remove() typeahead.$menu.remove() }) -}) \ No newline at end of file +}) diff --git a/js/tests/vendor/jquery.js b/js/tests/vendor/jquery.js index 00c4e23a..3b8d15d0 100644 --- a/js/tests/vendor/jquery.js +++ b/js/tests/vendor/jquery.js @@ -1,9252 +1,2 @@ -/*! jQuery v1.7.1 jquery.com | jquery.org/license */ -(function( window, undefined ) { - -// Use the correct document accordingly with window argument (sandbox) -var document = window.document, - navigator = window.navigator, - location = window.location; -var jQuery = (function() { - -// Define a local copy of jQuery -var jQuery = function( selector, context ) { - // The jQuery object is actually just the init constructor 'enhanced' - return new jQuery.fn.init( selector, context, rootjQuery ); - }, - - // Map over jQuery in case of overwrite - _jQuery = window.jQuery, - - // Map over the $ in case of overwrite - _$ = window.$, - - // A central reference to the root jQuery(document) - rootjQuery, - - // A simple way to check for HTML strings or ID strings - // Prioritize #id over to avoid XSS via location.hash (#9521) - quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/, - - // Check if a string has a non-whitespace character in it - rnotwhite = /\S/, - - // Used for trimming whitespace - trimLeft = /^\s+/, - trimRight = /\s+$/, - - // Match a standalone tag - rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, - - // JSON RegExp - rvalidchars = /^[\],:{}\s]*$/, - rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, - rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, - rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g, - - // Useragent RegExp - rwebkit = /(webkit)[ \/]([\w.]+)/, - ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, - rmsie = /(msie) ([\w.]+)/, - rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, - - // Matches dashed string for camelizing - rdashAlpha = /-([a-z]|[0-9])/ig, - rmsPrefix = /^-ms-/, - - // Used by jQuery.camelCase as callback to replace() - fcamelCase = function( all, letter ) { - return ( letter + "" ).toUpperCase(); - }, - - // Keep a UserAgent string for use with jQuery.browser - userAgent = navigator.userAgent, - - // For matching the engine and version of the browser - browserMatch, - - // The deferred used on DOM ready - readyList, - - // The ready event handler - DOMContentLoaded, - - // Save a reference to some core methods - toString = Object.prototype.toString, - hasOwn = Object.prototype.hasOwnProperty, - push = Array.prototype.push, - slice = Array.prototype.slice, - trim = String.prototype.trim, - indexOf = Array.prototype.indexOf, - - // [[Class]] -> type pairs - class2type = {}; - -jQuery.fn = jQuery.prototype = { - constructor: jQuery, - init: function( selector, context, rootjQuery ) { - var match, elem, ret, doc; - - // Handle $(""), $(null), or $(undefined) - if ( !selector ) { - return this; - } - - // Handle $(DOMElement) - if ( selector.nodeType ) { - this.context = this[0] = selector; - this.length = 1; - return this; - } - - // The body element only exists once, optimize finding it - if ( selector === "body" && !context && document.body ) { - this.context = document; - this[0] = document.body; - this.selector = selector; - this.length = 1; - return this; - } - - // Handle HTML strings - if ( typeof selector === "string" ) { - // Are we dealing with HTML string or an ID? - if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { - // Assume that strings that start and end with <> are HTML and skip the regex check - match = [ null, selector, null ]; - - } else { - match = quickExpr.exec( selector ); - } - - // Verify a match, and that no context was specified for #id - if ( match && (match[1] || !context) ) { - - // HANDLE: $(html) -> $(array) - if ( match[1] ) { - context = context instanceof jQuery ? context[0] : context; - doc = ( context ? context.ownerDocument || context : document ); - - // If a single string is passed in and it's a single tag - // just do a createElement and skip the rest - ret = rsingleTag.exec( selector ); - - if ( ret ) { - if ( jQuery.isPlainObject( context ) ) { - selector = [ document.createElement( ret[1] ) ]; - jQuery.fn.attr.call( selector, context, true ); - - } else { - selector = [ doc.createElement( ret[1] ) ]; - } - - } else { - ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); - selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes; - } - - return jQuery.merge( this, selector ); - - // HANDLE: $("#id") - } else { - elem = document.getElementById( match[2] ); - - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - if ( elem && elem.parentNode ) { - // Handle the case where IE and Opera return items - // by name instead of ID - if ( elem.id !== match[2] ) { - return rootjQuery.find( selector ); - } - - // Otherwise, we inject the element directly into the jQuery object - this.length = 1; - this[0] = elem; - } - - this.context = document; - this.selector = selector; - return this; - } - - // HANDLE: $(expr, $(...)) - } else if ( !context || context.jquery ) { - return ( context || rootjQuery ).find( selector ); - - // HANDLE: $(expr, context) - // (which is just equivalent to: $(context).find(expr) - } else { - return this.constructor( context ).find( selector ); - } - - // HANDLE: $(function) - // Shortcut for document ready - } else if ( jQuery.isFunction( selector ) ) { - return rootjQuery.ready( selector ); - } - - if ( selector.selector !== undefined ) { - this.selector = selector.selector; - this.context = selector.context; - } - - return jQuery.makeArray( selector, this ); - }, - - // Start with an empty selector - selector: "", - - // The current version of jQuery being used - jquery: "1.7.1", - - // The default length of a jQuery object is 0 - length: 0, - - // The number of elements contained in the matched element set - size: function() { - return this.length; - }, - - toArray: function() { - return slice.call( this, 0 ); - }, - - // Get the Nth element in the matched element set OR - // Get the whole matched element set as a clean array - get: function( num ) { - return num == null ? - - // Return a 'clean' array - this.toArray() : - - // Return just the object - ( num < 0 ? this[ this.length + num ] : this[ num ] ); - }, - - // Take an array of elements and push it onto the stack - // (returning the new matched element set) - pushStack: function( elems, name, selector ) { - // Build a new jQuery matched element set - var ret = this.constructor(); - - if ( jQuery.isArray( elems ) ) { - push.apply( ret, elems ); - - } else { - jQuery.merge( ret, elems ); - } - - // Add the old object onto the stack (as a reference) - ret.prevObject = this; - - ret.context = this.context; - - if ( name === "find" ) { - ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; - } else if ( name ) { - ret.selector = this.selector + "." + name + "(" + selector + ")"; - } - - // Return the newly-formed element set - return ret; - }, - - // Execute a callback for every element in the matched set. - // (You can seed the arguments with an array of args, but this is - // only used internally.) - each: function( callback, args ) { - return jQuery.each( this, callback, args ); - }, - - ready: function( fn ) { - // Attach the listeners - jQuery.bindReady(); - - // Add the callback - readyList.add( fn ); - - return this; - }, - - eq: function( i ) { - i = +i; - return i === -1 ? - this.slice( i ) : - this.slice( i, i + 1 ); - }, - - first: function() { - return this.eq( 0 ); - }, - - last: function() { - return this.eq( -1 ); - }, - - slice: function() { - return this.pushStack( slice.apply( this, arguments ), - "slice", slice.call(arguments).join(",") ); - }, - - map: function( callback ) { - return this.pushStack( jQuery.map(this, function( elem, i ) { - return callback.call( elem, i, elem ); - })); - }, - - end: function() { - return this.prevObject || this.constructor(null); - }, - - // For internal use only. - // Behaves like an Array's method, not like a jQuery method. - push: push, - sort: [].sort, - splice: [].splice -}; - -// Give the init function the jQuery prototype for later instantiation -jQuery.fn.init.prototype = jQuery.fn; - -jQuery.extend = jQuery.fn.extend = function() { - var options, name, src, copy, copyIsArray, clone, - target = arguments[0] || {}, - i = 1, - length = arguments.length, - deep = false; - - // Handle a deep copy situation - if ( typeof target === "boolean" ) { - deep = target; - target = arguments[1] || {}; - // skip the boolean and the target - i = 2; - } - - // Handle case when target is a string or something (possible in deep copy) - if ( typeof target !== "object" && !jQuery.isFunction(target) ) { - target = {}; - } - - // extend jQuery itself if only one argument is passed - if ( length === i ) { - target = this; - --i; - } - - for ( ; i < length; i++ ) { - // Only deal with non-null/undefined values - if ( (options = arguments[ i ]) != null ) { - // Extend the base object - for ( name in options ) { - src = target[ name ]; - copy = options[ name ]; - - // Prevent never-ending loop - if ( target === copy ) { - continue; - } - - // Recurse if we're merging plain objects or arrays - if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { - if ( copyIsArray ) { - copyIsArray = false; - clone = src && jQuery.isArray(src) ? src : []; - - } else { - clone = src && jQuery.isPlainObject(src) ? src : {}; - } - - // Never move original objects, clone them - target[ name ] = jQuery.extend( deep, clone, copy ); - - // Don't bring in undefined values - } else if ( copy !== undefined ) { - target[ name ] = copy; - } - } - } - } - - // Return the modified object - return target; -}; - -jQuery.extend({ - noConflict: function( deep ) { - if ( window.$ === jQuery ) { - window.$ = _$; - } - - if ( deep && window.jQuery === jQuery ) { - window.jQuery = _jQuery; - } - - return jQuery; - }, - - // Is the DOM ready to be used? Set to true once it occurs. - isReady: false, - - // A counter to track how many items to wait for before - // the ready event fires. See #6781 - readyWait: 1, - - // Hold (or release) the ready event - holdReady: function( hold ) { - if ( hold ) { - jQuery.readyWait++; - } else { - jQuery.ready( true ); - } - }, - - // Handle when the DOM is ready - ready: function( wait ) { - // Either a released hold or an DOMready/load event and not yet ready - if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) { - // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). - if ( !document.body ) { - return setTimeout( jQuery.ready, 1 ); - } - - // Remember that the DOM is ready - jQuery.isReady = true; - - // If a normal DOM Ready event fired, decrement, and wait if need be - if ( wait !== true && --jQuery.readyWait > 0 ) { - return; - } - - // If there are functions bound, to execute - readyList.fireWith( document, [ jQuery ] ); - - // Trigger any bound ready events - if ( jQuery.fn.trigger ) { - jQuery( document ).trigger( "ready" ).off( "ready" ); - } - } - }, - - bindReady: function() { - if ( readyList ) { - return; - } - - readyList = jQuery.Callbacks( "once memory" ); - - // Catch cases where $(document).ready() is called after the - // browser event has already occurred. - if ( document.readyState === "complete" ) { - // Handle it asynchronously to allow scripts the opportunity to delay ready - return setTimeout( jQuery.ready, 1 ); - } - - // Mozilla, Opera and webkit nightlies currently support this event - if ( document.addEventListener ) { - // Use the handy event callback - document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); - - // A fallback to window.onload, that will always work - window.addEventListener( "load", jQuery.ready, false ); - - // If IE event model is used - } else if ( document.attachEvent ) { - // ensure firing before onload, - // maybe late but safe also for iframes - document.attachEvent( "onreadystatechange", DOMContentLoaded ); - - // A fallback to window.onload, that will always work - window.attachEvent( "onload", jQuery.ready ); - - // If IE and not a frame - // continually check to see if the document is ready - var toplevel = false; - - try { - toplevel = window.frameElement == null; - } catch(e) {} - - if ( document.documentElement.doScroll && toplevel ) { - doScrollCheck(); - } - } - }, - - // See test/unit/core.js for details concerning isFunction. - // Since version 1.3, DOM methods and functions like alert - // aren't supported. They return false on IE (#2968). - isFunction: function( obj ) { - return jQuery.type(obj) === "function"; - }, - - isArray: Array.isArray || function( obj ) { - return jQuery.type(obj) === "array"; - }, - - // A crude way of determining if an object is a window - isWindow: function( obj ) { - return obj && typeof obj === "object" && "setInterval" in obj; - }, - - isNumeric: function( obj ) { - return !isNaN( parseFloat(obj) ) && isFinite( obj ); - }, - - type: function( obj ) { - return obj == null ? - String( obj ) : - class2type[ toString.call(obj) ] || "object"; - }, - - isPlainObject: function( obj ) { - // Must be an Object. - // Because of IE, we also have to check the presence of the constructor property. - // Make sure that DOM nodes and window objects don't pass through, as well - if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) { - return false; - } - - try { - // Not own constructor property must be Object - if ( obj.constructor && - !hasOwn.call(obj, "constructor") && - !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) { - return false; - } - } catch ( e ) { - // IE8,9 Will throw exceptions on certain host objects #9897 - return false; - } - - // Own properties are enumerated firstly, so to speed up, - // if last one is own, then all properties are own. - - var key; - for ( key in obj ) {} - - return key === undefined || hasOwn.call( obj, key ); - }, - - isEmptyObject: function( obj ) { - for ( var name in obj ) { - return false; - } - return true; - }, - - error: function( msg ) { - throw new Error( msg ); - }, - - parseJSON: function( data ) { - if ( typeof data !== "string" || !data ) { - return null; - } - - // Make sure leading/trailing whitespace is removed (IE can't handle it) - data = jQuery.trim( data ); - - // Attempt to parse using the native JSON parser first - if ( window.JSON && window.JSON.parse ) { - return window.JSON.parse( data ); - } - - // Make sure the incoming data is actual JSON - // Logic borrowed from http://json.org/json2.js - if ( rvalidchars.test( data.replace( rvalidescape, "@" ) - .replace( rvalidtokens, "]" ) - .replace( rvalidbraces, "")) ) { - - return ( new Function( "return " + data ) )(); - - } - jQuery.error( "Invalid JSON: " + data ); - }, - - // Cross-browser xml parsing - parseXML: function( data ) { - var xml, tmp; - try { - if ( window.DOMParser ) { // Standard - tmp = new DOMParser(); - xml = tmp.parseFromString( data , "text/xml" ); - } else { // IE - xml = new ActiveXObject( "Microsoft.XMLDOM" ); - xml.async = "false"; - xml.loadXML( data ); - } - } catch( e ) { - xml = undefined; - } - if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) { - jQuery.error( "Invalid XML: " + data ); - } - return xml; - }, - - noop: function() {}, - - // Evaluates a script in a global context - // Workarounds based on findings by Jim Driscoll - // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context - globalEval: function( data ) { - if ( data && rnotwhite.test( data ) ) { - // We use execScript on Internet Explorer - // We use an anonymous function so that context is window - // rather than jQuery in Firefox - ( window.execScript || function( data ) { - window[ "eval" ].call( window, data ); - } )( data ); - } - }, - - // Convert dashed to camelCase; used by the css and data modules - // Microsoft forgot to hump their vendor prefix (#9572) - camelCase: function( string ) { - return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); - }, - - nodeName: function( elem, name ) { - return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase(); - }, - - // args is for internal usage only - each: function( object, callback, args ) { - var name, i = 0, - length = object.length, - isObj = length === undefined || jQuery.isFunction( object ); - - if ( args ) { - if ( isObj ) { - for ( name in object ) { - if ( callback.apply( object[ name ], args ) === false ) { - break; - } - } - } else { - for ( ; i < length; ) { - if ( callback.apply( object[ i++ ], args ) === false ) { - break; - } - } - } - - // A special, fast, case for the most common use of each - } else { - if ( isObj ) { - for ( name in object ) { - if ( callback.call( object[ name ], name, object[ name ] ) === false ) { - break; - } - } - } else { - for ( ; i < length; ) { - if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { - break; - } - } - } - } - - return object; - }, - - // Use native String.trim function wherever possible - trim: trim ? - function( text ) { - return text == null ? - "" : - trim.call( text ); - } : - - // Otherwise use our own trimming functionality - function( text ) { - return text == null ? - "" : - text.toString().replace( trimLeft, "" ).replace( trimRight, "" ); - }, - - // results is for internal usage only - makeArray: function( array, results ) { - var ret = results || []; - - if ( array != null ) { - // The window, strings (and functions) also have 'length' - // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930 - var type = jQuery.type( array ); - - if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { - push.call( ret, array ); - } else { - jQuery.merge( ret, array ); - } - } - - return ret; - }, - - inArray: function( elem, array, i ) { - var len; - - if ( array ) { - if ( indexOf ) { - return indexOf.call( array, elem, i ); - } - - len = array.length; - i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; - - for ( ; i < len; i++ ) { - // Skip accessing in sparse arrays - if ( i in array && array[ i ] === elem ) { - return i; - } - } - } - - return -1; - }, - - merge: function( first, second ) { - var i = first.length, - j = 0; - - if ( typeof second.length === "number" ) { - for ( var l = second.length; j < l; j++ ) { - first[ i++ ] = second[ j ]; - } - - } else { - while ( second[j] !== undefined ) { - first[ i++ ] = second[ j++ ]; - } - } - - first.length = i; - - return first; - }, - - grep: function( elems, callback, inv ) { - var ret = [], retVal; - inv = !!inv; - - // Go through the array, only saving the items - // that pass the validator function - for ( var i = 0, length = elems.length; i < length; i++ ) { - retVal = !!callback( elems[ i ], i ); - if ( inv !== retVal ) { - ret.push( elems[ i ] ); - } - } - - return ret; - }, - - // arg is for internal usage only - map: function( elems, callback, arg ) { - var value, key, ret = [], - i = 0, - length = elems.length, - // jquery objects are treated as arrays - isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; - - // Go through the array, translating each of the items to their - if ( isArray ) { - for ( ; i < length; i++ ) { - value = callback( elems[ i ], i, arg ); - - if ( value != null ) { - ret[ ret.length ] = value; - } - } - - // Go through every key on the object - } else { - for ( key in elems ) { - value = callback( elems[ key ], key, arg ); - - if ( value != null ) { - ret[ ret.length ] = value; - } - } - } - - // Flatten any nested arrays - return ret.concat.apply( [], ret ); - }, - - // A global GUID counter for objects - guid: 1, - - // Bind a function to a context, optionally partially applying any - // arguments. - proxy: function( fn, context ) { - if ( typeof context === "string" ) { - var tmp = fn[ context ]; - context = fn; - fn = tmp; - } - - // Quick check to determine if target is callable, in the spec - // this throws a TypeError, but we will just return undefined. - if ( !jQuery.isFunction( fn ) ) { - return undefined; - } - - // Simulated bind - var args = slice.call( arguments, 2 ), - proxy = function() { - return fn.apply( context, args.concat( slice.call( arguments ) ) ); - }; - - // Set the guid of unique handler to the same of original handler, so it can be removed - proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; - - return proxy; - }, - - // Mutifunctional method to get and set values to a collection - // The value/s can optionally be executed if it's a function - access: function( elems, key, value, exec, fn, pass ) { - var length = elems.length; - - // Setting many attributes - if ( typeof key === "object" ) { - for ( var k in key ) { - jQuery.access( elems, k, key[k], exec, fn, value ); - } - return elems; - } - - // Setting one attribute - if ( value !== undefined ) { - // Optionally, function values get executed if exec is true - exec = !pass && exec && jQuery.isFunction(value); - - for ( var i = 0; i < length; i++ ) { - fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); - } - - return elems; - } - - // Getting an attribute - return length ? fn( elems[0], key ) : undefined; - }, - - now: function() { - return ( new Date() ).getTime(); - }, - - // Use of jQuery.browser is frowned upon. - // More details: http://docs.jquery.com/Utilities/jQuery.browser - uaMatch: function( ua ) { - ua = ua.toLowerCase(); - - var match = rwebkit.exec( ua ) || - ropera.exec( ua ) || - rmsie.exec( ua ) || - ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || - []; - - return { browser: match[1] || "", version: match[2] || "0" }; - }, - - sub: function() { - function jQuerySub( selector, context ) { - return new jQuerySub.fn.init( selector, context ); - } - jQuery.extend( true, jQuerySub, this ); - jQuerySub.superclass = this; - jQuerySub.fn = jQuerySub.prototype = this(); - jQuerySub.fn.constructor = jQuerySub; - jQuerySub.sub = this.sub; - jQuerySub.fn.init = function init( selector, context ) { - if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) { - context = jQuerySub( context ); - } - - return jQuery.fn.init.call( this, selector, context, rootjQuerySub ); - }; - jQuerySub.fn.init.prototype = jQuerySub.fn; - var rootjQuerySub = jQuerySub(document); - return jQuerySub; - }, - - browser: {} -}); - -// Populate the class2type map -jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { - class2type[ "[object " + name + "]" ] = name.toLowerCase(); -}); - -browserMatch = jQuery.uaMatch( userAgent ); -if ( browserMatch.browser ) { - jQuery.browser[ browserMatch.browser ] = true; - jQuery.browser.version = browserMatch.version; -} - -// Deprecated, use jQuery.browser.webkit instead -if ( jQuery.browser.webkit ) { - jQuery.browser.safari = true; -} - -// IE doesn't match non-breaking spaces with \s -if ( rnotwhite.test( "\xA0" ) ) { - trimLeft = /^[\s\xA0]+/; - trimRight = /[\s\xA0]+$/; -} - -// All jQuery objects should point back to these -rootjQuery = jQuery(document); - -// Cleanup functions for the document ready method -if ( document.addEventListener ) { - DOMContentLoaded = function() { - document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); - jQuery.ready(); - }; - -} else if ( document.attachEvent ) { - DOMContentLoaded = function() { - // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). - if ( document.readyState === "complete" ) { - document.detachEvent( "onreadystatechange", DOMContentLoaded ); - jQuery.ready(); - } - }; -} - -// The DOM ready check for Internet Explorer -function doScrollCheck() { - if ( jQuery.isReady ) { - return; - } - - try { - // If IE is used, use the trick by Diego Perini - // http://javascript.nwbox.com/IEContentLoaded/ - document.documentElement.doScroll("left"); - } catch(e) { - setTimeout( doScrollCheck, 1 ); - return; - } - - // and execute any waiting functions - jQuery.ready(); -} - -return jQuery; - -})(); - - -// String to Object flags format cache -var flagsCache = {}; - -// Convert String-formatted flags into Object-formatted ones and store in cache -function createFlags( flags ) { - var object = flagsCache[ flags ] = {}, - i, length; - flags = flags.split( /\s+/ ); - for ( i = 0, length = flags.length; i < length; i++ ) { - object[ flags[i] ] = true; - } - return object; -} - -/* - * Create a callback list using the following parameters: - * - * flags: an optional list of space-separated flags that will change how - * the callback list behaves - * - * By default a callback list will act like an event callback list and can be - * "fired" multiple times. - * - * Possible flags: - * - * once: will ensure the callback list can only be fired once (like a Deferred) - * - * memory: will keep track of previous values and will call any callback added - * after the list has been fired right away with the latest "memorized" - * values (like a Deferred) - * - * unique: will ensure a callback can only be added once (no duplicate in the list) - * - * stopOnFalse: interrupt callings when a callback returns false - * - */ -jQuery.Callbacks = function( flags ) { - - // Convert flags from String-formatted to Object-formatted - // (we check in cache first) - flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {}; - - var // Actual callback list - list = [], - // Stack of fire calls for repeatable lists - stack = [], - // Last fire value (for non-forgettable lists) - memory, - // Flag to know if list is currently firing - firing, - // First callback to fire (used internally by add and fireWith) - firingStart, - // End of the loop when firing - firingLength, - // Index of currently firing callback (modified by remove if needed) - firingIndex, - // Add one or several callbacks to the list - add = function( args ) { - var i, - length, - elem, - type, - actual; - for ( i = 0, length = args.length; i < length; i++ ) { - elem = args[ i ]; - type = jQuery.type( elem ); - if ( type === "array" ) { - // Inspect recursively - add( elem ); - } else if ( type === "function" ) { - // Add if not in unique mode and callback is not in - if ( !flags.unique || !self.has( elem ) ) { - list.push( elem ); - } - } - } - }, - // Fire callbacks - fire = function( context, args ) { - args = args || []; - memory = !flags.memory || [ context, args ]; - firing = true; - firingIndex = firingStart || 0; - firingStart = 0; - firingLength = list.length; - for ( ; list && firingIndex < firingLength; firingIndex++ ) { - if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) { - memory = true; // Mark as halted - break; - } - } - firing = false; - if ( list ) { - if ( !flags.once ) { - if ( stack && stack.length ) { - memory = stack.shift(); - self.fireWith( memory[ 0 ], memory[ 1 ] ); - } - } else if ( memory === true ) { - self.disable(); - } else { - list = []; - } - } - }, - // Actual Callbacks object - self = { - // Add a callback or a collection of callbacks to the list - add: function() { - if ( list ) { - var length = list.length; - add( arguments ); - // Do we need to add the callbacks to the - // current firing batch? - if ( firing ) { - firingLength = list.length; - // With memory, if we're not firing then - // we should call right away, unless previous - // firing was halted (stopOnFalse) - } else if ( memory && memory !== true ) { - firingStart = length; - fire( memory[ 0 ], memory[ 1 ] ); - } - } - return this; - }, - // Remove a callback from the list - remove: function() { - if ( list ) { - var args = arguments, - argIndex = 0, - argLength = args.length; - for ( ; argIndex < argLength ; argIndex++ ) { - for ( var i = 0; i < list.length; i++ ) { - if ( args[ argIndex ] === list[ i ] ) { - // Handle firingIndex and firingLength - if ( firing ) { - if ( i <= firingLength ) { - firingLength--; - if ( i <= firingIndex ) { - firingIndex--; - } - } - } - // Remove the element - list.splice( i--, 1 ); - // If we have some unicity property then - // we only need to do this once - if ( flags.unique ) { - break; - } - } - } - } - } - return this; - }, - // Control if a given callback is in the list - has: function( fn ) { - if ( list ) { - var i = 0, - length = list.length; - for ( ; i < length; i++ ) { - if ( fn === list[ i ] ) { - return true; - } - } - } - return false; - }, - // Remove all callbacks from the list - empty: function() { - list = []; - return this; - }, - // Have the list do nothing anymore - disable: function() { - list = stack = memory = undefined; - return this; - }, - // Is it disabled? - disabled: function() { - return !list; - }, - // Lock the list in its current state - lock: function() { - stack = undefined; - if ( !memory || memory === true ) { - self.disable(); - } - return this; - }, - // Is it locked? - locked: function() { - return !stack; - }, - // Call all callbacks with the given context and arguments - fireWith: function( context, args ) { - if ( stack ) { - if ( firing ) { - if ( !flags.once ) { - stack.push( [ context, args ] ); - } - } else if ( !( flags.once && memory ) ) { - fire( context, args ); - } - } - return this; - }, - // Call all the callbacks with the given arguments - fire: function() { - self.fireWith( this, arguments ); - return this; - }, - // To know if the callbacks have already been called at least once - fired: function() { - return !!memory; - } - }; - - return self; -}; - - - - -var // Static reference to slice - sliceDeferred = [].slice; - -jQuery.extend({ - - Deferred: function( func ) { - var doneList = jQuery.Callbacks( "once memory" ), - failList = jQuery.Callbacks( "once memory" ), - progressList = jQuery.Callbacks( "memory" ), - state = "pending", - lists = { - resolve: doneList, - reject: failList, - notify: progressList - }, - promise = { - done: doneList.add, - fail: failList.add, - progress: progressList.add, - - state: function() { - return state; - }, - - // Deprecated - isResolved: doneList.fired, - isRejected: failList.fired, - - then: function( doneCallbacks, failCallbacks, progressCallbacks ) { - deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks ); - return this; - }, - always: function() { - deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments ); - return this; - }, - pipe: function( fnDone, fnFail, fnProgress ) { - return jQuery.Deferred(function( newDefer ) { - jQuery.each( { - done: [ fnDone, "resolve" ], - fail: [ fnFail, "reject" ], - progress: [ fnProgress, "notify" ] - }, function( handler, data ) { - var fn = data[ 0 ], - action = data[ 1 ], - returned; - if ( jQuery.isFunction( fn ) ) { - deferred[ handler ](function() { - returned = fn.apply( this, arguments ); - if ( returned && jQuery.isFunction( returned.promise ) ) { - returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify ); - } else { - newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] ); - } - }); - } else { - deferred[ handler ]( newDefer[ action ] ); - } - }); - }).promise(); - }, - // Get a promise for this deferred - // If obj is provided, the promise aspect is added to the object - promise: function( obj ) { - if ( obj == null ) { - obj = promise; - } else { - for ( var key in promise ) { - obj[ key ] = promise[ key ]; - } - } - return obj; - } - }, - deferred = promise.promise({}), - key; - - for ( key in lists ) { - deferred[ key ] = lists[ key ].fire; - deferred[ key + "With" ] = lists[ key ].fireWith; - } - - // Handle state - deferred.done( function() { - state = "resolved"; - }, failList.disable, progressList.lock ).fail( function() { - state = "rejected"; - }, doneList.disable, progressList.lock ); - - // Call given func if any - if ( func ) { - func.call( deferred, deferred ); - } - - // All done! - return deferred; - }, - - // Deferred helper - when: function( firstParam ) { - var args = sliceDeferred.call( arguments, 0 ), - i = 0, - length = args.length, - pValues = new Array( length ), - count = length, - pCount = length, - deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ? - firstParam : - jQuery.Deferred(), - promise = deferred.promise(); - function resolveFunc( i ) { - return function( value ) { - args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; - if ( !( --count ) ) { - deferred.resolveWith( deferred, args ); - } - }; - } - function progressFunc( i ) { - return function( value ) { - pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; - deferred.notifyWith( promise, pValues ); - }; - } - if ( length > 1 ) { - for ( ; i < length; i++ ) { - if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) { - args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) ); - } else { - --count; - } - } - if ( !count ) { - deferred.resolveWith( deferred, args ); - } - } else if ( deferred !== firstParam ) { - deferred.resolveWith( deferred, length ? [ firstParam ] : [] ); - } - return promise; - } -}); - - - - -jQuery.support = (function() { - - var support, - all, - a, - select, - opt, - input, - marginDiv, - fragment, - tds, - events, - eventName, - i, - isSupported, - div = document.createElement( "div" ), - documentElement = document.documentElement; - - // Preliminary tests - div.setAttribute("className", "t"); - div.innerHTML = "
            a"; - - all = div.getElementsByTagName( "*" ); - a = div.getElementsByTagName( "a" )[ 0 ]; - - // Can't get basic test support - if ( !all || !all.length || !a ) { - return {}; - } - - // First batch of supports tests - select = document.createElement( "select" ); - opt = select.appendChild( document.createElement("option") ); - input = div.getElementsByTagName( "input" )[ 0 ]; - - support = { - // IE strips leading whitespace when .innerHTML is used - leadingWhitespace: ( div.firstChild.nodeType === 3 ), - - // Make sure that tbody elements aren't automatically inserted - // IE will insert them into empty tables - tbody: !div.getElementsByTagName("tbody").length, - - // Make sure that link elements get serialized correctly by innerHTML - // This requires a wrapper element in IE - htmlSerialize: !!div.getElementsByTagName("link").length, - - // Get the style information from getAttribute - // (IE uses .cssText instead) - style: /top/.test( a.getAttribute("style") ), - - // Make sure that URLs aren't manipulated - // (IE normalizes it by default) - hrefNormalized: ( a.getAttribute("href") === "/a" ), - - // Make sure that element opacity exists - // (IE uses filter instead) - // Use a regex to work around a WebKit issue. See #5145 - opacity: /^0.55/.test( a.style.opacity ), - - // Verify style float existence - // (IE uses styleFloat instead of cssFloat) - cssFloat: !!a.style.cssFloat, - - // Make sure that if no value is specified for a checkbox - // that it defaults to "on". - // (WebKit defaults to "" instead) - checkOn: ( input.value === "on" ), - - // Make sure that a selected-by-default option has a working selected property. - // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) - optSelected: opt.selected, - - // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7) - getSetAttribute: div.className !== "t", - - // Tests for enctype support on a form(#6743) - enctype: !!document.createElement("form").enctype, - - // Makes sure cloning an html5 element does not cause problems - // Where outerHTML is undefined, this still works - html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav>", - - // Will be defined later - submitBubbles: true, - changeBubbles: true, - focusinBubbles: false, - deleteExpando: true, - noCloneEvent: true, - inlineBlockNeedsLayout: false, - shrinkWrapBlocks: false, - reliableMarginRight: true - }; - - // Make sure checked status is properly cloned - input.checked = true; - support.noCloneChecked = input.cloneNode( true ).checked; - - // Make sure that the options inside disabled selects aren't marked as disabled - // (WebKit marks them as disabled) - select.disabled = true; - support.optDisabled = !opt.disabled; - - // Test to see if it's possible to delete an expando from an element - // Fails in Internet Explorer - try { - delete div.test; - } catch( e ) { - support.deleteExpando = false; - } - - if ( !div.addEventListener && div.attachEvent && div.fireEvent ) { - div.attachEvent( "onclick", function() { - // Cloning a node shouldn't copy over any - // bound event handlers (IE does this) - support.noCloneEvent = false; - }); - div.cloneNode( true ).fireEvent( "onclick" ); - } - - // Check if a radio maintains its value - // after being appended to the DOM - input = document.createElement("input"); - input.value = "t"; - input.setAttribute("type", "radio"); - support.radioValue = input.value === "t"; - - input.setAttribute("checked", "checked"); - div.appendChild( input ); - fragment = document.createDocumentFragment(); - fragment.appendChild( div.lastChild ); - - // WebKit doesn't clone checked state correctly in fragments - support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; - - // Check if a disconnected checkbox will retain its checked - // value of true after appended to the DOM (IE6/7) - support.appendChecked = input.checked; - - fragment.removeChild( input ); - fragment.appendChild( div ); - - div.innerHTML = ""; - - // Check if div with explicit width and no margin-right incorrectly - // gets computed margin-right based on width of container. For more - // info see bug #3333 - // Fails in WebKit before Feb 2011 nightlies - // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right - if ( window.getComputedStyle ) { - marginDiv = document.createElement( "div" ); - marginDiv.style.width = "0"; - marginDiv.style.marginRight = "0"; - div.style.width = "2px"; - div.appendChild( marginDiv ); - support.reliableMarginRight = - ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0; - } - - // Technique from Juriy Zaytsev - // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ - // We only care about the case where non-standard event systems - // are used, namely in IE. Short-circuiting here helps us to - // avoid an eval call (in setAttribute) which can cause CSP - // to go haywire. See: https://developer.mozilla.org/en/Security/CSP - if ( div.attachEvent ) { - for( i in { - submit: 1, - change: 1, - focusin: 1 - }) { - eventName = "on" + i; - isSupported = ( eventName in div ); - if ( !isSupported ) { - div.setAttribute( eventName, "return;" ); - isSupported = ( typeof div[ eventName ] === "function" ); - } - support[ i + "Bubbles" ] = isSupported; - } - } - - fragment.removeChild( div ); - - // Null elements to avoid leaks in IE - fragment = select = opt = marginDiv = div = input = null; - - // Run tests that need a body at doc ready - jQuery(function() { - var container, outer, inner, table, td, offsetSupport, - conMarginTop, ptlm, vb, style, html, - body = document.getElementsByTagName("body")[0]; - - if ( !body ) { - // Return for frameset docs that don't have a body - return; - } - - conMarginTop = 1; - ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;"; - vb = "visibility:hidden;border:0;"; - style = "style='" + ptlm + "border:5px solid #000;padding:0;'"; - html = "
            " + - "" + - "
            "; - - container = document.createElement("div"); - container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px"; - body.insertBefore( container, body.firstChild ); - - // Construct the test element - div = document.createElement("div"); - container.appendChild( div ); - - // Check if table cells still have offsetWidth/Height when they are set - // to display:none and there are still other visible table cells in a - // table row; if so, offsetWidth/Height are not reliable for use when - // determining if an element has been hidden directly using - // display:none (it is still safe to use offsets if a parent element is - // hidden; don safety goggles and see bug #4512 for more information). - // (only IE 8 fails this test) - div.innerHTML = "
            t
            "; - tds = div.getElementsByTagName( "td" ); - isSupported = ( tds[ 0 ].offsetHeight === 0 ); - - tds[ 0 ].style.display = ""; - tds[ 1 ].style.display = "none"; - - // Check if empty table cells still have offsetWidth/Height - // (IE <= 8 fail this test) - support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); - - // Figure out if the W3C box model works as expected - div.innerHTML = ""; - div.style.width = div.style.paddingLeft = "1px"; - jQuery.boxModel = support.boxModel = div.offsetWidth === 2; - - if ( typeof div.style.zoom !== "undefined" ) { - // Check if natively block-level elements act like inline-block - // elements when setting their display to 'inline' and giving - // them layout - // (IE < 8 does this) - div.style.display = "inline"; - div.style.zoom = 1; - support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 ); - - // Check if elements with layout shrink-wrap their children - // (IE 6 does this) - div.style.display = ""; - div.innerHTML = "
            "; - support.shrinkWrapBlocks = ( div.offsetWidth !== 2 ); - } - - div.style.cssText = ptlm + vb; - div.innerHTML = html; - - outer = div.firstChild; - inner = outer.firstChild; - td = outer.nextSibling.firstChild.firstChild; - - offsetSupport = { - doesNotAddBorder: ( inner.offsetTop !== 5 ), - doesAddBorderForTableAndCells: ( td.offsetTop === 5 ) - }; - - inner.style.position = "fixed"; - inner.style.top = "20px"; - - // safari subtracts parent border width here which is 5px - offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 ); - inner.style.position = inner.style.top = ""; - - outer.style.overflow = "hidden"; - outer.style.position = "relative"; - - offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 ); - offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop ); - - body.removeChild( container ); - div = container = null; - - jQuery.extend( support, offsetSupport ); - }); - - return support; -})(); - - - - -var rbrace = /^(?:\{.*\}|\[.*\])$/, - rmultiDash = /([A-Z])/g; - -jQuery.extend({ - cache: {}, - - // Please use with caution - uuid: 0, - - // Unique for each copy of jQuery on the page - // Non-digits removed to match rinlinejQuery - expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ), - - // The following elements throw uncatchable exceptions if you - // attempt to add expando properties to them. - noData: { - "embed": true, - // Ban all objects except for Flash (which handle expandos) - "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", - "applet": true - }, - - hasData: function( elem ) { - elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ]; - return !!elem && !isEmptyDataObject( elem ); - }, - - data: function( elem, name, data, pvt /* Internal Use Only */ ) { - if ( !jQuery.acceptData( elem ) ) { - return; - } - - var privateCache, thisCache, ret, - internalKey = jQuery.expando, - getByName = typeof name === "string", - - // We have to handle DOM nodes and JS objects differently because IE6-7 - // can't GC object references properly across the DOM-JS boundary - isNode = elem.nodeType, - - // Only DOM nodes need the global jQuery cache; JS object data is - // attached directly to the object so GC can occur automatically - cache = isNode ? jQuery.cache : elem, - - // Only defining an ID for JS objects if its cache already exists allows - // the code to shortcut on the same path as a DOM node with no cache - id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey, - isEvents = name === "events"; - - // Avoid doing any more work than we need to when trying to get data on an - // object that has no data at all - if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) { - return; - } - - if ( !id ) { - // Only DOM nodes need a new unique ID for each element since their data - // ends up in the global cache - if ( isNode ) { - elem[ internalKey ] = id = ++jQuery.uuid; - } else { - id = internalKey; - } - } - - if ( !cache[ id ] ) { - cache[ id ] = {}; - - // Avoids exposing jQuery metadata on plain JS objects when the object - // is serialized using JSON.stringify - if ( !isNode ) { - cache[ id ].toJSON = jQuery.noop; - } - } - - // An object can be passed to jQuery.data instead of a key/value pair; this gets - // shallow copied over onto the existing cache - if ( typeof name === "object" || typeof name === "function" ) { - if ( pvt ) { - cache[ id ] = jQuery.extend( cache[ id ], name ); - } else { - cache[ id ].data = jQuery.extend( cache[ id ].data, name ); - } - } - - privateCache = thisCache = cache[ id ]; - - // jQuery data() is stored in a separate object inside the object's internal data - // cache in order to avoid key collisions between internal data and user-defined - // data. - if ( !pvt ) { - if ( !thisCache.data ) { - thisCache.data = {}; - } - - thisCache = thisCache.data; - } - - if ( data !== undefined ) { - thisCache[ jQuery.camelCase( name ) ] = data; - } - - // Users should not attempt to inspect the internal events object using jQuery.data, - // it is undocumented and subject to change. But does anyone listen? No. - if ( isEvents && !thisCache[ name ] ) { - return privateCache.events; - } - - // Check for both converted-to-camel and non-converted data property names - // If a data property was specified - if ( getByName ) { - - // First Try to find as-is property data - ret = thisCache[ name ]; - - // Test for null|undefined property data - if ( ret == null ) { - - // Try to find the camelCased property - ret = thisCache[ jQuery.camelCase( name ) ]; - } - } else { - ret = thisCache; - } - - return ret; - }, - - removeData: function( elem, name, pvt /* Internal Use Only */ ) { - if ( !jQuery.acceptData( elem ) ) { - return; - } - - var thisCache, i, l, - - // Reference to internal data cache key - internalKey = jQuery.expando, - - isNode = elem.nodeType, - - // See jQuery.data for more information - cache = isNode ? jQuery.cache : elem, - - // See jQuery.data for more information - id = isNode ? elem[ internalKey ] : internalKey; - - // If there is already no cache entry for this object, there is no - // purpose in continuing - if ( !cache[ id ] ) { - return; - } - - if ( name ) { - - thisCache = pvt ? cache[ id ] : cache[ id ].data; - - if ( thisCache ) { - - // Support array or space separated string names for data keys - if ( !jQuery.isArray( name ) ) { - - // try the string as a key before any manipulation - if ( name in thisCache ) { - name = [ name ]; - } else { - - // split the camel cased version by spaces unless a key with the spaces exists - name = jQuery.camelCase( name ); - if ( name in thisCache ) { - name = [ name ]; - } else { - name = name.split( " " ); - } - } - } - - for ( i = 0, l = name.length; i < l; i++ ) { - delete thisCache[ name[i] ]; - } - - // If there is no data left in the cache, we want to continue - // and let the cache object itself get destroyed - if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) { - return; - } - } - } - - // See jQuery.data for more information - if ( !pvt ) { - delete cache[ id ].data; - - // Don't destroy the parent cache unless the internal data object - // had been the only thing left in it - if ( !isEmptyDataObject(cache[ id ]) ) { - return; - } - } - - // Browsers that fail expando deletion also refuse to delete expandos on - // the window, but it will allow it on all other JS objects; other browsers - // don't care - // Ensure that `cache` is not a window object #10080 - if ( jQuery.support.deleteExpando || !cache.setInterval ) { - delete cache[ id ]; - } else { - cache[ id ] = null; - } - - // We destroyed the cache and need to eliminate the expando on the node to avoid - // false lookups in the cache for entries that no longer exist - if ( isNode ) { - // IE does not allow us to delete expando properties from nodes, - // nor does it have a removeAttribute function on Document nodes; - // we must handle all of these cases - if ( jQuery.support.deleteExpando ) { - delete elem[ internalKey ]; - } else if ( elem.removeAttribute ) { - elem.removeAttribute( internalKey ); - } else { - elem[ internalKey ] = null; - } - } - }, - - // For internal use only. - _data: function( elem, name, data ) { - return jQuery.data( elem, name, data, true ); - }, - - // A method for determining if a DOM node can handle the data expando - acceptData: function( elem ) { - if ( elem.nodeName ) { - var match = jQuery.noData[ elem.nodeName.toLowerCase() ]; - - if ( match ) { - return !(match === true || elem.getAttribute("classid") !== match); - } - } - - return true; - } -}); - -jQuery.fn.extend({ - data: function( key, value ) { - var parts, attr, name, - data = null; - - if ( typeof key === "undefined" ) { - if ( this.length ) { - data = jQuery.data( this[0] ); - - if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) { - attr = this[0].attributes; - for ( var i = 0, l = attr.length; i < l; i++ ) { - name = attr[i].name; - - if ( name.indexOf( "data-" ) === 0 ) { - name = jQuery.camelCase( name.substring(5) ); - - dataAttr( this[0], name, data[ name ] ); - } - } - jQuery._data( this[0], "parsedAttrs", true ); - } - } - - return data; - - } else if ( typeof key === "object" ) { - return this.each(function() { - jQuery.data( this, key ); - }); - } - - parts = key.split("."); - parts[1] = parts[1] ? "." + parts[1] : ""; - - if ( value === undefined ) { - data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]); - - // Try to fetch any internally stored data first - if ( data === undefined && this.length ) { - data = jQuery.data( this[0], key ); - data = dataAttr( this[0], key, data ); - } - - return data === undefined && parts[1] ? - this.data( parts[0] ) : - data; - - } else { - return this.each(function() { - var self = jQuery( this ), - args = [ parts[0], value ]; - - self.triggerHandler( "setData" + parts[1] + "!", args ); - jQuery.data( this, key, value ); - self.triggerHandler( "changeData" + parts[1] + "!", args ); - }); - } - }, - - removeData: function( key ) { - return this.each(function() { - jQuery.removeData( this, key ); - }); - } -}); - -function dataAttr( elem, key, data ) { - // If nothing was found internally, try to fetch any - // data from the HTML5 data-* attribute - if ( data === undefined && elem.nodeType === 1 ) { - - var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); - - data = elem.getAttribute( name ); - - if ( typeof data === "string" ) { - try { - data = data === "true" ? true : - data === "false" ? false : - data === "null" ? null : - jQuery.isNumeric( data ) ? parseFloat( data ) : - rbrace.test( data ) ? jQuery.parseJSON( data ) : - data; - } catch( e ) {} - - // Make sure we set the data so it isn't changed later - jQuery.data( elem, key, data ); - - } else { - data = undefined; - } - } - - return data; -} - -// checks a cache object for emptiness -function isEmptyDataObject( obj ) { - for ( var name in obj ) { - - // if the public data object is empty, the private is still empty - if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) { - continue; - } - if ( name !== "toJSON" ) { - return false; - } - } - - return true; -} - - - - -function handleQueueMarkDefer( elem, type, src ) { - var deferDataKey = type + "defer", - queueDataKey = type + "queue", - markDataKey = type + "mark", - defer = jQuery._data( elem, deferDataKey ); - if ( defer && - ( src === "queue" || !jQuery._data(elem, queueDataKey) ) && - ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) { - // Give room for hard-coded callbacks to fire first - // and eventually mark/queue something else on the element - setTimeout( function() { - if ( !jQuery._data( elem, queueDataKey ) && - !jQuery._data( elem, markDataKey ) ) { - jQuery.removeData( elem, deferDataKey, true ); - defer.fire(); - } - }, 0 ); - } -} - -jQuery.extend({ - - _mark: function( elem, type ) { - if ( elem ) { - type = ( type || "fx" ) + "mark"; - jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 ); - } - }, - - _unmark: function( force, elem, type ) { - if ( force !== true ) { - type = elem; - elem = force; - force = false; - } - if ( elem ) { - type = type || "fx"; - var key = type + "mark", - count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 ); - if ( count ) { - jQuery._data( elem, key, count ); - } else { - jQuery.removeData( elem, key, true ); - handleQueueMarkDefer( elem, type, "mark" ); - } - } - }, - - queue: function( elem, type, data ) { - var q; - if ( elem ) { - type = ( type || "fx" ) + "queue"; - q = jQuery._data( elem, type ); - - // Speed up dequeue by getting out quickly if this is just a lookup - if ( data ) { - if ( !q || jQuery.isArray(data) ) { - q = jQuery._data( elem, type, jQuery.makeArray(data) ); - } else { - q.push( data ); - } - } - return q || []; - } - }, - - dequeue: function( elem, type ) { - type = type || "fx"; - - var queue = jQuery.queue( elem, type ), - fn = queue.shift(), - hooks = {}; - - // If the fx queue is dequeued, always remove the progress sentinel - if ( fn === "inprogress" ) { - fn = queue.shift(); - } - - if ( fn ) { - // Add a progress sentinel to prevent the fx queue from being - // automatically dequeued - if ( type === "fx" ) { - queue.unshift( "inprogress" ); - } - - jQuery._data( elem, type + ".run", hooks ); - fn.call( elem, function() { - jQuery.dequeue( elem, type ); - }, hooks ); - } - - if ( !queue.length ) { - jQuery.removeData( elem, type + "queue " + type + ".run", true ); - handleQueueMarkDefer( elem, type, "queue" ); - } - } -}); - -jQuery.fn.extend({ - queue: function( type, data ) { - if ( typeof type !== "string" ) { - data = type; - type = "fx"; - } - - if ( data === undefined ) { - return jQuery.queue( this[0], type ); - } - return this.each(function() { - var queue = jQuery.queue( this, type, data ); - - if ( type === "fx" && queue[0] !== "inprogress" ) { - jQuery.dequeue( this, type ); - } - }); - }, - dequeue: function( type ) { - return this.each(function() { - jQuery.dequeue( this, type ); - }); - }, - // Based off of the plugin by Clint Helfers, with permission. - // http://blindsignals.com/index.php/2009/07/jquery-delay/ - delay: function( time, type ) { - time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; - type = type || "fx"; - - return this.queue( type, function( next, hooks ) { - var timeout = setTimeout( next, time ); - hooks.stop = function() { - clearTimeout( timeout ); - }; - }); - }, - clearQueue: function( type ) { - return this.queue( type || "fx", [] ); - }, - // Get a promise resolved when queues of a certain type - // are emptied (fx is the type by default) - promise: function( type, object ) { - if ( typeof type !== "string" ) { - object = type; - type = undefined; - } - type = type || "fx"; - var defer = jQuery.Deferred(), - elements = this, - i = elements.length, - count = 1, - deferDataKey = type + "defer", - queueDataKey = type + "queue", - markDataKey = type + "mark", - tmp; - function resolve() { - if ( !( --count ) ) { - defer.resolveWith( elements, [ elements ] ); - } - } - while( i-- ) { - if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) || - ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) || - jQuery.data( elements[ i ], markDataKey, undefined, true ) ) && - jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) { - count++; - tmp.add( resolve ); - } - } - resolve(); - return defer.promise(); - } -}); - - - - -var rclass = /[\n\t\r]/g, - rspace = /\s+/, - rreturn = /\r/g, - rtype = /^(?:button|input)$/i, - rfocusable = /^(?:button|input|object|select|textarea)$/i, - rclickable = /^a(?:rea)?$/i, - rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i, - getSetAttribute = jQuery.support.getSetAttribute, - nodeHook, boolHook, fixSpecified; - -jQuery.fn.extend({ - attr: function( name, value ) { - return jQuery.access( this, name, value, true, jQuery.attr ); - }, - - removeAttr: function( name ) { - return this.each(function() { - jQuery.removeAttr( this, name ); - }); - }, - - prop: function( name, value ) { - return jQuery.access( this, name, value, true, jQuery.prop ); - }, - - removeProp: function( name ) { - name = jQuery.propFix[ name ] || name; - return this.each(function() { - // try/catch handles cases where IE balks (such as removing a property on window) - try { - this[ name ] = undefined; - delete this[ name ]; - } catch( e ) {} - }); - }, - - addClass: function( value ) { - var classNames, i, l, elem, - setClass, c, cl; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( j ) { - jQuery( this ).addClass( value.call(this, j, this.className) ); - }); - } - - if ( value && typeof value === "string" ) { - classNames = value.split( rspace ); - - for ( i = 0, l = this.length; i < l; i++ ) { - elem = this[ i ]; - - if ( elem.nodeType === 1 ) { - if ( !elem.className && classNames.length === 1 ) { - elem.className = value; - - } else { - setClass = " " + elem.className + " "; - - for ( c = 0, cl = classNames.length; c < cl; c++ ) { - if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { - setClass += classNames[ c ] + " "; - } - } - elem.className = jQuery.trim( setClass ); - } - } - } - } - - return this; - }, - - removeClass: function( value ) { - var classNames, i, l, elem, className, c, cl; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( j ) { - jQuery( this ).removeClass( value.call(this, j, this.className) ); - }); - } - - if ( (value && typeof value === "string") || value === undefined ) { - classNames = ( value || "" ).split( rspace ); - - for ( i = 0, l = this.length; i < l; i++ ) { - elem = this[ i ]; - - if ( elem.nodeType === 1 && elem.className ) { - if ( value ) { - className = (" " + elem.className + " ").replace( rclass, " " ); - for ( c = 0, cl = classNames.length; c < cl; c++ ) { - className = className.replace(" " + classNames[ c ] + " ", " "); - } - elem.className = jQuery.trim( className ); - - } else { - elem.className = ""; - } - } - } - } - - return this; - }, - - toggleClass: function( value, stateVal ) { - var type = typeof value, - isBool = typeof stateVal === "boolean"; - - if ( jQuery.isFunction( value ) ) { - return this.each(function( i ) { - jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal ); - }); - } - - return this.each(function() { - if ( type === "string" ) { - // toggle individual class names - var className, - i = 0, - self = jQuery( this ), - state = stateVal, - classNames = value.split( rspace ); - - while ( (className = classNames[ i++ ]) ) { - // check each className given, space seperated list - state = isBool ? state : !self.hasClass( className ); - self[ state ? "addClass" : "removeClass" ]( className ); - } - - } else if ( type === "undefined" || type === "boolean" ) { - if ( this.className ) { - // store className if set - jQuery._data( this, "__className__", this.className ); - } - - // toggle whole className - this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || ""; - } - }); - }, - - hasClass: function( selector ) { - var className = " " + selector + " ", - i = 0, - l = this.length; - for ( ; i < l; i++ ) { - if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) { - return true; - } - } - - return false; - }, - - val: function( value ) { - var hooks, ret, isFunction, - elem = this[0]; - - if ( !arguments.length ) { - if ( elem ) { - hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; - - if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { - return ret; - } - - ret = elem.value; - - return typeof ret === "string" ? - // handle most common string cases - ret.replace(rreturn, "") : - // handle cases where value is null/undef or number - ret == null ? "" : ret; - } - - return; - } - - isFunction = jQuery.isFunction( value ); - - return this.each(function( i ) { - var self = jQuery(this), val; - - if ( this.nodeType !== 1 ) { - return; - } - - if ( isFunction ) { - val = value.call( this, i, self.val() ); - } else { - val = value; - } - - // Treat null/undefined as ""; convert numbers to string - if ( val == null ) { - val = ""; - } else if ( typeof val === "number" ) { - val += ""; - } else if ( jQuery.isArray( val ) ) { - val = jQuery.map(val, function ( value ) { - return value == null ? "" : value + ""; - }); - } - - hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; - - // If set returns undefined, fall back to normal setting - if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { - this.value = val; - } - }); - } -}); - -jQuery.extend({ - valHooks: { - option: { - get: function( elem ) { - // attributes.value is undefined in Blackberry 4.7 but - // uses .value. See #6932 - var val = elem.attributes.value; - return !val || val.specified ? elem.value : elem.text; - } - }, - select: { - get: function( elem ) { - var value, i, max, option, - index = elem.selectedIndex, - values = [], - options = elem.options, - one = elem.type === "select-one"; - - // Nothing was selected - if ( index < 0 ) { - return null; - } - - // Loop through all the selected options - i = one ? index : 0; - max = one ? index + 1 : options.length; - for ( ; i < max; i++ ) { - option = options[ i ]; - - // Don't return options that are disabled or in a disabled optgroup - if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && - (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) { - - // Get the specific value for the option - value = jQuery( option ).val(); - - // We don't need an array for one selects - if ( one ) { - return value; - } - - // Multi-Selects return an array - values.push( value ); - } - } - - // Fixes Bug #2551 -- select.val() broken in IE after form.reset() - if ( one && !values.length && options.length ) { - return jQuery( options[ index ] ).val(); - } - - return values; - }, - - set: function( elem, value ) { - var values = jQuery.makeArray( value ); - - jQuery(elem).find("option").each(function() { - this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0; - }); - - if ( !values.length ) { - elem.selectedIndex = -1; - } - return values; - } - } - }, - - attrFn: { - val: true, - css: true, - html: true, - text: true, - data: true, - width: true, - height: true, - offset: true - }, - - attr: function( elem, name, value, pass ) { - var ret, hooks, notxml, - nType = elem.nodeType; - - // don't get/set attributes on text, comment and attribute nodes - if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { - return; - } - - if ( pass && name in jQuery.attrFn ) { - return jQuery( elem )[ name ]( value ); - } - - // Fallback to prop when attributes are not supported - if ( typeof elem.getAttribute === "undefined" ) { - return jQuery.prop( elem, name, value ); - } - - notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); - - // All attributes are lowercase - // Grab necessary hook if one is defined - if ( notxml ) { - name = name.toLowerCase(); - hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); - } - - if ( value !== undefined ) { - - if ( value === null ) { - jQuery.removeAttr( elem, name ); - return; - - } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { - return ret; - - } else { - elem.setAttribute( name, "" + value ); - return value; - } - - } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { - return ret; - - } else { - - ret = elem.getAttribute( name ); - - // Non-existent attributes return null, we normalize to undefined - return ret === null ? - undefined : - ret; - } - }, - - removeAttr: function( elem, value ) { - var propName, attrNames, name, l, - i = 0; - - if ( value && elem.nodeType === 1 ) { - attrNames = value.toLowerCase().split( rspace ); - l = attrNames.length; - - for ( ; i < l; i++ ) { - name = attrNames[ i ]; - - if ( name ) { - propName = jQuery.propFix[ name ] || name; - - // See #9699 for explanation of this approach (setting first, then removal) - jQuery.attr( elem, name, "" ); - elem.removeAttribute( getSetAttribute ? name : propName ); - - // Set corresponding property to false for boolean attributes - if ( rboolean.test( name ) && propName in elem ) { - elem[ propName ] = false; - } - } - } - } - }, - - attrHooks: { - type: { - set: function( elem, value ) { - // We can't allow the type property to be changed (since it causes problems in IE) - if ( rtype.test( elem.nodeName ) && elem.parentNode ) { - jQuery.error( "type property can't be changed" ); - } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) { - // Setting the type on a radio button after the value resets the value in IE6-9 - // Reset value to it's default in case type is set after value - // This is for element creation - var val = elem.value; - elem.setAttribute( "type", value ); - if ( val ) { - elem.value = val; - } - return value; - } - } - }, - // Use the value property for back compat - // Use the nodeHook for button elements in IE6/7 (#1954) - value: { - get: function( elem, name ) { - if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { - return nodeHook.get( elem, name ); - } - return name in elem ? - elem.value : - null; - }, - set: function( elem, value, name ) { - if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { - return nodeHook.set( elem, value, name ); - } - // Does not return so that setAttribute is also used - elem.value = value; - } - } - }, - - propFix: { - tabindex: "tabIndex", - readonly: "readOnly", - "for": "htmlFor", - "class": "className", - maxlength: "maxLength", - cellspacing: "cellSpacing", - cellpadding: "cellPadding", - rowspan: "rowSpan", - colspan: "colSpan", - usemap: "useMap", - frameborder: "frameBorder", - contenteditable: "contentEditable" - }, - - prop: function( elem, name, value ) { - var ret, hooks, notxml, - nType = elem.nodeType; - - // don't get/set properties on text, comment and attribute nodes - if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { - return; - } - - notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); - - if ( notxml ) { - // Fix name and attach hooks - name = jQuery.propFix[ name ] || name; - hooks = jQuery.propHooks[ name ]; - } - - if ( value !== undefined ) { - if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { - return ret; - - } else { - return ( elem[ name ] = value ); - } - - } else { - if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { - return ret; - - } else { - return elem[ name ]; - } - } - }, - - propHooks: { - tabIndex: { - get: function( elem ) { - // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set - // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/ - var attributeNode = elem.getAttributeNode("tabindex"); - - return attributeNode && attributeNode.specified ? - parseInt( attributeNode.value, 10 ) : - rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ? - 0 : - undefined; - } - } - } -}); - -// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional) -jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex; - -// Hook for boolean attributes -boolHook = { - get: function( elem, name ) { - // Align boolean attributes with corresponding properties - // Fall back to attribute presence where some booleans are not supported - var attrNode, - property = jQuery.prop( elem, name ); - return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ? - name.toLowerCase() : - undefined; - }, - set: function( elem, value, name ) { - var propName; - if ( value === false ) { - // Remove boolean attributes when set to false - jQuery.removeAttr( elem, name ); - } else { - // value is true since we know at this point it's type boolean and not false - // Set boolean attributes to the same name and set the DOM property - propName = jQuery.propFix[ name ] || name; - if ( propName in elem ) { - // Only set the IDL specifically if it already exists on the element - elem[ propName ] = true; - } - - elem.setAttribute( name, name.toLowerCase() ); - } - return name; - } -}; - -// IE6/7 do not support getting/setting some attributes with get/setAttribute -if ( !getSetAttribute ) { - - fixSpecified = { - name: true, - id: true - }; - - // Use this for any attribute in IE6/7 - // This fixes almost every IE6/7 issue - nodeHook = jQuery.valHooks.button = { - get: function( elem, name ) { - var ret; - ret = elem.getAttributeNode( name ); - return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? - ret.nodeValue : - undefined; - }, - set: function( elem, value, name ) { - // Set the existing or create a new attribute node - var ret = elem.getAttributeNode( name ); - if ( !ret ) { - ret = document.createAttribute( name ); - elem.setAttributeNode( ret ); - } - return ( ret.nodeValue = value + "" ); - } - }; - - // Apply the nodeHook to tabindex - jQuery.attrHooks.tabindex.set = nodeHook.set; - - // Set width and height to auto instead of 0 on empty string( Bug #8150 ) - // This is for removals - jQuery.each([ "width", "height" ], function( i, name ) { - jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { - set: function( elem, value ) { - if ( value === "" ) { - elem.setAttribute( name, "auto" ); - return value; - } - } - }); - }); - - // Set contenteditable to false on removals(#10429) - // Setting to empty string throws an error as an invalid value - jQuery.attrHooks.contenteditable = { - get: nodeHook.get, - set: function( elem, value, name ) { - if ( value === "" ) { - value = "false"; - } - nodeHook.set( elem, value, name ); - } - }; -} - - -// Some attributes require a special call on IE -if ( !jQuery.support.hrefNormalized ) { - jQuery.each([ "href", "src", "width", "height" ], function( i, name ) { - jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { - get: function( elem ) { - var ret = elem.getAttribute( name, 2 ); - return ret === null ? undefined : ret; - } - }); - }); -} - -if ( !jQuery.support.style ) { - jQuery.attrHooks.style = { - get: function( elem ) { - // Return undefined in the case of empty string - // Normalize to lowercase since IE uppercases css property names - return elem.style.cssText.toLowerCase() || undefined; - }, - set: function( elem, value ) { - return ( elem.style.cssText = "" + value ); - } - }; -} - -// Safari mis-reports the default selected property of an option -// Accessing the parent's selectedIndex property fixes it -if ( !jQuery.support.optSelected ) { - jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, { - get: function( elem ) { - var parent = elem.parentNode; - - if ( parent ) { - parent.selectedIndex; - - // Make sure that it also works with optgroups, see #5701 - if ( parent.parentNode ) { - parent.parentNode.selectedIndex; - } - } - return null; - } - }); -} - -// IE6/7 call enctype encoding -if ( !jQuery.support.enctype ) { - jQuery.propFix.enctype = "encoding"; -} - -// Radios and checkboxes getter/setter -if ( !jQuery.support.checkOn ) { - jQuery.each([ "radio", "checkbox" ], function() { - jQuery.valHooks[ this ] = { - get: function( elem ) { - // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified - return elem.getAttribute("value") === null ? "on" : elem.value; - } - }; - }); -} -jQuery.each([ "radio", "checkbox" ], function() { - jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], { - set: function( elem, value ) { - if ( jQuery.isArray( value ) ) { - return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); - } - } - }); -}); - - - - -var rformElems = /^(?:textarea|input|select)$/i, - rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/, - rhoverHack = /\bhover(\.\S+)?\b/, - rkeyEvent = /^key/, - rmouseEvent = /^(?:mouse|contextmenu)|click/, - rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, - rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/, - quickParse = function( selector ) { - var quick = rquickIs.exec( selector ); - if ( quick ) { - // 0 1 2 3 - // [ _, tag, id, class ] - quick[1] = ( quick[1] || "" ).toLowerCase(); - quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" ); - } - return quick; - }, - quickIs = function( elem, m ) { - var attrs = elem.attributes || {}; - return ( - (!m[1] || elem.nodeName.toLowerCase() === m[1]) && - (!m[2] || (attrs.id || {}).value === m[2]) && - (!m[3] || m[3].test( (attrs[ "class" ] || {}).value )) - ); - }, - hoverHack = function( events ) { - return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" ); - }; - -/* - * Helper functions for managing events -- not part of the public interface. - * Props to Dean Edwards' addEvent library for many of the ideas. - */ -jQuery.event = { - - add: function( elem, types, handler, data, selector ) { - - var elemData, eventHandle, events, - t, tns, type, namespaces, handleObj, - handleObjIn, quick, handlers, special; - - // Don't attach events to noData or text/comment nodes (allow plain objects tho) - if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) { - return; - } - - // Caller can pass in an object of custom data in lieu of the handler - if ( handler.handler ) { - handleObjIn = handler; - handler = handleObjIn.handler; - } - - // Make sure that the handler has a unique ID, used to find/remove it later - if ( !handler.guid ) { - handler.guid = jQuery.guid++; - } - - // Init the element's event structure and main handler, if this is the first - events = elemData.events; - if ( !events ) { - elemData.events = events = {}; - } - eventHandle = elemData.handle; - if ( !eventHandle ) { - elemData.handle = eventHandle = function( e ) { - // Discard the second event of a jQuery.event.trigger() and - // when an event is called after a page has unloaded - return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? - jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : - undefined; - }; - // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events - eventHandle.elem = elem; - } - - // Handle multiple events separated by a space - // jQuery(...).bind("mouseover mouseout", fn); - types = jQuery.trim( hoverHack(types) ).split( " " ); - for ( t = 0; t < types.length; t++ ) { - - tns = rtypenamespace.exec( types[t] ) || []; - type = tns[1]; - namespaces = ( tns[2] || "" ).split( "." ).sort(); - - // If event changes its type, use the special event handlers for the changed type - special = jQuery.event.special[ type ] || {}; - - // If selector defined, determine special event api type, otherwise given type - type = ( selector ? special.delegateType : special.bindType ) || type; - - // Update special based on newly reset type - special = jQuery.event.special[ type ] || {}; - - // handleObj is passed to all event handlers - handleObj = jQuery.extend({ - type: type, - origType: tns[1], - data: data, - handler: handler, - guid: handler.guid, - selector: selector, - quick: quickParse( selector ), - namespace: namespaces.join(".") - }, handleObjIn ); - - // Init the event handler queue if we're the first - handlers = events[ type ]; - if ( !handlers ) { - handlers = events[ type ] = []; - handlers.delegateCount = 0; - - // Only use addEventListener/attachEvent if the special events handler returns false - if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { - // Bind the global event handler to the element - if ( elem.addEventListener ) { - elem.addEventListener( type, eventHandle, false ); - - } else if ( elem.attachEvent ) { - elem.attachEvent( "on" + type, eventHandle ); - } - } - } - - if ( special.add ) { - special.add.call( elem, handleObj ); - - if ( !handleObj.handler.guid ) { - handleObj.handler.guid = handler.guid; - } - } - - // Add to the element's handler list, delegates in front - if ( selector ) { - handlers.splice( handlers.delegateCount++, 0, handleObj ); - } else { - handlers.push( handleObj ); - } - - // Keep track of which events have ever been used, for event optimization - jQuery.event.global[ type ] = true; - } - - // Nullify elem to prevent memory leaks in IE - elem = null; - }, - - global: {}, - - // Detach an event or set of events from an element - remove: function( elem, types, handler, selector, mappedTypes ) { - - var elemData = jQuery.hasData( elem ) && jQuery._data( elem ), - t, tns, type, origType, namespaces, origCount, - j, events, special, handle, eventType, handleObj; - - if ( !elemData || !(events = elemData.events) ) { - return; - } - - // Once for each type.namespace in types; type may be omitted - types = jQuery.trim( hoverHack( types || "" ) ).split(" "); - for ( t = 0; t < types.length; t++ ) { - tns = rtypenamespace.exec( types[t] ) || []; - type = origType = tns[1]; - namespaces = tns[2]; - - // Unbind all events (on this namespace, if provided) for the element - if ( !type ) { - for ( type in events ) { - jQuery.event.remove( elem, type + types[ t ], handler, selector, true ); - } - continue; - } - - special = jQuery.event.special[ type ] || {}; - type = ( selector? special.delegateType : special.bindType ) || type; - eventType = events[ type ] || []; - origCount = eventType.length; - namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null; - - // Remove matching events - for ( j = 0; j < eventType.length; j++ ) { - handleObj = eventType[ j ]; - - if ( ( mappedTypes || origType === handleObj.origType ) && - ( !handler || handler.guid === handleObj.guid ) && - ( !namespaces || namespaces.test( handleObj.namespace ) ) && - ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) { - eventType.splice( j--, 1 ); - - if ( handleObj.selector ) { - eventType.delegateCount--; - } - if ( special.remove ) { - special.remove.call( elem, handleObj ); - } - } - } - - // Remove generic event handler if we removed something and no more handlers exist - // (avoids potential for endless recursion during removal of special event handlers) - if ( eventType.length === 0 && origCount !== eventType.length ) { - if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) { - jQuery.removeEvent( elem, type, elemData.handle ); - } - - delete events[ type ]; - } - } - - // Remove the expando if it's no longer used - if ( jQuery.isEmptyObject( events ) ) { - handle = elemData.handle; - if ( handle ) { - handle.elem = null; - } - - // removeData also checks for emptiness and clears the expando if empty - // so use it instead of delete - jQuery.removeData( elem, [ "events", "handle" ], true ); - } - }, - - // Events that are safe to short-circuit if no handlers are attached. - // Native DOM events should not be added, they may have inline handlers. - customEvent: { - "getData": true, - "setData": true, - "changeData": true - }, - - trigger: function( event, data, elem, onlyHandlers ) { - // Don't do events on text and comment nodes - if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) { - return; - } - - // Event object or event type - var type = event.type || event, - namespaces = [], - cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType; - - // focus/blur morphs to focusin/out; ensure we're not firing them right now - if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { - return; - } - - if ( type.indexOf( "!" ) >= 0 ) { - // Exclusive events trigger only for the exact event (no namespaces) - type = type.slice(0, -1); - exclusive = true; - } - - if ( type.indexOf( "." ) >= 0 ) { - // Namespaced trigger; create a regexp to match event type in handle() - namespaces = type.split("."); - type = namespaces.shift(); - namespaces.sort(); - } - - if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { - // No jQuery handlers for this event type, and it can't have inline handlers - return; - } - - // Caller can pass in an Event, Object, or just an event type string - event = typeof event === "object" ? - // jQuery.Event object - event[ jQuery.expando ] ? event : - // Object literal - new jQuery.Event( type, event ) : - // Just the event type (string) - new jQuery.Event( type ); - - event.type = type; - event.isTrigger = true; - event.exclusive = exclusive; - event.namespace = namespaces.join( "." ); - event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null; - ontype = type.indexOf( ":" ) < 0 ? "on" + type : ""; - - // Handle a global trigger - if ( !elem ) { - - // TODO: Stop taunting the data cache; remove global events and always attach to document - cache = jQuery.cache; - for ( i in cache ) { - if ( cache[ i ].events && cache[ i ].events[ type ] ) { - jQuery.event.trigger( event, data, cache[ i ].handle.elem, true ); - } - } - return; - } - - // Clean up the event in case it is being reused - event.result = undefined; - if ( !event.target ) { - event.target = elem; - } - - // Clone any incoming data and prepend the event, creating the handler arg list - data = data != null ? jQuery.makeArray( data ) : []; - data.unshift( event ); - - // Allow special events to draw outside the lines - special = jQuery.event.special[ type ] || {}; - if ( special.trigger && special.trigger.apply( elem, data ) === false ) { - return; - } - - // Determine event propagation path in advance, per W3C events spec (#9951) - // Bubble up to document, then to window; watch for a global ownerDocument var (#9724) - eventPath = [[ elem, special.bindType || type ]]; - if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) { - - bubbleType = special.delegateType || type; - cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode; - old = null; - for ( ; cur; cur = cur.parentNode ) { - eventPath.push([ cur, bubbleType ]); - old = cur; - } - - // Only add window if we got to document (e.g., not plain obj or detached DOM) - if ( old && old === elem.ownerDocument ) { - eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]); - } - } - - // Fire handlers on the event path - for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) { - - cur = eventPath[i][0]; - event.type = eventPath[i][1]; - - handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" ); - if ( handle ) { - handle.apply( cur, data ); - } - // Note that this is a bare JS function and not a jQuery handler - handle = ontype && cur[ ontype ]; - if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) { - event.preventDefault(); - } - } - event.type = type; - - // If nobody prevented the default action, do it now - if ( !onlyHandlers && !event.isDefaultPrevented() ) { - - if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) && - !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { - - // Call a native DOM method on the target with the same name name as the event. - // Can't use an .isFunction() check here because IE6/7 fails that test. - // Don't do default actions on window, that's where global variables be (#6170) - // IE<9 dies on focus/blur to hidden element (#1486) - if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) { - - // Don't re-trigger an onFOO event when we call its FOO() method - old = elem[ ontype ]; - - if ( old ) { - elem[ ontype ] = null; - } - - // Prevent re-triggering of the same event, since we already bubbled it above - jQuery.event.triggered = type; - elem[ type ](); - jQuery.event.triggered = undefined; - - if ( old ) { - elem[ ontype ] = old; - } - } - } - } - - return event.result; - }, - - dispatch: function( event ) { - - // Make a writable jQuery.Event from the native event object - event = jQuery.event.fix( event || window.event ); - - var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []), - delegateCount = handlers.delegateCount, - args = [].slice.call( arguments, 0 ), - run_all = !event.exclusive && !event.namespace, - handlerQueue = [], - i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related; - - // Use the fix-ed jQuery.Event rather than the (read-only) native event - args[0] = event; - event.delegateTarget = this; - - // Determine handlers that should run if there are delegated events - // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861) - if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) { - - // Pregenerate a single jQuery object for reuse with .is() - jqcur = jQuery(this); - jqcur.context = this.ownerDocument || this; - - for ( cur = event.target; cur != this; cur = cur.parentNode || this ) { - selMatch = {}; - matches = []; - jqcur[0] = cur; - for ( i = 0; i < delegateCount; i++ ) { - handleObj = handlers[ i ]; - sel = handleObj.selector; - - if ( selMatch[ sel ] === undefined ) { - selMatch[ sel ] = ( - handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel ) - ); - } - if ( selMatch[ sel ] ) { - matches.push( handleObj ); - } - } - if ( matches.length ) { - handlerQueue.push({ elem: cur, matches: matches }); - } - } - } - - // Add the remaining (directly-bound) handlers - if ( handlers.length > delegateCount ) { - handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) }); - } - - // Run delegates first; they may want to stop propagation beneath us - for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) { - matched = handlerQueue[ i ]; - event.currentTarget = matched.elem; - - for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) { - handleObj = matched.matches[ j ]; - - // Triggered event must either 1) be non-exclusive and have no namespace, or - // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). - if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) { - - event.data = handleObj.data; - event.handleObj = handleObj; - - ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) - .apply( matched.elem, args ); - - if ( ret !== undefined ) { - event.result = ret; - if ( ret === false ) { - event.preventDefault(); - event.stopPropagation(); - } - } - } - } - } - - return event.result; - }, - - // Includes some event props shared by KeyEvent and MouseEvent - // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 *** - props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), - - fixHooks: {}, - - keyHooks: { - props: "char charCode key keyCode".split(" "), - filter: function( event, original ) { - - // Add which for key events - if ( event.which == null ) { - event.which = original.charCode != null ? original.charCode : original.keyCode; - } - - return event; - } - }, - - mouseHooks: { - props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "), - filter: function( event, original ) { - var eventDoc, doc, body, - button = original.button, - fromElement = original.fromElement; - - // Calculate pageX/Y if missing and clientX/Y available - if ( event.pageX == null && original.clientX != null ) { - eventDoc = event.target.ownerDocument || document; - doc = eventDoc.documentElement; - body = eventDoc.body; - - event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); - event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); - } - - // Add relatedTarget, if necessary - if ( !event.relatedTarget && fromElement ) { - event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; - } - - // Add which for click: 1 === left; 2 === middle; 3 === right - // Note: button is not normalized, so don't use it - if ( !event.which && button !== undefined ) { - event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); - } - - return event; - } - }, - - fix: function( event ) { - if ( event[ jQuery.expando ] ) { - return event; - } - - // Create a writable copy of the event object and normalize some properties - var i, prop, - originalEvent = event, - fixHook = jQuery.event.fixHooks[ event.type ] || {}, - copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; - - event = jQuery.Event( originalEvent ); - - for ( i = copy.length; i; ) { - prop = copy[ --i ]; - event[ prop ] = originalEvent[ prop ]; - } - - // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2) - if ( !event.target ) { - event.target = originalEvent.srcElement || document; - } - - // Target should not be a text node (#504, Safari) - if ( event.target.nodeType === 3 ) { - event.target = event.target.parentNode; - } - - // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8) - if ( event.metaKey === undefined ) { - event.metaKey = event.ctrlKey; - } - - return fixHook.filter? fixHook.filter( event, originalEvent ) : event; - }, - - special: { - ready: { - // Make sure the ready event is setup - setup: jQuery.bindReady - }, - - load: { - // Prevent triggered image.load events from bubbling to window.load - noBubble: true - }, - - focus: { - delegateType: "focusin" - }, - blur: { - delegateType: "focusout" - }, - - beforeunload: { - setup: function( data, namespaces, eventHandle ) { - // We only want to do this special case on windows - if ( jQuery.isWindow( this ) ) { - this.onbeforeunload = eventHandle; - } - }, - - teardown: function( namespaces, eventHandle ) { - if ( this.onbeforeunload === eventHandle ) { - this.onbeforeunload = null; - } - } - } - }, - - simulate: function( type, elem, event, bubble ) { - // Piggyback on a donor event to simulate a different one. - // Fake originalEvent to avoid donor's stopPropagation, but if the - // simulated event prevents default then we do the same on the donor. - var e = jQuery.extend( - new jQuery.Event(), - event, - { type: type, - isSimulated: true, - originalEvent: {} - } - ); - if ( bubble ) { - jQuery.event.trigger( e, null, elem ); - } else { - jQuery.event.dispatch.call( elem, e ); - } - if ( e.isDefaultPrevented() ) { - event.preventDefault(); - } - } -}; - -// Some plugins are using, but it's undocumented/deprecated and will be removed. -// The 1.7 special event interface should provide all the hooks needed now. -jQuery.event.handle = jQuery.event.dispatch; - -jQuery.removeEvent = document.removeEventListener ? - function( elem, type, handle ) { - if ( elem.removeEventListener ) { - elem.removeEventListener( type, handle, false ); - } - } : - function( elem, type, handle ) { - if ( elem.detachEvent ) { - elem.detachEvent( "on" + type, handle ); - } - }; - -jQuery.Event = function( src, props ) { - // Allow instantiation without the 'new' keyword - if ( !(this instanceof jQuery.Event) ) { - return new jQuery.Event( src, props ); - } - - // Event object - if ( src && src.type ) { - this.originalEvent = src; - this.type = src.type; - - // Events bubbling up the document may have been marked as prevented - // by a handler lower down the tree; reflect the correct value. - this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false || - src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse; - - // Event type - } else { - this.type = src; - } - - // Put explicitly provided properties onto the event object - if ( props ) { - jQuery.extend( this, props ); - } - - // Create a timestamp if incoming event doesn't have one - this.timeStamp = src && src.timeStamp || jQuery.now(); - - // Mark it as fixed - this[ jQuery.expando ] = true; -}; - -function returnFalse() { - return false; -} -function returnTrue() { - return true; -} - -// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding -// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html -jQuery.Event.prototype = { - preventDefault: function() { - this.isDefaultPrevented = returnTrue; - - var e = this.originalEvent; - if ( !e ) { - return; - } - - // if preventDefault exists run it on the original event - if ( e.preventDefault ) { - e.preventDefault(); - - // otherwise set the returnValue property of the original event to false (IE) - } else { - e.returnValue = false; - } - }, - stopPropagation: function() { - this.isPropagationStopped = returnTrue; - - var e = this.originalEvent; - if ( !e ) { - return; - } - // if stopPropagation exists run it on the original event - if ( e.stopPropagation ) { - e.stopPropagation(); - } - // otherwise set the cancelBubble property of the original event to true (IE) - e.cancelBubble = true; - }, - stopImmediatePropagation: function() { - this.isImmediatePropagationStopped = returnTrue; - this.stopPropagation(); - }, - isDefaultPrevented: returnFalse, - isPropagationStopped: returnFalse, - isImmediatePropagationStopped: returnFalse -}; - -// Create mouseenter/leave events using mouseover/out and event-time checks -jQuery.each({ - mouseenter: "mouseover", - mouseleave: "mouseout" -}, function( orig, fix ) { - jQuery.event.special[ orig ] = { - delegateType: fix, - bindType: fix, - - handle: function( event ) { - var target = this, - related = event.relatedTarget, - handleObj = event.handleObj, - selector = handleObj.selector, - ret; - - // For mousenter/leave call the handler if related is outside the target. - // NB: No relatedTarget if the mouse left/entered the browser window - if ( !related || (related !== target && !jQuery.contains( target, related )) ) { - event.type = handleObj.origType; - ret = handleObj.handler.apply( this, arguments ); - event.type = fix; - } - return ret; - } - }; -}); - -// IE submit delegation -if ( !jQuery.support.submitBubbles ) { - - jQuery.event.special.submit = { - setup: function() { - // Only need this for delegated form submit events - if ( jQuery.nodeName( this, "form" ) ) { - return false; - } - - // Lazy-add a submit handler when a descendant form may potentially be submitted - jQuery.event.add( this, "click._submit keypress._submit", function( e ) { - // Node name check avoids a VML-related crash in IE (#9807) - var elem = e.target, - form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined; - if ( form && !form._submit_attached ) { - jQuery.event.add( form, "submit._submit", function( event ) { - // If form was submitted by the user, bubble the event up the tree - if ( this.parentNode && !event.isTrigger ) { - jQuery.event.simulate( "submit", this.parentNode, event, true ); - } - }); - form._submit_attached = true; - } - }); - // return undefined since we don't need an event listener - }, - - teardown: function() { - // Only need this for delegated form submit events - if ( jQuery.nodeName( this, "form" ) ) { - return false; - } - - // Remove delegated handlers; cleanData eventually reaps submit handlers attached above - jQuery.event.remove( this, "._submit" ); - } - }; -} - -// IE change delegation and checkbox/radio fix -if ( !jQuery.support.changeBubbles ) { - - jQuery.event.special.change = { - - setup: function() { - - if ( rformElems.test( this.nodeName ) ) { - // IE doesn't fire change on a check/radio until blur; trigger it on click - // after a propertychange. Eat the blur-change in special.change.handle. - // This still fires onchange a second time for check/radio after blur. - if ( this.type === "checkbox" || this.type === "radio" ) { - jQuery.event.add( this, "propertychange._change", function( event ) { - if ( event.originalEvent.propertyName === "checked" ) { - this._just_changed = true; - } - }); - jQuery.event.add( this, "click._change", function( event ) { - if ( this._just_changed && !event.isTrigger ) { - this._just_changed = false; - jQuery.event.simulate( "change", this, event, true ); - } - }); - } - return false; - } - // Delegated event; lazy-add a change handler on descendant inputs - jQuery.event.add( this, "beforeactivate._change", function( e ) { - var elem = e.target; - - if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) { - jQuery.event.add( elem, "change._change", function( event ) { - if ( this.parentNode && !event.isSimulated && !event.isTrigger ) { - jQuery.event.simulate( "change", this.parentNode, event, true ); - } - }); - elem._change_attached = true; - } - }); - }, - - handle: function( event ) { - var elem = event.target; - - // Swallow native change events from checkbox/radio, we already triggered them above - if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) { - return event.handleObj.handler.apply( this, arguments ); - } - }, - - teardown: function() { - jQuery.event.remove( this, "._change" ); - - return rformElems.test( this.nodeName ); - } - }; -} - -// Create "bubbling" focus and blur events -if ( !jQuery.support.focusinBubbles ) { - jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) { - - // Attach a single capturing handler while someone wants focusin/focusout - var attaches = 0, - handler = function( event ) { - jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true ); - }; - - jQuery.event.special[ fix ] = { - setup: function() { - if ( attaches++ === 0 ) { - document.addEventListener( orig, handler, true ); - } - }, - teardown: function() { - if ( --attaches === 0 ) { - document.removeEventListener( orig, handler, true ); - } - } - }; - }); -} - -jQuery.fn.extend({ - - on: function( types, selector, data, fn, /*INTERNAL*/ one ) { - var origFn, type; - - // Types can be a map of types/handlers - if ( typeof types === "object" ) { - // ( types-Object, selector, data ) - if ( typeof selector !== "string" ) { - // ( types-Object, data ) - data = selector; - selector = undefined; - } - for ( type in types ) { - this.on( type, selector, data, types[ type ], one ); - } - return this; - } - - if ( data == null && fn == null ) { - // ( types, fn ) - fn = selector; - data = selector = undefined; - } else if ( fn == null ) { - if ( typeof selector === "string" ) { - // ( types, selector, fn ) - fn = data; - data = undefined; - } else { - // ( types, data, fn ) - fn = data; - data = selector; - selector = undefined; - } - } - if ( fn === false ) { - fn = returnFalse; - } else if ( !fn ) { - return this; - } - - if ( one === 1 ) { - origFn = fn; - fn = function( event ) { - // Can use an empty set, since event contains the info - jQuery().off( event ); - return origFn.apply( this, arguments ); - }; - // Use same guid so caller can remove using origFn - fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); - } - return this.each( function() { - jQuery.event.add( this, types, fn, data, selector ); - }); - }, - one: function( types, selector, data, fn ) { - return this.on.call( this, types, selector, data, fn, 1 ); - }, - off: function( types, selector, fn ) { - if ( types && types.preventDefault && types.handleObj ) { - // ( event ) dispatched jQuery.Event - var handleObj = types.handleObj; - jQuery( types.delegateTarget ).off( - handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type, - handleObj.selector, - handleObj.handler - ); - return this; - } - if ( typeof types === "object" ) { - // ( types-object [, selector] ) - for ( var type in types ) { - this.off( type, selector, types[ type ] ); - } - return this; - } - if ( selector === false || typeof selector === "function" ) { - // ( types [, fn] ) - fn = selector; - selector = undefined; - } - if ( fn === false ) { - fn = returnFalse; - } - return this.each(function() { - jQuery.event.remove( this, types, fn, selector ); - }); - }, - - bind: function( types, data, fn ) { - return this.on( types, null, data, fn ); - }, - unbind: function( types, fn ) { - return this.off( types, null, fn ); - }, - - live: function( types, data, fn ) { - jQuery( this.context ).on( types, this.selector, data, fn ); - return this; - }, - die: function( types, fn ) { - jQuery( this.context ).off( types, this.selector || "**", fn ); - return this; - }, - - delegate: function( selector, types, data, fn ) { - return this.on( types, selector, data, fn ); - }, - undelegate: function( selector, types, fn ) { - // ( namespace ) or ( selector, types [, fn] ) - return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn ); - }, - - trigger: function( type, data ) { - return this.each(function() { - jQuery.event.trigger( type, data, this ); - }); - }, - triggerHandler: function( type, data ) { - if ( this[0] ) { - return jQuery.event.trigger( type, data, this[0], true ); - } - }, - - toggle: function( fn ) { - // Save reference to arguments for access in closure - var args = arguments, - guid = fn.guid || jQuery.guid++, - i = 0, - toggler = function( event ) { - // Figure out which function to execute - var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; - jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); - - // Make sure that clicks stop - event.preventDefault(); - - // and execute the function - return args[ lastToggle ].apply( this, arguments ) || false; - }; - - // link all the functions, so any of them can unbind this click handler - toggler.guid = guid; - while ( i < args.length ) { - args[ i++ ].guid = guid; - } - - return this.click( toggler ); - }, - - hover: function( fnOver, fnOut ) { - return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); - } -}); - -jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + - "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + - "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { - - // Handle event binding - jQuery.fn[ name ] = function( data, fn ) { - if ( fn == null ) { - fn = data; - data = null; - } - - return arguments.length > 0 ? - this.on( name, null, data, fn ) : - this.trigger( name ); - }; - - if ( jQuery.attrFn ) { - jQuery.attrFn[ name ] = true; - } - - if ( rkeyEvent.test( name ) ) { - jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks; - } - - if ( rmouseEvent.test( name ) ) { - jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks; - } -}); - - - -/*! - * Sizzle CSS Selector Engine - * Copyright 2012, The Dojo Foundation - * Released under the MIT, BSD, and GPL Licenses. - * More information: http://sizzlejs.com/ - */ -(function(){ - -var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, - expando = "sizcache" + (Math.random() + '').replace('.', ''), - done = 0, - toString = Object.prototype.toString, - hasDuplicate = false, - baseHasDuplicate = true, - rBackslash = /\\/g, - rReturn = /\r\n/g, - rNonWord = /\W/; - -// Here we check if the JavaScript engine is using some sort of -// optimization where it does not always call our comparision -// function. If that is the case, discard the hasDuplicate value. -// Thus far that includes Google Chrome. -[0, 0].sort(function() { - baseHasDuplicate = false; - return 0; -}); - -var Sizzle = function( selector, context, results, seed ) { - results = results || []; - context = context || document; - - var origContext = context; - - if ( context.nodeType !== 1 && context.nodeType !== 9 ) { - return []; - } - - if ( !selector || typeof selector !== "string" ) { - return results; - } - - var m, set, checkSet, extra, ret, cur, pop, i, - prune = true, - contextXML = Sizzle.isXML( context ), - parts = [], - soFar = selector; - - // Reset the position of the chunker regexp (start from head) - do { - chunker.exec( "" ); - m = chunker.exec( soFar ); - - if ( m ) { - soFar = m[3]; - - parts.push( m[1] ); - - if ( m[2] ) { - extra = m[3]; - break; - } - } - } while ( m ); - - if ( parts.length > 1 && origPOS.exec( selector ) ) { - - if ( parts.length === 2 && Expr.relative[ parts[0] ] ) { - set = posProcess( parts[0] + parts[1], context, seed ); - - } else { - set = Expr.relative[ parts[0] ] ? - [ context ] : - Sizzle( parts.shift(), context ); - - while ( parts.length ) { - selector = parts.shift(); - - if ( Expr.relative[ selector ] ) { - selector += parts.shift(); - } - - set = posProcess( selector, set, seed ); - } - } - - } else { - // Take a shortcut and set the context if the root selector is an ID - // (but not if it'll be faster if the inner selector is an ID) - if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML && - Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) { - - ret = Sizzle.find( parts.shift(), context, contextXML ); - context = ret.expr ? - Sizzle.filter( ret.expr, ret.set )[0] : - ret.set[0]; - } - - if ( context ) { - ret = seed ? - { expr: parts.pop(), set: makeArray(seed) } : - Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML ); - - set = ret.expr ? - Sizzle.filter( ret.expr, ret.set ) : - ret.set; - - if ( parts.length > 0 ) { - checkSet = makeArray( set ); - - } else { - prune = false; - } - - while ( parts.length ) { - cur = parts.pop(); - pop = cur; - - if ( !Expr.relative[ cur ] ) { - cur = ""; - } else { - pop = parts.pop(); - } - - if ( pop == null ) { - pop = context; - } - - Expr.relative[ cur ]( checkSet, pop, contextXML ); - } - - } else { - checkSet = parts = []; - } - } - - if ( !checkSet ) { - checkSet = set; - } - - if ( !checkSet ) { - Sizzle.error( cur || selector ); - } - - if ( toString.call(checkSet) === "[object Array]" ) { - if ( !prune ) { - results.push.apply( results, checkSet ); - - } else if ( context && context.nodeType === 1 ) { - for ( i = 0; checkSet[i] != null; i++ ) { - if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) { - results.push( set[i] ); - } - } - - } else { - for ( i = 0; checkSet[i] != null; i++ ) { - if ( checkSet[i] && checkSet[i].nodeType === 1 ) { - results.push( set[i] ); - } - } - } - - } else { - makeArray( checkSet, results ); - } - - if ( extra ) { - Sizzle( extra, origContext, results, seed ); - Sizzle.uniqueSort( results ); - } - - return results; -}; - -Sizzle.uniqueSort = function( results ) { - if ( sortOrder ) { - hasDuplicate = baseHasDuplicate; - results.sort( sortOrder ); - - if ( hasDuplicate ) { - for ( var i = 1; i < results.length; i++ ) { - if ( results[i] === results[ i - 1 ] ) { - results.splice( i--, 1 ); - } - } - } - } - - return results; -}; - -Sizzle.matches = function( expr, set ) { - return Sizzle( expr, null, null, set ); -}; - -Sizzle.matchesSelector = function( node, expr ) { - return Sizzle( expr, null, null, [node] ).length > 0; -}; - -Sizzle.find = function( expr, context, isXML ) { - var set, i, len, match, type, left; - - if ( !expr ) { - return []; - } - - for ( i = 0, len = Expr.order.length; i < len; i++ ) { - type = Expr.order[i]; - - if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { - left = match[1]; - match.splice( 1, 1 ); - - if ( left.substr( left.length - 1 ) !== "\\" ) { - match[1] = (match[1] || "").replace( rBackslash, "" ); - set = Expr.find[ type ]( match, context, isXML ); - - if ( set != null ) { - expr = expr.replace( Expr.match[ type ], "" ); - break; - } - } - } - } - - if ( !set ) { - set = typeof context.getElementsByTagName !== "undefined" ? - context.getElementsByTagName( "*" ) : - []; - } - - return { set: set, expr: expr }; -}; - -Sizzle.filter = function( expr, set, inplace, not ) { - var match, anyFound, - type, found, item, filter, left, - i, pass, - old = expr, - result = [], - curLoop = set, - isXMLFilter = set && set[0] && Sizzle.isXML( set[0] ); - - while ( expr && set.length ) { - for ( type in Expr.filter ) { - if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { - filter = Expr.filter[ type ]; - left = match[1]; - - anyFound = false; - - match.splice(1,1); - - if ( left.substr( left.length - 1 ) === "\\" ) { - continue; - } - - if ( curLoop === result ) { - result = []; - } - - if ( Expr.preFilter[ type ] ) { - match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter ); - - if ( !match ) { - anyFound = found = true; - - } else if ( match === true ) { - continue; - } - } - - if ( match ) { - for ( i = 0; (item = curLoop[i]) != null; i++ ) { - if ( item ) { - found = filter( item, match, i, curLoop ); - pass = not ^ found; - - if ( inplace && found != null ) { - if ( pass ) { - anyFound = true; - - } else { - curLoop[i] = false; - } - - } else if ( pass ) { - result.push( item ); - anyFound = true; - } - } - } - } - - if ( found !== undefined ) { - if ( !inplace ) { - curLoop = result; - } - - expr = expr.replace( Expr.match[ type ], "" ); - - if ( !anyFound ) { - return []; - } - - break; - } - } - } - - // Improper expression - if ( expr === old ) { - if ( anyFound == null ) { - Sizzle.error( expr ); - - } else { - break; - } - } - - old = expr; - } - - return curLoop; -}; - -Sizzle.error = function( msg ) { - throw new Error( "Syntax error, unrecognized expression: " + msg ); -}; - -/** - * Utility function for retreiving the text value of an array of DOM nodes - * @param {Array|Element} elem - */ -var getText = Sizzle.getText = function( elem ) { - var i, node, - nodeType = elem.nodeType, - ret = ""; - - if ( nodeType ) { - if ( nodeType === 1 || nodeType === 9 ) { - // Use textContent || innerText for elements - if ( typeof elem.textContent === 'string' ) { - return elem.textContent; - } else if ( typeof elem.innerText === 'string' ) { - // Replace IE's carriage returns - return elem.innerText.replace( rReturn, '' ); - } else { - // Traverse it's children - for ( elem = elem.firstChild; elem; elem = elem.nextSibling) { - ret += getText( elem ); - } - } - } else if ( nodeType === 3 || nodeType === 4 ) { - return elem.nodeValue; - } - } else { - - // If no nodeType, this is expected to be an array - for ( i = 0; (node = elem[i]); i++ ) { - // Do not traverse comment nodes - if ( node.nodeType !== 8 ) { - ret += getText( node ); - } - } - } - return ret; -}; - -var Expr = Sizzle.selectors = { - order: [ "ID", "NAME", "TAG" ], - - match: { - ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, - CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, - NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, - ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/, - TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, - CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/, - POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, - PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ - }, - - leftMatch: {}, - - attrMap: { - "class": "className", - "for": "htmlFor" - }, - - attrHandle: { - href: function( elem ) { - return elem.getAttribute( "href" ); - }, - type: function( elem ) { - return elem.getAttribute( "type" ); - } - }, - - relative: { - "+": function(checkSet, part){ - var isPartStr = typeof part === "string", - isTag = isPartStr && !rNonWord.test( part ), - isPartStrNotTag = isPartStr && !isTag; - - if ( isTag ) { - part = part.toLowerCase(); - } - - for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) { - if ( (elem = checkSet[i]) ) { - while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {} - - checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ? - elem || false : - elem === part; - } - } - - if ( isPartStrNotTag ) { - Sizzle.filter( part, checkSet, true ); - } - }, - - ">": function( checkSet, part ) { - var elem, - isPartStr = typeof part === "string", - i = 0, - l = checkSet.length; - - if ( isPartStr && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - - for ( ; i < l; i++ ) { - elem = checkSet[i]; - - if ( elem ) { - var parent = elem.parentNode; - checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false; - } - } - - } else { - for ( ; i < l; i++ ) { - elem = checkSet[i]; - - if ( elem ) { - checkSet[i] = isPartStr ? - elem.parentNode : - elem.parentNode === part; - } - } - - if ( isPartStr ) { - Sizzle.filter( part, checkSet, true ); - } - } - }, - - "": function(checkSet, part, isXML){ - var nodeCheck, - doneName = done++, - checkFn = dirCheck; - - if ( typeof part === "string" && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - nodeCheck = part; - checkFn = dirNodeCheck; - } - - checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML ); - }, - - "~": function( checkSet, part, isXML ) { - var nodeCheck, - doneName = done++, - checkFn = dirCheck; - - if ( typeof part === "string" && !rNonWord.test( part ) ) { - part = part.toLowerCase(); - nodeCheck = part; - checkFn = dirNodeCheck; - } - - checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML ); - } - }, - - find: { - ID: function( match, context, isXML ) { - if ( typeof context.getElementById !== "undefined" && !isXML ) { - var m = context.getElementById(match[1]); - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - return m && m.parentNode ? [m] : []; - } - }, - - NAME: function( match, context ) { - if ( typeof context.getElementsByName !== "undefined" ) { - var ret = [], - results = context.getElementsByName( match[1] ); - - for ( var i = 0, l = results.length; i < l; i++ ) { - if ( results[i].getAttribute("name") === match[1] ) { - ret.push( results[i] ); - } - } - - return ret.length === 0 ? null : ret; - } - }, - - TAG: function( match, context ) { - if ( typeof context.getElementsByTagName !== "undefined" ) { - return context.getElementsByTagName( match[1] ); - } - } - }, - preFilter: { - CLASS: function( match, curLoop, inplace, result, not, isXML ) { - match = " " + match[1].replace( rBackslash, "" ) + " "; - - if ( isXML ) { - return match; - } - - for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) { - if ( elem ) { - if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) { - if ( !inplace ) { - result.push( elem ); - } - - } else if ( inplace ) { - curLoop[i] = false; - } - } - } - - return false; - }, - - ID: function( match ) { - return match[1].replace( rBackslash, "" ); - }, - - TAG: function( match, curLoop ) { - return match[1].replace( rBackslash, "" ).toLowerCase(); - }, - - CHILD: function( match ) { - if ( match[1] === "nth" ) { - if ( !match[2] ) { - Sizzle.error( match[0] ); - } - - match[2] = match[2].replace(/^\+|\s*/g, ''); - - // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6' - var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec( - match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" || - !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]); - - // calculate the numbers (first)n+(last) including if they are negative - match[2] = (test[1] + (test[2] || 1)) - 0; - match[3] = test[3] - 0; - } - else if ( match[2] ) { - Sizzle.error( match[0] ); - } - - // TODO: Move to normal caching system - match[0] = done++; - - return match; - }, - - ATTR: function( match, curLoop, inplace, result, not, isXML ) { - var name = match[1] = match[1].replace( rBackslash, "" ); - - if ( !isXML && Expr.attrMap[name] ) { - match[1] = Expr.attrMap[name]; - } - - // Handle if an un-quoted value was used - match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" ); - - if ( match[2] === "~=" ) { - match[4] = " " + match[4] + " "; - } - - return match; - }, - - PSEUDO: function( match, curLoop, inplace, result, not ) { - if ( match[1] === "not" ) { - // If we're dealing with a complex expression, or a simple one - if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) { - match[3] = Sizzle(match[3], null, null, curLoop); - - } else { - var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not); - - if ( !inplace ) { - result.push.apply( result, ret ); - } - - return false; - } - - } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) { - return true; - } - - return match; - }, - - POS: function( match ) { - match.unshift( true ); - - return match; - } - }, - - filters: { - enabled: function( elem ) { - return elem.disabled === false && elem.type !== "hidden"; - }, - - disabled: function( elem ) { - return elem.disabled === true; - }, - - checked: function( elem ) { - return elem.checked === true; - }, - - selected: function( elem ) { - // Accessing this property makes selected-by-default - // options in Safari work properly - if ( elem.parentNode ) { - elem.parentNode.selectedIndex; - } - - return elem.selected === true; - }, - - parent: function( elem ) { - return !!elem.firstChild; - }, - - empty: function( elem ) { - return !elem.firstChild; - }, - - has: function( elem, i, match ) { - return !!Sizzle( match[3], elem ).length; - }, - - header: function( elem ) { - return (/h\d/i).test( elem.nodeName ); - }, - - text: function( elem ) { - var attr = elem.getAttribute( "type" ), type = elem.type; - // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc) - // use getAttribute instead to test this case - return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null ); - }, - - radio: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type; - }, - - checkbox: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type; - }, - - file: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "file" === elem.type; - }, - - password: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "password" === elem.type; - }, - - submit: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return (name === "input" || name === "button") && "submit" === elem.type; - }, - - image: function( elem ) { - return elem.nodeName.toLowerCase() === "input" && "image" === elem.type; - }, - - reset: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return (name === "input" || name === "button") && "reset" === elem.type; - }, - - button: function( elem ) { - var name = elem.nodeName.toLowerCase(); - return name === "input" && "button" === elem.type || name === "button"; - }, - - input: function( elem ) { - return (/input|select|textarea|button/i).test( elem.nodeName ); - }, - - focus: function( elem ) { - return elem === elem.ownerDocument.activeElement; - } - }, - setFilters: { - first: function( elem, i ) { - return i === 0; - }, - - last: function( elem, i, match, array ) { - return i === array.length - 1; - }, - - even: function( elem, i ) { - return i % 2 === 0; - }, - - odd: function( elem, i ) { - return i % 2 === 1; - }, - - lt: function( elem, i, match ) { - return i < match[3] - 0; - }, - - gt: function( elem, i, match ) { - return i > match[3] - 0; - }, - - nth: function( elem, i, match ) { - return match[3] - 0 === i; - }, - - eq: function( elem, i, match ) { - return match[3] - 0 === i; - } - }, - filter: { - PSEUDO: function( elem, match, i, array ) { - var name = match[1], - filter = Expr.filters[ name ]; - - if ( filter ) { - return filter( elem, i, match, array ); - - } else if ( name === "contains" ) { - return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0; - - } else if ( name === "not" ) { - var not = match[3]; - - for ( var j = 0, l = not.length; j < l; j++ ) { - if ( not[j] === elem ) { - return false; - } - } - - return true; - - } else { - Sizzle.error( name ); - } - }, - - CHILD: function( elem, match ) { - var first, last, - doneName, parent, cache, - count, diff, - type = match[1], - node = elem; - - switch ( type ) { - case "only": - case "first": - while ( (node = node.previousSibling) ) { - if ( node.nodeType === 1 ) { - return false; - } - } - - if ( type === "first" ) { - return true; - } - - node = elem; - - case "last": - while ( (node = node.nextSibling) ) { - if ( node.nodeType === 1 ) { - return false; - } - } - - return true; - - case "nth": - first = match[2]; - last = match[3]; - - if ( first === 1 && last === 0 ) { - return true; - } - - doneName = match[0]; - parent = elem.parentNode; - - if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) { - count = 0; - - for ( node = parent.firstChild; node; node = node.nextSibling ) { - if ( node.nodeType === 1 ) { - node.nodeIndex = ++count; - } - } - - parent[ expando ] = doneName; - } - - diff = elem.nodeIndex - last; - - if ( first === 0 ) { - return diff === 0; - - } else { - return ( diff % first === 0 && diff / first >= 0 ); - } - } - }, - - ID: function( elem, match ) { - return elem.nodeType === 1 && elem.getAttribute("id") === match; - }, - - TAG: function( elem, match ) { - return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match; - }, - - CLASS: function( elem, match ) { - return (" " + (elem.className || elem.getAttribute("class")) + " ") - .indexOf( match ) > -1; - }, - - ATTR: function( elem, match ) { - var name = match[1], - result = Sizzle.attr ? - Sizzle.attr( elem, name ) : - Expr.attrHandle[ name ] ? - Expr.attrHandle[ name ]( elem ) : - elem[ name ] != null ? - elem[ name ] : - elem.getAttribute( name ), - value = result + "", - type = match[2], - check = match[4]; - - return result == null ? - type === "!=" : - !type && Sizzle.attr ? - result != null : - type === "=" ? - value === check : - type === "*=" ? - value.indexOf(check) >= 0 : - type === "~=" ? - (" " + value + " ").indexOf(check) >= 0 : - !check ? - value && result !== false : - type === "!=" ? - value !== check : - type === "^=" ? - value.indexOf(check) === 0 : - type === "$=" ? - value.substr(value.length - check.length) === check : - type === "|=" ? - value === check || value.substr(0, check.length + 1) === check + "-" : - false; - }, - - POS: function( elem, match, i, array ) { - var name = match[2], - filter = Expr.setFilters[ name ]; - - if ( filter ) { - return filter( elem, i, match, array ); - } - } - } -}; - -var origPOS = Expr.match.POS, - fescape = function(all, num){ - return "\\" + (num - 0 + 1); - }; - -for ( var type in Expr.match ) { - Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ); - Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) ); -} - -var makeArray = function( array, results ) { - array = Array.prototype.slice.call( array, 0 ); - - if ( results ) { - results.push.apply( results, array ); - return results; - } - - return array; -}; - -// Perform a simple check to determine if the browser is capable of -// converting a NodeList to an array using builtin methods. -// Also verifies that the returned array holds DOM nodes -// (which is not the case in the Blackberry browser) -try { - Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; - -// Provide a fallback method if it does not work -} catch( e ) { - makeArray = function( array, results ) { - var i = 0, - ret = results || []; - - if ( toString.call(array) === "[object Array]" ) { - Array.prototype.push.apply( ret, array ); - - } else { - if ( typeof array.length === "number" ) { - for ( var l = array.length; i < l; i++ ) { - ret.push( array[i] ); - } - - } else { - for ( ; array[i]; i++ ) { - ret.push( array[i] ); - } - } - } - - return ret; - }; -} - -var sortOrder, siblingCheck; - -if ( document.documentElement.compareDocumentPosition ) { - sortOrder = function( a, b ) { - if ( a === b ) { - hasDuplicate = true; - return 0; - } - - if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) { - return a.compareDocumentPosition ? -1 : 1; - } - - return a.compareDocumentPosition(b) & 4 ? -1 : 1; - }; - -} else { - sortOrder = function( a, b ) { - // The nodes are identical, we can exit early - if ( a === b ) { - hasDuplicate = true; - return 0; - - // Fallback to using sourceIndex (in IE) if it's available on both nodes - } else if ( a.sourceIndex && b.sourceIndex ) { - return a.sourceIndex - b.sourceIndex; - } - - var al, bl, - ap = [], - bp = [], - aup = a.parentNode, - bup = b.parentNode, - cur = aup; - - // If the nodes are siblings (or identical) we can do a quick check - if ( aup === bup ) { - return siblingCheck( a, b ); - - // If no parents were found then the nodes are disconnected - } else if ( !aup ) { - return -1; - - } else if ( !bup ) { - return 1; - } - - // Otherwise they're somewhere else in the tree so we need - // to build up a full list of the parentNodes for comparison - while ( cur ) { - ap.unshift( cur ); - cur = cur.parentNode; - } - - cur = bup; - - while ( cur ) { - bp.unshift( cur ); - cur = cur.parentNode; - } - - al = ap.length; - bl = bp.length; - - // Start walking down the tree looking for a discrepancy - for ( var i = 0; i < al && i < bl; i++ ) { - if ( ap[i] !== bp[i] ) { - return siblingCheck( ap[i], bp[i] ); - } - } - - // We ended someplace up the tree so do a sibling check - return i === al ? - siblingCheck( a, bp[i], -1 ) : - siblingCheck( ap[i], b, 1 ); - }; - - siblingCheck = function( a, b, ret ) { - if ( a === b ) { - return ret; - - var cur = a.nextSibling; - } - - while ( cur ) { - if ( cur === b ) { - return -1; - } - - cur = cur.nextSibling; - } - - return 1; - }; -} - -// Check to see if the browser returns elements by name when -// querying by getElementById (and provide a workaround) -(function(){ - // We're going to inject a fake input element with a specified name - var form = document.createElement("div"), - id = "script" + (new Date()).getTime(), - root = document.documentElement; - - form.innerHTML = ""; - - // Inject it into the root element, check its status, and remove it quickly - root.insertBefore( form, root.firstChild ); - - // The workaround has to do additional checks after a getElementById - // Which slows things down for other browsers (hence the branching) - if ( document.getElementById( id ) ) { - Expr.find.ID = function( match, context, isXML ) { - if ( typeof context.getElementById !== "undefined" && !isXML ) { - var m = context.getElementById(match[1]); - - return m ? - m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? - [m] : - undefined : - []; - } - }; - - Expr.filter.ID = function( elem, match ) { - var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id"); - - return elem.nodeType === 1 && node && node.nodeValue === match; - }; - } - - root.removeChild( form ); - - // release memory in IE - root = form = null; -})(); - -(function(){ - // Check to see if the browser returns only elements - // when doing getElementsByTagName("*") - - // Create a fake element - var div = document.createElement("div"); - div.appendChild( document.createComment("") ); - - // Make sure no comments are found - if ( div.getElementsByTagName("*").length > 0 ) { - Expr.find.TAG = function( match, context ) { - var results = context.getElementsByTagName( match[1] ); - - // Filter out possible comments - if ( match[1] === "*" ) { - var tmp = []; - - for ( var i = 0; results[i]; i++ ) { - if ( results[i].nodeType === 1 ) { - tmp.push( results[i] ); - } - } - - results = tmp; - } - - return results; - }; - } - - // Check to see if an attribute returns normalized href attributes - div.innerHTML = ""; - - if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" && - div.firstChild.getAttribute("href") !== "#" ) { - - Expr.attrHandle.href = function( elem ) { - return elem.getAttribute( "href", 2 ); - }; - } - - // release memory in IE - div = null; -})(); - -if ( document.querySelectorAll ) { - (function(){ - var oldSizzle = Sizzle, - div = document.createElement("div"), - id = "__sizzle__"; - - div.innerHTML = "

            "; - - // Safari can't handle uppercase or unicode characters when - // in quirks mode. - if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { - return; - } - - Sizzle = function( query, context, extra, seed ) { - context = context || document; - - // Only use querySelectorAll on non-XML documents - // (ID selectors don't work in non-HTML documents) - if ( !seed && !Sizzle.isXML(context) ) { - // See if we find a selector to speed up - var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query ); - - if ( match && (context.nodeType === 1 || context.nodeType === 9) ) { - // Speed-up: Sizzle("TAG") - if ( match[1] ) { - return makeArray( context.getElementsByTagName( query ), extra ); - - // Speed-up: Sizzle(".CLASS") - } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) { - return makeArray( context.getElementsByClassName( match[2] ), extra ); - } - } - - if ( context.nodeType === 9 ) { - // Speed-up: Sizzle("body") - // The body element only exists once, optimize finding it - if ( query === "body" && context.body ) { - return makeArray( [ context.body ], extra ); - - // Speed-up: Sizzle("#ID") - } else if ( match && match[3] ) { - var elem = context.getElementById( match[3] ); - - // Check parentNode to catch when Blackberry 4.6 returns - // nodes that are no longer in the document #6963 - if ( elem && elem.parentNode ) { - // Handle the case where IE and Opera return items - // by name instead of ID - if ( elem.id === match[3] ) { - return makeArray( [ elem ], extra ); - } - - } else { - return makeArray( [], extra ); - } - } - - try { - return makeArray( context.querySelectorAll(query), extra ); - } catch(qsaError) {} - - // qSA works strangely on Element-rooted queries - // We can work around this by specifying an extra ID on the root - // and working up from there (Thanks to Andrew Dupont for the technique) - // IE 8 doesn't work on object elements - } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { - var oldContext = context, - old = context.getAttribute( "id" ), - nid = old || id, - hasParent = context.parentNode, - relativeHierarchySelector = /^\s*[+~]/.test( query ); - - if ( !old ) { - context.setAttribute( "id", nid ); - } else { - nid = nid.replace( /'/g, "\\$&" ); - } - if ( relativeHierarchySelector && hasParent ) { - context = context.parentNode; - } - - try { - if ( !relativeHierarchySelector || hasParent ) { - return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra ); - } - - } catch(pseudoError) { - } finally { - if ( !old ) { - oldContext.removeAttribute( "id" ); - } - } - } - } - - return oldSizzle(query, context, extra, seed); - }; - - for ( var prop in oldSizzle ) { - Sizzle[ prop ] = oldSizzle[ prop ]; - } - - // release memory in IE - div = null; - })(); -} - -(function(){ - var html = document.documentElement, - matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector; - - if ( matches ) { - // Check to see if it's possible to do matchesSelector - // on a disconnected node (IE 9 fails this) - var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ), - pseudoWorks = false; - - try { - // This should fail with an exception - // Gecko does not error, returns false instead - matches.call( document.documentElement, "[test!='']:sizzle" ); - - } catch( pseudoError ) { - pseudoWorks = true; - } - - Sizzle.matchesSelector = function( node, expr ) { - // Make sure that attribute selectors are quoted - expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']"); - - if ( !Sizzle.isXML( node ) ) { - try { - if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) { - var ret = matches.call( node, expr ); - - // IE 9's matchesSelector returns false on disconnected nodes - if ( ret || !disconnectedMatch || - // As well, disconnected nodes are said to be in a document - // fragment in IE 9, so check for that - node.document && node.document.nodeType !== 11 ) { - return ret; - } - } - } catch(e) {} - } - - return Sizzle(expr, null, null, [node]).length > 0; - }; - } -})(); - -(function(){ - var div = document.createElement("div"); - - div.innerHTML = "
            "; - - // Opera can't find a second classname (in 9.6) - // Also, make sure that getElementsByClassName actually exists - if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) { - return; - } - - // Safari caches class attributes, doesn't catch changes (in 3.2) - div.lastChild.className = "e"; - - if ( div.getElementsByClassName("e").length === 1 ) { - return; - } - - Expr.order.splice(1, 0, "CLASS"); - Expr.find.CLASS = function( match, context, isXML ) { - if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { - return context.getElementsByClassName(match[1]); - } - }; - - // release memory in IE - div = null; -})(); - -function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { - for ( var i = 0, l = checkSet.length; i < l; i++ ) { - var elem = checkSet[i]; - - if ( elem ) { - var match = false; - - elem = elem[dir]; - - while ( elem ) { - if ( elem[ expando ] === doneName ) { - match = checkSet[elem.sizset]; - break; - } - - if ( elem.nodeType === 1 && !isXML ){ - elem[ expando ] = doneName; - elem.sizset = i; - } - - if ( elem.nodeName.toLowerCase() === cur ) { - match = elem; - break; - } - - elem = elem[dir]; - } - - checkSet[i] = match; - } - } -} - -function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { - for ( var i = 0, l = checkSet.length; i < l; i++ ) { - var elem = checkSet[i]; - - if ( elem ) { - var match = false; - - elem = elem[dir]; - - while ( elem ) { - if ( elem[ expando ] === doneName ) { - match = checkSet[elem.sizset]; - break; - } - - if ( elem.nodeType === 1 ) { - if ( !isXML ) { - elem[ expando ] = doneName; - elem.sizset = i; - } - - if ( typeof cur !== "string" ) { - if ( elem === cur ) { - match = true; - break; - } - - } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) { - match = elem; - break; - } - } - - elem = elem[dir]; - } - - checkSet[i] = match; - } - } -} - -if ( document.documentElement.contains ) { - Sizzle.contains = function( a, b ) { - return a !== b && (a.contains ? a.contains(b) : true); - }; - -} else if ( document.documentElement.compareDocumentPosition ) { - Sizzle.contains = function( a, b ) { - return !!(a.compareDocumentPosition(b) & 16); - }; - -} else { - Sizzle.contains = function() { - return false; - }; -} - -Sizzle.isXML = function( elem ) { - // documentElement is verified for cases where it doesn't yet exist - // (such as loading iframes in IE - #4833) - var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement; - - return documentElement ? documentElement.nodeName !== "HTML" : false; -}; - -var posProcess = function( selector, context, seed ) { - var match, - tmpSet = [], - later = "", - root = context.nodeType ? [context] : context; - - // Position selectors must be done after the filter - // And so must :not(positional) so we move all PSEUDOs to the end - while ( (match = Expr.match.PSEUDO.exec( selector )) ) { - later += match[0]; - selector = selector.replace( Expr.match.PSEUDO, "" ); - } - - selector = Expr.relative[selector] ? selector + "*" : selector; - - for ( var i = 0, l = root.length; i < l; i++ ) { - Sizzle( selector, root[i], tmpSet, seed ); - } - - return Sizzle.filter( later, tmpSet ); -}; - -// EXPOSE -// Override sizzle attribute retrieval -Sizzle.attr = jQuery.attr; -Sizzle.selectors.attrMap = {}; -jQuery.find = Sizzle; -jQuery.expr = Sizzle.selectors; -jQuery.expr[":"] = jQuery.expr.filters; -jQuery.unique = Sizzle.uniqueSort; -jQuery.text = Sizzle.getText; -jQuery.isXMLDoc = Sizzle.isXML; -jQuery.contains = Sizzle.contains; - - -})(); - - -var runtil = /Until$/, - rparentsprev = /^(?:parents|prevUntil|prevAll)/, - // Note: This RegExp should be improved, or likely pulled from Sizzle - rmultiselector = /,/, - isSimple = /^.[^:#\[\.,]*$/, - slice = Array.prototype.slice, - POS = jQuery.expr.match.POS, - // methods guaranteed to produce a unique set when starting from a unique set - guaranteedUnique = { - children: true, - contents: true, - next: true, - prev: true - }; - -jQuery.fn.extend({ - find: function( selector ) { - var self = this, - i, l; - - if ( typeof selector !== "string" ) { - return jQuery( selector ).filter(function() { - for ( i = 0, l = self.length; i < l; i++ ) { - if ( jQuery.contains( self[ i ], this ) ) { - return true; - } - } - }); - } - - var ret = this.pushStack( "", "find", selector ), - length, n, r; - - for ( i = 0, l = this.length; i < l; i++ ) { - length = ret.length; - jQuery.find( selector, this[i], ret ); - - if ( i > 0 ) { - // Make sure that the results are unique - for ( n = length; n < ret.length; n++ ) { - for ( r = 0; r < length; r++ ) { - if ( ret[r] === ret[n] ) { - ret.splice(n--, 1); - break; - } - } - } - } - } - - return ret; - }, - - has: function( target ) { - var targets = jQuery( target ); - return this.filter(function() { - for ( var i = 0, l = targets.length; i < l; i++ ) { - if ( jQuery.contains( this, targets[i] ) ) { - return true; - } - } - }); - }, - - not: function( selector ) { - return this.pushStack( winnow(this, selector, false), "not", selector); - }, - - filter: function( selector ) { - return this.pushStack( winnow(this, selector, true), "filter", selector ); - }, - - is: function( selector ) { - return !!selector && ( - typeof selector === "string" ? - // If this is a positional selector, check membership in the returned set - // so $("p:first").is("p:last") won't return true for a doc with two "p". - POS.test( selector ) ? - jQuery( selector, this.context ).index( this[0] ) >= 0 : - jQuery.filter( selector, this ).length > 0 : - this.filter( selector ).length > 0 ); - }, - - closest: function( selectors, context ) { - var ret = [], i, l, cur = this[0]; - - // Array (deprecated as of jQuery 1.7) - if ( jQuery.isArray( selectors ) ) { - var level = 1; - - while ( cur && cur.ownerDocument && cur !== context ) { - for ( i = 0; i < selectors.length; i++ ) { - - if ( jQuery( cur ).is( selectors[ i ] ) ) { - ret.push({ selector: selectors[ i ], elem: cur, level: level }); - } - } - - cur = cur.parentNode; - level++; - } - - return ret; - } - - // String - var pos = POS.test( selectors ) || typeof selectors !== "string" ? - jQuery( selectors, context || this.context ) : - 0; - - for ( i = 0, l = this.length; i < l; i++ ) { - cur = this[i]; - - while ( cur ) { - if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { - ret.push( cur ); - break; - - } else { - cur = cur.parentNode; - if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { - break; - } - } - } - } - - ret = ret.length > 1 ? jQuery.unique( ret ) : ret; - - return this.pushStack( ret, "closest", selectors ); - }, - - // Determine the position of an element within - // the matched set of elements - index: function( elem ) { - - // No argument, return index in parent - if ( !elem ) { - return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1; - } - - // index in selector - if ( typeof elem === "string" ) { - return jQuery.inArray( this[0], jQuery( elem ) ); - } - - // Locate the position of the desired element - return jQuery.inArray( - // If it receives a jQuery object, the first element is used - elem.jquery ? elem[0] : elem, this ); - }, - - add: function( selector, context ) { - var set = typeof selector === "string" ? - jQuery( selector, context ) : - jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ), - all = jQuery.merge( this.get(), set ); - - return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ? - all : - jQuery.unique( all ) ); - }, - - andSelf: function() { - return this.add( this.prevObject ); - } -}); - -// A painfully simple check to see if an element is disconnected -// from a document (should be improved, where feasible). -function isDisconnected( node ) { - return !node || !node.parentNode || node.parentNode.nodeType === 11; -} - -jQuery.each({ - parent: function( elem ) { - var parent = elem.parentNode; - return parent && parent.nodeType !== 11 ? parent : null; - }, - parents: function( elem ) { - return jQuery.dir( elem, "parentNode" ); - }, - parentsUntil: function( elem, i, until ) { - return jQuery.dir( elem, "parentNode", until ); - }, - next: function( elem ) { - return jQuery.nth( elem, 2, "nextSibling" ); - }, - prev: function( elem ) { - return jQuery.nth( elem, 2, "previousSibling" ); - }, - nextAll: function( elem ) { - return jQuery.dir( elem, "nextSibling" ); - }, - prevAll: function( elem ) { - return jQuery.dir( elem, "previousSibling" ); - }, - nextUntil: function( elem, i, until ) { - return jQuery.dir( elem, "nextSibling", until ); - }, - prevUntil: function( elem, i, until ) { - return jQuery.dir( elem, "previousSibling", until ); - }, - siblings: function( elem ) { - return jQuery.sibling( elem.parentNode.firstChild, elem ); - }, - children: function( elem ) { - return jQuery.sibling( elem.firstChild ); - }, - contents: function( elem ) { - return jQuery.nodeName( elem, "iframe" ) ? - elem.contentDocument || elem.contentWindow.document : - jQuery.makeArray( elem.childNodes ); - } -}, function( name, fn ) { - jQuery.fn[ name ] = function( until, selector ) { - var ret = jQuery.map( this, fn, until ); - - if ( !runtil.test( name ) ) { - selector = until; - } - - if ( selector && typeof selector === "string" ) { - ret = jQuery.filter( selector, ret ); - } - - ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret; - - if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) { - ret = ret.reverse(); - } - - return this.pushStack( ret, name, slice.call( arguments ).join(",") ); - }; -}); - -jQuery.extend({ - filter: function( expr, elems, not ) { - if ( not ) { - expr = ":not(" + expr + ")"; - } - - return elems.length === 1 ? - jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] : - jQuery.find.matches(expr, elems); - }, - - dir: function( elem, dir, until ) { - var matched = [], - cur = elem[ dir ]; - - while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) { - if ( cur.nodeType === 1 ) { - matched.push( cur ); - } - cur = cur[dir]; - } - return matched; - }, - - nth: function( cur, result, dir, elem ) { - result = result || 1; - var num = 0; - - for ( ; cur; cur = cur[dir] ) { - if ( cur.nodeType === 1 && ++num === result ) { - break; - } - } - - return cur; - }, - - sibling: function( n, elem ) { - var r = []; - - for ( ; n; n = n.nextSibling ) { - if ( n.nodeType === 1 && n !== elem ) { - r.push( n ); - } - } - - return r; - } -}); - -// Implement the identical functionality for filter and not -function winnow( elements, qualifier, keep ) { - - // Can't pass null or undefined to indexOf in Firefox 4 - // Set to 0 to skip string check - qualifier = qualifier || 0; - - if ( jQuery.isFunction( qualifier ) ) { - return jQuery.grep(elements, function( elem, i ) { - var retVal = !!qualifier.call( elem, i, elem ); - return retVal === keep; - }); - - } else if ( qualifier.nodeType ) { - return jQuery.grep(elements, function( elem, i ) { - return ( elem === qualifier ) === keep; - }); - - } else if ( typeof qualifier === "string" ) { - var filtered = jQuery.grep(elements, function( elem ) { - return elem.nodeType === 1; - }); - - if ( isSimple.test( qualifier ) ) { - return jQuery.filter(qualifier, filtered, !keep); - } else { - qualifier = jQuery.filter( qualifier, filtered ); - } - } - - return jQuery.grep(elements, function( elem, i ) { - return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep; - }); -} - - - - -function createSafeFragment( document ) { - var list = nodeNames.split( "|" ), - safeFrag = document.createDocumentFragment(); - - if ( safeFrag.createElement ) { - while ( list.length ) { - safeFrag.createElement( - list.pop() - ); - } - } - return safeFrag; -} - -var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" + - "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video", - rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g, - rleadingWhitespace = /^\s+/, - rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, - rtagName = /<([\w:]+)/, - rtbody = /", "" ], - legend: [ 1, "
            ", "
            " ], - thead: [ 1, "", "
            " ], - tr: [ 2, "", "
            " ], - td: [ 3, "", "
            " ], - col: [ 2, "", "
            " ], - area: [ 1, "", "" ], - _default: [ 0, "", "" ] - }, - safeFragment = createSafeFragment( document ); - -wrapMap.optgroup = wrapMap.option; -wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead; -wrapMap.th = wrapMap.td; - -// IE can't serialize and + + + + + + + + + + + + + + + diff --git a/less/tests/forms-responsive.html b/less/tests/forms-responsive.html new file mode 100644 index 00000000..c3e208d0 --- /dev/null +++ b/less/tests/forms-responsive.html @@ -0,0 +1,71 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + +
            + +
            +

            Fixed grid

            +
            + +

            Vertical alignment

            + + + span1 + +

            Width across elements

            +
            + +
            +
            + +
            +
            + span2 +
            + + +
            +

            Fluid grid

            +
            + +
            + + + span1 +
            + +
            + + + diff --git a/less/tests/navbar-fixed-top.html b/less/tests/navbar-fixed-top.html new file mode 100644 index 00000000..2d9a7a71 --- /dev/null +++ b/less/tests/navbar-fixed-top.html @@ -0,0 +1,104 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + +
            +
            +
            + + + + + + Project name +
            + + +
            +
            +
            +
            + +
            + + +
            +

            Navbar example

            +

            This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

            +

            + View navbar docs » +

            +
            + +
            + + + + + + + + + + + + + + + + + + + diff --git a/less/tests/navbar-static-top.html b/less/tests/navbar-static-top.html new file mode 100644 index 00000000..4bead8ec --- /dev/null +++ b/less/tests/navbar-static-top.html @@ -0,0 +1,107 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + +
            +
            +
            + + + + + + Project name +
            + + +
            +
            +
            +
            + + +
            + + +
            +

            Navbar example

            +

            This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

            +

            + View navbar docs » +

            +
            + +
            + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 016e60d0..b01927eb 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "bootstrap.stylus" - , "version": "0.0.1" , "description": "Twitter's Bootstrap written with Stylus" + , "version": "2.2.2" , "keywords": ["css", "stylus", "twitter", "bootstrap"] , "author": "Javier Vizoso " , "dependencies": { "nib": "0.3.x" } , "devDependencies": { - "connect": "2.0.x" + "connect": "2.1.3" , "stylus": "0.24.0" } , "main": "index" diff --git a/styl/accordion.styl b/styl/accordion.styl index b0bc55da..9de37b93 100644 --- a/styl/accordion.styl +++ b/styl/accordion.styl @@ -1,29 +1,34 @@ -// ACCORDION -// --------- +// +// Accordion +// -------------------------------------------------- // Parent container -.accordion - margin-bottom: $baseLineHeight - +.accordion { + margin-bottom: $baseLineHeight; +} // Group == heading + body -.accordion-group - margin-bottom: 2px - border: 1px solid #e5e5e5 - $border-radius(4px) - -.accordion-heading - border-bottom: 0 - -.accordion-heading .accordion-toggle - display: block - padding: 8px 15px - +.accordion-group { + margin-bottom: 2px; + border: 1px solid #e5e5e5; + $border-radius($baseBorderRadius); +} +.accordion-heading { + border-bottom: 0; +} +.accordion-heading .accordion-toggle { + display: block; + padding: 8px 15px; +} + +// General toggle styles +.accordion-toggle { + cursor: pointer; +} // Inner needs the styles because you can't animate properly with any styles on the element -.accordion-inner - padding: 9px 15px - border-top: 1px solid #e5e5e5 - - +.accordion-inner { + padding: 9px 15px; + border-top: 1px solid #e5e5e5; +} diff --git a/styl/alerts.styl b/styl/alerts.styl index ed95eec4..a5101c26 100644 --- a/styl/alerts.styl +++ b/styl/alerts.styl @@ -1,71 +1,81 @@ -// ALERT STYLES -// ------------ - -// Base alert styles -.alert - padding: 8px 35px 8px 14px - margin-bottom: $baseLineHeight - text-shadow: 0 1px 0 rgba(255,255,255,.5) - background-color: $warningBackground - border: 1px solid $warningBorder - $border-radius(4px) - +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 8px 35px 8px 14px; + margin-bottom: $baseLineHeight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: $warningBackground; + border: 1px solid $warningBorder; + $border-radius($baseBorderRadius); + background-color: $warningBackground; + border: 1px solid $warningBorder; +} .alert, -.alert-heading - color: $warningText - +.alert h4 { + // Specified for the h4 to prevent conflicts of changing @headingsColor + color: $warningText; +} +.alert h4 { + margin: 0; +} // Adjust close link position -.alert .close - position: relative - top: -2px - right: -21px - line-height: 18px +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: $baseLineHeight; +} // Alternate styles -// ---------------- - -.alert-success - background-color: $successBackground - border-color: $successBorder - -.alert-success, -.alert-success .alert-heading - color: $successText - -.alert-danger, -.alert-error - background-color: $errorBackground - border-color: $errorBorder - +// ------------------------- + +.alert-success { + background-color: $successBackground; + border-color: $successBorder; + color: $successText; +} +.alert-success h4 { + color: @successText; +} .alert-danger, -.alert-error, -.alert-danger .alert-heading, -.alert-error .alert-heading - color: $errorText - -.alert-info - background-color: $infoBackground - border-color: $infoBorder - -.alert-info, -.alert-info .alert-heading - color: $infoText - +.alert-error { + background-color: $errorBackground; + border-color: $errorBorder; + color: $errorText; +} +.alert-danger h4, +.alert-error h4 { + color: @errorText; +} +.alert-info { + background-color: $infoBackground; + border-color: $infoBorder; + color: $infoText; +} +.alert-info h4 { + color: @infoText; +} // Block alerts -// ------------------------ -.alert-block - padding-top: 14px - padding-bottom: 14px +// ------------------------- +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} .alert-block > p, -.alert-block > ul - margin-bottom: 0 - -.alert-block p + p - margin-top: 5px - - +.alert-block > ul { + margin-bottom: 0; +} +.alert-block p + p { + margin-top: 5px; +} diff --git a/styl/bootstrap.styl b/styl/bootstrap.styl index 8b914f38..b2777086 100644 --- a/styl/bootstrap.styl +++ b/styl/bootstrap.styl @@ -1,11 +1,11 @@ /*! - * Bootstrap v2.0.1 + * Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * - * Designed and built with all the love in the world $twitter by $mdo and $fat. + * Designed and built with all the love in the world @twitter by @mdo and @fat. */ // CSS Reset @@ -36,7 +36,7 @@ // Components: Buttons & Alerts @import "buttons.styl" @import "button-groups.styl" -@import "alerts.styl" // Note: alerts share common CSS with buttons and thus have styles in buttons.styl +@import "alerts.styl"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less // Components: Nav @import "navs.styl" @@ -52,7 +52,8 @@ // Components: Misc @import "thumbnails.styl" -@import "labels.styl" +@import "media.styl"; +@import "labels-badges.styl" @import "progress-bars.styl" @import "accordion.styl" @import "carousel.styl" diff --git a/styl/breadcrumbs.styl b/styl/breadcrumbs.styl index f8955a42..8b2ecad8 100644 --- a/styl/breadcrumbs.styl +++ b/styl/breadcrumbs.styl @@ -1,23 +1,24 @@ -// BREADCRUMBS -// ----------- - -.breadcrumb - padding: 7px 14px - margin: 0 0 $baseLineHeight - $gradient-vertical($white, #f5f5f5) - border: 1px solid #ddd - $border-radius(3px) - $box-shadow(inset 0 1px 0 $white) - li - display: inline-block - text-shadow: 0 1px 0 $white - - .divider - padding: 0 5px - color: $grayLight - - .active a - color: $grayDark - +// +// Breadcrumbs +// -------------------------------------------------- +.breadcrumb { + padding: 8px 15px; + margin: 0 0 $baseLineHeight; + list-style: none; + background-color: #f5f5f5; + $border-radius($baseBorderRadius); + > li { + display: inline-block; + $ie7-inline-block(); + text-shadow: 0 1px 0 $white; + > .divider { + padding: 0 5px; + color: #ccc; + } + } + > .active { + color: $grayLight; + } +} diff --git a/styl/button-groups.styl b/styl/button-groups.styl index 8e7102eb..b7d4a955 100644 --- a/styl/button-groups.styl +++ b/styl/button-groups.styl @@ -1,88 +1,98 @@ -// BUTTON GROUPS -// ------------- +// +// Button groups +// -------------------------------------------------- // Make the div behave like a button -.btn-group - position: relative - $clearfix() // clears the floated buttons - $ie7-restore-left-whitespace() - +.btn-group { + position: relative; + display: inline-block; + $ie7-inline-block(); + font-size: 0; // remove as part 1 of font-size inline-block hack + vertical-align: middle; // match .btn alignment given font-size hack above + white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) + $ie7-restore-left-whitespace(); +} // Space out series of button groups -.btn-group + .btn-group - margin-left: 5px - +.btn-group + .btn-group { + margin-left: 5px; +} // Optional: Group multiple button groups together for a toolbar -.btn-toolbar - margin-top: ($baseLineHeight/2) - margin-bottom: ($baseLineHeight/2) - .btn-group - display: inline-block - $ie7-inline-block() - - +.btn-toolbar { + font-size: 0; // Hack to remove whitespace that results from using inline-block + margin-top: $baseLineHeight / 2; + margin-bottom: $baseLineHeight / 2; + > .btn + .btn, + > .btn-group + .btn, + > .btn + .btn-group { + margin-left: 5px; + } +} // Float them, remove border radius, then re-add to first and last elements -.btn-group .btn - position: relative - float: left - margin-left: -1px - $border-radius(0) +.btn-group > .btn { + position: relative; + $border-radius(0); +} +.btn-group > .btn + .btn { + margin-left: -1px; +} +.btn-group > .btn, +.btn-group > .dropdown-menu, +.btn-group > .popover { + font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack +} + +// Reset fonts for other sizes +.btn-group > .btn-mini { + font-size: $fontSizeMini; +} +.btn-group > .btn-small { + font-size: $fontSizeSmall; +} +.btn-group > .btn-large { + font-size: $fontSizeLarge; +} // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group .btn:first-child - margin-left: 0 - -webkit-border-top-left-radius: 4px - -moz-border-radius-topleft: 4px - border-top-left-radius: 4px - -webkit-border-bottom-left-radius: 4px - -moz-border-radius-bottomleft: 4px - border-bottom-left-radius: 4px - -.btn-group .btn:last-child, -.btn-group .dropdown-toggle - -webkit-border-top-right-radius: 4px - -moz-border-radius-topright: 4px - border-top-right-radius: 4px - -webkit-border-bottom-right-radius: 4px - -moz-border-radius-bottomright: 4px - border-bottom-right-radius: 4px - +.btn-group > .btn:first-child { + margin-left: 0; + $border-top-left-radius($baseBorderRadius); + $border-bottom-left-radius($baseBorderRadius); +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { + $border-top-right-radius($baseBorderRadius); + $border-bottom-right-radius($baseBorderRadius); +} // Reset corners for large buttons -.btn-group .btn.large:first-child - margin-left: 0 - -webkit-border-top-left-radius: 6px - -moz-border-radius-topleft: 6px - border-top-left-radius: 6px - -webkit-border-bottom-left-radius: 6px - -moz-border-radius-bottomleft: 6px - border-bottom-left-radius: 6px - -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle - -webkit-border-top-right-radius: 6px - -moz-border-radius-topright: 6px - border-top-right-radius: 6px - -webkit-border-bottom-right-radius: 6px - -moz-border-radius-bottomright: 6px - border-bottom-right-radius: 6px - +.btn-group > .btn.large:first-child { + margin-left: 0; + $border-top-left-radius($borderRadiusLarge); + $border-bottom-left-radius($borderRadiusLarge); +} +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { + $border-top-right-radius($borderRadiusLarge); + $border-bottom-right-radius($borderRadiusLarge); +} // On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active - z-index: 2 - +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { + z-index: 2; +} // On active and open, don't show outline .btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle - outline: 0 - +.btn-group.open .dropdown-toggle { + outline: 0; +} @@ -90,59 +100,130 @@ // ---------------------- // Give the line between buttons some depth -.btn-group .dropdown-toggle - padding-left: 8px - padding-right: 8px - $shadow = inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05) - $box-shadow($shadow) - *padding-top: 5px - *padding-bottom: 5px - - -.btn-group.open - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: $zindexDropdown - - // Reposition menu on open and round all corners - .dropdown-menu - display: block - margin-top: 1px - $border-radius(5px) - - - .dropdown-toggle - background-image: none - $shadow = inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05) - $box-shadow($shadow) - +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; + $bg = inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + $box-shadow($bg); + *padding-top: 5px; + *padding-bottom: 5px; +} +.btn-group > .btn-mini + .dropdown-toggle { + padding-left: 5px; + padding-right: 5px; + *padding-top: 2px; + *padding-bottom: 2px; +} +.btn-group > .btn-small + .dropdown-toggle { + *padding-top: 5px; + *padding-bottom: 4px; +} +.btn-group > .btn-large + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; + *padding-top: 7px; + *padding-bottom: 7px; +} + +.btn-group.open { + + // The clickable button for toggling the menu + // Remove the gradient and set the same inset shadow as the :active state + .dropdown-toggle { + background-image: none; + $bg = inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + $box-shadow($bg); + } + + // Keep the hover's background when dropdown is open + .btn.dropdown-toggle { + background-color: $btnBackgroundHighlight; + } + .btn-primary.dropdown-toggle { + background-color: $btnPrimaryBackgroundHighlight; + } + .btn-warning.dropdown-toggle { + background-color: $btnWarningBackgroundHighlight; + } + .btn-danger.dropdown-toggle { + background-color: $btnDangerBackgroundHighlight; + } + .btn-success.dropdown-toggle { + background-color: $btnSuccessBackgroundHighlight; + } + .btn-info.dropdown-toggle { + background-color: $btnInfoBackgroundHighlight; + } + .btn-inverse.dropdown-toggle { + background-color: $btnInverseBackgroundHighlight; + } +} // Reposition the caret -.btn .caret - margin-top: 7px - margin-left: 0 - -.btn:hover .caret, -.open.btn-group .caret - $opacity(100) +.btn .caret { + margin-top: 8px; + margin-left: 0; +} +// Carets in other button sizes +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { + margin-top: 6px; +} +.btn-large .caret { + border-left-width: 5px; + border-right-width: 5px; + border-top-width: 5px; +} +// Upside down carets for .dropup +.dropup .btn-large .caret { + border-bottom-width: 5px; +} // Account for other colors .btn-primary, +.btn-warning, .btn-danger, .btn-info, .btn-success, -.btn-inverse - .caret - border-top-color: $white - $opacity(75) +.btn-inverse { + .caret { + border-top-color: $white; + border-bottom-color: $white; + } +} -// Small button dropdowns -.btn-small .caret - margin-top: 4px - +// Vertical button groups +// ---------------------- +.btn-group-vertical { + display: inline-block; // makes buttons only take up the width they need + $ie7-inline-block(); +} +.btn-group-vertical > .btn { + display: block; + float: none; + max-width: 100%; + $border-radius(0); +} +.btn-group-vertical > .btn + .btn { + margin-left: 0; + margin-top: -1px; +} +.btn-group-vertical > .btn:first-child { + $border-radius($baseBorderRadius $baseBorderRadius 0 0); +} +.btn-group-vertical > .btn:last-child { + $border-radius(0 0 $baseBorderRadius $baseBorderRadius); +} +.btn-group-vertical > .btn-large:first-child { + $border-radius($borderRadiusLarge $borderRadiusLarge 0 0); +} +.btn-group-vertical > .btn-large:last-child { + $border-radius(0 0 $borderRadiusLarge $borderRadiusLarge); +} diff --git a/styl/buttons.styl b/styl/buttons.styl index dd39d103..99747852 100644 --- a/styl/buttons.styl +++ b/styl/buttons.styl @@ -1,70 +1,65 @@ -// BUTTON STYLES -// ------------- +// +// Buttons +// -------------------------------------------------- // Base styles // -------------------------------------------------- // Core -.btn - display: inline-block - padding: 4px 10px 4px - margin-bottom: 0 // For input.btn - font-size: $baseFontSize - line-height: $baseLineHeight - color: $grayDark - text-align: center - text-shadow: 0 1px 1px rgba(255,255,255,.75) - vertical-align: middle - $buttonBackground($white, darken($white, 10%)) - border: 1px solid #ccc - border-bottom-color: #bbb - $border-radius(4px) - $shadow = inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05) - $box-shadow($shadow) - cursor: pointer - - // Give IE7 some love - $reset-filter() - $ie7-restore-left-whitespace() - - -// Hover state -.btn:hover - color: $grayDark - text-decoration: none - background-color: darken($white, 10%) - background-position: 0 -15px - - // transition is only when going to hover, otherwise the background - // behind the gradient (there for IE<=9 fallback) gets mismatched - $transition(background-position .1s linear) - - -// Focus state for keyboard and accessibility -.btn:focus - $tab-focus() - - -// Active state -.btn.active, -.btn:active - background-image: none - $shadow = inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05) - $box-shadow($shadow) - background-color: darken($white, 10%) - background-color: darken($white, 15%) e("\9") - outline: 0 - - -// Disabled state -.btn.disabled, -.btn[disabled] - cursor: default - background-image: none - background-color: darken($white, 10%) - $opacity(65) - $box-shadow(none) +.btn { + display: inline-block; + $ie7-inline-block(); + padding: 4px 12px; + margin-bottom: 0; // For input.btn + font-size: $baseFontSize; + line-height: $baseLineHeight; + text-align: center; + vertical-align: middle; + cursor: pointer; + $buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); + border: 1px solid $btnBorder; + *border: 0; // Remove the border to prevent IE7's black border on input:focus + border-bottom-color: darken($btnBorder, 10%); + $border-radius($baseBorderRadius); + $ie7-restore-left-whitespace(); // Give IE7 some love + $shadow = inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + $box-shadow($shadow); + + // Hover state + &:hover { + color: $grayDark; + text-decoration: none; + background-position: 0 -15px; + + // transition is only when going to hover, otherwise the background + // behind the gradient (there for IE<=9 fallback) gets mismatched + $transition(background-position .1s linear); + } + + // Focus state for keyboard and accessibility + &:focus { + $tab-focus(); + } + + // Active state + &.active, + &:active { + background-image: none; + outline: 0; + $box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); + } + + // Disabled state + &.disabled, + &[disabled] { + cursor: default; + background-image: none; + $opacity(65); + $box-shadow(none); + } + +} @@ -72,113 +67,165 @@ // -------------------------------------------------- // Large -.btn-large - padding: 9px 14px - font-size: $baseFontSize + 2px - line-height: normal - $border-radius(5px) +.btn-large { + padding: $paddingLarge; + font-size: $fontSizeLarge; + $border-radius($borderRadiusLarge); +} +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { + margin-top: 4px; +} -.btn-large [class^="icon-"] - margin-top: 1px +// Small +.btn-small { + padding: $paddingSmall; + font-size: $fontSizeSmall; + $border-radius($borderRadiusSmall); +} +.btn-small [class^="icon-"], +.btn-small [class*=" icon-"] { + margin-top: 0; +} +.btn-mini [class^="icon-"], +.btn-mini [class*=" icon-"] { + margin-top: -1px; +} +// Mini +.btn-mini { + padding: $paddingMini; + font-size: $fontSizeMini; + $border-radius($borderRadiusSmall); +} -// Small -.btn-small - padding: 5px 9px - font-size: $baseFontSize - 2px - line-height: $baseLineHeight - 2px -.btn-small [class^="icon-"] - margin-top: -1px +// Block button +// ------------------------- +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; + $box-sizing(border-box); +} -// Mini -.btn-mini - padding: 2px 6px - font-size: $baseFontSize - 2px - line-height: $baseLineHeight - 4px +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} // Alternate buttons // -------------------------------------------------- -// Set text color -// ------------------------- -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover - text-shadow: 0 -1px 0 rgba(0,0,0,.25) - color: $white - // Provide *some* extra contrast for those who can get it .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, -.btn-dark.active - color: rgba(255,255,255,.75) - +.btn-inverse.active { + color: rgba(255,255,255,.75); +} // Set the backgrounds // ------------------------- -.btn-primary - $buttonBackground($primaryButtonBackground, hsl(hue($primaryButtonBackground) + 20, saturation($primaryButtonBackground), lightness($primaryButtonBackground))) - +.btn { + // reset here as of 2.0.3 due to Recess property order + border-color: #c5c5c5; + border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); +} +.btn-primary { + $buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); +} // Warning appears are orange -.btn-warning - $buttonBackground(lighten($orange, 15%), $orange) - +.btn-warning { + $buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); +} // Danger and error appear as red -.btn-danger - $buttonBackground(#ee5f5b, #bd362f) - +.btn-danger { + $buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); +} // Success appears as green -.btn-success - $buttonBackground(#62c462, #51a351) - +.btn-success { + $buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); +} // Info appears as a neutral blue -.btn-info - $buttonBackground(#5bc0de, #2f96b4) - +.btn-info { + $buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); +} // Inverse appears as dark gray -.btn-inverse - $buttonBackground(#454545, #262626) - +.btn-inverse { + $buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); +} // Cross-browser Jank // -------------------------------------------------- button.btn, -input[type="submit"].btn +input[type="submit"].btn { // Firefox 3.6 only I believe - &::-moz-focus-inner - padding: 0 - border: 0 - + &::-moz-focus-inner { + padding: 0; + border: 0; + } // IE7 has some default padding on button controls - *padding-top: 2px - *padding-bottom: 2px - &.large - *padding-top: 7px - *padding-bottom: 7px - - &.small - *padding-top: 3px - *padding-bottom: 3px - - + *padding-top: 3px; + *padding-bottom: 3px; + + &.btn-large { + *padding-top: 7px; + *padding-bottom: 7px; + } + &.btn-small { + *padding-top: 3px; + *padding-bottom: 3px; + } + &.btn-mini { + *padding-top: 1px; + *padding-bottom: 1px; + } +} + + +// Link buttons +// -------------------------------------------------- +// Make a button look and behave like a link +.btn-link, +.btn-link:active, +.btn-link[disabled] { + background-color: transparent; + background-image: none; + $box-shadow(none); +} +.btn-link { + border-color: transparent; + cursor: pointer; + color: $linkColor; + $border-radius(0); +} +.btn-link:hover { + color: $linkColorHover; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover { + color: $grayDark; + text-decoration: none; +} diff --git a/styl/carousel.styl b/styl/carousel.styl index 2566db55..6d094f17 100644 --- a/styl/carousel.styl +++ b/styl/carousel.styl @@ -1,123 +1,134 @@ -// CAROUSEL -// -------- +// +// Carousel +// -------------------------------------------------- -.carousel - position: relative - margin-bottom: $baseLineHeight - line-height: 1 +.carousel { + position: relative; + margin-bottom: $baseLineHeight; + line-height: 1; +} -.carousel-inner - overflow: hidden - width: 100% - position: relative +.carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} +.carousel-inner { -.carousel - - .item - display: none - position: relative - $transition(.6s ease-in-out left) - + > .item { + display: none; + position: relative; + $transition(.6s ease-in-out left); + } // Account for jankitude on images - .item > img - display: block - line-height: 1 - - - .active, - .next, - .prev - display: block - - .active - left: 0 - - - .next, - .prev - position: absolute - top: 0 - width: 100% - - - .next - left: 100% - - .prev - left: -100% - - .next.left, - .prev.right - left: 0 - - - .active.left - left: -100% - - .active.right - left: 100% - + > .item > img { + display: block; + line-height: 1; + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } +} // Left/right controls for nav // --------------------------- -.carousel-control - position: absolute - top: 40% - left: 15px - width: 40px - height: 40px - margin-top: -20px - font-size: 60px - font-weight: 100 - line-height: 30px - color: $white - text-align: center - background: $grayDarker - border: 3px solid $white - $border-radius(23px) - $opacity(50) +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: $white; + text-align: center; + background: $grayDarker; + border: 3px solid $white; + $border-radius(23px); + $opacity(50); // we can't have this transition here // because webkit cancels the carousel // animation if you trip this while // in the middle of another animation - // _ - // $transition(opacity .2s linear) + // ;_; + // $transition(opacity .2s linear); // Reposition the right one - &.right - left: auto - right: 15px - + &.right { + left: auto; + right: 15px; + } // Hover state - &:hover - color: $white - text-decoration: none - $opacity(90) - + &:hover { + color: $white; + text-decoration: none; + $opacity(90); + } +} // Caption for text below images // ----------------------------- -.carousel-caption - position: absolute - left: 0 - right: 0 - bottom: 0 - padding: 10px 15px 5px - background: $grayDark - background: rgba(0,0,0,.75) - +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 15px; + background: $grayDark; + background: rgba(0,0,0,.75); +} .carousel-caption h4, -.carousel-caption p - color: $white - - +.carousel-caption p { + color: $white; + line-height: $baseLineHeight; +} +.carousel-caption h4 { + margin: 0 0 5px; +} +.carousel-caption p { + margin-bottom: 0; +} diff --git a/styl/close.styl b/styl/close.styl index e3296015..a3d4b353 100644 --- a/styl/close.styl +++ b/styl/close.styl @@ -1,19 +1,30 @@ -// CLOSE ICONS -// ----------- - -.close - float: right - font-size: 20px - font-weight: bold - line-height: $baseLineHeight - color: $black - text-shadow: 0 1px 0 rgba(255,255,255,1) - $opacity(20) - &:hover - color: $black - text-decoration: none - $opacity(40) - cursor: pointer - +// +// Close icons +// -------------------------------------------------- +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: $baseLineHeight; + color: $black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + $opacity(20); + &:hover { + color: $black; + text-decoration: none; + cursor: pointer; + $opacity(40); + } +} +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/styl/code.styl b/styl/code.styl index f43f024f..90b226cf 100644 --- a/styl/code.styl +++ b/styl/code.styl @@ -1,58 +1,61 @@ -// Code.styl -// Code typography styles for the and 
             elements
-// --------------------------------------------------------
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
 
 // Inline and block code styles
 code,
-pre
-  padding: 0 3px 2px
-  $font-family-monospace()
-  font-size: $baseFontSize - 1
-  color: $grayDark
-  $border-radius(3px)
-
+pre {
+  padding: 0 3px 2px;
+  $font-family-monospace();
+  font-size: $baseFontSize - 2;
+  color: $grayDark;
+  $border-radius(3px);
+}
 
 // Inline code
-code
-  padding: 3px 4px
-  color: #d14
-  background-color: #f7f7f9
-  border: 1px solid #e1e1e8
-
+code {
+  padding: 3px 4px;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+  white-space: nowrap;
+}
 
 // Blocks of code
-pre
-  display: block
-  padding: (($baseLineHeight - 1)/2)
-  margin: 0 0 ($baseLineHeight/2)
-  font-size: 12px
-  line-height: $baseLineHeight
-  background-color: #f5f5f5
-  border: 1px solid #ccc // fallback for IE7-8
-  border: 1px solid rgba(0,0,0,.15)
-  $border-radius(4px)
-  white-space: pre
-  white-space: pre-wrap
-  word-break: break-all
-  word-wrap: break-word
+pre {
+  display: block;
+  padding: ($baseLineHeight - 1) / 2;
+  margin: 0 0 ($baseLineHeight / 2);
+  font-size: $baseFontSize - 1; // 14px to 13px
+  line-height: $baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc; // fallback for IE7-8
+  border: 1px solid rgba(0,0,0,.15);
+  $border-radius($baseBorderRadius);
 
   // Make prettyprint styles more spaced out for readability
-  &.prettyprint
-    margin-bottom: $baseLineHeight
-
+  &.prettyprint {
+    margin-bottom: $baseLineHeight;
+  }
 
   // Account for some code outputs that place code tags in pre tags
-  code
-    padding: 0
-    color: inherit
-    background-color: transparent
-    border: 0
-
-
+  code {
+    padding: 0;
+    color: inherit;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border: 0;
+  }
+}
 
 // Enable scrollable blocks of code
-.pre-scrollable
-  max-height: 340px
-  overflow-y: scroll
-
-
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
diff --git a/styl/component-animations.styl b/styl/component-animations.styl
index 6e5ba165..363917df 100644
--- a/styl/component-animations.styl
+++ b/styl/component-animations.styl
@@ -1,20 +1,22 @@
-// COMPONENT ANIMATIONS
-// --------------------
+//
+// Component animations
+// --------------------------------------------------
 
-.fade
-  $transition(opacity .15s linear)
-  opacity: 0
-  &.in
-    opacity: 1
-
-
-
-.collapse
-  $transition(height .35s ease)
-  position:relative
-  overflow:hidden
-  height: 0
-  &.in
-    height: auto
 
+.fade {
+  opacity: 0;
+  $transition(opacity .15s linear);
+  &.in {
+    opacity: 1;
+  }
+}
 
+.collapse {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  $transition(height .35s ease);
+  &.in {
+    height: auto;
+  }
+}
diff --git a/styl/dropdowns.styl b/styl/dropdowns.styl
index c2691b90..ce6c6926 100644
--- a/styl/dropdowns.styl
+++ b/styl/dropdowns.styl
@@ -1,131 +1,234 @@
-// DROPDOWN MENUS
-// --------------
+//
+// Dropdown menus
+// --------------------------------------------------
 
-// Use the .menu class on any 
          •  element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-.dropdown
-  position: relative
 
-.dropdown-toggle
+// Use the .menu class on any 
          •  element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle {
   // The caret makes the toggle a bit too tall in IE7
-  *margin-bottom: -3px
-
+  *margin-bottom: -3px;
+}
 .dropdown-toggle:active,
-.open .dropdown-toggle
-  outline: 0
+.open .dropdown-toggle {
+  outline: 0;
+}
 
 // Dropdown arrow/caret
-.caret
-  display: inline-block
-  width: 0
-  height: 0
-  text-indent: -99999px
-  // IE7 won't do the border trick if there's a text indent, but it doesn't
-  // do the content that text-indent is hiding, either, so we're ok.
-  *text-indent: 0
-  vertical-align: top
-  border-left:  4px solid transparent
-  border-right: 4px solid transparent
-  border-top:   4px solid $black
-  $opacity(30)
-  content: "\2193"
-
-.dropdown .caret
-  margin-top: 8px
-  margin-left: 2px
-
-.dropdown:hover .caret,
-.open.dropdown .caret
-  $opacity(100)
+// --------------------
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: top;
+  border-top:   4px solid $black;
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
+  content: "";
+}
+
+// Place the caret
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
 
 // The dropdown menu (ul)
-.dropdown-menu
-  position: absolute
-  top: 100%
-  left: 0
-  z-index: $zindexDropdown
-  float: left
-  display: none // none by default, but block on "open" of the menu
-  min-width: 160px
-  _width: 160px
-  padding: 4px 0
-  margin: 0 // override default ul
-  list-style: none
-  background-color: $white
-  border-color: #ccc
-  border-color: rgba(0,0,0,.2)
-  border-style: solid
-  border-width: 1px
-  $border-radius(0 0 5px 5px)
-  $box-shadow(0 5px 10px rgba(0,0,0,.2))
-  -webkit-background-clip: padding-box
-     -moz-background-clip: padding
-          background-clip: padding-box
-  *border-right-width: 2px
-  *border-bottom-width: 2px
-
-  // Allow for dropdowns to go bottom up (aka, dropup-menu)
-  &.bottom-up
-    top: auto
-    bottom: 100%
-    margin-bottom: 2px
-
+// ----------------------
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindexDropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 0; // override default ul
+  list-style: none;
+  background-color: $dropdownBackground;
+  border: 1px solid #ccc; // Fallback for IE7-8
+  border: 1px solid $dropdownBorder;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  $border-radius(6px);
+  $box-shadow(0 5px 10px rgba(0,0,0,.2));
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
 
   // Dividers (basically an hr) within the dropdown
-  .divider
-    height: 1px
-    margin: 5px 1px
-    overflow: hidden
-    background-color: #e5e5e5
-    border-bottom: 1px solid $white
-
-    // IE7 needs a set width since we gave a height. Restricting just
-    // to IE7 to keep the 1px left/right space in other browsers.
-    // It is unclear where IE is getting the extra space that we need
-    // to negative-margin away, but so it goes.
-    *width: 100%
-    *margin: -5px 0 5px
-
+  .divider {
+    $nav-divider($dropdownDividerTop, $dropdownDividerBottom);
+  }
 
   // Links within the dropdown menu
-  a
-    display: block
-    padding: 3px 15px
-    clear: both
-    font-weight: normal
-    line-height: $baseLineHeight
-    color: $gray
-    white-space: nowrap
-
-
+  li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: $baseLineHeight;
+    color: $dropdownLinkColor;
+    white-space: nowrap;
+  }
+}
 
 // Hover state
+// -----------
 .dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
+  text-decoration: none;
+  color: $dropdownLinkColorHover;
+  background-color: $dropdownLinkBackgroundHover;
+  $gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
+}
+
+// Active state
+// ------------
 .dropdown-menu .active > a,
-.dropdown-menu .active > a:hover
-  color: $white
-  text-decoration: none
-  background-color: $linkColor
-
+.dropdown-menu .active > a:hover {
+  color: $dropdownLinkColorHover;
+  text-decoration: none;
+  outline: 0;
+  $gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
+}
+
+// Disabled state
+// --------------
+// Gray out text and ensure the hover state remains gray
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+  color: $grayLight;
+}
+// Nuke hover effects
+.dropdown-menu .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none; // Remove CSS gradient
+  $reset-filter();
+  cursor: default;
+}
 
 // Open state for the dropdown
-.dropdown.open
+// ---------------------------
+.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
   // make the menu appear below buttons that appeared later on the page
-  *z-index: $zindexDropdown
-
-  .dropdown-toggle
-    color: $white
-    background: #ccc
-    background: rgba(0,0,0,.3)
-
-  .dropdown-menu
-    display: block
-
-
+  *z-index: $zindexDropdown;
+
+  & > .dropdown-menu {
+    display: block;
+  }
+}
+:
+// Right aligned dropdowns
+// ---------------------------
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: 4px solid $black;
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  $border-radius(0 6px 6px 6px);
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  $border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: darken($dropdownBackground, 20%);
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: $dropdownLinkColorHover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    $border-radius(6px 0 6px 6px);
+  }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
 
 // Typeahead
-.typeahead
-  margin-top: 2px // give it some space to breathe
-  $border-radius(4px)
-
-
+// ---------
+.typeahead {
+  z-index: 1051;
+  margin-top: 2px; // give it some space to breathe
+  $border-radius($baseBorderRadius);
+}
diff --git a/styl/forms.styl b/styl/forms.styl
index f2645584..e3ad183f 100644
--- a/styl/forms.styl
+++ b/styl/forms.styl
@@ -1,168 +1,219 @@
-// Forms.styl
-// Base styles for various input types, form layouts, and states
-// -------------------------------------------------------------
+//
+// Forms
+// --------------------------------------------------
 
 
 // GENERAL STYLES
 // --------------
 
 // Make all forms have space below them
-form
-  margin: 0 0 $baseLineHeight
-
-
-fieldset
-  padding: 0
-  margin: 0
-  border: 0
+form {
+  margin: 0 0 $baseLineHeight;
+}
 
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
 
 // Groups of fields with labels on top (legends)
-legend
-  display: block
-  width: 100%
-  padding: 0
-  margin-bottom: $baseLineHeight * 1.5
-  font-size: $baseFontSize * 1.5
-  line-height: $baseLineHeight * 2
-  color: $grayDark
-  border: 0
-  border-bottom: 1px solid #eee
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  line-height: $baseLineHeight * 2;
+  color: $grayDark;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
 
   // Small
-  small
-    font-size: $baseLineHeight * .75
-    color: $grayLight
-
-
+  small {
+    font-size: $baseLineHeight * .75;
+    color: $grayLight;
+  }
+}
 
 // Set font for forms
 label,
 input,
 button,
 select,
-textarea
-  $font-shorthand($baseFontSize,normal,$baseLineHeight) // Set size, weight, line-height here
-
+textarea {
+  $font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
+}
 input,
 button,
 select,
-textarea
-  $font-family-sans-serif() // And only set font-family here for those that need it (note the missing label element)
-
+textarea {
+  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+}
 
 // Identify controls by their labels
-label
-  display: block
-  margin-bottom: 5px
-  color: $grayDark
+label {
+  display: block;
+  margin-bottom: 5px;
+}
 
+// Form controls
+// -------------------------
 
-// Inputs, Textareas, Selects
+// Shared size and type resets
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  display: inline-block;
+  height: $baseLineHeight;
+  padding: 4px 6px;
+  margin-bottom: $baseLineHeight / 2;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $gray;
+  $border-radius($inputBorderRadius);
+  vertical-align: middle;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
 input,
 textarea,
-select,
-.uneditable-input
-  display: inline-block
-  width: 210px
-  height: $baseLineHeight
-  padding: 4px
-  margin-bottom: 9px
-  font-size: $baseFontSize
-  line-height: $baseLineHeight
-  color: $gray
-  border: 1px solid #ccc
-  $border-radius(3px)
-
-.uneditable-textarea
-  width: auto
-  height: auto
-
-
-// Inputs within a label
-label input,
-label textarea,
-label select
-  display: block
-
-
-// Mini reset for unique input types
+.uneditable-input {
+  width: 206px; // plus 12px padding and 2px border
+}
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  background-color: $inputBackground;
+  border: 1px solid $inputBorder;
+  $box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  $transition(border linear .2s, box-shadow linear .2s);
+
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+    $box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
+  }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  *margin-top: 0; /* IE7 */
+  margin-top: 1px \9; /* IE8-9 */
+  line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
 input[type="image"],
-input[type="checkbox"],
-input[type="radio"]
-  width: auto
-  height: auto
-  padding: 0
-  margin: 3px 0
-  *margin-top: 0 /* IE7 */
-  line-height: normal
-  cursor: pointer
-  $border-radius(0)
-  border: 0 \9 /* IE9 and down */
-
-input[type="image"]
-  border: 0
-
-
-// Reset the file input to browser defaults
-input[type="file"]
-  width: auto
-  padding: initial
-  line-height: initial
-  border: initial
-  background-color: $white
-  background-color: initial
-  $box-shadow(none)
-
-
-// Help out input buttons
-input[type="button"],
+input[type="submit"],
 input[type="reset"],
-input[type="submit"]
-  width: auto
-  height: auto
-
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
+}
 
 // Set the height of select and file controls to match text inputs
 select,
-input[type="file"]
-  height: 28px /* In IE7, the height of the select element cannot be changed by height, only font-size */
-  *margin-top: 4px /* For IE7, add top margin to align select with labels */
-  line-height: 28px
-
-
-// Reset line-height for IE
-input[type="file"]
-  line-height: 18px \9
-
-
-// Chrome on Linux and Mobile Safari need background-color
-select
-  width: 220px // default input width + 10px of padding that doesn't get applied
-  background-color: $white
-
+input[type="file"] {
+  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+  line-height: $inputHeight;
+}
+
+// Make select elements obey height by applying a border
+select {
+  width: 220px; // default input width + 10px of padding that doesn't get applied
+  border: 1px solid $inputBorder;
+  background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+}
 
 // Make multiple select elements height not fixed
 select[multiple],
-select[size]
-  height: auto
+select[size] {
+  height: auto;
+}
 
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  $tab-focus();
+}
 
-// Remove shadow from image inputs
-input[type="image"]
-  $box-shadow(none)
 
+// Uneditable inputs
+// -------------------------
 
-// Make textarea height behave
-textarea
-  height: auto
+// Make uneditable inputs look inactive
+.uneditable-input,
+.uneditable-textarea {
+  color: $grayLight;
+  background-color: darken($inputBackground, 1%);
+  border-color: $inputBorder;
+  $box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
+}
 
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap;
+}
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
+  width: auto;
+  height: auto;
+}
 
-// Hidden inputs
-input[type="hidden"]
-  display: none
 
+// Placeholder
+// -------------------------
 
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+  $placeholder();
+}
 
 
 // CHECKBOXES & RADIOS
@@ -170,60 +221,35 @@ input[type="hidden"]
 
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
-.checkbox
-  padding-left: 18px
-
+.checkbox {
+  min-height: $baseLineHeight; // clear the floating input if there is no label text
+  padding-left: 20px;
+}
 .radio input[type="radio"],
-.checkbox input[type="checkbox"]
-  float: left
-  margin-left: -18px
-
+.checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: -20px;
+}
 
 // Move the options list down to align with labels
 .controls > .radio:first-child,
-.controls > .checkbox:first-child
-  padding-top: 5px // has to be padding because margin collaspes
-
+.controls > .checkbox:first-child {
+  padding-top: 5px; // has to be padding because margin collaspes
+}
 
 // Radios and checkboxes on same line
 // TODO v3: Convert .inline to .control-inline
 .radio.inline,
-.checkbox.inline
-  display: inline-block
-  padding-top: 5px
-  margin-bottom: 0
-  vertical-align: middle
-
+.checkbox.inline {
+  display: inline-block;
+  padding-top: 5px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 .radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline
-  margin-left: 10px // space out consecutive inline controls
-
-
-
-
-// FOCUS STATE
-// -----------
-
-input,
-textarea
-  $box-shadow(inset 0 1px 1px rgba(0,0,0,.075))
-  $transition2(border linear .2s, box-shadow linear .2s)
-
-input:focus,
-textarea:focus
-  border-color: rgba(82,168,236,.8)
-  $shadow = inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)
-  $box-shadow($shadow)
-  outline: 0
-  outline: thin dotted \9 /* IE6-9 */
-
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus
-  $box-shadow(none) // override for file inputs
-  $tab-focus()
-
+.checkbox.inline + .checkbox.inline {
+  margin-left: 10px; // space out consecutive inline controls
+}
 
 
 
@@ -231,34 +257,64 @@ select:focus
 // -----------
 
 // General classes for quick sizes
-.input-mini
-  width: 60px
-.input-small
-  width: 90px
-.input-medium
-  width: 150px
-.input-large
-  width: 210px
-.input-xlarge
-  width: 270px
-.input-xxlarge
-  width: 530px
+.input-mini       { width: 60px; }
+.input-small      { width: 90px; }
+.input-medium     { width: 150px; }
+.input-large      { width: 210px; }
+.input-xlarge     { width: 270px; }
+.input-xxlarge    { width: 530px; }
 
 // Grid style input sizes
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input
-  float: none
-  margin-left: 0
-
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
+  float: none;
+  margin-left: 0;
+}
+// Ensure input-prepend/append never wraps
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
+.row-fluid .input-prepend [class*="span"],
+.row-fluid .input-append [class*="span"] {
+  display: inline-block;
+}
 
 
 
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-$inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+// Grid sizes
+//#grid > .input($gridColumnWidth, $gridGutterWidth); // /@todo Not converted yet
+
+// Control row for multiple inputs per line
+.controls-row {
+  $clearfix(); // Clear the float from controls
+}
+
+// Float to collapse white-space for proper grid alignment
+.controls-row [class*="span"],
+// Redeclare the fluid grid collapse since we undo the float for inputs
+.row-fluid .controls-row [class*="span"] {
+  float: left;
+}
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
+}
 
 
 
@@ -272,11 +328,17 @@ select[disabled],
 textarea[disabled],
 input[readonly],
 select[readonly],
-textarea[readonly]
-  background-color: #f5f5f5
-  border-color: #ddd
-  cursor: not-allowed
-
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: $inputDisabledBackground;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
 
 
 
@@ -285,75 +347,70 @@ textarea[readonly]
 // --------------------------
 
 // Warning
-.control-group.warning
-  $formFieldState($warningText, $warningText, $warningBackground)
-
+.control-group.warning {
+  $formFieldState($warningText, $warningText, $warningBackground);
+}
 // Error
-.control-group.error
-  $formFieldState($errorText, $errorText, $errorBackground)
-
+.control-group.error {
+  $formFieldState($errorText, $errorText, $errorBackground);
+}
 // Success
-.control-group.success
-  $formFieldState($successText, $successText, $successBackground)
-
+.control-group.success {
+  $formFieldState($successText, $successText, $successBackground);
+}
+// Success
+.control-group.info {
+  $formFieldState($infoText, $infoText, $infoBackground);
+}
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid
-  color: #b94a48
-  border-color: #ee5f5b
-  &:focus
-    border-color: darken(#ee5f5b, 10%)
-    $box-shadow(0 0 6px lighten(#ee5f5b, 20%))
-
-
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    $box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+  }
+}
 
 
 
 // FORM ACTIONS
 // ------------
 
-.form-actions
-  padding: ($baseLineHeight - 1) 20px $baseLineHeight
-  margin-top: $baseLineHeight
-  margin-bottom: $baseLineHeight
-  background-color: #f5f5f5
-  border-top: 1px solid #ddd
-
-
-// For text that needs to appear as an input but should not be an input
-.uneditable-input
-  display: block
-  background-color: $white
-  border-color: #eee
-  $box-shadow(inset 0 1px 2px rgba(0,0,0,.025))
-  cursor: not-allowed
-
-
-// Placeholder text gets special styles can't be bundled together though for some reason
-$placeholder($grayLight)
+.form-actions {
+  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
+  margin-top: $baseLineHeight;
+  margin-bottom: $baseLineHeight;
+  background-color: $formActionsBackground;
+  border-top: 1px solid #e5e5e5;
+  $clearfix(); // Adding clearfix to allow for .pull-right button containers
+}
 
 
 
 // HELP TEXT
 // ---------
 
-.help-block
-  display: block // account for any element using help-block
-  margin-top: 5px
-  margin-bottom: 0
-  color: $grayLight
+.help-block,
+.help-inline {
+  color: lighten($textColor, 15%); // lighten the text some for contrast
+}
 
+.help-block {
+  display: block; // account for any element using help-block
+  margin-bottom: $baseLineHeight / 2;
+}
 
-.help-inline
-  display: inline-block
-  $ie7-inline-block()
-  margin-bottom: 9px
-  vertical-align: middle
-  padding-left: 5px
-
+.help-inline {
+  display: inline-block;
+  $ie7-inline-block();
+  vertical-align: middle;
+  padding-left: 5px;
+}
 
 
 
@@ -361,72 +418,116 @@ $placeholder($grayLight)
 // ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
-.input-append
-  margin-bottom: 5px
-  $clearfix() // Clear the float to prevent wrapping
-  input,
-  .uneditable-input
-    $border-radius(0 3px 3px 0)
-    &:focus
-      position: relative
-      z-index: 2
-
-
-  .uneditable-input
-    border-left-color: #ccc
-
-  .add-on
-    float: left
-    display: block
-    width: auto
-    min-width: 16px
-    height: $baseLineHeight
-    margin-right: -1px
-    padding: 4px 5px
-    font-weight: normal
-    line-height: $baseLineHeight
-    color: $grayLight
-    text-align: center
-    text-shadow: 0 1px 0 $white
-    background-color: #f5f5f5
-    border: 1px solid #ccc
-    $border-radius(3px 0 0 3px)
-
-  .active
-    background-color: lighten($green, 30)
-    border-color: $green
-
-
-.input-prepend
-  .add-on
-    *margin-top: 1px /* IE6-7 */
-
-
-.input-append
-  input,
-  .uneditable-input
-    float: left
-    $border-radius(3px 0 0 3px)
-
-  .uneditable-input
-    border-left-color: #eee
-    border-right-color: #ccc
-
-  .add-on
-    margin-right: 0
-    margin-left: -1px
-    $border-radius(0 3px 3px 0)
-
-  input:first-child
-    // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
-    // inherit the sum of its ancestors' margins.
-    *margin-left: -160px
-
-    &+.add-on
-      *margin-left: -21px
+.input-append,
+.input-prepend {
+  margin-bottom: 5px;
+  font-size: 0; // white space collapse hack
+  white-space: nowrap; // Prevent span and input from separating
 
+  // Reset the white space collapse hack
+  input,
+  select,
+  .uneditable-input,
+  .dropdown-menu {
+    font-size: $baseFontSize;
+  }
 
+  input,
+  select,
+  .uneditable-input {
+    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
+    *margin-left: 0;
+    vertical-align: top;
+    $border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    // Make input on top when focused so blue border and shadow always show
+    &:focus {
+      z-index: 2;
+    }
+  }
+  .add-on {
+    display: inline-block;
+    width: auto;
+    height: $baseLineHeight;
+    min-width: 16px;
+    padding: 4px 5px;
+    font-size: $baseFontSize;
+    font-weight: normal;
+    line-height: $baseLineHeight;
+    text-align: center;
+    text-shadow: 0 1px 0 $white;
+    background-color: $grayLighter;
+    border: 1px solid #ccc;
+  }
+  .add-on,
+  .btn,
+  .btn-group > .dropdown-toggle {
+    vertical-align: top;
+    $border-radius(0);
+  }
+  .active {
+    background-color: lighten($green, 30);
+    border-color: $green;
+  }
+}
+
+.input-prepend {
+  .add-on,
+  .btn {
+    margin-right: -1px;
+  }
+  .add-on:first-child,
+  .btn:first-child {
+    // FYI, `.btn:first-child` accounts for a button group that's prepended
+    $border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+  }
+}
+
+.input-append {
+  input,
+  select,
+  .uneditable-input {
+    $border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+    + .btn-group .btn:last-child {
+      $border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
+  }
+  .add-on,
+  .btn,
+  .btn-group {
+    margin-left: -1px;
+  }
+  .add-on:last-child,
+  .btn:last-child,
+  .btn-group:last-child > .dropdown-toggle {
+    $border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+  }
+}
+
+// Remove all border-radius for inputs with both prepend and append
+.input-prepend.input-append {
+  input,
+  select,
+  .uneditable-input {
+    $border-radius(0);
+    + .btn-group .btn {
+      $border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
+  }
+  .add-on:first-child,
+  .btn:first-child {
+    margin-right: -1px;
+    $border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+  }
+  .add-on:last-child,
+  .btn:last-child {
+    margin-left: -1px;
+    $border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+  }
+  .btn-group:first-child {
+    margin-left: 0;
+  }
+}
 
 
 
@@ -434,11 +535,32 @@ $placeholder($grayLight)
 // SEARCH FORM
 // -----------
 
-.search-query
-  padding-left: 14px
-  padding-right: 14px
-  margin-bottom: 0 // remove the default margin on all inputs
-  $border-radius(14px)
+input.search-query {
+  padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
+  margin-bottom: 0; // Remove the default margin on all inputs
+  $border-radius(15px);
+}
+
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  $border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+  $border-radius(14px 0 0 14px);
+}
+.form-search .input-append .btn {
+  $border-radius(0 14px 14px 0);
+}
+.form-search .input-prepend .search-query {
+  $border-radius(0 14px 14px 0);
+}
+.form-search .input-prepend .btn {
+  $border-radius(14px 0 0 14px);
+}
 
 
 
@@ -451,78 +573,113 @@ $placeholder($grayLight)
 
 .form-search,
 .form-inline,
-.form-horizontal
+.form-horizontal {
   input,
   textarea,
   select,
   .help-inline,
-  .uneditable-input
-    display: inline-block
-    margin-bottom: 0
-
+  .uneditable-input,
+  .input-prepend,
+  .input-append {
+    display: inline-block;
+    $ie7-inline-block();
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
   // Re-hide hidden elements due to specifity
-  .hide
-    display: none
-
-
+  .hide {
+    display: none;
+  }
+}
 .form-search label,
 .form-inline label,
+.form-search .btn-group,
+.form-inline .btn-group {
+  display: inline-block;
+}
+// Remove margin for input-prepend/-append
 .form-search .input-append,
 .form-inline .input-append,
 .form-search .input-prepend,
-.form-inline .input-prepend
-  display: inline-block
-
-// Make the prepend and append add-on vertical-align: middle
-.form-search .input-append .add-on,
-.form-inline .input-prepend .add-on,
-.form-search .input-append .add-on,
-.form-inline .input-prepend .add-on
-  vertical-align: middle
-
-// Inline checkbox/radio labels
+.form-inline .input-prepend {
+  margin-bottom: 0;
+}
+// Inline checkbox/radio labels (remove padding on left)
 .form-search .radio,
-.form-inline .radio,
 .form-search .checkbox,
-.form-inline .checkbox
-  margin-bottom: 0
-  vertical-align: middle
+.form-inline .radio,
+.form-inline .checkbox {
+  padding-left: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+// Remove float and margin, set to inline-block
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  float: left;
+  margin-right: 3px;
+  margin-left: 0;
+}
 
 
 // Margin to space out fieldsets
-.control-group
-  margin-bottom: ($baseLineHeight/2)
-
+.control-group {
+  margin-bottom: ($baseLineHeight / 2);
+}
 
 // Legend collapses margin, so next element is responsible for spacing
-legend + .control-group
-  margin-top: $baseLineHeight
-  -webkit-margin-top-collapse: separate
-
+legend + .control-group {
+  margin-top: $baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
 
 // Horizontal-specific styles
 // --------------------------
 
-.form-horizontal
+.form-horizontal {
   // Increase spacing between groups
-  .control-group
-    margin-bottom: $baseLineHeight
-    $clearfix()
-
+  .control-group {
+    margin-bottom: $baseLineHeight;
+    $clearfix();
+  }
   // Float the labels left
-  .control-label
-    float: left
-    width: 140px
-    padding-top: 5px
-    text-align: right
-
+  .control-label {
+    float: left;
+    width: $horizontalComponentOffset - 20;
+    padding-top: 5px;
+    text-align: right;
+  }
   // Move over all input controls and content
-  .controls
-    margin-left: 160px
-
+  .controls {
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+    // don't inherit the margin of the parent, in this case .controls
+    *display: inline-block;
+    *padding-left: 20px;
+    margin-left: $horizontalComponentOffset;
+    *margin-left: 0;
+    &:first-child {
+      *padding-left: $horizontalComponentOffset;
+    }
+  }
+  // Remove bottom margin on block level help text since that's accounted for on .control-group
+  .help-block {
+    margin-bottom: 0;
+  }
+  // And apply it only to .help-block instances that follow a form control
+  input,
+  select,
+  textarea,
+  .uneditable-input,
+  .input-prepend,
+  .input-append {
+    + .help-block {
+      margin-top: $baseLineHeight / 2;
+    }
+  }
   // Move over buttons in .form-actions to align with .controls
-  .form-actions
-    padding-left: 160px
-
-
-
+  .form-actions {
+    padding-left: $horizontalComponentOffset;
+  }
+}
diff --git a/styl/grid.styl b/styl/grid.styl
index ef35ef29..02301bf8 100644
--- a/styl/grid.styl
+++ b/styl/grid.styl
@@ -1,9 +1,21 @@
-// GRID SYSTEM
-// -----------
+//
+// Grid system
+// --------------------------------------------------
+
 
 // Fixed (940px)
-$gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+$gridSystem-generate($gridColumnWidth, $gridGutterWidth);
 
 // Fluid (940px)
-$fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth)
+$fluidGridSystem-generate($fluidGridColumnWidth, $fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
 
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
diff --git a/styl/hero-unit.styl b/styl/hero-unit.styl
index 4d79fcf2..c7b66f62 100644
--- a/styl/hero-unit.styl
+++ b/styl/hero-unit.styl
@@ -1,21 +1,25 @@
-// HERO UNIT
-// ---------
-
-.hero-unit
-  padding: 60px
-  margin-bottom: 30px
-  background-color: #f5f5f5
-  $border-radius(6px)
-  h1
-    margin-bottom: 0
-    font-size: 60px
-    line-height: 1
-    letter-spacing: -1px
-
-  p
-    font-size: 18px
-    font-weight: 200
-    line-height: $baseLineHeight * 1.5
-
+//
+// Hero unit
+// --------------------------------------------------
 
 
+.hero-unit {
+  padding: 60px;
+  margin-bottom: 30px;
+  font-size: 18px;
+  font-weight: 200;
+  line-height: $baseLineHeight * 1.5;
+  color: $heroUnitLeadColor;
+  background-color: $heroUnitBackground;
+  $border-radius(6px);
+  h1 {
+    margin-bottom: 0;
+    font-size: 60px;
+    line-height: 1;
+    color: $heroUnitHeadingColor;
+    letter-spacing: -1px;
+  }
+  li {
+    line-height: $baseLineHeight * 1.5; // Reset since we specify in type.less
+  }
+}
diff --git a/styl/labels-badges.styl b/styl/labels-badges.styl
new file mode 100644
index 00000000..b515b404
--- /dev/null
+++ b/styl/labels-badges.styl
@@ -0,0 +1,82 @@
+//
+// Labels and badges
+// --------------------------------------------------
+
+
+// Base classes
+.label,
+.badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: $baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: $white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: $grayLight;
+}
+// Set unique padding and border-radii
+.label {
+  $border-radius(3px);
+}
+.badge {
+  padding-left: 9px;
+  padding-right: 9px;
+  $border-radius(9px);
+}
+
+// Empty labels/badges collapse
+.label,
+.badge {
+  &:empty {
+    display: none;
+  }
+}
+
+// Hover state, but only for links
+a {
+  &.label:hover,
+  &.badge:hover {
+    color: $white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  &-important         { background-color: $errorText; }
+  &-important[href]   { background-color: darken($errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: $orange; }
+  &-warning[href]     { background-color: darken($orange, 10%); }
+  // Success (green)
+  &-success           { background-color: $successText; }
+  &-success[href]     { background-color: darken($successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: $infoText; }
+  &-info[href]        { background-color: darken($infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: $grayDark; }
+  &-inverse[href]     { background-color: darken($grayDark, 10%); }
+}
+
+// Quick fix for labels/badges in buttons
+.btn {
+  .label,
+  .badge {
+    position: relative;
+    top: -1px;
+  }
+}
+.btn-mini {
+  .label,
+  .badge {
+    top: 0;
+  }
+}
diff --git a/styl/labels.styl b/styl/labels.styl
deleted file mode 100644
index 543d097d..00000000
--- a/styl/labels.styl
+++ /dev/null
@@ -1,40 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label
-  padding: 2px 4px 3px
-  font-size: $baseFontSize * .85
-  font-weight: bold
-  color: $white
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
-  background-color: $grayLight
-  $border-radius(3px)
-
-
-// Hover state
-.label:hover
-  color: $white
-  text-decoration: none
-
-
-// Colors
-.label-important
-  background-color: $errorText
-.label-important:hover
-  background-color: darken($errorText, 10%)
-
-.label-warning
-  background-color: $orange
-.label-warning:hover
-  background-color: darken($orange, 10%)
-
-.label-success
-  background-color: $successText
-.label-success:hover
-  background-color: darken($successText, 10%)
-
-.label-info
-  background-color: $infoText
-.label-info:hover
-  background-color: darken($infoText, 10%)
diff --git a/styl/layouts.styl b/styl/layouts.styl
index 935fdac9..69f68324 100644
--- a/styl/layouts.styl
+++ b/styl/layouts.styl
@@ -1,18 +1,16 @@
 //
 // Layouts
-// Fixed-width and fluid (with sidebar) layouts
-// --------------------------------------------
+// --------------------------------------------------
 
 
 // Container (centered, fixed-width layouts)
-.container
-  $container-fixed()
-
+.container {
+  $container-fixed();
+}
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid
-  padding-left: $gridGutterWidth
-  padding-right: $gridGutterWidth
-  $clearfix()
-
-
+.container-fluid {
+  padding-right: $gridGutterWidth;
+  padding-left: $gridGutterWidth;
+  $clearfix();
+}
diff --git a/styl/media.styl b/styl/media.styl
new file mode 100644
index 00000000..1decab71
--- /dev/null
+++ b/styl/media.styl
@@ -0,0 +1,55 @@
+// Media objects
+// Source: http://stubbornella.org/content/?p=497
+// --------------------------------------------------
+
+
+// Common styles
+// -------------------------
+
+// Clear the floats
+.media,
+.media-body {
+  overflow: hidden;
+  *overflow: visible;
+  zoom: 1;
+}
+
+// Proper spacing between instances of .media
+.media,
+.media .media {
+  margin-top: 15px;
+}
+.media:first-child {
+  margin-top: 0;
+}
+
+// For images and videos, set to block
+.media-object {
+  display: block;
+}
+
+// Reset margins on headings for tighter default spacing
+.media-heading {
+  margin: 0 0 5px;
+}
+
+
+// Media image alignment
+// -------------------------
+
+.media .pull-left {
+  margin-right: 10px;
+}
+.media .pull-right {
+  margin-left: 10px;
+}
+
+
+// Media list variation
+// -------------------------
+
+// Undo default ul/ol styles
+.media-list {
+  margin-left: 0;
+  list-style: none;
+}
diff --git a/styl/mixins.styl b/styl/mixins.styl
index 86030fb9..d0c77ac6 100644
--- a/styl/mixins.styl
+++ b/styl/mixins.styl
@@ -1,6 +1,6 @@
-// Mixins.styl
-// Snippets of reusable CSS to develop faster and keep code readable
-// -----------------------------------------------------------------
+//
+// Mixins
+// --------------------------------------------------
 
 
 // UTILITY MIXINS
@@ -9,42 +9,45 @@
 // Clearfix
 // --------
 // For clearing floats like a boss h5bp.com/q
-$clearfix()
-  *zoom: 1
+$clearfix() {
+  *zoom: 1;
   &:before,
-  &:after
-    display: table
-    content: ""
-
-  &:after
-    clear: both
-
-
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
 
 // Webkit-style focus
 // ------------------
-$tab-focus()
+$tab-focus() {
   // Default
-  outline: thin dotted #333
+  outline: thin dotted #333;
   // Webkit
-  outline: 5px auto -webkit-focus-ring-color
-  outline-offset: -2px
-
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
 
 // Center-align a block level element
 // ----------------------------------
-$center-block()
-  display: block
-  margin-left: auto
-  margin-right: auto
-
+$center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 // IE7 inline-block
 // ----------------
-$ie7-inline-block()
-  *display: inline /* IE7 inline-block hack */
-  *zoom: 1
-
+$ie7-inline-block() {
+  *display: inline; /* IE7 inline-block hack */
+  *zoom: 1;
+}
 
 // IE7 likes to collapse whitespace on either side of the inline-block elements.
 // Ems because we're attempting to match the width of a space character. Left
@@ -52,311 +55,145 @@ $ie7-inline-block()
 // right version is for icons, which come before. Applying both is ok, but it will
 // mean that space between those elements will be .6em (~2 space characters) in IE7,
 // instead of the 1 space in other browsers.
-$ie7-restore-left-whitespace()
-  *margin-left: .3em
-
-  &:first-child
-    *margin-left: 0
-
-
-
-$ie7-restore-right-whitespace()
-  *margin-right: .3em
-
-  &:last-child
-    *margin-left: 0
+$ie7-restore-left-whitespace() {
+  *margin-left: .3em;
 
+  &:first-child {
+    *margin-left: 0;
+  }
+}
 
+$ie7-restore-right-whitespace() {
+  *margin-right: .3em;
+}
 
 // Sizing shortcuts
 // -------------------------
-$size($height = 5px, $width = 5px)
-  width: $width
-  height: $height
-
-$square($size = 5px)
-  $size($size, $size)
+$size($height, $width) {
+  width: $width;
+  height: $height;
+}
 
+$square($size) {
+  $size($size, $size);
+}
 
 // Placeholder text
 // -------------------------
-$placeholder($color = $placeholderText)
-  :-moz-placeholder
-    color: $color
-
-  ::-webkit-input-placeholder
-    color: $color
-
-
+$placeholder($color = $placeholderText) {
+  &:-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+}
 
 // Text overflow
 // -------------------------
 // Requires inline-block or block for proper styling
-$text-overflow()
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-
+$text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
+// CSS image replacement
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+$hide-text() {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
 
 
 // FONTS
 // --------------------------------------------------
 
-$font-family-serif()
-  font-family: Georgia, "Times New Roman", Times, serif
-
-$font-family-sans-serif()
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-
-$font-family-monospace()
-  font-family: Menlo, Monaco, "Courier New", monospace
-
-
-$font-shorthand($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight)
-  font-size: $size
-  font-weight: $weight
-  line-height: $lineHeight
-
-$font-serif($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight)
-  $font-family-serif()
-  $font-shorthand($size, $weight, $lineHeight)
-
-$font-sans-serif($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight)
-  $font-family-sans-serif()
-  $font-shorthand($size, $weight, $lineHeight)
-
-$font-monospace($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight)
-  $font-family-monospace()
-  $font-shorthand($size, $weight, $lineHeight)
-
-
-
-
-
-// GRID SYSTEM
+$font-family-serif() {
+  font-family: $serifFontFamily;
+}
+
+$font-family-sans-serif() {
+  font-family: $sansFontFamily;
+}
+$font-family-monospace() {
+  font-family: $monoFontFamily;
+}
+
+$font-shorthand($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+$font-serif($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight) {
+  $font-family-serif();
+  $font-shorthand($size, $weight, $lineHeight);
+}
+$font-sans-serif($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight) {
+  $font-family-sans-serif();
+  $font-shorthand($size, $weight, $lineHeight);
+}
+
+$font-monospace($size = $baseFontSize, $weight = normal, $lineHeight = $baseLineHeight) {
+  $font-family-monospace();
+  $font-shorthand($size, $weight, $lineHeight);
+}
+
+
+// FORMS
 // --------------------------------------------------
 
-// Site container
-// -------------------------
-$container-fixed()
-  width: $gridRowWidth
-  margin-left: auto
-  margin-right: auto
-  $clearfix()
-
-
-// Le grid system
-// -------------------------
-// Setup the mixins to be used
-$gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1))
-
-$gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns)
-  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2)
-
-$gridSystem-gridColumn($gridGutterWidth)
-  float: left
-  margin-left: $gridGutterWidth
-
-// Take these values and mixins, and make 'em do their thang
-$gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
-  // Row surrounds the columns
-  .row
-    margin-left: $gridGutterWidth * -1
-    $clearfix()
-
-  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
-  [class*="span"]
-    $gridSystem-gridColumn($gridGutterWidth)
-
-  // Default columns
-  .span1
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
-  .span2
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
-  .span3
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
-  .span4
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
-  .span5
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
-  .span6
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
-  .span7
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
-  .span8
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
-  .span9
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
-  .span10
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
-  .span11
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
-  .span12,
-  .container
-    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
-  // Offset column options
-  .offset1
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1)
-  .offset2
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2)
-  .offset3
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3)
-  .offset4
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4)
-  .offset5
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5)
-  .offset6
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6)
-  .offset7
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7)
-  .offset8
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8)
-  .offset9
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9)
-  .offset10
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10)
-  .offset11
-    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11)
-
-
-
-// Fluid grid system
-// -------------------------
-// Setup the mixins to be used
-$fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns)
-  width: 1% * ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1))
-
-$fluidGridSystem-gridColumn($fluidGridGutterWidth)
-  float: left
-  margin-left: $fluidGridGutterWidth
-
-// Take these values and mixins, and make 'em do their thang
-$fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth)
-  // Row surrounds the columns
-  .row-fluid
-    width: 100%
-    $clearfix()
-
-    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
-    > [class*="span"]
-      $fluidGridSystem-gridColumn($fluidGridGutterWidth)
-
-    > [class*="span"]:first-child
-      margin-left: 0
-
-    // Default columns
-    > .span1
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1)
-    > .span2
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2)
-    > .span3
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3)
-    > .span4
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4)
-    > .span5
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5)
-    > .span6
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6)
-    > .span7
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7)
-    > .span8
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8)
-    > .span9
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9)
-    > .span10
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10)
-    > .span11
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11)
-    > .span12
-      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12)
-
-
-
-
-// Input grid system
-// -------------------------
-$inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
-  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10
-
-$inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
-  input,
-  textarea,
-  .uneditable-input
-    &.span1
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
-    &.span2
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
-    &.span3
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
-    &.span4
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
-    &.span5
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
-    &.span6
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
-    &.span7
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
-    &.span8
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
-    &.span9
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
-    &.span10
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
-    &.span11
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
-    &.span12
-      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
-
-
-
-
-// Make a Grid
-// -------------------------
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-$makeRow()
-  margin-left: $gridGutterWidth * -1
-  $clearfix()
-
-$makeColumn($columns = 1)
-  float: left
-  margin-left: $gridGutterWidth
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1))
-
-
+// Block level inputs
+$input-block-level() {
+  display: block;
+  width: 100%;
+  min-height: 30px;        // Make inputs at least the height of their button counterpart
+  $box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
 
 
-// Form field states (used in forms.styl)
-// --------------------------------------------------
 
 // Mixin for form field states
-$formFieldState($textColor = #555, $borderColor = #ccc, $backgroundColor = #f5f5f5)
+$formFieldState($textColor = #555, $borderColor = #ccc, $backgroundColor = #f5f5f5) {
   // Set the text color
   > label,
   .help-block,
-  .help-inline
-    color: $textColor
-
+  .help-inline {
+    color: $textColor;
+  }
   // Style inputs accordingly
+  .checkbox,
+  .radio,
   input,
   select,
-  textarea
-    color: $textColor
-    border-color: $borderColor
-    &:focus
-      border-color: darken($borderColor, 10%)
-      $box-shadow(0 0 6px lighten($borderColor, 20%))
-
-
+  textarea {
+    color: $textColor;
+  }
+  input,
+  select,
+  textarea {
+    border-color: $borderColor;
+    $box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    &:focus {
+      border-color: darken($borderColor, 10%);
+      $box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
+    }
+  }
   // Give a small background color for input-prepend/-append
   .input-prepend .add-on,
-  .input-append .add-on
-    color: $textColor
-    background-color: $backgroundColor
-    border-color: $textColor
-
-
+  .input-append .add-on {
+    color: $textColor;
+    background-color: $backgroundColor;
+    border-color: $textColor;
+  }
+}
 
 
 
@@ -364,125 +201,186 @@ $formFieldState($textColor = #555, $borderColor = #ccc, $backgroundColor = #f5f5
 // --------------------------------------------------
 
 // Border Radius
-$border-radius($radius = 5px)
-  -webkit-border-radius: $radius
-  -moz-border-radius: $radius
-  border-radius: $radius
-
+$border-radius($radius = 5px) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+// Single Corner Border Radius
+$border-top-left-radius($radius) {
+  -webkit-border-top-left-radius: $radius;
+      -moz-border-radius-topleft: $radius;
+          border-top-left-radius: $radius;
+}
+$border-top-right-radius($radius) {
+  -webkit-border-top-right-radius: $radius;
+      -moz-border-radius-topright: $radius;
+          border-top-right-radius: $radius;
+}
+$border-bottom-right-radius($radius) {
+  -webkit-border-bottom-right-radius: $radius;
+      -moz-border-radius-bottomright: $radius;
+          border-bottom-right-radius: $radius;
+}
+$border-bottom-left-radius($radius) {
+  -webkit-border-bottom-left-radius: $radius;
+      -moz-border-radius-bottomleft: $radius;
+          border-bottom-left-radius: $radius;
+}
+
+// Single Side Border Radius
+$border-top-radius($radius) {
+  $border-top-right-radius($radius);
+  $border-top-left-radius($radius);
+}
+$border-right-radius($radius) {
+  $border-top-right-radius($radius);
+  $border-bottom-right-radius($radius);
+}
+$border-bottom-radius($radius) {
+  $border-bottom-right-radius($radius);
+  $border-bottom-left-radius($radius);
+}
+$border-left-radius($radius) {
+  $border-top-left-radius($radius);
+  $border-bottom-left-radius($radius);
+}
 
 // Drop shadows
-$box-shadow($shadow = 0 1px 3px rgba(0,0,0,.25))
-  -webkit-box-shadow: $shadow
-  -moz-box-shadow: $shadow
-  box-shadow: $shadow
-
+$box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
 
 // Transitions
-$transition($t)
-  -webkit-transition: $t
-  -moz-transition: $t
-  -ms-transition: $t
-  -o-transition: $t
-  transition: $t
-
-$transition2($t1, $t2)
-  -webkit-transition: $t1, $t2
-  -moz-transition: $t1, $t2
-  -ms-transition: $t1, $t2
-  -o-transition: $t1, $t2
-  transition: $t1, $t2
+$transition($t) {
+  -webkit-transition: $t;
+  -moz-transition: $t;
+  -ms-transition: $t;
+  -o-transition: $t;
+  transition: $t;
+}
+$transition-delay($t) {
+  -webkit-transition-delay: $t;
+     -moz-transition-delay: $t;
+       -o-transition-delay: $t;
+          transition-delay: $t;
+}
 
 // Transformations
-$rotate($degrees)
-  -webkit-transform: rotate($degrees)
-  -moz-transform: rotate($degrees)
-  -ms-transform: rotate($degrees)
-  -o-transform: rotate($degrees)
-  transform: rotate($degrees)
-
-$scale($ratio)
-  -webkit-transform: scale($ratio)
-  -moz-transform: scale($ratio)
-  -ms-transform: scale($ratio)
-  -o-transform: scale($ratio)
-  transform: scale($ratio)
-
-$translate($x = 0, $y = 0)
-  -webkit-transform: translate($x, $y)
-  -moz-transform: translate($x, $y)
-  -ms-transform: translate($x, $y)
-  -o-transform: translate($x, $y)
-  transform: translate($x, $y)
-
-$skew($x = 0, $y = 0)
-  -webkit-transform: skew($x, $y)
-  -moz-transform: skew($x, $y)
-  -ms-transform: skew($x, $y)
-  -o-transform: skew($x, $y)
-  transform: skew($x, $y)
-
-$translate3d($x = 0, $y = 0, $z = 0)
-  -webkit-transform: translate($x, $y, $z)
-  -moz-transform: translate($x, $y, $z)
-  -ms-transform: translate($x, $y, $z)
-  -o-transform: translate($x, $y, $z)
-  transform: translate($x, $y, $z)
-
+$rotate($degrees) {
+  -webkit-transform: rotate($degrees);
+  -moz-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
+}
+$scale($ratio) {
+  -webkit-transform: scale($ratio);
+  -moz-transform: scale($ratio);
+  -ms-transform: scale($ratio);
+  -o-transform: scale($ratio);
+  transform: scale($ratio);
+}
+$translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+  -moz-transform: translate($x, $y);
+  -ms-transform: translate($x, $y);
+  -o-transform: translate($x, $y);
+  transform: translate($x, $y);
+}
+$skew($x, $y) {
+  -webkit-transform: skew($x, $y);
+  -moz-transform: skew($x, $y);
+  -ms-transform: skew($x, $y);
+  -o-transform: skew($x, $y);
+  transform: skew($x, $y);
+}
+$translate3d($x, $y, $z) {
+  -webkit-transform: translate($x, $y, $z);
+  -moz-transform: translate($x, $y, $z);
+  -ms-transform: translate($x, $y, $z);
+  -o-transform: translate($x, $y, $z);
+  transform: translate($x, $y, $z);
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+$backface-visibility($visibility){
+	-webkit-backface-visibility: $visibility;
+	   -moz-backface-visibility: $visibility;
+	        backface-visibility: $visibility;
+}
 
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-$background-clip($clip)
-  -webkit-background-clip: $clip
-  -moz-background-clip: $clip
-  background-clip: $clip
-
+$background-clip($clip) {
+  -webkit-background-clip: $clip;
+  -moz-background-clip: $clip;
+  background-clip: $clip;
+}
 
 // Background sizing
-$background-size($size)
-  -webkit-background-size: $size
-  -moz-background-size: $size
-  -o-background-size: $size
-  background-size: $size
-
+$background-size($size) {
+  -webkit-background-size: $size;
+  -moz-background-size: $size;
+  -o-background-size: $size;
+  background-size: $size;
+}
 
 
 // Box sizing
-$box-sizing($boxmodel)
-  -webkit-box-sizing: $boxmodel
-  -moz-box-sizing: $boxmodel
-  box-sizing: $boxmodel
-
+$box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+  -moz-box-sizing: $boxmodel;
+  box-sizing: $boxmodel;
+}
 
 // User select
 // For selecting text on the page
-$user-select($select)
-  -webkit-user-select: $select
-  -moz-user-select: $select
-  -o-user-select: $select
-  user-select: $select
-
+$user-select($select) {
+  -webkit-user-select: $select;
+  -moz-user-select: $select;
+  -ms-user-select: $select;
+  -o-user-select: $select;
+  user-select: $select;
+}
 
 // Resize anything
-$resizable($direction = both)
-  resize: $direction // Options: horizontal, vertical, both
-  overflow: auto // Safari fix
-
+$resizable($direction = both) {
+  resize: $direction; // Options: horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
 
 // CSS3 Content Columns
-$content-columns($columnCount, $columnGap = $gridColumnGutter)
-  -webkit-column-count: $columnCount
-  -moz-column-count: $columnCount
-  column-count: $columnCount
-  -webkit-column-gap: $columnGap
-  -moz-column-gap: $columnGap
-  column-gap: $columnGap
-
+$content-columns($columnCount, $columnGap = $gridColumnGutter) {
+  -webkit-column-count: $columnCount;
+  -moz-column-count: $columnCount;
+  column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+  -moz-column-gap: $columnGap;
+  column-gap: $columnGap;
+}
+
+// Optional hyphenation
+$hyphens($mode = auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+     -moz-hyphens: $mode;
+      -ms-hyphens: $mode;
+       -o-hyphens: $mode;
+          hyphens: $mode;
+}
 
 // Opacity
-$opacity($op = 100)
-  opacity: ($op/100)
-  filter: "alpha(opacity=$op)"
-
+$opacity($op) {
+  opacity: ($op / 100);
+  filter: "alpha(opacity=$op)";
+}
 
 
 
@@ -490,144 +388,377 @@ $opacity($op = 100)
 // --------------------------------------------------
 
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
-$translucent-background($color = $white, $alpha = 1)
-  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
-
-$translucent-border($color = $white, $alpha = 1)
-  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
-  $background-clip(padding-box)
-
-
+$translucent-background($color = $white, $alpha = 1) {
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+  .border($color: $white, $alpha: 1) {
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    $background-clip(padding-box);
+  }
+}
 
 // Gradient Bar Colors for buttons and alerts
-$gradientBar($primaryColor, $secondaryColor)
-  $gradient-vertical($primaryColor, $secondaryColor)
-  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%)
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%)
-
+$gradientBar($primaryColor, $secondaryColor, $textColor = #fff, $textShadow = 0 -1px 0 rgba(0,0,0,.25)) {
+  color: $textColor;
+  text-shadow: $textShadow;
+  $gradient-vertical($primaryColor, $secondaryColor);
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
 
 // Gradients
-$gradient-horizontal($startColor = #555, $endColor = #333)
+$gradient-horizontal($startColor = #555, $endColor = #333) {
   background-color: $endColor
-  background-image: -moz-linear-gradient(left, $startColor, $endColor) // FF 3.6+
-  background-image: -ms-linear-gradient(left, $startColor, $endColor) // IE10
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)) // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(left, $startColor, $endColor) // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(left, $startColor, $endColor) // Opera 11.10
-  background-image: linear-gradient(left, $startColor, $endColor) // Le standard
-  background-repeat: repeat-x
-  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=1)" // IE9 and down
-
-$gradient-vertical($startColor = #555, $endColor = #333)
-  background-color: mix($startColor, $endColor, 60%)
-  background-image: -moz-linear-gradient(top, $startColor, $endColor) // FF 3.6+
-  background-image: -ms-linear-gradient(top, $startColor, $endColor) // IE10
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(top, $startColor, $endColor) // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(top, $startColor, $endColor) // Opera 11.10
-  background-image: linear-gradient(top, $startColor, $endColor) // The standard
+  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
   background-repeat: repeat-x
-  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)" // IE9 and down
-
-$gradient-directional($startColor = #555, $endColor = #333, $deg = 45deg)
-  background-color: $endColor
+  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=1)"; // IE9 and down
+}
+$gradient-vertical($startColor = #555, $endColor = #333) {
+  background-color: mix($startColor, $endColor, 60%);
+  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(top, $startColor, $endColor); // The standard
   background-repeat: repeat-x
-  background-image: -moz-linear-gradient($deg, $startColor, $endColor) // FF 3.6+
-  background-image: -ms-linear-gradient($deg, $startColor, $endColor) // IE10
-  background-image: -webkit-linear-gradient($deg, $startColor, $endColor) // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient($deg, $startColor, $endColor) // Opera 11.10
-  background-image: linear-gradient($deg, $startColor, $endColor) // The standard
-
-$gradient-vertical-three-colors($startColor = #00b3ee, $midColor = #7a43b6, $colorStop = 50%, $endColor = #c3325f)
-  background-color: mix($midColor, $endColor, 80%)
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor))
-  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor)
-  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor)
-  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor)
-  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor)
-  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor)
-  background-repeat: no-repeat
-  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)" // IE9 and down
-
-$gradient-radial($innerColor = #555, $outerColor = #333)
-  background-color: $outerColor
-  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor))
-  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor)
-  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor)
-  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor)
-  background-repeat: no-repeat
+  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; // IE9 and down
+}
+$gradient-directional($startColor = #555, $endColor = #333, $deg = 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
+}
+$gradient-vertical-three-colors($startColor = #00b3ee, $midColor = #7a43b6, $colorStop = 50%, $endColor = #c3325f) {
+  background-color: mix($midColor, $endColor, 80%);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-repeat: no-repeat;
+  filter: "progid:DXImageTransform.Microsoft$gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0)"; // IE9 and down
+}
+$gradient-radial($innerColor = #555, $outerColor = #333) {
+  background-color: $outerColor;
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
+  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
+  background-repeat: no-repeat;
   // Opera cannot do radial gradients yet
-
-$gradient-striped($color, $angle = -45deg)
-  background-color: $color
-  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)
-  background-image: -ms-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: -o-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: 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)
-
-
+}
+$gradient-striped($color, $angle = -45deg) {
+  background-color: $color;
+  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);
+  background-image: -ms-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: -o-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: 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);
+}
 // Reset filters for IE
-$reset-filter()
-  filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)"
+$reset-filter() {
+  filter: "progid:DXImageTransform.Microsoft$gradient(enabled = false)";
+}
 
 
 
-// Mixin for generating button backgrounds
-// ---------------------------------------
-$buttonBackground($startColor, $endColor)
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+$nav-divider($top = #e5e5e5, $bottom = $white) {
+  // IE7 needs a set width since we gave a height. Restricting just
+  // to IE7 to keep the 1px left/right space in other browsers.
+  // It is unclear where IE is getting the extra space that we need
+  // to negative-margin away, but so it goes.
+  *width: 100%;
+  height: 1px;
+  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: $top;
+  border-bottom: 1px solid $bottom;
+}
+
+// Button backgrounds
+// ------------------
+$buttonBackground($startColor, $endColor, $textColor = #fff, $textShadow = 0 -1px 0 rgba(0,0,0,.25)) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  $gradientBar($startColor, $endColor)
-  $reset-filter()
+  $gradientBar($startColor, $endColor, $textColor, $textShadow);
+  *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+  $reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
-  &:hover, &:active, &.active, &.disabled, &[disabled]
-    background-color: $endColor
-
+  &:hover, &:active, &.active, &.disabled, &[disabled] {
+    color: $textColor;
+    background-color: $endColor;
+    *background-color: darken($endColor, 5%);
+  }
 
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
   &:active,
-  &.active
-    background-color: darken($endColor, 10%) e("\9")
+  &.active {
+    background-color: darken($endColor, 10%) e("\9");
+  }
+}
 
+// 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.
+$navbarVerticalAlign($elementHeight) {
+  margin-top: ($navbarHeight - $elementHeight) / 2;
+}
 
 
 
-// COMPONENT MIXINS
-// --------------------------------------------------
+// Grid System
+// -----------
 
-// POPOVER ARROWS
-// -------------------------
-// For tipsies and popovers
-$popoverArrow-top($arrowWidth = 5px)
-  bottom: 0
-  left: 50%
-  margin-left: -$arrowWidth
-  border-left: $arrowWidth solid transparent
-  border-right: $arrowWidth solid transparent
-  border-top: $arrowWidth solid $black
-
-$popoverArrow-left($arrowWidth = 5px)
-  top: 50%
-  right: 0
-  margin-top: -$arrowWidth
-  border-top: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid transparent
-  border-left: $arrowWidth solid $black
-
-$popoverArrow-bottom($arrowWidth = 5px)
-  top: 0
-  left: 50%
-  margin-left: -$arrowWidth
-  border-left: $arrowWidth solid transparent
-  border-right: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid $black
-
-$popoverArrow-right($arrowWidth = 5px)
-  top: 50%
-  left: 0
-  margin-top: -$arrowWidth
-  border-top: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid transparent
-  border-right: $arrowWidth solid $black
+// Centered container element
+$container-fixed() {
+  margin-right: auto;
+  margin-left: auto;
+  $clearfix();
+}
+
+// Table columns
+$tableColumns($columnSpan = 1) {
+  float: none; // undo default grid column styles
+  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+  margin-left: 0; // undo default grid column styles
+}
+
+// Make a Grid
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+$makeRow() {
+  margin-left: $gridGutterWidth * -1;
+  $clearfix();
+}
+$makeColumn($columns = 1, $offset = 0) {
+  float: left;
+  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+
+// The Grid
+$gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+$gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
+  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
+}
+$gridSystem-gridColumn($gridGutterWidth) {
+  float: left;
+  margin-left: $gridGutterWidth;
+}
+
+// Take these values and mixins, and make 'em do their thang
+$gridSystem-generate($gridColumnWidth, $gridGutterWidth) {
+  // Row surrounds the columns
+  .row {
+    margin-left: $gridGutterWidth * -1;
+    $clearfix()
+  }
+
+  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+  [class*="span"] {
+    $gridSystem-gridColumn($gridGutterWidth);
+  }
+
+  // Default columns
+  .span1 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1);
+  }
+  .span2 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2);
+  }
+  .span3 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3);
+  }
+  .span4 { 
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4);
+  }
+  .span5 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5);
+  }
+  .span6 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6);
+  }
+  .span7 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7);
+  }
+  .span8 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8);
+  }
+  .span9 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9);
+  }
+  .span10 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10);
+  }
+  .span11 {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11);
+  }
+  .span12,
+  .container {
+    $gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12);
+  }
+  // Offset column options
+  .offset1 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1)
+  }
+  .offset2 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2)
+  }
+  .offset3 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3)
+  }
+  .offset4 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4)
+  }
+  .offset5 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5)
+  }
+  .offset6 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6)
+  }
+  .offset7 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7)
+  }
+  .offset8 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8)
+  }
+  .offset9 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9)
+  }
+  .offset10 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10)
+  }
+  .offset11 {
+    $gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11)
+  }
+}
+
+$fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
+  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
+}
+
+$fluidGridSystem-gridColumn($fluidGridGutterWidth) {
+  float: left;
+  margin-left: $fluidGridGutterWidth;
+}
+
+// Take these values and mixins, and make 'em do their thang
+$fluidGridSystem-generate($fluidGridColumnWidth, $fluidGridGutterWidth) {
+  // Row surrounds the columns
+  .row-fluid {
+    width: 100%;
+    $clearfix();
+
+    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
+    [class*="span"] {
+      $fluidGridSystem-gridColumn($fluidGridGutterWidth);
+    }
+
+    [class*="span"]:first-child {
+      margin-left: 0;
+    }
+
+    // Default columns
+    .span1 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1);
+    }
+    .span2 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2);
+    }
+    .span3 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3);
+    }
+    .span4 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4);
+    }
+    .span5 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5);
+    }
+    .span6 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6);
+    }
+    .span7 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7);
+    }
+    .span8 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8);
+    }
+    .span9 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9);
+    }
+    .span10 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10);
+    }
+    .span11 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11);
+    }
+    .span12 {
+      $fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12);
+    }
+  }
+}
+$inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
+  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
+}
+$inputGridSystem-generate($gridColumnWidth, $gridGutterWidth) {
+  input,
+  textarea,
+  .uneditable-input {
+    &.span1 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1);
+    }
+    &.span2 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2);
+    }
+    &.span3 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3);
+    }
+    &.span4 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4);
+    }
+    &.span5 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5);
+    }
+    &.span6 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6);
+    }
+    &.span7 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7);
+    }
+    &.span8 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8);
+    }
+    &.span9 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9);
+    }
+    &.span10 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10);
+    }
+    &.span11 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11);
+    }
+    &.span12 {
+      $inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12);
+    }
+  }
+}
diff --git a/styl/modals.styl b/styl/modals.styl
index e9e75906..7763a526 100644
--- a/styl/modals.styl
+++ b/styl/modals.styl
@@ -1,91 +1,95 @@
-// MODALS
-// ------
-
-// Recalculate z-index where appropriate
-.modal-open
-  .dropdown-menu
-     z-index: $zindexDropdown + $zindexModal
-  .dropdown.open
-    *z-index: $zindexDropdown + $zindexModal
-  .popover
-     z-index: $zindexPopover  + $zindexModal
-  .tooltip
-     z-index: $zindexTooltip  + $zindexModal
-
+//
+// Modals
+// --------------------------------------------------
 
 // Background
-.modal-backdrop
-  position: fixed
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  z-index: $zindexModalBackdrop
-  background-color: $black
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindexModalBackdrop;
+  background-color: $black;
   // Fade for backdrop
-  &.fade
-    opacity: 0
-
+  &.fade { opacity: 0; }
+}
 
 .modal-backdrop,
-.modal-backdrop.fade.in
-  $opacity(80)
-
+.modal-backdrop.fade.in {
+  $opacity(80);
+}
 
 // Base modal
-.modal
-  position: fixed
-  top: 50%
-  left: 50%
-  z-index: $zindexModal
-  max-height: 500px
-  overflow: auto
-  width: 560px
-  margin: -250px 0 0 -280px
-  background-color: $white
-  border: 1px solid #999
-  border: 1px solid rgba(0,0,0,.3)
-  *border: 1px solid #999 /* IE6-7 */
-  $border-radius(6px)
-  $box-shadow(0 3px 7px rgba(0,0,0,0.3))
-  $background-clip(padding-box)
-  &.fade
-    $transition2(opacity .3s linear, top .3s ease-out)
-    top: -25%
-
-  &.fade.in
-    top: 50%
-
-.modal-header
-  padding: 9px 15px
-  border-bottom: 1px solid #eee
+.modal {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  z-index: $zindexModal;
+  width: 560px;
+  margin-left: -280px;
+  background-color: $white;
+  border: 1px solid #999;
+  border: 1px solid rgba(0,0,0,.3);
+  *border: 1px solid #999; /* IE6-7 */
+  $border-radius(6px);
+  $box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  $background-clip(padding-box);
+  // Remove focus outline from opened modal
+  outline: none;
+
+  &.fade {
+    $transition(opacity .3s linear, top .3s ease-out);
+    top: -25%;
+  }
+  &.fade.in { top: 10%; }
+}
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
   // Close icon
-  .close
-    margin-top: 2px
-
-
-// Body (where all modal content resises)
-.modal-body
-  padding: 15px
-
+  .close { margin-top: 2px; }
+  // Heading
+  h3 {
+    margin: 0;
+    line-height: 30px;
+  }
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+  overflow-y: auto;
+  max-height: 400px;
+  padding: 15px;
+}
 // Remove bottom margin if need be
-.modal-body .modal-form
-  margin-bottom: 0
-
+.modal-form {
+  margin-bottom: 0;
+}
 
 // Footer (for actions)
-.modal-footer
-  padding: 14px 15px 15px
-  margin-bottom: 0
-  background-color: #f5f5f5
-  border-top: 1px solid #ddd
-  $border-radius(0 0 6px 6px)
-  $box-shadow(inset 0 1px 0 $white)
-  $clearfix()
-  .btn
-    float: right
-    margin-left: 5px
-    margin-bottom: 0 // account for input[type="submit"] which gets the bottom margin like all other inputs
-
-
-
+.modal-footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right; // right align buttons
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  $border-radius(0 0 6px 6px);
+  $box-shadow(inset 0 1px 0 $white);
+  $clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: 5px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-left: 0;
+  }
+}
diff --git a/styl/navbar.styl b/styl/navbar.styl
index 897c7a78..cccde864 100644
--- a/styl/navbar.styl
+++ b/styl/navbar.styl
@@ -1,235 +1,294 @@
-// NAVBAR (FIXED AND STATIC)
-// -------------------------
+//
+// Navbars (Redux)
+// --------------------------------------------------
 
 
 // COMMON STYLES
 // -------------
 
-.navbar
-  overflow: visible
-  margin-bottom: $baseLineHeight
-
-
-// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
-.navbar-inner
-  padding-left:  20px
-  padding-right: 20px
-  $gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
-  $border-radius(4px)
-  $shadow = 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)
-  $box-shadow($shadow)
-
-
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar
-  display: none
-  float: right
-  padding: 7px 10px
-  margin-left: 5px
-  margin-right: 5px
-  $buttonBackground($navbarBackgroundHighlight, $navbarBackground)
-  $shadow = inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)
-  $box-shadow($shadow)
-
-.btn-navbar .icon-bar
-  display: block
-  width: 18px
-  height: 2px
-  background-color: #f5f5f5
-  $border-radius(1px)
-  $box-shadow(0 1px 0 rgba(0,0,0,.25))
-
-.btn-navbar .icon-bar + .icon-bar
-  margin-top: 3px
+// Base class and wrapper
+.navbar {
+  overflow: visible;
+  margin-bottom: $baseLineHeight;
+
+  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
+  *position: relative;
+  *z-index: 2;
+}
+
+// Inner for background effects
+// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
+.navbar-inner {
+  min-height: $navbarHeight;
+  padding-left:  20px;
+  padding-right: 20px;
+  $gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
+  border: 1px solid $navbarBorder;
+  $border-radius($baseBorderRadius);
+  $shadow = 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  $box-shadow($shadow);
+
+  // Prevent floats from breaking the navbar
+  $clearfix();
+}
+
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+  width: auto;
+}
 
 // Override the default collapsed state
-.nav-collapse.collapse
-  height: auto
-
-
-
-// Brand, links, text, and buttons
-.navbar
-  // Hover and active states
-  .brand:hover
-    text-decoration: none
-
-  // Website or project name
-  .brand
-    float: left
-    display: block
-    padding: 8px 20px 12px
-    margin-left: -20px // negative indent to left-align the text down the page
-    font-size: 20px
-    font-weight: 200
-    line-height: 1
-    color: $white
-
-  // Plain text in topbar
-  .navbar-text
-    margin-bottom: 0
-    line-height: 40px
-    color: $navbarText
-    a:hover
-      color: $white
-      background-color: transparent
-
-
-  // Buttons in navbar
-  .btn,
-  .btn-group
-    margin-top: 5px // make buttons vertically centered in navbar
+.nav-collapse.collapse {
+  height: auto;
+  overflow: visible;
+}
 
-  .btn-group .btn
-    margin-top: 0 // then undo the margin here so we don't accidentally double it
 
+// Brand: website or project name
+// -------------------------
+.navbar .brand {
+  float: left;
+  display: block;
+  // Vertically center the text given $navbarHeight
+  padding: (($navbarHeight - $baseLineHeight) / 2) 20px (($navbarHeight - $baseLineHeight) / 2);
+  margin-left: -20px; // negative indent to left-align the text down the page
+  font-size: 20px;
+  font-weight: 200;
+  color: $navbarBrandColor;
+  text-shadow: 0 1px 0 $navbarBackgroundHighlight;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// Plain text in topbar
+// -------------------------
+.navbar-text {
+  margin-bottom: 0;
+  line-height: $navbarHeight;
+  color: $navbarText
+}
 
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
+  color: $navbarLinkColor;
+  &:hover {
+    color: $navbarLinkColorHover;
+  }
+}
+
+// Dividers in navbar
+// -------------------------
+.navbar .divider-vertical {
+  height: $navbarHeight;
+  margin: 0 9px;
+  border-left: 1px solid $navbarBackground;
+  border-right: 1px solid $navbarBackgroundHighlight;
+}
+
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
+  $navbarVerticalAlign(30px); // Vertically center in navbar
+}
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn {
+  margin-top: 0; // then undo the margin here so we don't accidentally double it
+}
 
 // Navbar forms
-.navbar-form
-  margin-bottom: 0 // remove default bottom margin
-  $clearfix()
+// -------------------------
+.navbar-form {
+  margin-bottom: 0; // remove default bottom margin
+  $clearfix();
   input,
-  select
-    display: inline-block
-    margin-top: 5px
-    margin-bottom: 0
-
+  select,
   .radio,
-  .checkbox
-    margin-top: 5px
-
+  .checkbox {
+    $navbarVerticalAlign(30px); // Vertically center in navbar
+  }
+  input,
+  select,
+  .btn {
+    display: inline-block;
+    margin-bottom: 0;
+  }
   input[type="image"],
   input[type="checkbox"],
-  input[type="radio"]
-    margin-top: 3px
-
+  input[type="radio"] {
+    margin-top: 3px;
+  }
   .input-append,
-  .input-prepend
-    margin-top: 6px
-    white-space: nowrap // preven two  items from separating within a .navbar-form that has .pull-left
-    input
-      margin-top: 0 // remove the margin on top since it's on the parent
-
+  .input-prepend {
+    margin-top: 5px;
+    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
+    input {
+      margin-top: 0; // remove the margin on top since it's on the parent
+    }
+  }
+}
 
+// Navbar search
+// -------------------------
+.navbar-search {
+  position: relative;
+  float: left;
+  $navbarVerticalAlign(30px); // Vertically center in navbar
+  margin-bottom: 0;
+  .search-query {
+    margin-bottom: 0;
+    padding: 4px 14px;
+    $font-sans-serif(13px, normal, 1);
+    $border-radius(15px); // redeclare because of specificity of the type attribute
+  }
+}
+
+
+
+// Static navbar
+// -------------------------
 
+.navbar-static-top {
+  position: static;
+  margin-bottom: 0; // remove 18px margin for default navbar
+  .navbar-inner {
+    $border-radius(0);
+  }
+}
 
-// Navbar search
-.navbar-search
-  position: relative
-  float: left
-  margin-top: 6px
-  margin-bottom: 0
-  .search-query
-    padding: 4px 9px
-    $font-sans-serif(13px, normal, 1)
-    color: $white
-    color: rgba(255,255,255,.75)
-    background: #666
-    background: rgba(255,255,255,.3)
-    border: 1px solid #111
-    $shadow = inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)
-    $box-shadow($shadow)
-    $transition(none)
-
-    // Placeholder text gets special styles can't be bundled together though for some reason
-    $placeholder($grayLighter)
-
-    // Hover states
-    &:hover
-      color: $white
-      background-color: $grayLight
-      background-color: rgba(255,255,255,.5)
-
-    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
-    &:focus,
-    &.focused
-      padding: 5px 10px
-      color: $grayDark
-      text-shadow: 0 1px 0 $white
-      background-color: $white
-      border: 0
-      $box-shadow(0 0 3px rgba(0,0,0,.15))
-      outline: 0
-
-
-
-
-
-// FIXED NAVBAR
-// ------------
-
-.navbar-fixed-top
-  position: fixed
-  top: 0
-  right: 0
-  left: 0
-  z-index: $zindexFixedNavbar
-
-.navbar-fixed-top .navbar-inner
-  padding-left:  0
-  padding-right: 0
-  $border-radius(0)
 
 
+// Fixed navbar
+// -------------------------
 
-// NAVIGATION
-// ----------
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: $zindexFixedNavbar;
+  margin-bottom: 0; // remove 18px margin for default navbar
+}
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
+  border-width: 0 0 1px;
+}
+.navbar-fixed-bottom .navbar-inner {
+  border-width: 1px 0 0;
+}
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
+  padding-left:  0;
+  padding-right: 0;
+  $border-radius(0);
+}
+
+// Reset container width
+// Required here as we reset the width earlier on and the grid mixins don't override early enough
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+    $makeColumn($gridColumns);
+}
+
+// Fixed to top
+.navbar-fixed-top {
+  top: 0;
+}
+.navbar-fixed-top,
+.navbar-static-top {
+  .navbar-inner {
+    $box-shadow(0 1px 10px rgba(0,0,0,.1));
+  }
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+  bottom: 0;
+  .navbar-inner {
+    $box-shadow(0 -1px 10px rgba(0,0,0,.1));
+  }
+}
 
-.navbar .nav
-  position: relative
-  left: 0
-  display: block
-  float: left
-  margin: 0 10px 0 0
 
-.navbar .nav.pull-right
-  float: right // redeclare due to specificity
 
-.navbar .nav > li
-  display: block
-  float: left
+// NAVIGATION
+// ----------
 
+.navbar .nav {
+  position: relative;
+  left: 0;
+  display: block;
+  float: left;
+  margin: 0 10px 0 0;
+}
+.navbar .nav.pull-right {
+  float: right; // redeclare due to specificity
+  margin-right: 0; // remove margin on float right nav
+}
+.navbar .nav > li {
+  float: left;
+}
 
 // Links
-.navbar .nav > li > a
-  float: none
-  padding: 10px 10px 11px
-  line-height: 19px
+.navbar .nav > li > a {
+  float: none;
+  // Vertically center the text given $navbarHeight
+  padding: (($navbarHeight - $baseLineHeight) / 2) 15px (($navbarHeight - $baseLineHeight) / 2);
   color: $navbarLinkColor
-  text-decoration: none
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
+  text-decoration: none;
+  text-shadow: 0 1px 0 $navbarBackgroundHighlight;
+}
+.navbar .nav .dropdown-toggle .caret {
+  margin-top: 8px;
 
-// Hover
-.navbar .nav > li > a:hover
-  background-color: $navbarLinkBackgroundHover // "transparent" is default to differentiate :hover from .active
-  color: $navbarLinkColorHover
-  text-decoration: none
+}
 
+// Hover
+.navbar .nav > li > a:focus,
+.navbar .nav > li > a:hover {
+  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
+  color: $navbarLinkColorHover;
+  text-decoration: none;
+}
 
 // Active nav items
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover
-  color: $navbarLinkColorHover
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  color: $navbarLinkColorHover;
   text-decoration: none
-  background-color: $navbarBackground
-
-
-// Dividers (basically a vertical hr)
-.navbar .divider-vertical
-  height: $navbarHeight
-  width: 1px
-  margin: 0 9px
-  overflow: hidden
-  background-color: $navbarBackground
-  border-right: 1px solid $navbarBackgroundHighlight
-
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right
-  margin-left: 10px
-  margin-right: 0
+  background-color: $navbarLinkBackgroundActive;
+  $box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
+}
 
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  $buttonBackground(darken($navbarBackgroundHighlight, 5%), darken($navbarBackground, 5%));
+  $box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
+}
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  $border-radius(1px);
+  $box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
 
 
 
@@ -237,64 +296,195 @@
 // --------------
 
 // Menu position and menu carets
-.navbar .dropdown-menu
-  margin-top: 1px
-  $border-radius(4px)
-  &:before
-    content: ''
-    display: inline-block
-    border-left:   7px solid transparent
-    border-right:  7px solid transparent
-    border-bottom: 7px solid #ccc
-    border-bottom-color: rgba(0,0,0,.2)
-    position: absolute
-    top: -7px
-    left: 9px
-
-  &:after
-    content: ''
-    display: inline-block
-    border-left:   6px solid transparent
-    border-right:  6px solid transparent
-    border-bottom: 6px solid $white
-    position: absolute
-    top: -6px
-    left: 10px
-
-
-
-// Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret
-  border-top-color: $white
-
-.navbar .nav .active .caret
-  $opacity(100)
-
+.navbar .nav > li > .dropdown-menu {
+  &:before {
+    content: '';
+    display: inline-block;
+    border-left:   7px solid transparent;
+    border-right:  7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-bottom-color: $dropdownBorder;
+    position: absolute;
+    top: -7px;
+    left: 9px;
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    border-left:   6px solid transparent;
+    border-right:  6px solid transparent;
+    border-bottom: 6px solid $dropdownBackground;
+    position: absolute;
+    top: -6px;
+    left: 10px;
+  }
+}
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .nav > li > .dropdown-menu {
+  &:before {
+    border-top: 7px solid #ccc;
+    border-top-color: $dropdownBorder;
+    border-bottom: 0;
+    bottom: -7px;
+    top: auto;
+  }
+  &:after {
+    border-top: 6px solid $dropdownBackground;
+    border-bottom: 0;
+    bottom: -6px;
+    top: auto;
+  }
+}
+
+// Caret should match text color on hover
+.navbar .nav li.dropdown > a:hover .caret {
+  border-top-color: @navbarLinkColorActive;
+  border-bottom-color: @navbarLinkColorActive;
+}
 
 // Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle
-  background-color: transparent
-
-
-// Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover
-  color: $white
-
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+  background-color: $navbarLinkBackgroundActive;
+  color: $navbarLinkColorActive;
+}
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+  border-top-color: $navbarLinkColor;
+  border-bottom-color: $navbarLinkColor;
+}
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+  border-top-color: $navbarLinkColorActive;
+  border-bottom-color: $navbarLinkColorActive;
+}
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu
-  left: auto
-  right: 0
-  &:before
-    left: auto
-    right: 12px
-
-  &:after
-    left: auto
-    right: 13px
-
-
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
+  left: auto;
+  right: 0;
+  &:before {
+    left: auto;
+    right: 12px;
+  }
+  &:after {
+    left: auto;
+    right: 13px;
+  }
+  .dropdown-menu {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: -1px;
+    $border-radius(6px 0 6px 6px);
+  }
+}
+
+
+// Inverted navbar
+// -------------------------
 
+.navbar-inverse {
+  .navbar-inner {
+    $gradient-vertical($navbarInverseBackgroundHighlight, $navbarInverseBackground);
+    border-color: $navbarInverseBorder;
+  }
+
+  .brand,
+  .nav > li > a {
+    color: $navbarInverseLinkColor;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    &:hover {
+      color: $navbarInverseLinkColorHover;
+    }
+  }
+
+  .brand {
+    color: @navbarInverseBrandColor;
+  }
+
+  .navbar-text {
+    color: @navbarInverseText;
+  }
+
+  .nav > li > a:focus,
+  .nav > li > a:hover {
+    background-color: $navbarInverseLinkBackgroundHover;
+    color: $navbarInverseLinkColorHover;
+  }
+
+  .nav .active > a,
+  .nav .active > a:hover,
+  .nav .active > a:focus {
+    color: $navbarInverseLinkColorActive;
+    background-color: $navbarInverseLinkBackgroundActive;
+  }
+
+  // Inline text links
+  .navbar-link {
+    color: $navbarInverseLinkColor;
+    &:hover {
+      color: $navbarInverseLinkColorHover;
+    }
+  }
+
+  // Dividers in navbar
+  .divider-vertical {
+    border-left-color: $navbarInverseBackground;
+    border-right-color: $navbarInverseBackgroundHighlight;
+  }
+
+  // Dropdowns
+  .nav li.dropdown.open > .dropdown-toggle,
+  .nav li.dropdown.active > .dropdown-toggle,
+  .nav li.dropdown.open.active > .dropdown-toggle {
+    background-color: $navbarInverseLinkBackgroundActive;
+    color: $navbarInverseLinkColorActive;
+  }
+  .nav li.dropdown > a:hover .caret {
+    border-top-color: @navbarInverseLinkColorActive;
+    border-bottom-color: @navbarInverseLinkColorActive;
+  }
+  .nav li.dropdown > .dropdown-toggle .caret {
+    border-top-color: $navbarInverseLinkColor;
+    border-bottom-color: $navbarInverseLinkColor;
+  }
+  .nav li.dropdown.open > .dropdown-toggle .caret,
+  .nav li.dropdown.active > .dropdown-toggle .caret,
+  .nav li.dropdown.open.active > .dropdown-toggle .caret {
+    border-top-color: $navbarInverseLinkColorActive;
+    border-bottom-color: $navbarInverseLinkColorActive;
+  }
+
+  // Navbar search
+  .navbar-search {
+    .search-query {
+      color: $white;
+      background-color: $navbarInverseSearchBackground;
+      border-color: $navbarInverseSearchBorder;
+      $box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15));
+      $transition(none);
+      $placeholder($navbarInverseSearchPlaceholderColor);
+
+      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
+      &:focus,
+      &.focused {
+        padding: 5px 15px;
+        color: $grayDark;
+        text-shadow: 0 1px 0 $white;
+        background-color: $navbarInverseSearchBackgroundFocus;
+        border: 0;
+        $box-shadow(0 0 3px rgba(0,0,0,.15));
+        outline: 0;
+      }
+    }
+  }
+
+  // Navbar collapse button
+  .btn-navbar {
+    $buttonBackground(darken($navbarInverseBackgroundHighlight, 5%), darken($navbarInverseBackground, 5%));
+  }
+
+}
diff --git a/styl/navs.styl b/styl/navs.styl
index d17e1b7e..2dd0c24e 100644
--- a/styl/navs.styl
+++ b/styl/navs.styl
@@ -1,69 +1,86 @@
-// NAVIGATIONS
-// -----------
-
+//
+// Navs
+// --------------------------------------------------
 
 
 // BASE CLASS
 // ----------
 
-.nav
-  margin-left: 0
-  margin-bottom: $baseLineHeight
-  list-style: none
-
+.nav {
+  margin-left: 0;
+  margin-bottom: $baseLineHeight;
+  list-style: none;
+}
 
 // Make links block level
-.nav > li > a
-  display: block
-
-.nav > li > a:hover
-  text-decoration: none
-  background-color: $grayLighter
-
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: $grayLighter;
+}
+
+// Prevent IE8 from misplacing imgs
+// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+.nav > li > a > img {
+  max-width: none;
+}
+
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
 
 // Nav headers (for dropdowns and lists)
-.nav .nav-header
-  display: block
-  padding: 3px 15px
-  font-size: 11px
-  font-weight: bold
-  line-height: $baseLineHeight
-  color: $grayLight
-  text-shadow: 0 1px 0 rgba(255,255,255,.5)
-  text-transform: uppercase
-
+.nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
 // Space them out when they follow another list item (link)
-.nav li + .nav-header
-  margin-top: 9px
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 
 // NAV LIST
 // --------
 
-.nav-list
-  padding-left: 14px
-  padding-right: 14px
-  margin-bottom: 0
-
+.nav-list {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-bottom: 0;
+}
 .nav-list > li > a,
-.nav-list .nav-header
-  margin-left:  -15px
-  margin-right: -15px
-  text-shadow: 0 1px 0 rgba(255,255,255,.5)
-
-.nav-list > li > a
-  padding: 3px 15px
-
-.nav-list .active > a,
-.nav-list .active > a:hover
-  color: $white
-  text-shadow: 0 -1px 0 rgba(0,0,0,.2)
-  background-color: $linkColor
-
-.nav-list [class^="icon-"]
-  margin-right: 2px
-
+.nav-list .nav-header {
+  margin-left:  -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav-list > li > a {
+  padding: 3px 15px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+  color: $white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: $linkColor;
+}
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+  margin-right: 2px;
+}
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+  $nav-divider();
+}
 
 
 
@@ -72,72 +89,72 @@
 
 // Common styles
 .nav-tabs,
-.nav-pills
-  $clearfix()
-
+.nav-pills {
+  $clearfix();
+}
 .nav-tabs > li,
-.nav-pills > li
-  float: left
-
+.nav-pills > li {
+  float: left;
+}
 .nav-tabs > li > a,
-.nav-pills > li > a
-  padding-right: 12px
-  padding-left: 12px
-  margin-right: 2px
-  line-height: 14px // keeps the overall height an even number
-
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
 
 // TABS
 // ----
 
 // Give the tabs something to sit on
-.nav-tabs
-  border-bottom: 1px solid #ddd
-
-
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
 // Make the list-items overlay the bottom border
-.nav-tabs > li
-  margin-bottom: -1px
-
-
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
 // Actual tabs (as links)
-.nav-tabs > li > a
-  padding-top: 9px
-  padding-bottom: 9px
-  border: 1px solid transparent
-  $border-radius(4px 4px 0 0)
-  &:hover
-    border-color: $grayLighter $grayLighter #ddd
-
-
+.nav-tabs > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: $baseLineHeight;
+  border: 1px solid transparent;
+  $border-radius(4px 4px 0 0);
+  &:hover {
+    border-color: $grayLighter $grayLighter #ddd;
+  }
+}
 // Active state, and it's :hover to override normal :hover
 .nav-tabs > .active > a,
-.nav-tabs > .active > a:hover
-  color: $gray
-  background-color: $white
-  border: 1px solid #ddd
-  border-bottom-color: transparent
-  cursor: default
+.nav-tabs > .active > a:hover {
+  color: $gray;
+  background-color: $bodyBackground;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
 
 
 // PILLS
 // -----
 
 // Links rendered as pills
-.nav-pills > li > a
-  padding-top: 8px
-  padding-bottom: 8px
-  margin-top: 2px
-  margin-bottom: 2px
-  $border-radius(5px)
-
+.nav-pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  $border-radius(5px);
+}
 
 // Active state
-.nav-pills .active > a,
-.nav-pills .active > a:hover
-  color: $white
-  background-color: $linkColor
-
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: $white;
+  background-color: $linkColor;
+}
 
 
 
@@ -145,102 +162,108 @@
 // -----------
 
 // Stacked tabs and pills
-.nav-stacked > li
-  float: none
-
-.nav-stacked > li > a
-  margin-right: 0 // no need for the gap between nav items
-
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li > a {
+  margin-right: 0; // no need for the gap between nav items
+}
 
 // Tabs
-.nav-tabs.nav-stacked
-  border-bottom: 0
-
-.nav-tabs.nav-stacked > li > a
-  border: 1px solid #ddd
-  $border-radius(0)
-
-.nav-tabs.nav-stacked > li:first-child > a
-  $border-radius(4px 4px 0 0)
-
-.nav-tabs.nav-stacked > li:last-child > a
-  $border-radius(0 0 4px 4px)
-
-.nav-tabs.nav-stacked > li > a:hover
-  border-color: #ddd
-  z-index: 2
-
+.nav-tabs.nav-stacked {
+  border-bottom: 0;
+}
+.nav-tabs.nav-stacked > li > a {
+  border: 1px solid #ddd;
+  $border-radius(0);
+}
+.nav-tabs.nav-stacked > li:first-child > a {
+  $border-radius(4px);
+}
+
+.nav-tabs.nav-stacked > li:last-child > a {
+  $border-radius(4px);
+}
+.nav-tabs.nav-stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
 
 // Pills
-.nav-pills.nav-stacked > li > a
-  margin-bottom: 3px
-
-.nav-pills.nav-stacked > li:last-child > a
-  margin-bottom: 1px // decrease margin to match sizing of stacked tabs
-
+.nav-pills.nav-stacked > li > a {
+  margin-bottom: 3px;
+}
+.nav-pills.nav-stacked > li:last-child > a {
+  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
 
 
 
 // DROPDOWNS
 // ---------
 
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu
-  margin-top: 1px
-  border-width: 1px
-
-.nav-pills .dropdown-menu
-  $border-radius(4px)
-
+.nav-tabs .dropdown-menu {
+  $border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
+}
+.nav-pills .dropdown-menu {
+  $border-radius(6px); // make rounded corners match the pills
+}
 
 // Default dropdown links
 // -------------------------
 // Make carets use linkColor to start
-.nav-tabs .dropdown-toggle .caret,
-.nav-pills .dropdown-toggle .caret
-  border-top-color: $linkColor
-  margin-top: 6px
-
-.nav-tabs .dropdown-toggle:hover .caret,
-.nav-pills .dropdown-toggle:hover .caret
-  border-top-color: $linkColorHover
-
+.nav .dropdown-toggle .caret {
+  border-top-color: $linkColor;
+  border-bottom-color: $linkColor;
+  margin-top: 6px;
+}
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: $linkColorHover;
+  border-bottom-color: $linkColorHover;
+}
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
 
 // Active dropdown links
 // -------------------------
-.nav-tabs .active .dropdown-toggle .caret,
-.nav-pills .active .dropdown-toggle .caret
-  border-top-color: $grayDark
-
+.nav .active .dropdown-toggle .caret {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+}
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: $gray;
+  border-bottom-color: $gray;
+}
 
 // Active:hover dropdown links
 // -------------------------
-.nav > .dropdown.active > a:hover
-  color: $black
-  cursor: pointer
-
+.nav > .dropdown.active > a:hover {
+  cursor: pointer;
+}
 
 // Open dropdowns
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover
-  color: $white
-  background-color: $grayLight
-  border-color: $grayLight
-
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret
-  border-top-color: $white
-  $opacity(100)
-
+.nav > li.dropdown.open.active > a:hover {
+  color: $white;
+  background-color: $grayLight;
+  border-color: $grayLight;
+}
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
+  border-top-color: $white;
+  border-bottom-color: $white;
+  $opacity(100);
+}
 
 // Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover
-  border-color: $grayLight
-
+.tabs-stacked .open > a:hover {
+  border-color: $grayLight;
+}
 
 
 
@@ -252,103 +275,118 @@
 // -------------
 
 // Clear any floats
-.tabbable
-  $clearfix()
-
-.tab-content
-  overflow: hidden // prevent content from running below tabs
-
+.tabbable {
+  $clearfix();
+}
+.tab-content {
+  overflow: auto; // prevent content from running below tabs
+}
 
 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs
-  border-bottom: 0
-
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+  border-bottom: 0;
+}
 
 // Show/hide tabbable areas
 .tab-content > .tab-pane,
-.pill-content > .pill-pane
-  display: none
-
+.pill-content > .pill-pane {
+  display: none;
+}
 .tab-content > .active,
-.pill-content > .active
-  display: block
-
+.pill-content > .active {
+  display: block;
+}
 
 
 // BOTTOM
 // ------
 
-.tabs-below .nav-tabs
-  border-top: 1px solid #ddd
-
-.tabs-below .nav-tabs > li
-  margin-top: -1px
-  margin-bottom: 0
-
-.tabs-below .nav-tabs > li > a
-  $border-radius(0 0 4px 4px)
-  &:hover
-    border-bottom-color: transparent
-    border-top-color: #ddd
-
-
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover
-  border-color: transparent #ddd #ddd #ddd
-
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+}
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+.tabs-below > .nav-tabs > li > a {
+  $border-radius(0 0 4px 4px);
+  &:hover {
+    border-bottom-color: transparent;
+    border-top-color: #ddd;
+  }
+}
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
+  border-color: transparent #ddd #ddd #ddd;
+}
 
 // LEFT & RIGHT
 // ------------
 
 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li
-  float: none
-
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a
-  min-width: 74px
-  margin-right: 0
-  margin-bottom: 3px
-
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+  float: none;
+}
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
 
 // Tabs on the left
-.tabs-left .nav-tabs
-  float: left
-  margin-right: 19px
-  border-right: 1px solid #ddd
-
-.tabs-left .nav-tabs > li > a
-  margin-right: -1px
-  $border-radius(4px 0 0 4px)
-
-.tabs-left .nav-tabs > li > a:hover
-  border-color: $grayLighter #ddd $grayLighter $grayLighter
-
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover
-  border-color: #ddd transparent #ddd #ddd
-  *border-right-color: $white
-
+.tabs-left > .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+.tabs-left > .nav-tabs > li > a {
+  margin-right: -1px;
+  $border-radius(4px 0 0 4px);
+}
+.tabs-left > .nav-tabs > li > a:hover {
+  border-color: $grayLighter #ddd $grayLighter $grayLighter;
+}
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: $white;
+}
 
 // Tabs on the right
-.tabs-right .nav-tabs
-  float: right
-  margin-left: 19px
-  border-left: 1px solid #ddd
-
-.tabs-right .nav-tabs > li > a
-  margin-left: -1px
-  $border-radius(0 4px 4px 0)
-
-.tabs-right .nav-tabs > li > a:hover
-  border-color: $grayLighter $grayLighter $grayLighter #ddd
-
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover
-  border-color: #ddd #ddd #ddd transparent
-  *border-left-color: $white
-
-
+.tabs-right > .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  border-left: 1px solid #ddd;
+}
+.tabs-right > .nav-tabs > li > a {
+  margin-left: -1px;
+  $border-radius(0 4px 4px 0);
+}
+.tabs-right > .nav-tabs > li > a:hover {
+  border-color: $grayLighter $grayLighter $grayLighter #ddd;
+}
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
+  border-color: #ddd #ddd #ddd transparent;
+  *border-left-color: $white;
+}
+
+
+
+// DISABLED STATES
+// ---------------
+
+// Gray out text
+.nav > .disabled > a {
+  color: $grayLight;
+}
+// Nuke hover effects
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  cursor: default;
+}
diff --git a/styl/pager.styl b/styl/pager.styl
index 3613a56b..9dba852e 100644
--- a/styl/pager.styl
+++ b/styl/pager.styl
@@ -1,31 +1,40 @@
-// PAGER
-// -----
-
-.pager
-  margin-left: 0
-  margin-bottom: $baseLineHeight
-  list-style: none
-  text-align: center
-  $clearfix()
-
-.pager li
-  display: inline
-
-.pager a
-  display: inline-block
-  padding: 5px 14px
+//
+// Pager pagination
+// --------------------------------------------------
+
+.pager {
+  margin: $baseLineHeight 0;
+  list-style: none;
+  text-align: center;
+  $clearfix();
+}
+.pager li {
+  display: inline;
+}
+.pager li > a,
+.pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
   background-color: #fff
   border: 1px solid #ddd
   $border-radius(15px)
-
-.pager a:hover
-  text-decoration: none
-  background-color: #f5f5f5
-
-.pager .next a
-  float: right
-
-.pager .previous a
-  float: left
-
-
+}
+.pager li > a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+.pager .next > a,
+.pager .next > span {
+  float: right;
+}
+.pager .previous > a,
+.pager .previous > span {
+  float: left;
+}
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > span {
+  color: $grayLight;
+  background-color: #fff;
+  cursor: default;
+}
diff --git a/styl/pagination.styl b/styl/pagination.styl
index c43bb26b..314ae23d 100644
--- a/styl/pagination.styl
+++ b/styl/pagination.styl
@@ -1,56 +1,122 @@
-// PAGINATION
-// ----------
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
 
-.pagination
-  height: $baseLineHeight * 2
-  margin: $baseLineHeight 0
+// Space out pagination from surrounding content
+.pagination {
+  margin: $baseLineHeight 0;
+}
 
-.pagination ul
-  display: inline-block
-  $ie7-inline-block()
-  margin-left: 0
-  margin-bottom: 0
-  $border-radius(3px)
-  $box-shadow(0 1px 2px rgba(0,0,0,.05))
+.pagination ul {
+  // Allow for text-based alignment
+  display: inline-block;
+  $ie7-inline-block();
+  // Reset default ul styles
+  margin-left: 0;
+  margin-bottom: 0;
+  // Visuals
+  $border-radius($baseBorderRadius);
+  $box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination ul > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: $baseLineHeight;
+  text-decoration: none;
+  background-color: $paginationBackground;
+  border: 1px solid $paginationBorder;
+  border-left-width: 0;
+}
+.pagination ul > li > a:hover,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: $paginationActiveBackground;
+}
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: $grayLight;
+  cursor: default;
+}
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover {
+  color: $grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+  border-left-width: 1px;
+  $border-left-radius($baseBorderRadius);
+}
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  $border-radius(0 3px 3px 0);
+  $border-right-radius($baseBorderRadius);
+}
 
-.pagination li
-    display: inline
 
-.pagination a
-  float: left
-  padding: 0 14px
-  line-height: ($baseLineHeight * 2) - 2
-  text-decoration: none
-  border: 1px solid #ddd
-  border-left-width: 0
+// Alignment
+// --------------------------------------------------
 
-.pagination a:hover,
-.pagination .active a
-  background-color: #f5f5f5
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
 
-.pagination .active a
-  color: $grayLight
-  cursor: default
 
-.pagination .disabled a,
-.pagination .disabled a:hover
-  color: $grayLight
-  background-color: transparent
-  cursor: default
+// Sizing
+// --------------------------------------------------
 
-.pagination li:first-child a
-  border-left-width: 1px
-  $border-radius(3px 0 0 3px)
-
-.pagination li:last-child a
-  $border-radius(0 3px 3px 0)
-
-
-// Centered
-.pagination-centered
-  text-align: center
-
-.pagination-right
-  text-align: right
+// Large
+.pagination-large {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingLarge;
+    font-size: $fontSizeLarge;
+  }
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    $border-left-radius($borderRadiusLarge);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    $border-right-radius($borderRadiusLarge);
+  }
+}
 
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    $border-left-radius($borderRadiusSmall);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    $border-right-radius($borderRadiusSmall);
+  }
+}
 
+// Small
+.pagination-small {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingSmall;
+    font-size: $fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingMini;
+    font-size: $fontSizeMini;
+  }
+}
diff --git a/styl/popovers.styl b/styl/popovers.styl
index 55f31f01..e4d848a4 100644
--- a/styl/popovers.styl
+++ b/styl/popovers.styl
@@ -1,58 +1,129 @@
-// POPOVERS
-// --------
-
-.popover
-  position: absolute
-  top: 0
-  left: 0
-  z-index: $zindexPopover
-  display: none
-  padding: 5px
-  &.top
-    margin-top:  -5px
-  &.right
-    margin-left:  5px
-  &.bottom
-    margin-top:   5px
-  &.left
-    margin-left: -5px
-  &.top .arrow
-    $popoverArrow-top()
-  &.right .arrow
-    $popoverArrow-right()
-  &.bottom .arrow
-    $popoverArrow-bottom()
-  &.left .arrow
-    $popoverArrow-left()
-  .arrow
-    position: absolute
-    width: 0
-    height: 0
-
-
-.popover-inner
-  padding: 3px
-  width: 280px
-  overflow: hidden
-  background: $black // has to be full background declaration for IE fallback
-  background: rgba(0,0,0,.8)
-  $border-radius(6px)
-  $box-shadow(0 3px 7px rgba(0,0,0,0.3))
-
-.popover-title
-  padding: 9px 15px
-  line-height: 1
-  background-color: #f5f5f5
-  border-bottom:1px solid #eee
-  $border-radius(3px 3px 0 0)
-
-.popover-content
-  padding: 14px
-  background-color: $white
-  $border-radius(0 0 3px 3px)
-  $background-clip(padding-box)
-  p, ul, ol
-    margin-bottom: 0
+//
+// Popovers
+// --------------------------------------------------
 
 
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindexPopover;
+  display: none;
+  width: 236px;
+  padding: 1px;
+  text-align: left; // Reset given new insertion method
+  background-color: $popoverBackground;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  $border-radius(6px);
+  $box-shadow(0 5px 10px rgba(0,0,0,.2));
 
+  // Overrides for proper insertion
+  white-space: normal;
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -10px; }
+  &.right   { margin-left: 10px; }
+  &.bottom  { margin-top: 10px; }
+  &.left    { margin-left: -10px; }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: $popoverTitleBackground;
+  border-bottom: 1px solid darken($popoverTitleBackground, 5%);
+  $border-radius(5px 5px 0 0);
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow {
+  border-width: $popoverArrowOuterWidth;
+}
+.popover .arrow:after {
+  border-width: $popoverArrowWidth;
+  content: "";
+}
+
+.popover {
+  &.top .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: $popoverArrowOuterColor;
+    bottom: -$popoverArrowOuterWidth;
+    &:after {
+      bottom: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: $popoverArrowColor;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: $popoverArrowOuterColor;
+    &:after {
+      left: 1px;
+      bottom: -$popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: $popoverArrowColor;
+    }
+  }
+  &.bottom .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: $popoverArrowOuterColor;
+    top: -$popoverArrowOuterWidth;
+    &:after {
+      top: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: $popoverArrowColor;
+    }
+  }
+
+  &.left .arrow {
+    top: 50%;
+    right: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: $popoverArrowOuterColor;
+    &:after {
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: $popoverArrowColor;
+      bottom: -$popoverArrowWidth;
+    }
+  }
+
+}
diff --git a/styl/progress-bars.styl b/styl/progress-bars.styl
index ca9b2fca..6e726cd2 100644
--- a/styl/progress-bars.styl
+++ b/styl/progress-bars.styl
@@ -1,17 +1,40 @@
-// PROGRESS BARS
-// -------------
+//
+// Progress bars
+// --------------------------------------------------
 
 
 // ANIMATIONS
 // ----------
 
-// Spec
-@keyframes progress-bar-stripes
-  from
-    background-position: 0 0
-  to
-    background-position: 40px 0
+// Webkit
+@-webkit-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Firefox
+@-moz-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// IE9
+@-ms-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
+  from  { background-position: 0 0; }
+  to    { background-position: 40px 0; }
+}
 
+// Spec
+@keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
 
 
 
@@ -19,41 +42,47 @@
 // --------
 
 // Outer container
-.progress
-  overflow: hidden
-  height: 18px
-  margin-bottom: 18px
-  $gradient-vertical(#f5f5f5, #f9f9f9)
-  $box-shadow(inset 0 1px 2px rgba(0,0,0,.1))
-  $border-radius(4px)
-
+.progress {
+  overflow: hidden;
+  height: $baseLineHeight;
+  margin-bottom: $baseLineHeight;
+  $gradient-vertical(#f5f5f5, #f9f9f9);
+  $box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+  $border-radius($baseBorderRadius);
+}
 
 // Bar of progress
-.progress .bar
-  width: 0%
-  height: 18px
-  color: $white
-  font-size: 12px
-  text-align: center
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
-  $gradient-vertical(#149bdf, #0480be)
-  $box-shadow(inset 0 -1px 0 rgba(0,0,0,.15))
-  $box-sizing(border-box)
-  $transition(width .6s ease)
-
+.progress .bar {
+  width: 0%;
+  height: 100%;
+  color: $white;
+  float: left;
+  font-size: 12px;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  $gradient-vertical(#149bdf, #0480be);
+  $box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+  $box-sizing(border-box);
+  $transition(width .6s ease);
+}
+.progress .bar + .bar {
+  $box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
+}
 
 // Striped bars
-.progress-striped .bar
-  $gradient-striped(#62c462)
-  $background-size(40px 40px)
-
+.progress-striped .bar {
+  $gradient-striped(#62c462);
+  $background-size(40px 40px);
+}
 
 // Call animation for the active one
-.progress.active .bar
-  -webkit-animation: progress-bar-stripes 2s linear infinite
-  -moz-animation: progress-bar-stripes 2s linear infinite
-  animation: progress-bar-stripes 2s linear infinite
-
+.progress.active .bar {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+     -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
 
 
 
@@ -61,26 +90,33 @@
 // ------
 
 // Danger (red)
-.progress-danger .bar
+.progress-danger .bar, .progress .bar-danger {
   $gradient-vertical(#ee5f5b, #c43c35)
-
-.progress-danger.progress-striped .bar
-  $gradient-striped(#ee5f5b)
-
+}
+.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
+  $gradient-striped(#ee5f5b);
+}
 
 // Success (green)
-.progress-success .bar
-  $gradient-vertical(#62c462, #57a957)
-
-.progress-success.progress-striped .bar
-  $gradient-striped(#62c462)
-
+.progress-success .bar, .progress .bar-success {
+  $gradient-vertical(#62c462, #57a957);
+}
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
+  $gradient-striped(#62c462);
+}
 
 // Info (teal)
-.progress-info .bar
-  $gradient-vertical(#5bc0de, #339bb9)
-
-.progress-info.progress-striped .bar
-  $gradient-striped(#5bc0de)
-
-
+.progress-info .bar, .progress .bar-info {
+  $gradient-vertical(#5bc0de, #339bb9);
+}
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
+  $gradient-striped(#5bc0de);
+}
+
+// Warning (orange)
+.progress-warning .bar, .progress .bar-warning {
+  $gradient-vertical(lighten($orange, 15%), $orange);
+}
+.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
+  $gradient-striped(lighten($orange, 15%));
+}
diff --git a/styl/reset.styl b/styl/reset.styl
index 3a79b00c..d3bf1e24 100644
--- a/styl/reset.styl
+++ b/styl/reset.styl
@@ -1,6 +1,8 @@
-// Reset.styl
-// Adapted from Normalize.css http://github.com/necolas/normalize.css
-// ------------------------------------------------------------------------
+//
+// Reset CSS
+// Adapted from http://github.com/necolas/normalize.css
+// --------------------------------------------------
+
 
 // Display in IE6-9 and FF3
 // -------------------------
@@ -14,72 +16,82 @@ footer,
 header,
 hgroup,
 nav,
-section
-  display: block
-
+section {
+  display: block;
+}
 
 // Display block in IE6-9 and FF3
 // -------------------------
 
 audio,
 canvas,
-video
-  display: inline-block
-  *display: inline
-  *zoom: 1
-
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
 
 // Prevents modern browsers from displaying 'audio' without controls
 // -------------------------
 
-audio:not([controls])
-    display: none
-
+audio:not([controls]) {
+    display: none;
+}
 
 // Base settings
 // -------------------------
 
-html
-  font-size: 100%
-  -webkit-text-size-adjust: 100%
-      -ms-text-size-adjust: 100%
-
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
 // Focus states
-a:focus
-  $tab-focus()
-
+a:focus {
+  $tab-focus();
+}
 // Hover & Active
 a:hover,
-a:active
-  outline: 0
-
+a:active {
+  outline: 0;
+}
 
 // Prevents sub and sup affecting line-height in all browsers
 // -------------------------
 
 sub,
-sup
-  position: relative
-  font-size: 75%
-  line-height: 0
-  vertical-align: baseline
-
-sup
-  top: -0.5em
-
-sub
-  bottom: -0.25em
-
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
 
 // Img border in a's and image quality
 // -------------------------
 
-img
-  max-width: 100%
-  height: auto
-  border: 0
-  -ms-interpolation-mode: bicubic
+img {
+  /* Responsive images (ensure images don't scale beyond their parents) */
+  max-width: 100%; /* Part 1: Set a maxium relative to the parent */
+  width: auto\9; /* IE7-8 need help adjusting responsive images */
+  height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
+
+  vertical-align: middle;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
 
+// Prevent max-width from affecting Google Maps
+#map_canvas img,
+.google-maps img {
+  max-width: none;
+}
 
 // Forms
 // -------------------------
@@ -88,40 +100,117 @@ img
 button,
 input,
 select,
-textarea
-  margin: 0
-  font-size: 100%
-  vertical-align: middle
-
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
 button,
-input
-  *overflow: visible // Inner spacing ie IE6/7
-  line-height: normal // FF3/4 have !important on line-height in UA stylesheet
-
+input {
+  *overflow: visible; // Inner spacing ie IE6/7
+  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+}
 button::-moz-focus-inner,
-input::-moz-focus-inner // Inner padding and border oddities in FF3/4
-  padding: 0
-  border: 0
-
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+  padding: 0;
+  border: 0;
+}
+button,
+html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
+    cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
+}
+label,
+select,
 button,
 input[type="button"],
 input[type="reset"],
-input[type="submit"]
-  cursor: pointer // Cursors on all buttons applied consistently
-  -webkit-appearance: button // Style clickable inputs in iOS
-
-input[type="search"] // Appearance in Safari/Chrome
-  -webkit-appearance: textfield
-  -webkit-box-sizing: content-box
-     -moz-box-sizing: content-box
-          box-sizing: content-box
-
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
+}
+input[type="search"] { // Appearance in Safari/Chrome
+  box-sizing: content-box;
+  appearance: textfield;
+}
 input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button
-  -webkit-appearance: none // Inner-padding issues in Chrome OSX, Safari 5
-
-textarea
-  overflow: auto // Remove vertical scrollbar in IE6-9
-  vertical-align: top // Readability and alignment cross-browser
+input[type="search"]::-webkit-search-cancel-button {
+  appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+textarea {
+  overflow: auto; // Remove vertical scrollbar in IE6-9
+  vertical-align: top; // Readability and alignment cross-browser
+}
 
 
+// Printing
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+
+@media print {
+
+  * {
+    text-shadow: none !important;
+    color: #000 !important; // Black prints faster: h5bp.com/s
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+
+  // Don't show links for images, or javascript/internal links
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group; // h5bp.com/t
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
diff --git a/styl/responsive-1200px-min.styl b/styl/responsive-1200px-min.styl
new file mode 100644
index 00000000..59b394b2
--- /dev/null
+++ b/styl/responsive-1200px-min.styl
@@ -0,0 +1,29 @@
+//
+// Responsive: Large desktop and up
+// --------------------------------------------------
+// @todo This has not been converted yet
+
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
+
+  // Fluid grid
+  #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+
+  // Input grid
+  #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -@gridGutterWidth1200;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth1200;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}
diff --git a/styl/responsive-767px-max.styl b/styl/responsive-767px-max.styl
new file mode 100644
index 00000000..7947e13b
--- /dev/null
+++ b/styl/responsive-767px-max.styl
@@ -0,0 +1,194 @@
+//
+// Responsive: Landscape phone to desktop/tablet
+// --------------------------------------------------
+// @todo This has not been converted yet
+
+
+@media (max-width: 767px) {
+
+  // Padding to set content in a bit
+  body {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  // Negative indent the now static "fixed" navbar
+  .navbar-fixed-top,
+  .navbar-fixed-bottom,
+  .navbar-static-top {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+  // Remove padding on container given explicit padding set on body
+  .container-fluid {
+    padding: 0;
+  }
+
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  .thumbnails > li {
+    float: none;
+    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    .box-sizing(border-box);
+  }
+  .span12,
+  .row-fluid .span12 {
+    width: 100%;
+    .box-sizing(border-box);
+  }
+  .row-fluid [class*="offset"]:first-child {
+		margin-left: 0;
+	}
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    .input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top:   20px;
+    left:  20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+    &.fade  { top: -100px; }
+    &.fade.in { top: 20px; }
+  }
+
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: @baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal {
+    .control-label {
+      float: none;
+      width: auto;
+      padding-top: 0;
+      text-align: left;
+    }
+    // Move over all input controls and content
+    .controls {
+      margin-left: 0;
+    }
+    // Move the options list down to align with labels
+    .control-list {
+      padding-top: 0; // has to be padding because margin collaspes
+    }
+    // Move over buttons in .form-actions to align with .controls
+    .form-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+
+  // Medias
+  // Reset float and spacing to stack
+  .media .pull-left,
+  .media .pull-right  {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  // Remove side margins since we stack instead of indent
+  .media-object {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    top:   10px;
+    left:  10px;
+    right: 10px;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
diff --git a/styl/responsive-768px-979px.styl b/styl/responsive-768px-979px.styl
new file mode 100644
index 00000000..087cadd7
--- /dev/null
+++ b/styl/responsive-768px-979px.styl
@@ -0,0 +1,20 @@
+//
+// Responsive: Tablet to desktop
+// --------------------------------------------------
+// @todo This has not been converted yet
+
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
+
+  // Fluid grid
+  #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
+
+  // Input grid
+  #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
+
+  // No need to reset .thumbnails here since it's the same @gridGutterWidth
+
+}
diff --git a/styl/responsive-navbar.styl b/styl/responsive-navbar.styl
new file mode 100644
index 00000000..aab13348
--- /dev/null
+++ b/styl/responsive-navbar.styl
@@ -0,0 +1,185 @@
+//
+// Responsive: Navbar
+// --------------------------------------------------
+
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: $navbarCollapseWidth) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  // Remove any padding from the body
+  body {
+    padding-top: 0;
+  }
+  // Unfix the navbars
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    position: static;
+  }
+  .navbar-fixed-top {
+    margin-bottom: $baseLineHeight;
+  }
+  .navbar-fixed-bottom {
+    margin-top: $baseLineHeight;
+  }
+  .navbar-fixed-top .navbar-inner,
+  .navbar-fixed-bottom .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  // Account for brand name
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+
+  // COLLAPSIBLE NAVBAR
+  // ------------------
+  // Nav collapse clears brand
+  .nav-collapse {
+    clear: both;
+  }
+  // Block-level the nav
+  .nav-collapse .nav {
+    float: none;
+    margin: 0 0 ($baseLineHeight / 2);
+  }
+  .nav-collapse .nav > li {
+    float: none;
+  }
+  .nav-collapse .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > .divider-vertical {
+    display: none;
+  }
+  .nav-collapse .nav .nav-header {
+    color: $navbarText;
+    text-shadow: none;
+  }
+  // Nav and dropdown links in navbar
+  .nav-collapse .nav > li > a,
+  .nav-collapse .dropdown-menu a {
+    padding: 9px 15px;
+    font-weight: bold;
+    color: $navbarLinkColor;
+    .border-radius(3px);
+  }
+  // Buttons
+  .nav-collapse .btn {
+    padding: 4px 10px 4px;
+    font-weight: normal;
+    .border-radius(@baseBorderRadius);
+  }
+  .nav-collapse .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > li > a:hover,
+  .nav-collapse .dropdown-menu a:hover {
+    background-color: $navbarBackground;
+  }
+  .navbar-inverse .nav-collapse .nav > li > a,
+  .navbar-inverse .nav-collapse .dropdown-menu a {
+    color: @navbarInverseLinkColor;
+  }
+  .navbar-inverse .nav-collapse .nav > li > a:hover,
+  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+    background-color: $navbarInverseBackground;
+  }
+  // Buttons in the navbar
+  .nav-collapse.in .btn-group {
+    margin-top: 5px;
+    padding: 0;
+  }
+  // Dropdowns in the navbar
+  .nav-collapse .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: none;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    .border-radius(0);
+    .box-shadow(none);
+  }
+  .nav-collapse .open > .dropdown-menu { 
+    display: block; 
+  }
+
+  .nav-collapse .dropdown-menu:before,
+  .nav-collapse .dropdown-menu:after {
+    display: none;
+  }
+  .nav-collapse .dropdown-menu .divider {
+    display: none;
+  }
+  .nav-collapse .nav > li > .dropdown-menu {
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+  // Forms in navbar
+  .nav-collapse .navbar-form,
+  .nav-collapse .navbar-search {
+    float: none;
+    padding: ($baseLineHeight / 2) 15px;
+    margin: ($baseLineHeight / 2) 0;
+    border-top: 1px solid $navbarBackground;
+    border-bottom: 1px solid $navbarBackground;
+    $box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
+  }
+  .navbar-inverse .nav-collapse .navbar-form,
+  .navbar-inverse .nav-collapse .navbar-search {
+    border-top-color: $navbarInverseBackground;
+    border-bottom-color: $navbarInverseBackground;
+  }
+  // Pull right (secondary) nav content
+  .navbar .nav-collapse .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  // Hide everything in the navbar save .brand and toggle button */
+  .nav-collapse,
+  .nav-collapse.collapse {
+    overflow: hidden;
+    height: 0;
+  }
+  // Navbar button
+  .navbar .btn-navbar {
+    display: block;
+  }
+
+  // STATIC NAVBAR
+  // -------------
+  .navbar-static .navbar-inner {
+    padding-left:  10px;
+    padding-right: 10px;
+  }
+
+
+}
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+@media (min-width: @navbarCollapseDesktopWidth) {
+
+  // Required to make the collapsing navbar work on regular desktops
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+}
diff --git a/styl/responsive-utilities.styl b/styl/responsive-utilities.styl
new file mode 100644
index 00000000..c6370ff4
--- /dev/null
+++ b/styl/responsive-utilities.styl
@@ -0,0 +1,44 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+// @todo This has not been converted yet
+
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+.visible-desktop   { display: inherit !important; }
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+}
+
+// Phones only
+@media (max-width: 767px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+}
diff --git a/styl/responsive.styl b/styl/responsive.styl
index d7517476..6e5423a0 100644
--- a/styl/responsive.styl
+++ b/styl/responsive.styl
@@ -1,18 +1,28 @@
 /*!
- * Bootstrap Responsive v2.0.1
+ * Bootstrap Responsive v2.2.2
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
- * Designed and built with all the love in the world $twitter by $mdo and $fat.
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
 
+
 // Responsive.styl
 // For phone and tablet devices
 // -------------------------------------------------------------
 
 
+// IE10 Metro responsive
+// Required for Windows 8 Metro split-screen snapping with IE10
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@-ms-viewport{
+  width: device-width;
+}
+
+
 // REPEAT VARIABLES & MIXINS
 // -------------------------
 // Required since we compile the responsive stuff separately
@@ -24,306 +34,24 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden
-  display: none
-  visibility: hidden
-
-
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-$media (max-width: 480px)
-
-  // Smooth out the collapsing/expanding nav
-  .nav-collapse
-    -webkit-transform: translate3d(0, 0, 0) // activate the GPU
-
-
-  // Block level the page header small tag for readability
-  .page-header h1 small
-    display: block
-    line-height: $baseLineHeight
-
-
-  // Make span* classes full width
-  input[class*="span"],
-  select[class*="span"],
-  textarea[class*="span"],
-  .uneditable-input
-    display: block
-    width: 100%
-    min-height: 28px /* Make inputs at least the height of their button counterpart */
-    /* Makes inputs behave like true block-level elements */
-    -webkit-box-sizing: border-box /* Older Webkit */
-       -moz-box-sizing: border-box /* Older FF */
-        -ms-box-sizing: border-box /* IE8 */
-            box-sizing: border-box /* CSS3 spec*/
-
-  // But don't let it screw up prepend/append inputs
-  .input-prepend input[class*="span"],
-  .input-append input[class*="span"]
-    width: auto
-
-
-  // Update checkboxes for iOS
-  input[type="checkbox"],
-  input[type="radio"]
-    border: 1px solid #ccc
-
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label
-    float: none
-    width: auto
-    padding-top: 0
-    text-align: left
-
-  // Move over all input controls and content
-  .form-horizontal .controls
-    margin-left: 0
-
-  // Move the options list down to align with labels
-  .form-horizontal .control-list
-    padding-top: 0 // has to be padding because margin collaspes
-
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions
-    padding-left: 10px
-    padding-right: 10px
-
-
-  // Modals
-  .modal
-    position: absolute
-    top:   10px
-    left:  10px
-    right: 10px
-    width: auto
-    margin: 0
-    &.fade.in
-      top: auto
-
-  .modal-header .close
-    padding: 10px
-    margin: -10px
-
-
-  // Carousel
-  .carousel-caption
-    position: static
-
-
-
-
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-$media (max-width: 767px)
-  // GRID & CONTAINERS
-  // -----------------
-  // Remove width from containers
-  .container
-    width: auto
-    padding: 0 20px
-
-  // Fluid rows
-  .row-fluid
-    width: 100%
-
-  // Undo negative margin on rows
-  .row
-    margin-left: 0
-
-  // Make all columns even
-  .row > [class*="span"],
-  .row-fluid > [class*="span"]
-    float: none
-    display: block
-    width: auto
-    margin: 0
-
-
-
-
-
-// PORTRAIT TABLET TO DEFAULT DESKTOP
-// ----------------------------------
-
-$media (min-width: 768px) and (max-width: 979px)
-
-  // Fixed grid
-  $gridSystem-generate(12, 42px, 20px)
+@import "responsive-utilities.styl";
 
-  // Fluid grid
-  $fluidGridSystem-generate(12, 5.801104972%, 2.762430939%)
 
-  // Input grid
-  $inputGridSystem-generate(12, 42px, 20px)
-
-
-
-
-
-// TABLETS AND BELOW
-// -----------------
-$media (max-width: 979px)
-
-  // UNFIX THE TOPBAR
-  // ----------------
-  // Remove any padding from the body
-  body
-    padding-top: 0
-
-  // Unfix the navbar
-  .navbar-fixed-top
-    position: static
-    margin-bottom: $baseLineHeight
-
-  .navbar-fixed-top .navbar-inner
-    padding: 5px
-
-  .navbar .container
-    width: auto
-    padding: 0
-
-  // Account for brand name
-  .navbar .brand
-    padding-left: 10px
-    padding-right: 10px
-    margin: 0 0 0 -5px
-
-  // Nav collapse clears brand
-  .navbar .nav-collapse
-    clear: left
-
-  // Block-level the nav
-  .navbar .nav
-    float: none
-    margin: 0 0 ($baseLineHeight / 2)
-
-  .navbar .nav > li
-    float: none
-
-  .navbar .nav > li > a
-    margin-bottom: 2px
-
-  .navbar .nav > .divider-vertical
-    display: none
-
-  .navbar .nav .nav-header
-    color: $navbarText
-    text-shadow: none
-
-  // Nav and dropdown links in navbar
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a
-    padding: 6px 15px
-    font-weight: bold
-    color: $navbarLinkColor
-    $border-radius(3px)
-
-  .navbar .dropdown-menu li + li a
-    margin-bottom: 2px
-
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover
-    background-color: $navbarBackground
-
-  // Dropdowns in the navbar
-  .navbar .dropdown-menu
-    position: static
-    top: auto
-    left: auto
-    float: none
-    display: block
-    max-width: none
-    margin: 0 15px
-    padding: 0
-    background-color: transparent
-    border: none
-    $border-radius(0)
-    $box-shadow(none)
-
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after
-    display: none
-
-  .navbar .dropdown-menu .divider
-    display: none
-
-  // Forms in navbar
-  .navbar-form,
-  .navbar-search
-    float: none
-    padding: ($baseLineHeight / 2) 15px
-    margin: ($baseLineHeight / 2) 0
-    border-top: 1px solid $navbarBackground
-    border-bottom: 1px solid $navbarBackground
-    $shadow = inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)
-    $box-shadow($shadow)
-
-  // Pull right (secondary) nav content
-  .navbar .nav.pull-right
-    float: none
-    margin-left: 0
-
-  // Static navbar
-  .navbar-static .navbar-inner
-    padding-left:  10px
-    padding-right: 10px
-
-  // Navbar button
-  .btn-navbar
-    display: block
-
-
-  // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse
-    overflow: hidden
-    height: 0
-
-
-
-
-
-// DEFAULT DESKTOP
-// ---------------
-
-$media (min-width: 980px)
-  .nav-collapse.collapse
-    height: auto !important
-
-
-
-
-
-// LARGE DESKTOP & UP
+// MEDIA QUERIES
 // ------------------
 
-$media (min-width: 1200px)
+// Large desktops
+@import "responsive-1200px-min.styl";
 
-  // Fixed grid
-  $gridSystem-generate(12, 70px, 30px)
-
-  // Fluid grid
-  $fluidGridSystem-generate(12, 5.982905983%, 2.564102564%)
-
-  // Input grid
-  $inputGridSystem-generate(12, 70px, 30px)
-
-  // Thumbnails
-  .thumbnails
-    margin-left: -30px
-
-  .thumbnails > li
-    margin-left: 30px
+// Tablets to regular desktops
+@import "responsive-768px-979px.styl";
 
+// Phones to portrait tablets and narrow desktops
+@import "responsive-767px-max.styl";
 
 
+// RESPONSIVE NAVBAR
+// ------------------
 
+// From 979px and below, show a button to toggle navbar contents
+@import "responsive-navbar.styl";
diff --git a/styl/scaffolding.styl b/styl/scaffolding.styl
index 9e4a687d..197f95b4 100644
--- a/styl/scaffolding.styl
+++ b/styl/scaffolding.styl
@@ -1,30 +1,52 @@
+//
 // Scaffolding
-// Basic and global styles for generating a grid system, structural layout, and page templates
-// -------------------------------------------------------------------------------------------
-
-
-// STRUCTURAL LAYOUT
-// -----------------
-
-body
-  margin: 0
-  font-family: $baseFontFamily
-  font-size: $baseFontSize
-  line-height: $baseLineHeight
-  color: $textColor
-  background-color: $white
-
-
-
-// LINKS
-// -----
-
-a
-  color: $linkColor
-  text-decoration: none
-
-a:hover
-  color: $linkColorHover
-  text-decoration: underline
-
-
+// --------------------------------------------------
+
+
+// Body reset
+// -------------------------
+
+body {
+  margin: 0;
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $textColor;
+  background-color: $bodyBackground;
+}
+
+
+// Links
+// -------------------------
+
+a {
+  color: $linkColor;
+  text-decoration: none;
+}
+a:hover {
+  color: $linkColorHover;
+  text-decoration: underline;
+}
+
+
+// Images
+// -------------------------
+
+// Rounded corners
+.img-rounded {
+  $border-radius(6px);
+}
+
+// Add polaroid-esque trim
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  $box-shadow(0 1px 3px rgba(0,0,0,.1));
+}
+
+// Perfect circle
+.img-circle {
+  $border-radius(500px); // crank the border-radius so it works with most reasonably sized images
+}
diff --git a/styl/sprites.styl b/styl/sprites.styl
index 57532abe..c3dba11d 100644
--- a/styl/sprites.styl
+++ b/styl/sprites.styl
@@ -1,6 +1,6 @@
-// SPRITES
-// Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
+//
+// Sprites
+// --------------------------------------------------
 
 
 // ICONS
@@ -11,268 +11,183 @@
 // and background-position. Your resulting HTML will look like
 // .
 
-// For the white version of the  icons, just add the .icon-white class:
+// For the white version of the icons, just add the .icon-white class:
 // 
 
 [class^="icon-"],
-[class*=" icon-"]
-  display: inline-block
-  width: 14px
-  height: 14px
-  line-height: 14px
-  vertical-align: text-top
-  background-image: url($iconSpritePath)
+[class*=" icon-"] {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  $ie7-restore-right-whitespace();
+  line-height: 14px;
+  vertical-align: text-top;
+  background-image: url($iconSpritePath);
   background-position: 14px 14px
-  background-repeat: no-repeat
+  background-repeat: no-repeat;
+  margin-top: 1px;
+}
 
-  $ie7-restore-right-whitespace()
+/* White icons with optional class, or on hover/active states of certain elements */
+.icon-white,
+.nav-pills > .active > a > [class^="icon-"],
+.nav-pills > .active > a > [class*=" icon-"],
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"],
+.dropdown-submenu:hover > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"] {
+  background-image: url($iconWhiteSpritePath);
+}
 
-.icon-white
-  background-image: url($iconWhiteSpritePath)
+.icon-glass              { background-position: 0      0; }
+.icon-music              { background-position: -24px  0; }
+.icon-search             { background-position: -48px  0; }
+.icon-envelope           { background-position: -72px  0; }
+.icon-heart              { background-position: -96px  0; }
+.icon-star               { background-position: -120px 0; }
+.icon-star-empty         { background-position: -144px 0; }
+.icon-user               { background-position: -168px 0; }
+.icon-film               { background-position: -192px 0; }
+.icon-th-large           { background-position: -216px 0; }
+.icon-th                 { background-position: -240px 0; }
+.icon-th-list            { background-position: -264px 0; }
+.icon-ok                 { background-position: -288px 0; }
+.icon-remove             { background-position: -312px 0; }
+.icon-zoom-in            { background-position: -336px 0; }
+.icon-zoom-out           { background-position: -360px 0; }
+.icon-off                { background-position: -384px 0; }
+.icon-signal             { background-position: -408px 0; }
+.icon-cog                { background-position: -432px 0; }
+.icon-trash              { background-position: -456px 0; }
 
+.icon-home               { background-position: 0      -24px; }
+.icon-file               { background-position: -24px  -24px; }
+.icon-time               { background-position: -48px  -24px; }
+.icon-road               { background-position: -72px  -24px; }
+.icon-download-alt       { background-position: -96px  -24px; }
+.icon-download           { background-position: -120px -24px; }
+.icon-upload             { background-position: -144px -24px; }
+.icon-inbox              { background-position: -168px -24px; }
+.icon-play-circle        { background-position: -192px -24px; }
+.icon-repeat             { background-position: -216px -24px; }
+.icon-refresh            { background-position: -240px -24px; }
+.icon-list-alt           { background-position: -264px -24px; }
+.icon-lock               { background-position: -287px -24px; } // 1px off
+.icon-flag               { background-position: -312px -24px; }
+.icon-headphones         { background-position: -336px -24px; }
+.icon-volume-off         { background-position: -360px -24px; }
+.icon-volume-down        { background-position: -384px -24px; }
+.icon-volume-up          { background-position: -408px -24px; }
+.icon-qrcode             { background-position: -432px -24px; }
+.icon-barcode            { background-position: -456px -24px; }
 
-.icon-glass
-  background-position: 0      0
-.icon-music
-  background-position: -24px  0
-.icon-search
-  background-position: -48px  0
-.icon-envelope
-  background-position: -72px  0
-.icon-heart
-  background-position: -96px  0
-.icon-star
-  background-position: -120px 0
-.icon-star-empty
-  background-position: -144px 0
-.icon-user
-  background-position: -168px 0
-.icon-film
-  background-position: -192px 0
-.icon-th-large
-  background-position: -216px 0
-.icon-th
-  background-position: -240px 0
-.icon-th-list
-  background-position: -264px 0
-.icon-ok
-  background-position: -288px 0
-.icon-remove
-  background-position: -312px 0
-.icon-zoom-in
-  background-position: -336px 0
-.icon-zoom-out
-  background-position: -360px 0
-.icon-off
-  background-position: -384px 0
-.icon-signal
-  background-position: -408px 0
-.icon-cog
-  background-position: -432px 0
-.icon-trash
-  background-position: -456px 0
+.icon-tag                { background-position: 0      -48px; }
+.icon-tags               { background-position: -25px  -48px; } // 1px off
+.icon-book               { background-position: -48px  -48px; }
+.icon-bookmark           { background-position: -72px  -48px; }
+.icon-print              { background-position: -96px  -48px; }
+.icon-camera             { background-position: -120px -48px; }
+.icon-font               { background-position: -144px -48px; }
+.icon-bold               { background-position: -167px -48px; } // 1px off
+.icon-italic             { background-position: -192px -48px; }
+.icon-text-height        { background-position: -216px -48px; }
+.icon-text-width         { background-position: -240px -48px; }
+.icon-align-left         { background-position: -264px -48px; }
+.icon-align-center       { background-position: -288px -48px; }
+.icon-align-right        { background-position: -312px -48px; }
+.icon-align-justify      { background-position: -336px -48px; }
+.icon-list               { background-position: -360px -48px; }
+.icon-indent-left        { background-position: -384px -48px; }
+.icon-indent-right       { background-position: -408px -48px; }
+.icon-facetime-video     { background-position: -432px -48px; }
+.icon-picture            { background-position: -456px -48px; }
 
-.icon-home
-  background-position: 0      -24px
-.icon-file
-  background-position: -24px  -24px
-.icon-time
-  background-position: -48px  -24px
-.icon-road
-  background-position: -72px  -24px
-.icon-download-alt
-  background-position: -96px  -24px
-.icon-download
-  background-position: -120px -24px
-.icon-upload
-  background-position: -144px -24px
-.icon-inbox
-  background-position: -168px -24px
-.icon-play-circle
-  background-position: -192px -24px
-.icon-repeat
-  background-position: -216px -24px
-.icon-refresh
-  background-position: -240px -24px
-.icon-list-alt
-  background-position: -264px -24px
-.icon-lock
-  background-position: -287px -24px // 1px off
-.icon-flag
-  background-position: -312px -24px
-.icon-headphones
-  background-position: -336px -24px
-.icon-volume-off
-  background-position: -360px -24px
-.icon-volume-down
-  background-position: -384px -24px
-.icon-volume-up
-  background-position: -408px -24px
-.icon-qrcode
-  background-position: -432px -24px
-.icon-barcode
-  background-position: -456px -24px
+.icon-pencil             { background-position: 0      -72px; }
+.icon-map-marker         { background-position: -24px  -72px; }
+.icon-adjust             { background-position: -48px  -72px; }
+.icon-tint               { background-position: -72px  -72px; }
+.icon-edit               { background-position: -96px  -72px; }
+.icon-share              { background-position: -120px -72px; }
+.icon-check              { background-position: -144px -72px; }
+.icon-move               { background-position: -168px -72px; }
+.icon-step-backward      { background-position: -192px -72px; }
+.icon-fast-backward      { background-position: -216px -72px; }
+.icon-backward           { background-position: -240px -72px; }
+.icon-play               { background-position: -264px -72px; }
+.icon-pause              { background-position: -288px -72px; }
+.icon-stop               { background-position: -312px -72px; }
+.icon-forward            { background-position: -336px -72px; }
+.icon-fast-forward       { background-position: -360px -72px; }
+.icon-step-forward       { background-position: -384px -72px; }
+.icon-eject              { background-position: -408px -72px; }
+.icon-chevron-left       { background-position: -432px -72px; }
+.icon-chevron-right      { background-position: -456px -72px; }
 
-.icon-tag
-  background-position: 0      -48px
-.icon-tags
-  background-position: -25px  -48px // 1px off
-.icon-book
-  background-position: -48px  -48px
-.icon-bookmark
-  background-position: -72px  -48px
-.icon-print
-  background-position: -96px  -48px
-.icon-camera
-  background-position: -120px -48px
-.icon-font
-  background-position: -144px -48px
-.icon-bold
-  background-position: -167px -48px // 1px off
-.icon-italic
-  background-position: -192px -48px
-.icon-text-height
-  background-position: -216px -48px
-.icon-text-width
-  background-position: -240px -48px
-.icon-align-left
-  background-position: -264px -48px
-.icon-align-center
-  background-position: -288px -48px
-.icon-align-right
-  background-position: -312px -48px
-.icon-align-justify
-  background-position: -336px -48px
-.icon-list
-  background-position: -360px -48px
-.icon-indent-left
-  background-position: -384px -48px
-.icon-indent-right
-  background-position: -408px -48px
-.icon-facetime-video
-  background-position: -432px -48px
-.icon-picture
-  background-position: -456px -48px
+.icon-plus-sign          { background-position: 0      -96px; }
+.icon-minus-sign         { background-position: -24px  -96px; }
+.icon-remove-sign        { background-position: -48px  -96px; }
+.icon-ok-sign            { background-position: -72px  -96px; }
+.icon-question-sign      { background-position: -96px  -96px; }
+.icon-info-sign          { background-position: -120px -96px; }
+.icon-screenshot         { background-position: -144px -96px; }
+.icon-remove-circle      { background-position: -168px -96px; }
+.icon-ok-circle          { background-position: -192px -96px; }
+.icon-ban-circle         { background-position: -216px -96px; }
+.icon-arrow-left         { background-position: -240px -96px; }
+.icon-arrow-right        { background-position: -264px -96px; }
+.icon-arrow-up           { background-position: -289px -96px; } // 1px off
+.icon-arrow-down         { background-position: -312px -96px; }
+.icon-share-alt          { background-position: -336px -96px; }
+.icon-resize-full        { background-position: -360px -96px; }
+.icon-resize-small       { background-position: -384px -96px; }
+.icon-plus               { background-position: -408px -96px; }
+.icon-minus              { background-position: -433px -96px; }
+.icon-asterisk           { background-position: -456px -96px; }
 
-.icon-pencil
-  background-position: 0      -72px
-.icon-map-marker
-  background-position: -24px  -72px
-.icon-adjust
-  background-position: -48px  -72px
-.icon-tint
-  background-position: -72px  -72px
-.icon-edit
-  background-position: -96px  -72px
-.icon-share
-  background-position: -120px -72px
-.icon-check
-  background-position: -144px -72px
-.icon-move
-  background-position: -168px -72px
-.icon-step-backward
-  background-position: -192px -72px
-.icon-fast-backward
-  background-position: -216px -72px
-.icon-backward
-  background-position: -240px -72px
-.icon-play
-  background-position: -264px -72px
-.icon-pause
-  background-position: -288px -72px
-.icon-stop
-  background-position: -312px -72px
-.icon-forward
-  background-position: -336px -72px
-.icon-fast-forward
-  background-position: -360px -72px
-.icon-step-forward
-  background-position: -384px -72px
-.icon-eject
-  background-position: -408px -72px
-.icon-chevron-left
-  background-position: -432px -72px
-.icon-chevron-right
-  background-position: -456px -72px
+.icon-exclamation-sign   { background-position: 0      -120px; }
+.icon-gift               { background-position: -24px  -120px; }
+.icon-leaf               { background-position: -48px  -120px; }
+.icon-fire               { background-position: -72px  -120px; }
+.icon-eye-open           { background-position: -96px  -120px; }
+.icon-eye-close          { background-position: -120px -120px; }
+.icon-warning-sign       { background-position: -144px -120px; }
+.icon-plane              { background-position: -168px -120px; }
+.icon-calendar           { background-position: -192px -120px; }
+.icon-random             { background-position: -216px -120px; width: 16px; }
+.icon-comment            { background-position: -240px -120px; }
+.icon-magnet             { background-position: -264px -120px; }
+.icon-chevron-up         { background-position: -288px -120px; }
+.icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
+.icon-retweet            { background-position: -336px -120px; }
+.icon-shopping-cart      { background-position: -360px -120px; }
+.icon-folder-close       { background-position: -384px -120px; }
+.icon-folder-open        { background-position: -408px -120px; width: 16px; }
+.icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
+.icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off
 
-.icon-plus-sign
-  background-position: 0      -96px
-.icon-minus-sign
-  background-position: -24px  -96px
-.icon-remove-sign
-  background-position: -48px  -96px
-.icon-ok-sign
-  background-position: -72px  -96px
-.icon-question-sign
-  background-position: -96px  -96px
-.icon-info-sign
-  background-position: -120px -96px
-.icon-screenshot
-  background-position: -144px -96px
-.icon-remove-circle
-  background-position: -168px -96px
-.icon-ok-circle
-  background-position: -192px -96px
-.icon-ban-circle
-  background-position: -216px -96px
-.icon-arrow-left
-  background-position: -240px -96px
-.icon-arrow-right
-  background-position: -264px -96px
-.icon-arrow-up
-  background-position: -289px -96px // 1px off
-.icon-arrow-down
-  background-position: -312px -96px
-.icon-share-alt
-  background-position: -336px -96px
-.icon-resize-full
-  background-position: -360px -96px
-.icon-resize-small
-  background-position: -384px -96px
-.icon-plus
-  background-position: -408px -96px
-.icon-minus
-  background-position: -433px -96px
-.icon-asterisk
-  background-position: -456px -96px
-
-.icon-exclamation-sign
-  background-position: 0      -120px
-.icon-gift
-  background-position: -24px  -120px
-.icon-leaf
-  background-position: -48px  -120px
-.icon-fire
-  background-position: -72px  -120px
-.icon-eye-open
-  background-position: -96px  -120px
-.icon-eye-close
-  background-position: -120px -120px
-.icon-warning-sign
-  background-position: -144px -120px
-.icon-plane
-  background-position: -168px -120px
-.icon-calendar
-  background-position: -192px -120px
-.icon-random
-  background-position: -216px -120px
-.icon-comment
-  background-position: -240px -120px
-.icon-magnet
-  background-position: -264px -120px
-.icon-chevron-up
-  background-position: -288px -120px
-.icon-chevron-down
-  background-position: -313px -119px // 1px off
-.icon-retweet
-  background-position: -336px -120px
-.icon-shopping-cart
-  background-position: -360px -120px
-.icon-folder-close
-  background-position: -384px -120px
-.icon-folder-open
-  background-position: -408px -120px
-.icon-resize-vertical
-  background-position: -432px -119px
-.icon-resize-horizontal
-  background-position: -456px -118px
+.icon-hdd                     { background-position: 0      -144px; }
+.icon-bullhorn                { background-position: -24px  -144px; }
+.icon-bell                    { background-position: -48px  -144px; }
+.icon-certificate             { background-position: -72px  -144px; }
+.icon-thumbs-up               { background-position: -96px  -144px; }
+.icon-thumbs-down             { background-position: -120px -144px; }
+.icon-hand-right              { background-position: -144px -144px; }
+.icon-hand-left               { background-position: -168px -144px; }
+.icon-hand-up                 { background-position: -192px -144px; }
+.icon-hand-down               { background-position: -216px -144px; }
+.icon-circle-arrow-right      { background-position: -240px -144px; }
+.icon-circle-arrow-left       { background-position: -264px -144px; }
+.icon-circle-arrow-up         { background-position: -288px -144px; }
+.icon-circle-arrow-down       { background-position: -312px -144px; }
+.icon-globe                   { background-position: -336px -144px; }
+.icon-wrench                  { background-position: -360px -144px; }
+.icon-tasks                   { background-position: -384px -144px; }
+.icon-filter                  { background-position: -408px -144px; }
+.icon-briefcase               { background-position: -432px -144px; }
+.icon-fullscreen              { background-position: -456px -144px; }
diff --git a/styl/tables.styl b/styl/tables.styl
index dbb946c2..fc14ed73 100644
--- a/styl/tables.styl
+++ b/styl/tables.styl
@@ -1,101 +1,141 @@
 //
-// Tables.styl
-// Tables for, you guessed it, tabular data
-// ----------------------------------------
-
+// Tables
+// --------------------------------------------------
 
 // BASE TABLES
 // -----------------
 
-table
-  max-width: 100%
-  border-collapse: collapse
-  border-spacing: 0
-
+table {
+  max-width: 100%;
+  background-color: $tableBackground;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
 // BASELINE STYLES
 // ---------------
 
-.table
-  width: 100%
-  margin-bottom: $baseLineHeight
+.table {
+  width: 100%;
+  margin-bottom: $baseLineHeight;
   // Cells
   th,
-  td
-    padding: 8px
-    line-height: $baseLineHeight
-    text-align: left
-    vertical-align: top
-    border-top: 1px solid #ddd
-
-  th
-    font-weight: bold
-
+  td {
+    padding: 8px;
+    line-height: $baseLineHeight;
+    text-align: left;
+    vertical-align: top;
+    border-top: 1px solid $tableBorder;
+  }
+  th {
+    font-weight: bold;
+  }
   // Bottom align for column headings
-  thead th
-    vertical-align: bottom
-
+  thead th {
+    vertical-align: bottom;
+  }
   // Remove top border from thead by default
-  thead:first-child tr th,
-  thead:first-child tr td
-    border-top: 0
-
+  caption + thead tr:first-child th,
+  caption + thead tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + thead tr:first-child td,
+  thead:first-child tr:first-child th,
+  thead:first-child tr:first-child td {
+    border-top: 0;
+  }
   // Account for multiple tbody instances
-  tbody + tbody
-    border-top: 2px solid #ddd
-
+  tbody + tbody {
+    border-top: 2px solid $tableBorder;
+  }
 
+  // Nesting
+  .table {
+    background-color: $bodyBackground;
+  }
+}
 
 
 
 // CONDENSED TABLE W/ HALF PADDING
 // -------------------------------
 
-.table-condensed
+.table-condensed {
   th,
-  td
-    padding: 4px 5px
-
-
+  td {
+    padding: 4px 5px;
+  }
+}
 
 
 // BORDERED VERSION
 // ----------------
 
-.table-bordered
-  border: 1px solid #ddd
-  border-collapse: separate // Done so we can round those corners!
-  *border-collapse: collapsed // IE7 can't round corners anyway
-  $border-radius(4px)
-  th + th,
-  td + td,
-  th + td,
-  td + th
-    border-left: 1px solid #ddd
-
+.table-bordered {
+  border: 1px solid $tableBorder;
+  border-collapse: separate; // Done so we can round those corners!
+  *border-collapse: collapse; // IE7 can't round corners anyway
+  border-left: 0;
+  $border-radius($baseBorderRadius);
+  th,
+  td {
+    border-left: 1px solid $tableBorder;
+  }
   // Prevent a double border
+  caption + thead tr:first-child th,
+  caption + tbody tr:first-child th,
+  caption + tbody tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + tbody tr:first-child th,
+  colgroup + tbody tr:first-child td,
   thead:first-child tr:first-child th,
   tbody:first-child tr:first-child th,
-  tbody:first-child tr:first-child td
-    border-top: 0
-
+  tbody:first-child tr:first-child td {
+    border-top: 0;
+  }
   // For first th or td in the first row in the first thead or tbody
-  thead:first-child tr:first-child th:first-child,
-  tbody:first-child tr:first-child td:first-child
-    $border-radius(4px 0 0 0)
-
-  thead:first-child tr:first-child th:last-child,
-  tbody:first-child tr:first-child td:last-child
-    $border-radius(0 4px 0 0)
-
-  // For first th or td in the first row in the first thead or tbody
-  thead:last-child tr:last-child th:first-child,
-  tbody:last-child tr:last-child td:first-child
-    $border-radius(0 0 0 4px)
-
-  thead:last-child tr:last-child th:last-child,
-  tbody:last-child tr:last-child td:last-child
-    $border-radius(0 0 4px 0)
+  thead:first-child tr:first-child > th:first-child,
+  tbody:first-child tr:first-child > td:first-child {
+    $border-top-left-radius($baseBorderRadius);
+  }
+  thead:first-child tr:first-child > th:last-child,
+  tbody:first-child tr:first-child > td:last-child {
+    $border-top-right-radius($baseBorderRadius);
+  }
+  // For first th or td in the last row in the last thead or tbody
+  thead:last-child tr:last-child > th:first-child,
+  tbody:last-child tr:last-child > td:first-child,
+  tfoot:last-child tr:last-child > td:first-child {
+    $border-bottom-left-radius($baseBorderRadius);
+  }
+  thead:last-child tr:last-child > th:last-child,
+  tbody:last-child tr:last-child > td:last-child,
+  tfoot:last-child tr:last-child > td:last-child {
+    $border-bottom-right-radius($baseBorderRadius);
+  }
+
+  // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
+  tfoot + tbody:last-child tr:last-child td:first-child {
+    $border-bottom-left-radius(0);
+  }
+  tfoot + tbody:last-child tr:last-child td:last-child {
+    $border-bottom-right-radius(0);
+  }
+
+
+  // Special fixes to round the left border on the first td/th
+  caption + thead tr:first-child th:first-child,
+  caption + tbody tr:first-child td:first-child,
+  colgroup + thead tr:first-child th:first-child,
+  colgroup + tbody tr:first-child td:first-child {
+    $border-top-left-radius($baseBorderRadius);
+  }
+  caption + thead tr:first-child th:last-child,
+  caption + tbody tr:first-child td:last-child,
+  colgroup + thead tr:first-child th:last-child,
+  colgroup + tbody tr:first-child td:last-child {
+    $border-top-right-radius($baseBorderRadius);
+  }
+}
 
 
 
@@ -104,60 +144,115 @@ table
 // --------------
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped
-  tbody
-    tr:nth-child(odd) td,
-    tr:nth-child(odd) th
-      background-color: #f9f9f9
-
-
-
+.table-striped {
+  tbody {
+    > tr:nth-child(odd) > td,
+    > tr:nth-child(odd) > th {
+      background-color: $tableBackgroundAccent;
+    }
+  }
+}
 
 
 // HOVER EFFECT
 // ------------
 // Placed here since it has to come after the potential zebra striping
-.table
-  tbody tr:hover td,
-  tbody tr:hover th
-    background-color: #f5f5f5
-
-
+.table-hover {
+  tbody {
+    tr:hover td,
+    tr:hover th {
+      background-color: $tableBackgroundHover;
+    }
+  }
+}
 
 
 // TABLE CELL SIZING
 // -----------------
 
-// Change the columns
-$tableColumns($columnSpan = 1)
-  float: none
-  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16
-  margin-left: 0
-
-table
-  .span1
-    $tableColumns(1)
-  .span2
-    $tableColumns(2)
-  .span3
-    $tableColumns(3)
-  .span4
-    $tableColumns(4)
-  .span5
-    $tableColumns(5)
-  .span6
-    $tableColumns(6)
-  .span7
-    $tableColumns(7)
-  .span8
-    $tableColumns(8)
-  .span9
-    $tableColumns(9)
-  .span10
-    $tableColumns(10)
-  .span11
-    $tableColumns(11)
-  .span12
-    $tableColumns(12)
-
-
+// Reset default grid behavior
+table td[class*="span"],
+table th[class*="span"],
+.row-fluid table td[class*="span"],
+.row-fluid table th[class*="span"] {
+  display: table-cell;
+  float: none; // undo default grid column styles
+  margin-left: 0; // undo default grid column styles
+}
+
+// Change the column widths to account for td/th padding
+.table td, .table th {
+  &.span1     {
+    $tableColumns(1);
+  }
+  &.span2     {
+    $tableColumns(2);
+  }
+  &.span3     {
+    $tableColumns(3);
+  }
+  &.span4     {
+    $tableColumns(4);
+  }
+  &.span5     {
+    $tableColumns(5);
+  }
+  &.span6     {
+    $tableColumns(6);
+  }
+  &.span7     {
+    $tableColumns(7);
+  }
+  &.span8     {
+    $tableColumns(8);
+  }
+  &.span9     {
+    $tableColumns(9);
+  }
+  &.span10    {
+    $tableColumns(10);
+  }
+  &.span11    {
+    $tableColumns(11);
+  }
+  &.span12    {
+    $tableColumns(12);
+  }
+}
+
+
+
+// TABLE BACKGROUNDS
+// -----------------
+// Exact selectors below required to override .table-striped
+
+.table tbody tr {
+  &.success td {
+    background-color: $successBackground;
+  }
+  &.error td {
+    background-color: $errorBackground;
+  }
+  &.warning td {
+    background-color: $warningBackground;
+  }
+  &.info td {
+    background-color: $infoBackground;
+  }
+}
+
+// Hover states for .table-hover
+.table-hover tbody tr {
+  &.success:hover td {
+    background-color: darken($successBackground, 5%);
+  }
+  &.error:hover td {
+    background-color: darken($errorBackground, 5%);
+  }
+  &.warning:hover td {
+    background-color: darken($warningBackground, 5%);
+  }
+  &.info:hover td {
+    background-color: darken($infoBackground, 5%);
+  }
+}
diff --git a/styl/tests/css-tests.css b/styl/tests/css-tests.css
new file mode 100644
index 00000000..9edaf69b
--- /dev/null
+++ b/styl/tests/css-tests.css
@@ -0,0 +1,139 @@
+/*!
+ * Bootstrap CSS Tests
+ */
+
+
+/* Remove background image */
+body {
+  background-image: none;
+}
+
+/* Space out subhead */
+.subhead {
+  margin-bottom: 36px;
+}
+/*h4 {
+  margin-bottom: 5px;
+}
+*/
+
+.type-test {
+  margin-bottom: 20px;
+  padding: 0 20px 20px;
+  background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+  background-color: rgba(255,0,0,.2);
+}
+
+
+/* colgroup tests */
+.col1 {
+  background-color: rgba(255,0,0,.1);
+}
+.col2 {
+  background-color: rgba(0,255,0,.1);
+}
+.col3 {
+  background-color: rgba(0,0,255,.1);
+}
+
+
+/* Fluid row inputs */
+#rowInputs .row > [class*=span],
+#fluidRowInputs .row-fluid > [class*=span] {
+  background-color: rgba(255,0,0,.1);
+}
+
+
+/* Fluid grid */
+.fluid-grid {
+  margin-bottom: 45px;
+}
+.fluid-grid .row {
+  height: 40px;
+  padding-top: 10px;
+  margin-top: 10px;
+  color: #ddd;
+  text-align: center;
+}
+.fluid-grid .span1 {
+  background-color: #999;
+}
+
+
+/* Gradients */
+
+[class^="gradient-"] {
+  width: 100%;
+  height: 400px;
+  margin: 20px 0;
+  -webkit-border-radius: 5px;
+     -moz-border-radius: 5px;
+          border-radius: 5px;
+}
+
+.gradient-horizontal {
+  background-color: #333333;
+  background-image: -moz-linear-gradient(left, #555555, #333333);
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
+  background-image: -webkit-linear-gradient(left, #555555, #333333);
+  background-image: -o-linear-gradient(left, #555555, #333333);
+  background-image: linear-gradient(to right, #555555, #333333);
+  background-repeat: repeat-x;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
+}
+
+.gradient-vertical {
+  background-color: #474747;
+  background-image: -moz-linear-gradient(top, #555555, #333333);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
+  background-image: -webkit-linear-gradient(top, #555555, #333333);
+  background-image: -o-linear-gradient(top, #555555, #333333);
+  background-image: linear-gradient(to bottom, #555555, #333333);
+  background-repeat: repeat-x;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
+}
+
+.gradient-directional {
+  background-color: #333333;
+  background-image: -moz-linear-gradient(45deg, #555555, #333333);
+  background-image: -webkit-linear-gradient(45deg, #555555, #333333);
+  background-image: -o-linear-gradient(45deg, #555555, #333333);
+  background-image: linear-gradient(45deg, #555555, #333333);
+  background-repeat: repeat-x;
+}
+
+.gradient-vertical-three {
+  background-color: #8940a5;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
+  background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+  background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
+  background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+  background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+  background-repeat: no-repeat;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
+}
+
+.gradient-radial {
+  background-color: #333333;
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
+  background-image: -webkit-radial-gradient(circle, #555555, #333333);
+  background-image: -moz-radial-gradient(circle, #555555, #333333);
+  background-image: -o-radial-gradient(circle, #555555, #333333);
+  background-repeat: no-repeat;
+}
+
+.gradient-striped {
+  background-color: #555555;
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
\ No newline at end of file
diff --git a/styl/tests/css-tests.html b/styl/tests/css-tests.html
new file mode 100644
index 00000000..035ba8bd
--- /dev/null
+++ b/styl/tests/css-tests.html
@@ -0,0 +1,1345 @@
+
+
+  
+    
+    CSS Tests · Twitter Bootstrap
+    
+    
+    
+
+    
+    
+    
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+      
+                    
+                                   
+  
+
+  
+
+
+  
+    
            
+      
            
+        
            
+          Bootstrap
+        
            
+      
            
+    
            
+
+
+
+
            
+  
            
+    
            CSS Tests
            
+    
            One stop shop for quick debugging and edge-case tests of CSS.
            
+  
            
+
            
+
+
+
            
+
+  
            
+
+
+
+
+
+
            
+  
            Typography
            
+
            
+
+
            
+  
            
+    
            
+      
            h1. Heading 1
            
+      
            h2. Heading 2
            
+      
            h3. Heading 3
            
+      
            h4. Heading 4
            
+      
            h5. Heading 5
            
+      
            h6. Heading 6
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+    
            
+  
            
+  
            
+    
            
+      
            h1. Heading 1
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+      
            h2. Heading 2
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+      
            h3. Heading 3
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+      
            h4. Heading 4
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+      
            h5. Heading 5
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+      
            h6. Heading 6
            
+      
            Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
+    
            
+  
            
+
            
+
+
+
+
+
+
            
+  
            Responsive images
            
+
            
+
+
            
+  
            
+    
+  
            
+  
            
+    
+  
            
+  
            
+    
+  
            
+
            
+
+
            
+
+
            
+  
            
+    
+  
            
+  
            
+    
+  
            
+  
            
+    
+  
            
+
            
+
+

            
+
+
+
+
+
+
+
            
+  
            Fluid grids
            
+
            
+
+
            
+  
            
+    
            12
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            11
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            1
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            10
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            2
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            9
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            3
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            8
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            4
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            7
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            5
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+  
            
+    
            6
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+    
            6
+      
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+        
            1
            
+      
            
+    
            
+  
            
+
             
+
+
+
+
+
+
            
+  
            Tables
            
+
            
+
+
            
+  
            
+    
            Bordered without thead
            
+    
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+    
            123
            123
            123
            
+    
            Bordered without thead, with caption
            
+    
+      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+    
            Table caption
            123
            123
            123
            
+    
            Bordered without thead, with colgroup
            
+    
+      +        +        +        +      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+      
+    
            




            123
            123
            123
            369
            
+    
            Bordered with thead, with colgroup
            
+    
+      +        +        +        +      
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+      
+    
            




            ABC
            123
            123
            123
            369
            
+  
            
+  
            
+    
            Bordered with thead and caption
            
+    
+      
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+      
+    
            Table caption
            123
            123
            123
            123
            369
            
+    
            Bordered with rowspan and colspan
            
+    
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+        
+        
+          
+        
+      
+    
            123
            1 and 23
            123
            13
            2 and 3
            
+  
            
+
            
+
+
+
            Grid sizing
            
+
            
+  
            
+    
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+        
+        
+          
+        
+      
+    
            123
            1 and 23
            123
            13
            2 and 3
            
+  
            
+
            
+
+
            Nesting and striping
            
+
+  
+    
+      
+    
+  
+  
+    
+      
+    
+  
+
            Test
            
+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
            TestTest
            
+                test
+              
+                test
+              
            
+                test
+              
+                test
+              
            
+                test
+              
+                test
+              
            
+      
            
+
+
            Fluid grid sizing
            
+
            
+  
            
+    
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+        
+        
+          
+        
+      
+    
            123
            1 and 23
            123
            13
            2 and 3
            
+  
            
+
            
+
+
+
+
+
+
            
+  
            Forms
            
+
            
+
+
            Buttons and button groups
            
+
            
+  
+  
+  
            
+    
+       User
+      
+    
+    
+  
            
+
            
+
+
            Horizontal form errors
            
+
            
+  
            
+    
+    
            
+      
+      Please correct the error
+    
            
+  
            
+
            
+
+
            
+  
            
+    
            Prepend and append on inputs
            
+    
            
+      
            
+        
            
+          @
+          
+        
            
+      
            
+      
            
+        
            
+          
+          @
+        
            
+      
            
+      
            
+        
            
+          $
+          
+          .00
+        
            
+      
            
+    
            
+  
            
+  
            
+    
            Prepend and append with uneditable
            
+    
            
+      
            
+        $
+        Some value here
+      
            
+      
            
+        Some value here
+        .00
+      
            
+      
            
+        $
+        Some value here
+        .00
+      
            
+    
            
+  
            
+  
            
+    
            Prepend with type="submit"
            
+    
            
+      
            
+        
+        
+      
            
+    
            
+    
            
+      
+      
+    
            
+    
            
+      
+      
+      
+    
            
+  
            
+
            
+
+
            Fluid prepended and appended inputs
            
+
            
+  
            
+    
            
+      
            
+        
            
+          @
+        
            
+      
            
+      
            
+        
            
+          @
+        
            
+      
            
+      
            
+        
            
+          $.00
+        
            
+      
            
+    
            
+  
            
+
            
+
+
            Fixed row with inputs
            
+
            Inputs should not extend past the light red background, set on their parent, a .span* column.
            
+
+
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+
            
+
            
+
+
            Fluid row with inputs
            
+
            Inputs should not extend past the light red background, set on their parent, a .span* column.
            
+
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+  
            
+    
            
+      
+    
            
+  
            
+
            
+
+
            
+
+
            Inline form in fluid row
            
+
+
            
+  
            
+    
            
+      
+      
+      
+      
+    
            
+  
            
+
            
+
+
+
            
+
+
+
            Fluid textarea at .span12
            
+
            
+  
            
+    
+  
            
+
            
+
+
+
            
+
+
+
            Selects
            
+
            
+  
+
            
+
+
+
            
+
+
+
+
+
+
+
            
+  
            Dropdowns
            
+
            
+
+
            Dropdown link with hash URL
            
+
+
+
            Dropdown link with custom URL and data-target
            
+
+
+
            Dropdown on a button
            
+
+
+
            
+
+
+
+
+
            
+  
            Thumbnails
            
+
            
+
+
            Default thumbnails (no grid sizing)
            
+
              
+  
            • 
+    
+  
              • 
+  
            • 
+    
+  
              • 
+  
            • 
+    
+  
              • 
+  
            • 
+    
+  
              • 
+
            
+
+
+
+
            Standard grid sizing
            
+
+
+
            Fluid thumbnails
            
+
            
+  
            
+    
+  
            
+
            
+
+
+
+
+
+
            
+  
            Tabs
            
+
            
+
+
            
+  
+  
            
+    
            
+      
            I'm in Section 1.
            
+
+      
            
+        
+        
            
+          
            
+            
            I'm in Section 1.1.
            
+          
            
+          
            
+            
            I'm in Section 1.2.
            
+          
            
+          
            
+            
            I'm in Section 1.3.
            
+          
            
+        
            
+      
            
+    
            
+    
            
+      
            Howdy, I'm in Section 2.
            
+    
            
+    
            
+      
            What up girl, this is Section 3.
            
+    
            
+  
            
+
             
+
+
            
+
+
+
+
+
            
+  
            Labels
            
+
            
+
+
            
+  
            
+    
            Inline label
            
+    
            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
            
+  
            
+  
            
+    
            
+      
+       Hey! Read this.
+    
            
+  
            
+  
            
+    
+    
+  
            
+
            
+
+
            
+
+
+
+
+
            
+  
            Buttons
            
+
            
+
+
+  
+    
+      
+      
+    
+  
+
            
+        Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+      
+        
            
+          
+          
+          
+          
+        
            
+      
            
+
+
            Mini buttons: text and icon
            
+
            
+  
+  
+
            
+
+
            
+
+
+
+
+
+
            
+  
            Responsive utility classes
            
+
            
+
+
            Visible on...
            
+
              
+  
            • Phone✔ Phone
              • 
+  
            • Tablet✔ Tablet
              • 
+  
            • Desktop✔ Desktop
              • 
+
            
+
              
+  
            • Phone + Tablet✔ Phone + Tablet
              • 
+  
            • Tablet + Desktop✔ Tablet + Desktop
              • 
+  
            • All✔ All
              • 
+
            
+
+
            Hidden on...
            
+
              
+  
            • Phone✔ Phone
              • 
+  
            • Tablet✔ Tablet
              • 
+  
            • Desktop✔ Desktop
              • 
+
            
+
              
+  
            • Phone + Tablet✔ Phone + Tablet
              • 
+  
            • Tablet + Desktop✔ Tablet + Desktop
              • 
+  
            • All✔ All
              • 
+
            
+
+
+
+
+
+
            
+  
            Gradients
            
+
            
+
+
            Horizontal
            
+
            
+
+
            Vertical
            
+
            
+
+
            Directional
            
+
            
+
+
            Three colors
            
+
            
+
+
            Radial
            
+
            
+
+
            Striped
            
+
            
+
+
+
+
+
+
+
+    
            
+
+
+
+    
+    
+
+
            
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+
+  
+
diff --git a/styl/tests/forms.html b/styl/tests/forms.html
new file mode 100644
index 00000000..a63d728a
--- /dev/null
+++ b/styl/tests/forms.html
@@ -0,0 +1,179 @@
+
+
+  
+    
+    Bootstrap, from Twitter
+    
+    
+    
+
+    
+    
+    
+    
+
+    
+    
+
+    
+    
+    
+    
+    
+    
+  
+
+  
+
+    
            
+
+      
            
+        
            Form controls
            
+      
            
+
+      
            
+        
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+        
            
+        
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+        
            
+        
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+          
            
+
+          
+          
+
+        
            
+      
            
+
+    
             
+
+  
+
diff --git a/styl/tests/navbar.html b/styl/tests/navbar.html
new file mode 100644
index 00000000..d5ad4784
--- /dev/null
+++ b/styl/tests/navbar.html
@@ -0,0 +1,107 @@
+
+
+  
+    
+    Bootstrap, from Twitter
+    
+    
+    
+
+    
+    
+    
+    
+
+    
+    
+
+    
+    
+    
+      
+                    
+                                   
+  
+
+  
+
+    
            
+
+      
+      
            
+        
            
+          
            
+            
+              
+              
+              
+            
+            Project name
+            
            
+              
+              
+            
            
+          
            
+        
            
+      
            
+
+      
+      
            
+        
            Navbar example
            
+        
            This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
            
+        
            
+          View navbar docs »
+        
            
+      
            
+
+    
             
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+  
+
diff --git a/styl/thumbnails.styl b/styl/thumbnails.styl
index 69538c91..f827770a 100644
--- a/styl/thumbnails.styl
+++ b/styl/thumbnails.styl
@@ -1,36 +1,52 @@
-// THUMBNAILS
-// ----------
-
-.thumbnails
-  margin-left: -$gridGutterWidth
-  list-style: none
-  $clearfix()
-
-.thumbnails > li
-  float: left
-  margin: 0 0 $baseLineHeight $gridGutterWidth
-
-.thumbnail
-  display: block
-  padding: 4px
-  line-height: 1
-  border: 1px solid #ddd
-  $border-radius(4px)
-  $box-shadow(0 1px 1px rgba(0,0,0,.075))
-
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
+
+// Make wrapper ul behave like the grid
+.thumbnails {
+  margin-left: -$gridGutterWidth;
+  list-style: none;
+  $clearfix();
+}
+// Fluid rows have no left margin
+.row-fluid .thumbnails {
+  margin-left: 0;
+}
+
+// Float li to make thumbnails appear in a row
+.thumbnails > li {
+  float: left; // Explicity set the float since we don't require .span* classes
+  margin-bottom: $baseLineHeight;
+  margin-left: $gridGutterWidth;
+}
+
+// The actual thumbnail (can be `a` or `div`)
+.thumbnail {
+  display: block;
+  padding: 4px;
+  line-height: $baseLineHeight;
+  border: 1px solid #ddd;
+  $border-radius($baseBorderRadius);
+  $box-shadow(0 1px 3px rgba(0,0,0,.055));
+  $transition(all .2s ease-in-out);
+}
 // Add a hover state for linked versions only
-a.thumbnail:hover
-  border-color: $linkColor
-  $box-shadow(0 1px 4px rgba(0,105,214,.25))
+a.thumbnail:hover {
+  border-color: $linkColor;
+  $box-shadow(0 1px 4px rgba(0,105,214,.25));
+}
 
 // Images and captions
-.thumbnail > img
-  display: block
-  max-width: 100%
-  margin-left: auto
-  margin-right: auto
-
-.thumbnail .caption
-  padding: 9px
-
-
+.thumbnail > img {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.thumbnail .caption {
+  padding: 9px;
+  color: @gray;
+}
diff --git a/styl/tooltip.styl b/styl/tooltip.styl
index edb0995f..18f78828 100644
--- a/styl/tooltip.styl
+++ b/styl/tooltip.styl
@@ -1,45 +1,80 @@
-// TOOLTIP
-// ------=
+//
+// Tooltips
+// --------------------------------------------------
 
-.tooltip
-  position: absolute
-  z-index: $zindexTooltip
-  display: block
-  visibility: visible
-  padding: 5px
-  font-size: 11px
-  $opacity(0)
-  &.in
-    $opacity(80)
-  &.top
-    margin-top:  -2px
-  &.right
-    margin-left:  2px
-  &.bottom
-    margin-top:   2px
-  &.left
-    margin-left: -2px
-  &.top .tooltip-arrow
-    $popoverArrow-top()
-  &.left .tooltip-arrow
-    $popoverArrow-left()
-  &.bottom .tooltip-arrow
-    $popoverArrow-bottom()
-  &.right .tooltip-arrow
-    $popoverArrow-right()
 
-.tooltip-inner
-  max-width: 200px
-  padding: 3px 8px
-  color: $white
-  text-align: center
-  text-decoration: none
-  background-color: $black
-  $border-radius(4px)
-
-.tooltip-arrow
-  position: absolute
-  width: 0
-  height: 0
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: $zindexTooltip;
+  display: block;
+  visibility: visible;
+  padding: 5px;
+  font-size: 11px;
+  $opacity(0);
+  &.in     {
+      $opacity(80);
+  }
+  &.top    {
+      margin-top:  -3px;
+  }
+  &.right  {
+      margin-left:  3px;
+  }
+  &.bottom {
+      margin-top:   3px;
+  }
+  &.left   {
+      margin-left: -3px;
+  }
+}
 
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: 200px;
+  padding: 3px 8px;
+  color: $tooltipColor;
+  text-align: center;
+  text-decoration: none;
+  background-color: $tooltipBackground;
+  $border-radius($baseBorderRadius);
+}
 
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-top-color: $tooltipArrowColor;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-right-color: $tooltipArrowColor;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-left-color: @tooltipArrowColor;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-bottom-color: $tooltipArrowColor;
+  }
+}
diff --git a/styl/type.styl b/styl/type.styl
index 4d22a009..a7266954 100644
--- a/styl/type.styl
+++ b/styl/type.styl
@@ -1,219 +1,240 @@
-// Typography.styl
-// Headings, body text, lists, code, and more for a versatile and durable typography system
-// ----------------------------------------------------------------------------------------
+//
+// Typography
+// --------------------------------------------------
 
 
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
 
-p
-  margin: 0 0 ($baseLineHeight/2)
-  font-family: $baseFontFamily
-  font-size: $baseFontSize
-  line-height: $baseLineHeight
-  small
-    font-size: $baseFontSize - 2
-    color: $grayLight
+p {
+  margin: 0 0 ($baseLineHeight / 2);
+}
+.lead {
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  font-weight: 200;
+  line-height: $baseLineHeight * 1.5;
+}
 
 
-.lead
-  margin-bottom: $baseLineHeight
-  font-size: 20px
-  font-weight: 200
-  line-height: $baseLineHeight * 1.5
+// Emphasis & misc
+// -------------------------
 
+// Ex: 14px base font * 85% = about 12px
+small   { font-size: 85%; }
 
-// HEADINGS
-// --------
+strong  { font-weight: bold; }
+em      { font-style: italic; }
+cite    { font-style: normal; }
 
-h1, h2, h3, h4, h5, h6
-  margin: 0
-  font-weight: bold
-  color: $grayDark
-  text-rendering: optimizelegibility // Fix the character spacing for headings
-  small
-    font-weight: normal
-    color: $grayLight
+// Utility classes
+.muted               { color: $grayLight; }
+a.muted:hover        { color: darken($grayLight, 10%); }
 
+.text-warning        { color: $warningText; }
+a.text-warning:hover { color: darken($warningText, 10%); }
 
-h1
-  font-size: 30px
-  line-height: $baseLineHeight * 2
-  small
-    font-size: 18px
+.text-error          { color: $errorText; }
+a.text-error:hover   { color: darken($errorText, 10%); }
 
+.text-info           { color: $infoText; }
+a.text-info:hover    { color: darken($infoText, 10%); }
 
-h2
-  font-size: 24px
-  line-height: $baseLineHeight * 2
-  small
-    font-size: 18px
+.text-success        { color: $successText; }
+a.text-success:hover { color: darken($successText, 10%); }
 
 
-h3
-  line-height: $baseLineHeight * 1.5
-  font-size: 18px
-  small
-    font-size: 14px
+// Headings
+// -------------------------
 
+h1, h2, h3, h4, h5, h6 {
+  margin: ($baseLineHeight / 2) 0;
+  font-family: $headingsFontFamily;
+  font-weight: $headingsFontWeight;
+  line-height: $baseLineHeight;
+  color: $headingsColor;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
+  small {
+    font-weight: normal;
+    line-height: 1;
+    color: $grayLight;
+  }
+}
 
-h4, h5, h6
-  line-height: $baseLineHeight
+h1,
+h2,
+h3 { line-height: $baseLineHeight * 2; }
 
-h4
-  font-size: 14px
-  small
-    font-size: 12px
+h1 { font-size: $baseFontSize * 2.75; } // ~38px
+h2 { font-size: $baseFontSize * 2.25; } // ~32px
+h3 { font-size: $baseFontSize * 1.75; } // ~24px
+h4 { font-size: $baseFontSize * 1.25; } // ~18px
+h5 { font-size: $baseFontSize; }
+h6 { font-size: $baseFontSize * 0.85; } // ~12px
 
-
-h5
-  font-size: 12px
-
-h6
-  font-size: 11px
-  color: $grayLight
-  text-transform: uppercase
+h1 small { font-size: $baseFontSize * 1.75; } // ~24px
+h2 small { font-size: $baseFontSize * 1.25; } // ~18px
+h3 small { font-size: $baseFontSize; }
+h4 small { font-size: $baseFontSize; }
 
 
 // Page header
-.page-header
-  padding-bottom: $baseLineHeight - 1
-  margin: $baseLineHeight 0
-  border-bottom: 1px solid $grayLighter
+// -------------------------
+.page-header {
+  padding-bottom: ($baseLineHeight / 2) - 1;
+  margin: $baseLineHeight 0 ($baseLineHeight * 1.5);
+  border-bottom: 1px solid $grayLighter;
+}
 
-.page-header h1
-  line-height: 1
+.page-header {
+  padding-bottom: ($baseLineHeight / 2) - 1;
+  margin: $baseLineHeight 0 ($baseLineHeight * 1.5);
+  border-bottom: 1px solid $grayLighter;
+}
 
 
 
-
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
 
 // Unordered and Ordered lists
-ul, ol
-  padding: 0
-  margin: 0 0 ($baseLineHeight/2) 25px
-
+ul, ol {
+  padding: 0;
+  margin: 0 0 ($baseLineHeight/2) 25px;
+}
 ul ul,
 ul ol,
 ol ol,
-ol ul
-  margin-bottom: 0
-
-ul
-  list-style: disc
-
-ol
-  list-style: decimal
-
-li
-  line-height: $baseLineHeight
-
+ol ul {
+  margin-bottom: 0;
+}
+li {
+  line-height: $baseLineHeight;
+}
+
+// Remove default list styles
 ul.unstyled,
-ol.unstyled
-  margin-left: 0
-  list-style: none
-
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
+// Single-line list items
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+  & > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
 
 // Description Lists
-dl
-  margin-bottom: $baseLineHeight
-
+dl {
+  margin-bottom: $baseLineHeight;
+}
 dt,
-dd
-  line-height: $baseLineHeight
-
-dt
-  font-weight: bold
-
-dd
-  margin-left: ($baseLineHeight/2)
-
+dd {
+  line-height: $baseLineHeight;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: $baseLineHeight / 2;
+}
+// Horizontal layout (like forms)
+.dl-horizontal {
+  $clearfix(); // Ensure dl clears floats if empty dd elements present
+  dt {
+    float: left;
+    width: $horizontalComponentOffset - 20;
+    clear: left;
+    text-align: right;
+    $text-overflow();
+  }
+  dd {
+    margin-left: $horizontalComponentOffset;
+  }
+}
 
 // MISC
 // ----
 
 // Horizontal rules
-hr
-  margin: $baseLineHeight 0
-  border: 0
-  border-top: 1px solid $hrBorder
-  border-bottom: 1px solid $white
-
-
-// Emphasis
-strong
-  font-weight: bold
-
-em
-  font-style: italic
-
-.muted
-  color: $grayLight
-
+hr {
+  margin: $baseLineHeight 0;
+  border: 0;
+  border-top: 1px solid $hrBorder;
+  border-bottom: 1px solid $white;
+}
 
 // Abbreviations and acronyms
-abbr
-  font-size: 90%
-  text-transform: uppercase
-  border-bottom: 1px dotted #ddd
-  cursor: help
-
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $grayLight;
+}
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
 
 // Blockquotes
-blockquote
-  padding: 0 0 0 15px
-  margin: 0 0 $baseLineHeight
-  border-left: 5px solid $grayLighter
-  p
-    margin-bottom: 0
-    $font-shorthand(16px,300,$baseLineHeight * 1.25)
-
-  small
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 $baseLineHeight;
+  border-left: 5px solid $grayLighter;
+  p {
+    margin-bottom: 0;
+    $font-shorthand(16px,300,$baseLineHeight * 1.25);
+  }
+  small {
     display: block
-    line-height: $baseLineHeight
-    color: $grayLight
-    &:before
-      content: '\2014 \00A0'
-
-
+    line-height: $baseLineHeight;
+    color: $grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
 
   // Float right with text-align: right
-  &.pull-right
-    float: right
-    padding-left: 0
-    padding-right: 15px
-    border-left: 0
-    border-right: 5px solid $grayLighter
+  &.pull-right {
+    float: right;
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid $grayLighter;
+    border-left: 0;
     p,
-    small
-      text-align: right
-
-
-
+    small {
+      text-align: right;
+    }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
+  }
+}
 
 // Quotes
 q:before,
 q:after,
 blockquote:before,
-blockquote:after
-  content: ""
-
+blockquote:after {
+  content: "";
+}
 
 // Addresses
-address
-  display: block
-  margin-bottom: $baseLineHeight
-  line-height: $baseLineHeight
-  font-style: normal
-
-
-// Misc
-small
-  font-size: 100%
-
-cite
-  font-style: normal
-
-
+address {
+  display: block;
+  margin-bottom: $baseLineHeight;
+  font-style: normal;
+  line-height: $baseLineHeight;
+}
diff --git a/styl/utilities.styl b/styl/utilities.styl
index 6c84f328..314b4ffd 100644
--- a/styl/utilities.styl
+++ b/styl/utilities.styl
@@ -1,24 +1,30 @@
-// UTILITY CLASSES
-// ---------------
+//
+// Utility classes
+// --------------------------------------------------
 
-// Quick floats
-.pull-right
-  float: right
-
-.pull-left
-  float: left
 
+// Quick floats
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
 
 // Toggling content
-.hide
-  display: none
-
-.show
-  display: block
-
+.hide {
+  display: none;
+}
+.show {
+  display: block;
+}
 
 // Visibility
-.invisible
-  visibility: hidden
-
-
+.invisible {
+  visibility: hidden;
+}
+
+// For Affix plugin
+.affix {
+  position: fixed;
+}
diff --git a/styl/variables.styl b/styl/variables.styl
index 4a842f34..e26493a5 100644
--- a/styl/variables.styl
+++ b/styl/variables.styl
@@ -1,78 +1,232 @@
-// Variables.styl
-// Variables to customize the look and feel of Bootstrap
-// -----------------------------------------------------
-
+//
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
-// Links
-$linkColor =             #08c
-$linkColorHover =        darken($linkColor, 15%)
 
 // Grays
-$black =                 #000
-$grayDarker =            #222
-$grayDark =              #333
-$gray =                  #555
-$grayLight =             #999
-$grayLighter =           #eee
-$white =                 #fff
+// -------------------------
+$black =                 #000;
+$grayDarker =            #222;
+$grayDark =              #333;
+$gray =                  #555;
+$grayLight =             #999;
+$grayLighter =           #eee;
+$white =                 #fff;
+
 
 // Accent colors
-$blue =                  #049cdb
-$blueDark =              #0064cd
-$green =                 #46a546
-$red =                   #9d261d
-$yellow =                #ffc40d
-$orange =                #f89406
-$pink =                  #c3325f
-$purple =                #7a43b6
+// -------------------------
+$blue =                  #049cdb;
+$blueDark =              #0064cd;
+$green =                 #46a546;
+$red =                   #9d261d;
+$yellow =                #ffc40d;
+$orange =                #f89406;
+$pink =                  #c3325f;
+$purple =                #7a43b6;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground =       $white;
+$textColor =            $grayDark;
+
+
+// Links
+// -------------------------
+$linkColor =            #08c;
+$linkColorHover =       darken($linkColor, 15%);
+
 
 // Typography
-$baseFontSize =          13px
-$baseFontFamily =        "Helvetica Neue", Helvetica, Arial, sans-serif
-$baseLineHeight =        18px
-$textColor =             $grayDark
+// -------------------------
+$sansFontFamily =       "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily =      Georgia, "Times New Roman", Times, serif;
+$monoFontFamily =       Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$baseFontSize =         14px;
+$baseFontFamily =       $sansFontFamily;
+$baseLineHeight =       20px;
+$altFontFamily =        $serifFontFamily;
+
+$headingsFontFamily =   inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight =   bold;    // instead of browser default, bold
+$headingsColor =        inherit; // empty to use BS default, $textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge =         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall =         $baseFontSize * 0.85; // ~12px
+$fontSizeMini =          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge =          11px 19px; // 44px
+$paddingSmall =          2px 10px;  // 26px
+$paddingMini =           0 6px;   // 22px
+
+$baseBorderRadius =      4px;
+$borderRadiusLarge =     6px;
+$borderRadiusSmall =     3px;
+
+
+// Tables
+// -------------------------
+$tableBackground =                  transparent; // overall background-color
+$tableBackgroundAccent =            #f9f9f9; // for striping
+$tableBackgroundHover =             #f5f5f5; // for hover
+$tableBorder =                      #ddd; // table and cell border
 
 // Buttons
-$primaryButtonBackground =    $linkColor
+// -------------------------
+$btnBackground =                    $white;
+$btnBackgroundHighlight =           darken($white, 10%);
+$btnBorder =                        #bbb;
+
+$btnPrimaryBackground =             $linkColor;
+$btnPrimaryBackgroundHighlight =    spin($btnPrimaryBackground, 20%);
+
+$btnInfoBackground =                #5bc0de;
+$btnInfoBackgroundHighlight =       #2f96b4;
+
+$btnSuccessBackground =             #62c462;
+$btnSuccessBackgroundHighlight =    #51a351;
+
+$btnWarningBackground =             lighten($orange, 15%);
+$btnWarningBackgroundHighlight =    $orange;
+
+$btnDangerBackground =              #ee5f5b;
+$btnDangerBackgroundHighlight =     #bd362f;
+
+$btnInverseBackground =             #444;
+$btnInverseBackgroundHighlight =    $grayDarker;
+
+
+// Forms
+// -------------------------
+$inputBackground =              $white;
+$inputBorder =                  #ccc;
+$inputBorderRadius =            3px;
+$inputDisabledBackground =      $grayLighter;
+$formActionsBackground =        #f5f5f5;
+$inputHeight =                  $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+$dropdownBackground =           $white;
+$dropdownBorder =               rgba(0,0,0,.2);
+$dropdownDividerTop =           #e5e5e5;
+$dropdownDividerBottom =        $white;
+
+$dropdownLinkColor =            $grayDark;
+$dropdownLinkColorHover =       $white;
+$dropdownLinkColorActive =      $dropdownLinkColor;
+
+$dropdownLinkBackgroundActive = $linkColor;
+$dropdownLinkBackgroundHover =  $dropdownLinkBackgroundActive;
 
 
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // Z-index master list
+// -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindexDropdown =          1000
-$zindexPopover =           1010
-$zindexTooltip =           1020
-$zindexFixedNavbar =       1030
-$zindexModalBackdrop =     1040
-$zindexModal =             1050
+$zindexDropdown =          1000;
+$zindexPopover =           1010;
+$zindexTooltip =           1030;
+$zindexFixedNavbar =       1030;
+$zindexModalBackdrop =     1040;
+$zindexModal =             1050;
+
 
 // Sprite icons path
-$iconSpritePath =          "../img/glyphicons-halflings.png"
-$iconWhiteSpritePath =     "../img/glyphicons-halflings-white.png"
+// -------------------------
+$iconSpritePath =          "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath =     "../img/glyphicons-halflings-white.png";
+
 
 // Input placeholder text color
-$placeholderText =         $grayLight
+// -------------------------
+$placeholderText =         $grayLight;
+
 
 // Hr border color
-$hrBorder =                $grayLighter
+// -------------------------
+$hrBorder =                $grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset =      180px;
+
+
+// Wells
+// -------------------------
+$wellBackground =                 #f5f5f5;
+
 
 // Navbar
-$navbarHeight =                    40px
-$navbarBackground =                $grayDarker
-$navbarBackgroundHighlight =       $grayDark
-$navbarLinkBackgroundHover =       transparent
+// -------------------------
+$navbarCollapseWidth =            979px;
+$navbarCollapseDesktopWidth =      $navbarCollapseWidth + 1;
+
+$navbarHeight =                   40px;
+$navbarBackgroundHighlight =      #ffffff;
+$navbarBackground =               darken($navbarBackgroundHighlight, 5%);
+$navbarBorder =                   darken($navbarBackground, 12%);
+
+$navbarText =                     #777;
+$navbarLinkColor =                #777;
+$navbarLinkColorHover =           $grayDark;
+$navbarLinkColorActive =          $gray;
+$navbarLinkBackgroundHover =      transparent;
+$navbarLinkBackgroundActive =     darken($navbarBackground, 5%);
+
+$navbarBrandColor =               $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground =               #111111;
+$navbarInverseBackgroundHighlight =      #222222;
+$navbarInverseBorder =                   #252525;
+
+$navbarInverseText =                     $grayLight;
+$navbarInverseLinkColor =                $grayLight;
+$navbarInverseLinkColorHover =           $white;
+$navbarInverseLinkColorActive =          $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover =      transparent;
+$navbarInverseLinkBackgroundActive =     $navbarInverseBackground;
+
+$navbarInverseSearchBackground =         lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus =    $white;
+$navbarInverseSearchBorder =             $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor =   #ccc;
+
+$navbarInverseBrandColor =               $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground =               #fff;
+$paginationBorder =                   #ddd;
+$paginationActiveBackground =         #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground =             $grayLighter;
+$heroUnitHeadingColor =           inherit;
+$heroUnitLeadColor =              inherit;
 
-$navbarText =                      $grayLight
-$navbarLinkColor =                 $grayLight
-$navbarLinkColorHover =            $white
 
 // Form states and alerts
 $warningText =             #c09853
@@ -90,19 +244,58 @@ $successBorder =           darken(hsl(hue($successBackground) - 10, saturation($
 $infoText =                #3a87ad
 $infoBackground =          #d9edf7
 $infoBorder =              darken(hsl(hue($infoBackground) - 10, saturation($infoBackground), lightness($infoBackground)), 7%)
+$infoBorder =             darken(spin($infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor =           #fff;
+$tooltipBackground =      #000;
+$tooltipArrowWidth =      5px;
+$tooltipArrowColor =      $tooltipBackground;
+
+$popoverBackground =      #fff;
+$popoverArrowWidth =      10px;
+$popoverArrowColor =      #fff;
+$popoverTitleBackground = darken($popoverBackground, 3%);
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth = $popoverArrowWidth + 1;
+$popoverArrowOuterColor = rgba(0,0,0,.25);
 
 
 
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
-$gridColumns =             12
-$gridColumnWidth =         60px
-$gridGutterWidth =         20px
-$gridRowWidth =            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1))
+// -------------------------
+$gridColumns =             12;
+$gridColumnWidth =         60px;
+$gridGutterWidth =         20px;
+$gridRowWidth =            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200 =    70px;
+$gridGutterWidth1200 =    30px;
+$gridRowWidth1200 =       ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768 =     42px;
+$gridGutterWidth768 =     20px;
+$gridRowWidth768 =        ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
 
 // Fluid grid
-$fluidGridColumnWidth =    6.382978723%
-$fluidGridGutterWidth =    2.127659574%
+$fluidGridColumnWidth =   100% * $gridColumnWidth/$gridRowWidth;
+$fluidGridGutterWidth =   100% * $gridGutterWidth/$gridRowWidth;
+$fluidGridGutterWidth =   100% * $gridGutterWidth/$gridRowWidth;
+
+// 1200px min
+$fluidGridColumnWidth1200 =    $gridColumnWidth1200/$gridRowWidth1200;
+$fluidGridGutterWidth1200 =    $gridGutterWidth1200/$gridRowWidth1200;
 
+// 768px-979px
+$fluidGridColumnWidth768 =     $gridColumnWidth768/$gridRowWidth768;
+$fluidGridGutterWidth768 =     $gridGutterWidth768/$gridRowWidth768;
diff --git a/styl/wells.styl b/styl/wells.styl
index ed074ccd..c9f606b4 100644
--- a/styl/wells.styl
+++ b/styl/wells.styl
@@ -1,18 +1,29 @@
-// WELLS
-// -----
-
-.well
-  min-height: 20px
-  padding: 19px
-  margin-bottom: 20px
-  background-color: #f5f5f5
-  border: 1px solid #eee
-  border: 1px solid rgba(0,0,0,.05)
-  $border-radius(4px)
-  $box-shadow(inset 0 1px 1px rgba(0,0,0,.05))
-  blockquote
-    border-color: #ddd
-    border-color: rgba(0,0,0,.15)
+//
+// Wells
+// --------------------------------------------------
 
 
+// Base class
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: $wellBackground;
+  border: 1px solid darken($wellBackground, 7%);
+  $border-radius($baseBorderRadius);
+  $box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}
 
+// Sizes
+.well-large {
+  padding: 24px;
+  $border-radius($borderRadiusLarge);
+}
+.well-small {
+  padding: 9px;
+  $border-radius($borderRadiusSmall);
+}