Commit be30de02 authored by fxy060608's avatar fxy060608

mui docs

parent 9122f764
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
activesupport (4.1.5)
i18n (~> 0.6, >= 0.6.9)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.1)
tzinfo (~> 1.1)
blankslate (2.1.2.4)
celluloid (0.15.2)
timers (~> 1.1.0)
classifier (1.3.4)
fast-stemmer (>= 1.0.0)
coffee-script (2.3.0)
coffee-script-source
execjs
coffee-script-source (1.7.1)
colorator (0.1)
execjs (2.2.1)
fast-stemmer (1.0.2)
ffi (1.9.3)
gemoji (2.1.0)
github-pages (23)
RedCloth (= 4.2.9)
jekyll (= 2.2.0)
jekyll-coffeescript (= 1.0.0)
jekyll-mentions (= 0.1.3)
jekyll-redirect-from (= 0.6.0)
jekyll-sass-converter (= 1.2.0)
jekyll-sitemap (= 0.5.1)
jemoji (= 0.3.0)
kramdown (= 1.3.1)
liquid (= 2.6.1)
maruku (= 0.7.0)
pygments.rb (= 0.6.0)
rdiscount (= 2.1.7)
redcarpet (= 3.1.2)
html-pipeline (1.9.0)
activesupport (>= 2)
nokogiri (~> 1.4)
i18n (0.6.11)
jekyll (2.2.0)
classifier (~> 1.3)
colorator (~> 0.1)
jekyll-coffeescript (~> 1.0)
jekyll-gist (~> 1.0)
jekyll-paginate (~> 1.0)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.0)
kramdown (~> 1.3)
liquid (~> 2.6.1)
mercenary (~> 0.3.3)
pygments.rb (~> 0.6.0)
redcarpet (~> 3.1)
safe_yaml (~> 1.0)
toml (~> 0.1.0)
jekyll-coffeescript (1.0.0)
coffee-script (~> 2.2)
jekyll-gist (1.1.0)
jekyll-mentions (0.1.3)
html-pipeline (~> 1.9.0)
jekyll (~> 2.0)
jekyll-paginate (1.0.0)
jekyll-redirect-from (0.6.0)
jekyll (~> 2.0)
jekyll-sass-converter (1.2.0)
sass (~> 3.2)
jekyll-sitemap (0.5.1)
jekyll-watch (1.1.0)
listen (~> 2.7)
jemoji (0.3.0)
gemoji (~> 2.0)
html-pipeline (~> 1.9)
jekyll (~> 2.0)
json (1.8.1)
kramdown (1.3.1)
liquid (2.6.1)
listen (2.7.9)
celluloid (>= 0.15.2)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
maruku (0.7.0)
mercenary (0.3.4)
mini_portile (0.6.0)
minitest (5.4.0)
nokogiri (1.6.3.1)
mini_portile (= 0.6.0)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.9)
pygments.rb (0.6.0)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.1.0)
rb-fsevent (0.9.4)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
rdiscount (2.1.7)
redcarpet (3.1.2)
safe_yaml (1.0.3)
sass (3.4.1)
thread_safe (0.3.4)
timers (1.1.0)
toml (0.1.1)
parslet (~> 1.5.0)
tzinfo (1.2.2)
thread_safe (~> 0.1)
yajl-ruby (1.1.0)
PLATFORMS
ruby
DEPENDENCIES
github-pages
Creative Commons Legal Code
Attribution 3.0 Unported
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
DAMAGES RESULTING FROM ITS USE.
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
CONDITIONS.
1. Definitions
a. "Adaptation" means a work based upon the Work, or upon the Work and
other pre-existing works, such as a translation, adaptation,
derivative work, arrangement of music or other alterations of a
literary or artistic work, or phonogram or performance and includes
cinematographic adaptations or any other form in which the Work may be
recast, transformed, or adapted including in any form recognizably
derived from the original, except that a work that constitutes a
Collection will not be considered an Adaptation for the purpose of
this License. For the avoidance of doubt, where the Work is a musical
work, performance or phonogram, the synchronization of the Work in
timed-relation with a moving image ("synching") will be considered an
Adaptation for the purpose of this License.
b. "Collection" means a collection of literary or artistic works, such as
encyclopedias and anthologies, or performances, phonograms or
broadcasts, or other works or subject matter other than works listed
in Section 1(f) below, which, by reason of the selection and
arrangement of their contents, constitute intellectual creations, in
which the Work is included in its entirety in unmodified form along
with one or more other contributions, each constituting separate and
independent works in themselves, which together are assembled into a
collective whole. A work that constitutes a Collection will not be
considered an Adaptation (as defined above) for the purposes of this
License.
c. "Distribute" means to make available to the public the original and
copies of the Work or Adaptation, as appropriate, through sale or
other transfer of ownership.
d. "Licensor" means the individual, individuals, entity or entities that
offer(s) the Work under the terms of this License.
e. "Original Author" means, in the case of a literary or artistic work,
the individual, individuals, entity or entities who created the Work
or if no individual or entity can be identified, the publisher; and in
addition (i) in the case of a performance the actors, singers,
musicians, dancers, and other persons who act, sing, deliver, declaim,
play in, interpret or otherwise perform literary or artistic works or
expressions of folklore; (ii) in the case of a phonogram the producer
being the person or legal entity who first fixes the sounds of a
performance or other sounds; and, (iii) in the case of broadcasts, the
organization that transmits the broadcast.
f. "Work" means the literary and/or artistic work offered under the terms
of this License including without limitation any production in the
literary, scientific and artistic domain, whatever may be the mode or
form of its expression including digital form, such as a book,
pamphlet and other writing; a lecture, address, sermon or other work
of the same nature; a dramatic or dramatico-musical work; a
choreographic work or entertainment in dumb show; a musical
composition with or without words; a cinematographic work to which are
assimilated works expressed by a process analogous to cinematography;
a work of drawing, painting, architecture, sculpture, engraving or
lithography; a photographic work to which are assimilated works
expressed by a process analogous to photography; a work of applied
art; an illustration, map, plan, sketch or three-dimensional work
relative to geography, topography, architecture or science; a
performance; a broadcast; a phonogram; a compilation of data to the
extent it is protected as a copyrightable work; or a work performed by
a variety or circus performer to the extent it is not otherwise
considered a literary or artistic work.
g. "You" means an individual or entity exercising rights under this
License who has not previously violated the terms of this License with
respect to the Work, or who has received express permission from the
Licensor to exercise rights under this License despite a previous
violation.
h. "Publicly Perform" means to perform public recitations of the Work and
to communicate to the public those public recitations, by any means or
process, including by wire or wireless means or public digital
performances; to make available to the public Works in such a way that
members of the public may access these Works from a place and at a
place individually chosen by them; to perform the Work to the public
by any means or process and the communication to the public of the
performances of the Work, including by public digital performance; to
broadcast and rebroadcast the Work by any means including signs,
sounds or images.
i. "Reproduce" means to make copies of the Work by any means including
without limitation by sound or visual recordings and the right of
fixation and reproducing fixations of the Work, including storage of a
protected performance or phonogram in digital form or other electronic
medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
limit, or restrict any uses free from copyright or rights arising from
limitations or exceptions that are provided for in connection with the
copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License,
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
perpetual (for the duration of the applicable copyright) license to
exercise the rights in the Work as stated below:
a. to Reproduce the Work, to incorporate the Work into one or more
Collections, and to Reproduce the Work as incorporated in the
Collections;
b. to create and Reproduce Adaptations provided that any such Adaptation,
including any translation in any medium, takes reasonable steps to
clearly label, demarcate or otherwise identify that changes were made
to the original Work. For example, a translation could be marked "The
original work was translated from English to Spanish," or a
modification could indicate "The original work has been modified.";
c. to Distribute and Publicly Perform the Work including as incorporated
in Collections; and,
d. to Distribute and Publicly Perform Adaptations.
e. For the avoidance of doubt:
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme cannot be waived, the Licensor
reserves the exclusive right to collect such royalties for any
exercise by You of the rights granted under this License;
ii. Waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme can be waived, the Licensor waives the
exclusive right to collect such royalties for any exercise by You
of the rights granted under this License; and,
iii. Voluntary License Schemes. The Licensor waives the right to
collect royalties, whether individually or, in the event that the
Licensor is a member of a collecting society that administers
voluntary licensing schemes, via that society, from any exercise
by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now
known or hereafter devised. The above rights include the right to make
such modifications as are technically necessary to exercise the rights in
other media and formats. Subject to Section 8(f), all rights not expressly
granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made
subject to and limited by the following restrictions:
a. You may Distribute or Publicly Perform the Work only under the terms
of this License. You must include a copy of, or the Uniform Resource
Identifier (URI) for, this License with every copy of the Work You
Distribute or Publicly Perform. You may not offer or impose any terms
on the Work that restrict the terms of this License or the ability of
the recipient of the Work to exercise the rights granted to that
recipient under the terms of the License. You may not sublicense the
Work. You must keep intact all notices that refer to this License and
to the disclaimer of warranties with every copy of the Work You
Distribute or Publicly Perform. When You Distribute or Publicly
Perform the Work, You may not impose any effective technological
measures on the Work that restrict the ability of a recipient of the
Work from You to exercise the rights granted to that recipient under
the terms of the License. This Section 4(a) applies to the Work as
incorporated in a Collection, but this does not require the Collection
apart from the Work itself to be made subject to the terms of this
License. If You create a Collection, upon notice from any Licensor You
must, to the extent practicable, remove from the Collection any credit
as required by Section 4(b), as requested. If You create an
Adaptation, upon notice from any Licensor You must, to the extent
practicable, remove from the Adaptation any credit as required by
Section 4(b), as requested.
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
Collections, You must, unless a request has been made pursuant to
Section 4(a), keep intact all copyright notices for the Work and
provide, reasonable to the medium or means You are utilizing: (i) the
name of the Original Author (or pseudonym, if applicable) if supplied,
and/or if the Original Author and/or Licensor designate another party
or parties (e.g., a sponsor institute, publishing entity, journal) for
attribution ("Attribution Parties") in Licensor's copyright notice,
terms of service or by other reasonable means, the name of such party
or parties; (ii) the title of the Work if supplied; (iii) to the
extent reasonably practicable, the URI, if any, that Licensor
specifies to be associated with the Work, unless such URI does not
refer to the copyright notice or licensing information for the Work;
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
a credit identifying the use of the Work in the Adaptation (e.g.,
"French translation of the Work by Original Author," or "Screenplay
based on original Work by Original Author"). The credit required by
this Section 4 (b) may be implemented in any reasonable manner;
provided, however, that in the case of a Adaptation or Collection, at
a minimum such credit will appear, if a credit for all contributing
authors of the Adaptation or Collection appears, then as part of these
credits and in a manner at least as prominent as the credits for the
other contributing authors. For the avoidance of doubt, You may only
use the credit required by this Section for the purpose of attribution
in the manner set out above and, by exercising Your rights under this
License, You may not implicitly or explicitly assert or imply any
connection with, sponsorship or endorsement by the Original Author,
Licensor and/or Attribution Parties, as appropriate, of You or Your
use of the Work, without the separate, express prior written
permission of the Original Author, Licensor and/or Attribution
Parties.
c. Except as otherwise agreed in writing by the Licensor or as may be
otherwise permitted by applicable law, if You Reproduce, Distribute or
Publicly Perform the Work either by itself or as part of any
Adaptations or Collections, You must not distort, mutilate, modify or
take other derogatory action in relation to the Work which would be
prejudicial to the Original Author's honor or reputation. Licensor
agrees that in those jurisdictions (e.g. Japan), in which any exercise
of the right granted in Section 3(b) of this License (the right to
make Adaptations) would be deemed to be a distortion, mutilation,
modification or other derogatory action prejudicial to the Original
Author's honor and reputation, the Licensor will waive or not assert,
as appropriate, this Section, to the fullest extent permitted by the
applicable national law, to enable You to reasonably exercise Your
right under Section 3(b) of this License (right to make Adaptations)
but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
a. This License and the rights granted hereunder will terminate
automatically upon any breach by You of the terms of this License.
Individuals or entities who have received Adaptations or Collections
from You under this License, however, will not have their licenses
terminated provided such individuals or entities remain in full
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
survive any termination of this License.
b. Subject to the above terms and conditions, the license granted here is
perpetual (for the duration of the applicable copyright in the Work).
Notwithstanding the above, Licensor reserves the right to release the
Work under different license terms or to stop distributing the Work at
any time; provided, however that any such election will not serve to
withdraw this License (or any other license that has been, or is
required to be, granted under the terms of this License), and this
License will continue in full force and effect unless terminated as
stated above.
8. Miscellaneous
a. Each time You Distribute or Publicly Perform the Work or a Collection,
the Licensor offers to the recipient a license to the Work on the same
terms and conditions as the license granted to You under this License.
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
offers to the recipient a license to the original Work on the same
terms and conditions as the license granted to You under this License.
c. If any provision of this License is invalid or unenforceable under
applicable law, it shall not affect the validity or enforceability of
the remainder of the terms of this License, and without further action
by the parties to this agreement, such provision shall be reformed to
the minimum extent necessary to make such provision valid and
enforceable.
d. No term or provision of this License shall be deemed waived and no
breach consented to unless such waiver or consent shall be in writing
and signed by the party to be charged with such waiver or consent.
e. This License constitutes the entire agreement between the parties with
respect to the Work licensed here. There are no understandings,
agreements or representations with respect to the Work not specified
here. Licensor shall not be bound by any additional provisions that
may appear in any communication from You. This License may not be
modified without the mutual written agreement of the Licensor and You.
f. The rights granted under, and the subject matter referenced, in this
License were drafted utilizing the terminology of the Berne Convention
for the Protection of Literary and Artistic Works (as amended on
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
and the Universal Copyright Convention (as revised on July 24, 1971).
These rights and subject matter take effect in the relevant
jurisdiction in which the License terms are sought to be enforced
according to the corresponding provisions of the implementation of
those treaty provisions in the applicable national law. If the
standard suite of rights granted under applicable copyright law
includes additional rights not granted under this License, such
additional rights are deemed to be included in the License; this
License is not intended to restrict the license of any rights under
applicable law.
Creative Commons Notice
Creative Commons is not a party to this License, and makes no warranty
whatsoever in connection with the Work. Creative Commons will not be
liable to You or any party on any legal theory for any damages
whatsoever, including without limitation any general, special,
incidental or consequential damages arising in connection to this
license. Notwithstanding the foregoing two (2) sentences, if Creative
Commons has expressly identified itself as the Licensor hereunder, it
shall have all rights and obligations of Licensor.
Except for the limited purpose of indicating to the public that the
Work is licensed under the CCPL, Creative Commons does not authorize
the use by either party of the trademark "Creative Commons" or any
related trademark or logo of Creative Commons without the prior
written consent of Creative Commons. Any permitted use will be in
compliance with Creative Commons' then-current trademark usage
guidelines, as may be published on its website or otherwise made
available upon request from time to time. For the avoidance of doubt,
this trademark restriction does not form part of this License.
Creative Commons may be contacted at http://creativecommons.org/.
\ No newline at end of file
# Ratchet v2.0.2 [![Build Status](https://secure.travis-ci.org/twbs/ratchet.png)](http://travis-ci.org/twbs/ratchet) [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
Build mobile apps with simple HTML, CSS, and JS components.
## Table of contents
- [Getting started](#getting-started)
- [Documentation](#documentation)
- [Support](#support)
- [Contributing](#contributing)
- [Troubleshooting](#troubleshooting)
- [Versioning](#versioning)
- [Maintainers](#maintainers)
- [License](#license)
## Getting started
- Clone the repo with `git clone https://github.com/twbs/ratchet.git` or just [download](http://github.com/twbs/ratchet/archive/v2.0.2.zip) the bundled CSS and JS
- [Read the docs](http://goratchet.com) to learn about the components and how to get a prototype on your phone
- [Check out examples](http://dcloudio.github.io/mui/examples/)
Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/twbs/ratchet/tags).
### What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ └── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ └── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff
```
We provide compiled CSS and JS (`ratchet.*`), as well as compiled and minified CSS and JS (`ratchet.min.*`). The Ratchicon fonts are included, as are the optional Android and iOS platform themes.
## Documentation
Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://goratchet.com>. The docs may also be run locally.
### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation).
- **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
2. From the root `/ratchet/docs` directory, run `jekyll serve` in the command line.
3. Open <http://localhost:4000> in your browser, and boom!
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
### Documentation for previous releases
Documentation for v1.0.2 has been made available for the time being at <http://dcloudio.github.io/mui/1.0.2/> while folks transition to Ratchet 2.
[Previous releases](https://github.com/twbs/ratchet/releases) and their documentation are also available for download.
## Support
Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet).
## Contributing
Please file a GitHub issue to [report a bug](https://github.com/twbs/ratchet/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md).
## Troubleshooting
A small list of "gotchas" is provided below for designers and developers starting to work with Ratchet.
- Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options:
- Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences)
- Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)
- Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution.
- Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the file:// protocol); consequently, Ratchet does not work when opened directly as a file.
- A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run ```python -m SimpleHTTPServer <port>``` to serve up the files in the current directory to ```http://localhost:<port>```
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Ratchet is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.
Releases will be numbered with the following format:
`<major>.<minor>.<patch>`
And constructed with the following guidelines:
- Breaking backward compatibility **bumps the major** while resetting minor and patch
- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
- Bug fixes and misc changes **bumps only the patch**
For more information on SemVer, please visit <http://semver.org/>.
## Maintainers
Connor Sears
- <https://twitter.com/connors>
- <https://github.com/connors>
Connor Montgomery
- <https://twitter.com/connor>
- <https://github.com/connor>
Created by Connor Sears, Dave Gamache, and Jacob Thornton.
## License
Ratchet is licensed under the [MIT License](http://opensource.org/licenses/MIT).
<!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
  </html>
source 'https://rubygems.org'
gem 'github-pages'
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
activesupport (4.1.5)
i18n (~> 0.6, >= 0.6.9)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.1)
tzinfo (~> 1.1)
blankslate (2.1.2.4)
celluloid (0.15.2)
timers (~> 1.1.0)
classifier (1.3.4)
fast-stemmer (>= 1.0.0)
coffee-script (2.3.0)
coffee-script-source
execjs
coffee-script-source (1.7.1)
colorator (0.1)
execjs (2.2.1)
fast-stemmer (1.0.2)
ffi (1.9.3)
gemoji (2.1.0)
github-pages (23)
RedCloth (= 4.2.9)
jekyll (= 2.2.0)
jekyll-coffeescript (= 1.0.0)
jekyll-mentions (= 0.1.3)
jekyll-redirect-from (= 0.6.0)
jekyll-sass-converter (= 1.2.0)
jekyll-sitemap (= 0.5.1)
jemoji (= 0.3.0)
kramdown (= 1.3.1)
liquid (= 2.6.1)
maruku (= 0.7.0)
pygments.rb (= 0.6.0)
rdiscount (= 2.1.7)
redcarpet (= 3.1.2)
html-pipeline (1.9.0)
activesupport (>= 2)
nokogiri (~> 1.4)
i18n (0.6.11)
jekyll (2.2.0)
classifier (~> 1.3)
colorator (~> 0.1)
jekyll-coffeescript (~> 1.0)
jekyll-gist (~> 1.0)
jekyll-paginate (~> 1.0)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.0)
kramdown (~> 1.3)
liquid (~> 2.6.1)
mercenary (~> 0.3.3)
pygments.rb (~> 0.6.0)
redcarpet (~> 3.1)
safe_yaml (~> 1.0)
toml (~> 0.1.0)
jekyll-coffeescript (1.0.0)
coffee-script (~> 2.2)
jekyll-gist (1.1.0)
jekyll-mentions (0.1.3)
html-pipeline (~> 1.9.0)
jekyll (~> 2.0)
jekyll-paginate (1.0.0)
jekyll-redirect-from (0.6.0)
jekyll (~> 2.0)
jekyll-sass-converter (1.2.0)
sass (~> 3.2)
jekyll-sitemap (0.5.1)
jekyll-watch (1.1.0)
listen (~> 2.7)
jemoji (0.3.0)
gemoji (~> 2.0)
html-pipeline (~> 1.9)
jekyll (~> 2.0)
json (1.8.1)
kramdown (1.3.1)
liquid (2.6.1)
listen (2.7.9)
celluloid (>= 0.15.2)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
maruku (0.7.0)
mercenary (0.3.4)
mini_portile (0.6.0)
minitest (5.4.0)
nokogiri (1.6.3.1)
mini_portile (= 0.6.0)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.9)
pygments.rb (0.6.0)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.1.0)
rb-fsevent (0.9.4)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
rdiscount (2.1.7)
redcarpet (3.1.2)
safe_yaml (1.0.3)
sass (3.4.1)
thread_safe (0.3.4)
timers (1.1.0)
toml (0.1.1)
parslet (~> 1.5.0)
tzinfo (1.2.2)
thread_safe (~> 0.1)
yajl-ruby (1.1.0)
PLATFORMS
ruby
DEPENDENCIES
github-pages
Creative Commons Legal Code
Attribution 3.0 Unported
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
DAMAGES RESULTING FROM ITS USE.
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
CONDITIONS.
1. Definitions
a. "Adaptation" means a work based upon the Work, or upon the Work and
other pre-existing works, such as a translation, adaptation,
derivative work, arrangement of music or other alterations of a
literary or artistic work, or phonogram or performance and includes
cinematographic adaptations or any other form in which the Work may be
recast, transformed, or adapted including in any form recognizably
derived from the original, except that a work that constitutes a
Collection will not be considered an Adaptation for the purpose of
this License. For the avoidance of doubt, where the Work is a musical
work, performance or phonogram, the synchronization of the Work in
timed-relation with a moving image ("synching") will be considered an
Adaptation for the purpose of this License.
b. "Collection" means a collection of literary or artistic works, such as
encyclopedias and anthologies, or performances, phonograms or
broadcasts, or other works or subject matter other than works listed
in Section 1(f) below, which, by reason of the selection and
arrangement of their contents, constitute intellectual creations, in
which the Work is included in its entirety in unmodified form along
with one or more other contributions, each constituting separate and
independent works in themselves, which together are assembled into a
collective whole. A work that constitutes a Collection will not be
considered an Adaptation (as defined above) for the purposes of this
License.
c. "Distribute" means to make available to the public the original and
copies of the Work or Adaptation, as appropriate, through sale or
other transfer of ownership.
d. "Licensor" means the individual, individuals, entity or entities that
offer(s) the Work under the terms of this License.
e. "Original Author" means, in the case of a literary or artistic work,
the individual, individuals, entity or entities who created the Work
or if no individual or entity can be identified, the publisher; and in
addition (i) in the case of a performance the actors, singers,
musicians, dancers, and other persons who act, sing, deliver, declaim,
play in, interpret or otherwise perform literary or artistic works or
expressions of folklore; (ii) in the case of a phonogram the producer
being the person or legal entity who first fixes the sounds of a
performance or other sounds; and, (iii) in the case of broadcasts, the
organization that transmits the broadcast.
f. "Work" means the literary and/or artistic work offered under the terms
of this License including without limitation any production in the
literary, scientific and artistic domain, whatever may be the mode or
form of its expression including digital form, such as a book,
pamphlet and other writing; a lecture, address, sermon or other work
of the same nature; a dramatic or dramatico-musical work; a
choreographic work or entertainment in dumb show; a musical
composition with or without words; a cinematographic work to which are
assimilated works expressed by a process analogous to cinematography;
a work of drawing, painting, architecture, sculpture, engraving or
lithography; a photographic work to which are assimilated works
expressed by a process analogous to photography; a work of applied
art; an illustration, map, plan, sketch or three-dimensional work
relative to geography, topography, architecture or science; a
performance; a broadcast; a phonogram; a compilation of data to the
extent it is protected as a copyrightable work; or a work performed by
a variety or circus performer to the extent it is not otherwise
considered a literary or artistic work.
g. "You" means an individual or entity exercising rights under this
License who has not previously violated the terms of this License with
respect to the Work, or who has received express permission from the
Licensor to exercise rights under this License despite a previous
violation.
h. "Publicly Perform" means to perform public recitations of the Work and
to communicate to the public those public recitations, by any means or
process, including by wire or wireless means or public digital
performances; to make available to the public Works in such a way that
members of the public may access these Works from a place and at a
place individually chosen by them; to perform the Work to the public
by any means or process and the communication to the public of the
performances of the Work, including by public digital performance; to
broadcast and rebroadcast the Work by any means including signs,
sounds or images.
i. "Reproduce" means to make copies of the Work by any means including
without limitation by sound or visual recordings and the right of
fixation and reproducing fixations of the Work, including storage of a
protected performance or phonogram in digital form or other electronic
medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
limit, or restrict any uses free from copyright or rights arising from
limitations or exceptions that are provided for in connection with the
copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License,
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
perpetual (for the duration of the applicable copyright) license to
exercise the rights in the Work as stated below:
a. to Reproduce the Work, to incorporate the Work into one or more
Collections, and to Reproduce the Work as incorporated in the
Collections;
b. to create and Reproduce Adaptations provided that any such Adaptation,
including any translation in any medium, takes reasonable steps to
clearly label, demarcate or otherwise identify that changes were made
to the original Work. For example, a translation could be marked "The
original work was translated from English to Spanish," or a
modification could indicate "The original work has been modified.";
c. to Distribute and Publicly Perform the Work including as incorporated
in Collections; and,
d. to Distribute and Publicly Perform Adaptations.
e. For the avoidance of doubt:
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme cannot be waived, the Licensor
reserves the exclusive right to collect such royalties for any
exercise by You of the rights granted under this License;
ii. Waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme can be waived, the Licensor waives the
exclusive right to collect such royalties for any exercise by You
of the rights granted under this License; and,
iii. Voluntary License Schemes. The Licensor waives the right to
collect royalties, whether individually or, in the event that the
Licensor is a member of a collecting society that administers
voluntary licensing schemes, via that society, from any exercise
by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now
known or hereafter devised. The above rights include the right to make
such modifications as are technically necessary to exercise the rights in
other media and formats. Subject to Section 8(f), all rights not expressly
granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made
subject to and limited by the following restrictions:
a. You may Distribute or Publicly Perform the Work only under the terms
of this License. You must include a copy of, or the Uniform Resource
Identifier (URI) for, this License with every copy of the Work You
Distribute or Publicly Perform. You may not offer or impose any terms
on the Work that restrict the terms of this License or the ability of
the recipient of the Work to exercise the rights granted to that
recipient under the terms of the License. You may not sublicense the
Work. You must keep intact all notices that refer to this License and
to the disclaimer of warranties with every copy of the Work You
Distribute or Publicly Perform. When You Distribute or Publicly
Perform the Work, You may not impose any effective technological
measures on the Work that restrict the ability of a recipient of the
Work from You to exercise the rights granted to that recipient under
the terms of the License. This Section 4(a) applies to the Work as
incorporated in a Collection, but this does not require the Collection
apart from the Work itself to be made subject to the terms of this
License. If You create a Collection, upon notice from any Licensor You
must, to the extent practicable, remove from the Collection any credit
as required by Section 4(b), as requested. If You create an
Adaptation, upon notice from any Licensor You must, to the extent
practicable, remove from the Adaptation any credit as required by
Section 4(b), as requested.
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
Collections, You must, unless a request has been made pursuant to
Section 4(a), keep intact all copyright notices for the Work and
provide, reasonable to the medium or means You are utilizing: (i) the
name of the Original Author (or pseudonym, if applicable) if supplied,
and/or if the Original Author and/or Licensor designate another party
or parties (e.g., a sponsor institute, publishing entity, journal) for
attribution ("Attribution Parties") in Licensor's copyright notice,
terms of service or by other reasonable means, the name of such party
or parties; (ii) the title of the Work if supplied; (iii) to the
extent reasonably practicable, the URI, if any, that Licensor
specifies to be associated with the Work, unless such URI does not
refer to the copyright notice or licensing information for the Work;
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
a credit identifying the use of the Work in the Adaptation (e.g.,
"French translation of the Work by Original Author," or "Screenplay
based on original Work by Original Author"). The credit required by
this Section 4 (b) may be implemented in any reasonable manner;
provided, however, that in the case of a Adaptation or Collection, at
a minimum such credit will appear, if a credit for all contributing
authors of the Adaptation or Collection appears, then as part of these
credits and in a manner at least as prominent as the credits for the
other contributing authors. For the avoidance of doubt, You may only
use the credit required by this Section for the purpose of attribution
in the manner set out above and, by exercising Your rights under this
License, You may not implicitly or explicitly assert or imply any
connection with, sponsorship or endorsement by the Original Author,
Licensor and/or Attribution Parties, as appropriate, of You or Your
use of the Work, without the separate, express prior written
permission of the Original Author, Licensor and/or Attribution
Parties.
c. Except as otherwise agreed in writing by the Licensor or as may be
otherwise permitted by applicable law, if You Reproduce, Distribute or
Publicly Perform the Work either by itself or as part of any
Adaptations or Collections, You must not distort, mutilate, modify or
take other derogatory action in relation to the Work which would be
prejudicial to the Original Author's honor or reputation. Licensor
agrees that in those jurisdictions (e.g. Japan), in which any exercise
of the right granted in Section 3(b) of this License (the right to
make Adaptations) would be deemed to be a distortion, mutilation,
modification or other derogatory action prejudicial to the Original
Author's honor and reputation, the Licensor will waive or not assert,
as appropriate, this Section, to the fullest extent permitted by the
applicable national law, to enable You to reasonably exercise Your
right under Section 3(b) of this License (right to make Adaptations)
but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
a. This License and the rights granted hereunder will terminate
automatically upon any breach by You of the terms of this License.
Individuals or entities who have received Adaptations or Collections
from You under this License, however, will not have their licenses
terminated provided such individuals or entities remain in full
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
survive any termination of this License.
b. Subject to the above terms and conditions, the license granted here is
perpetual (for the duration of the applicable copyright in the Work).
Notwithstanding the above, Licensor reserves the right to release the
Work under different license terms or to stop distributing the Work at
any time; provided, however that any such election will not serve to
withdraw this License (or any other license that has been, or is
required to be, granted under the terms of this License), and this
License will continue in full force and effect unless terminated as
stated above.
8. Miscellaneous
a. Each time You Distribute or Publicly Perform the Work or a Collection,
the Licensor offers to the recipient a license to the Work on the same
terms and conditions as the license granted to You under this License.
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
offers to the recipient a license to the original Work on the same
terms and conditions as the license granted to You under this License.
c. If any provision of this License is invalid or unenforceable under
applicable law, it shall not affect the validity or enforceability of
the remainder of the terms of this License, and without further action
by the parties to this agreement, such provision shall be reformed to
the minimum extent necessary to make such provision valid and
enforceable.
d. No term or provision of this License shall be deemed waived and no
breach consented to unless such waiver or consent shall be in writing
and signed by the party to be charged with such waiver or consent.
e. This License constitutes the entire agreement between the parties with
respect to the Work licensed here. There are no understandings,
agreements or representations with respect to the Work not specified
here. Licensor shall not be bound by any additional provisions that
may appear in any communication from You. This License may not be
modified without the mutual written agreement of the Licensor and You.
f. The rights granted under, and the subject matter referenced, in this
License were drafted utilizing the terminology of the Berne Convention
for the Protection of Literary and Artistic Works (as amended on
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
and the Universal Copyright Convention (as revised on July 24, 1971).
These rights and subject matter take effect in the relevant
jurisdiction in which the License terms are sought to be enforced
according to the corresponding provisions of the implementation of
those treaty provisions in the applicable national law. If the
standard suite of rights granted under applicable copyright law
includes additional rights not granted under this License, such
additional rights are deemed to be included in the License; this
License is not intended to restrict the license of any rights under
applicable law.
Creative Commons Notice
Creative Commons is not a party to this License, and makes no warranty
whatsoever in connection with the Work. Creative Commons will not be
liable to You or any party on any legal theory for any damages
whatsoever, including without limitation any general, special,
incidental or consequential damages arising in connection to this
license. Notwithstanding the foregoing two (2) sentences, if Creative
Commons has expressly identified itself as the Licensor hereunder, it
shall have all rights and obligations of Licensor.
Except for the limited purpose of indicating to the public that the
Work is licensed under the CCPL, Creative Commons does not authorize
the use by either party of the trademark "Creative Commons" or any
related trademark or logo of Creative Commons without the prior
written consent of Creative Commons. Any permitted use will be in
compliance with Creative Commons' then-current trademark usage
guidelines, as may be published on its website or otherwise made
available upon request from time to time. For the avoidance of doubt,
this trademark restriction does not form part of this License.
Creative Commons may be contacted at http://creativecommons.org/.
\ No newline at end of file
Creative Commons Legal Code
Attribution 3.0 Unported
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
DAMAGES RESULTING FROM ITS USE.
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
CONDITIONS.
1. Definitions
a. "Adaptation" means a work based upon the Work, or upon the Work and
other pre-existing works, such as a translation, adaptation,
derivative work, arrangement of music or other alterations of a
literary or artistic work, or phonogram or performance and includes
cinematographic adaptations or any other form in which the Work may be
recast, transformed, or adapted including in any form recognizably
derived from the original, except that a work that constitutes a
Collection will not be considered an Adaptation for the purpose of
this License. For the avoidance of doubt, where the Work is a musical
work, performance or phonogram, the synchronization of the Work in
timed-relation with a moving image ("synching") will be considered an
Adaptation for the purpose of this License.
b. "Collection" means a collection of literary or artistic works, such as
encyclopedias and anthologies, or performances, phonograms or
broadcasts, or other works or subject matter other than works listed
in Section 1(f) below, which, by reason of the selection and
arrangement of their contents, constitute intellectual creations, in
which the Work is included in its entirety in unmodified form along
with one or more other contributions, each constituting separate and
independent works in themselves, which together are assembled into a
collective whole. A work that constitutes a Collection will not be
considered an Adaptation (as defined above) for the purposes of this
License.
c. "Distribute" means to make available to the public the original and
copies of the Work or Adaptation, as appropriate, through sale or
other transfer of ownership.
d. "Licensor" means the individual, individuals, entity or entities that
offer(s) the Work under the terms of this License.
e. "Original Author" means, in the case of a literary or artistic work,
the individual, individuals, entity or entities who created the Work
or if no individual or entity can be identified, the publisher; and in
addition (i) in the case of a performance the actors, singers,
musicians, dancers, and other persons who act, sing, deliver, declaim,
play in, interpret or otherwise perform literary or artistic works or
expressions of folklore; (ii) in the case of a phonogram the producer
being the person or legal entity who first fixes the sounds of a
performance or other sounds; and, (iii) in the case of broadcasts, the
organization that transmits the broadcast.
f. "Work" means the literary and/or artistic work offered under the terms
of this License including without limitation any production in the
literary, scientific and artistic domain, whatever may be the mode or
form of its expression including digital form, such as a book,
pamphlet and other writing; a lecture, address, sermon or other work
of the same nature; a dramatic or dramatico-musical work; a
choreographic work or entertainment in dumb show; a musical
composition with or without words; a cinematographic work to which are
assimilated works expressed by a process analogous to cinematography;
a work of drawing, painting, architecture, sculpture, engraving or
lithography; a photographic work to which are assimilated works
expressed by a process analogous to photography; a work of applied
art; an illustration, map, plan, sketch or three-dimensional work
relative to geography, topography, architecture or science; a
performance; a broadcast; a phonogram; a compilation of data to the
extent it is protected as a copyrightable work; or a work performed by
a variety or circus performer to the extent it is not otherwise
considered a literary or artistic work.
g. "You" means an individual or entity exercising rights under this
License who has not previously violated the terms of this License with
respect to the Work, or who has received express permission from the
Licensor to exercise rights under this License despite a previous
violation.
h. "Publicly Perform" means to perform public recitations of the Work and
to communicate to the public those public recitations, by any means or
process, including by wire or wireless means or public digital
performances; to make available to the public Works in such a way that
members of the public may access these Works from a place and at a
place individually chosen by them; to perform the Work to the public
by any means or process and the communication to the public of the
performances of the Work, including by public digital performance; to
broadcast and rebroadcast the Work by any means including signs,
sounds or images.
i. "Reproduce" means to make copies of the Work by any means including
without limitation by sound or visual recordings and the right of
fixation and reproducing fixations of the Work, including storage of a
protected performance or phonogram in digital form or other electronic
medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
limit, or restrict any uses free from copyright or rights arising from
limitations or exceptions that are provided for in connection with the
copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License,
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
perpetual (for the duration of the applicable copyright) license to
exercise the rights in the Work as stated below:
a. to Reproduce the Work, to incorporate the Work into one or more
Collections, and to Reproduce the Work as incorporated in the
Collections;
b. to create and Reproduce Adaptations provided that any such Adaptation,
including any translation in any medium, takes reasonable steps to
clearly label, demarcate or otherwise identify that changes were made
to the original Work. For example, a translation could be marked "The
original work was translated from English to Spanish," or a
modification could indicate "The original work has been modified.";
c. to Distribute and Publicly Perform the Work including as incorporated
in Collections; and,
d. to Distribute and Publicly Perform Adaptations.
e. For the avoidance of doubt:
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme cannot be waived, the Licensor
reserves the exclusive right to collect such royalties for any
exercise by You of the rights granted under this License;
ii. Waivable Compulsory License Schemes. In those jurisdictions in
which the right to collect royalties through any statutory or
compulsory licensing scheme can be waived, the Licensor waives the
exclusive right to collect such royalties for any exercise by You
of the rights granted under this License; and,
iii. Voluntary License Schemes. The Licensor waives the right to
collect royalties, whether individually or, in the event that the
Licensor is a member of a collecting society that administers
voluntary licensing schemes, via that society, from any exercise
by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now
known or hereafter devised. The above rights include the right to make
such modifications as are technically necessary to exercise the rights in
other media and formats. Subject to Section 8(f), all rights not expressly
granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made
subject to and limited by the following restrictions:
a. You may Distribute or Publicly Perform the Work only under the terms
of this License. You must include a copy of, or the Uniform Resource
Identifier (URI) for, this License with every copy of the Work You
Distribute or Publicly Perform. You may not offer or impose any terms
on the Work that restrict the terms of this License or the ability of
the recipient of the Work to exercise the rights granted to that
recipient under the terms of the License. You may not sublicense the
Work. You must keep intact all notices that refer to this License and
to the disclaimer of warranties with every copy of the Work You
Distribute or Publicly Perform. When You Distribute or Publicly
Perform the Work, You may not impose any effective technological
measures on the Work that restrict the ability of a recipient of the
Work from You to exercise the rights granted to that recipient under
the terms of the License. This Section 4(a) applies to the Work as
incorporated in a Collection, but this does not require the Collection
apart from the Work itself to be made subject to the terms of this
License. If You create a Collection, upon notice from any Licensor You
must, to the extent practicable, remove from the Collection any credit
as required by Section 4(b), as requested. If You create an
Adaptation, upon notice from any Licensor You must, to the extent
practicable, remove from the Adaptation any credit as required by
Section 4(b), as requested.
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
Collections, You must, unless a request has been made pursuant to
Section 4(a), keep intact all copyright notices for the Work and
provide, reasonable to the medium or means You are utilizing: (i) the
name of the Original Author (or pseudonym, if applicable) if supplied,
and/or if the Original Author and/or Licensor designate another party
or parties (e.g., a sponsor institute, publishing entity, journal) for
attribution ("Attribution Parties") in Licensor's copyright notice,
terms of service or by other reasonable means, the name of such party
or parties; (ii) the title of the Work if supplied; (iii) to the
extent reasonably practicable, the URI, if any, that Licensor
specifies to be associated with the Work, unless such URI does not
refer to the copyright notice or licensing information for the Work;
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
a credit identifying the use of the Work in the Adaptation (e.g.,
"French translation of the Work by Original Author," or "Screenplay
based on original Work by Original Author"). The credit required by
this Section 4 (b) may be implemented in any reasonable manner;
provided, however, that in the case of a Adaptation or Collection, at
a minimum such credit will appear, if a credit for all contributing
authors of the Adaptation or Collection appears, then as part of these
credits and in a manner at least as prominent as the credits for the
other contributing authors. For the avoidance of doubt, You may only
use the credit required by this Section for the purpose of attribution
in the manner set out above and, by exercising Your rights under this
License, You may not implicitly or explicitly assert or imply any
connection with, sponsorship or endorsement by the Original Author,
Licensor and/or Attribution Parties, as appropriate, of You or Your
use of the Work, without the separate, express prior written
permission of the Original Author, Licensor and/or Attribution
Parties.
c. Except as otherwise agreed in writing by the Licensor or as may be
otherwise permitted by applicable law, if You Reproduce, Distribute or
Publicly Perform the Work either by itself or as part of any
Adaptations or Collections, You must not distort, mutilate, modify or
take other derogatory action in relation to the Work which would be
prejudicial to the Original Author's honor or reputation. Licensor
agrees that in those jurisdictions (e.g. Japan), in which any exercise
of the right granted in Section 3(b) of this License (the right to
make Adaptations) would be deemed to be a distortion, mutilation,
modification or other derogatory action prejudicial to the Original
Author's honor and reputation, the Licensor will waive or not assert,
as appropriate, this Section, to the fullest extent permitted by the
applicable national law, to enable You to reasonably exercise Your
right under Section 3(b) of this License (right to make Adaptations)
but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
a. This License and the rights granted hereunder will terminate
automatically upon any breach by You of the terms of this License.
Individuals or entities who have received Adaptations or Collections
from You under this License, however, will not have their licenses
terminated provided such individuals or entities remain in full
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
survive any termination of this License.
b. Subject to the above terms and conditions, the license granted here is
perpetual (for the duration of the applicable copyright in the Work).
Notwithstanding the above, Licensor reserves the right to release the
Work under different license terms or to stop distributing the Work at
any time; provided, however that any such election will not serve to
withdraw this License (or any other license that has been, or is
required to be, granted under the terms of this License), and this
License will continue in full force and effect unless terminated as
stated above.
8. Miscellaneous
a. Each time You Distribute or Publicly Perform the Work or a Collection,
the Licensor offers to the recipient a license to the Work on the same
terms and conditions as the license granted to You under this License.
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
offers to the recipient a license to the original Work on the same
terms and conditions as the license granted to You under this License.
c. If any provision of this License is invalid or unenforceable under
applicable law, it shall not affect the validity or enforceability of
the remainder of the terms of this License, and without further action
by the parties to this agreement, such provision shall be reformed to
the minimum extent necessary to make such provision valid and
enforceable.
d. No term or provision of this License shall be deemed waived and no
breach consented to unless such waiver or consent shall be in writing
and signed by the party to be charged with such waiver or consent.
e. This License constitutes the entire agreement between the parties with
respect to the Work licensed here. There are no understandings,
agreements or representations with respect to the Work not specified
here. Licensor shall not be bound by any additional provisions that
may appear in any communication from You. This License may not be
modified without the mutual written agreement of the Licensor and You.
f. The rights granted under, and the subject matter referenced, in this
License were drafted utilizing the terminology of the Berne Convention
for the Protection of Literary and Artistic Works (as amended on
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
and the Universal Copyright Convention (as revised on July 24, 1971).
These rights and subject matter take effect in the relevant
jurisdiction in which the License terms are sought to be enforced
according to the corresponding provisions of the implementation of
those treaty provisions in the applicable national law. If the
standard suite of rights granted under applicable copyright law
includes additional rights not granted under this License, such
additional rights are deemed to be included in the License; this
License is not intended to restrict the license of any rights under
applicable law.
Creative Commons Notice
Creative Commons is not a party to this License, and makes no warranty
whatsoever in connection with the Work. Creative Commons will not be
liable to You or any party on any legal theory for any damages
whatsoever, including without limitation any general, special,
incidental or consequential damages arising in connection to this
license. Notwithstanding the foregoing two (2) sentences, if Creative
Commons has expressly identified itself as the Licensor hereunder, it
shall have all rights and obligations of Licensor.
Except for the limited purpose of indicating to the public that the
Work is licensed under the CCPL, Creative Commons does not authorize
the use by either party of the trademark "Creative Commons" or any
related trademark or logo of Creative Commons without the prior
written consent of Creative Commons. Any permitted use will be in
compliance with Creative Commons' then-current trademark usage
guidelines, as may be published on its website or otherwise made
available upon request from time to time. For the avoidance of doubt,
this trademark restriction does not form part of this License.
Creative Commons may be contacted at http://creativecommons.org/.
\ No newline at end of file
# Ratchet v2.0.2 [![Build Status](https://secure.travis-ci.org/twbs/ratchet.png)](http://travis-ci.org/twbs/ratchet) [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
Build mobile apps with simple HTML, CSS, and JS components.
## Table of contents
- [Getting started](#getting-started)
- [Documentation](#documentation)
- [Support](#support)
- [Contributing](#contributing)
- [Troubleshooting](#troubleshooting)
- [Versioning](#versioning)
- [Maintainers](#maintainers)
- [License](#license)
## Getting started
- Clone the repo with `git clone https://github.com/twbs/ratchet.git` or just [download](http://github.com/twbs/ratchet/archive/v2.0.2.zip) the bundled CSS and JS
- [Read the docs](http://goratchet.com) to learn about the components and how to get a prototype on your phone
- [Check out examples](http://dcloudio.github.io/mui/examples/)
Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/twbs/ratchet/tags).
### What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ └── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ └── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff
```
We provide compiled CSS and JS (`ratchet.*`), as well as compiled and minified CSS and JS (`ratchet.min.*`). The Ratchicon fonts are included, as are the optional Android and iOS platform themes.
## Documentation
Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://goratchet.com>. The docs may also be run locally.
### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation).
- **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
2. From the root `/ratchet/docs` directory, run `jekyll serve` in the command line.
3. Open <http://localhost:4000> in your browser, and boom!
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
### Documentation for previous releases
Documentation for v1.0.2 has been made available for the time being at <http://dcloudio.github.io/mui/1.0.2/> while folks transition to Ratchet 2.
[Previous releases](https://github.com/twbs/ratchet/releases) and their documentation are also available for download.
## Support
Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet).
## Contributing
Please file a GitHub issue to [report a bug](https://github.com/twbs/ratchet/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md).
## Troubleshooting
A small list of "gotchas" is provided below for designers and developers starting to work with Ratchet.
- Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options:
- Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences)
- Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)
- Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution.
- Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the file:// protocol); consequently, Ratchet does not work when opened directly as a file.
- A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run ```python -m SimpleHTTPServer <port>``` to serve up the files in the current directory to ```http://localhost:<port>```
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Ratchet is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.
Releases will be numbered with the following format:
`<major>.<minor>.<patch>`
And constructed with the following guidelines:
- Breaking backward compatibility **bumps the major** while resetting minor and patch
- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
- Bug fixes and misc changes **bumps only the patch**
For more information on SemVer, please visit <http://semver.org/>.
## Maintainers
Connor Sears
- <https://twitter.com/connors>
- <https://github.com/connors>
Connor Montgomery
- <https://twitter.com/connor>
- <https://github.com/connor>
Created by Connor Sears, Dave Gamache, and Jacob Thornton.
## License
Ratchet is licensed under the [MIT License](http://opensource.org/licenses/MIT).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>About &middot; Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans:400,300">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">About</h2>
<p class="page-description">Learn about the project's history and meet the maintaining team.</p>
</div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-content">
<div class="docs-section">
<h2>History</h2>
<p>The idea for Ratchet was developed by <a href="https://twitter.com/connors">@connors</a>, <a href="https://twitter.com/dhg">@dhg</a>, and <a href="https://twitter.com/fat">@fat</a> in mid-2012. Before it became a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.</p>
<p>As it became clear that this was the quickest and most effective way to design mobile apps, components were abstracted from these prototypes and became the framework you know today.</p>
<p>Released in November 2012, Ratchet quickly became one of the most popular prototyping tools on GitHub. Following that initial launch, we released v2 &#8211; a complete rewrite. With v2 we've abstracted the platform specific styles into their own theme CSS files, added an icon set called Ratchicons, and offically became part of the Bootstrap family.</p>
</div>
<div class="docs-section">
<h2>Team</h2>
<p class="lead">Ratchet is maintained by one of its creators, a couple of core contributors, and its awesome community.</p>
<div class="list-group">
<div class="list-group-item">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connors&amp;type=follow"></iframe>
<a class="team-member" href="https://github.com/connors">
<img src="http://www.gravatar.com/avatar/53d633ae4622de17906338910085275a" alt="@connors">
<div class="team-member-info">
<strong>Connor Sears</strong>
@connors
</div>
</a>
</div>
<div class="list-group-item">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connor&amp;type=follow"></iframe>
<a class="team-member" href="https://github.com/connor">
<img src="http://www.gravatar.com/avatar/f12ed6301268a1a8d40f292135e6bfca" alt="@connor">
<div class="team-member-info">
<strong>Connor Montgomery</strong>
@connor
</div>
</a>
</div>
<div class="list-group-item">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&amp;type=follow"></iframe>
<a class="team-member" href="https://github.com/mdo">
<img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
<div class="team-member-info">
<strong>Mark Otto</strong>
@mdo
</div>
</a>
</div>
</div>
<p>Get involved with Ratchet development by <a href="https://github.com/twbs/ratchet/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
</li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div>
</div>
</body>
</html>
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative !important;
font: 400 14px/1.5 "Open Sans", sans-serif;
color: #333;
-webkit-text-size-adjust: 100%;
background-color: #fff;
-webkit-font-smoothing: antialiased;
}
.docs-content {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.docs-content {
font-size: 18px;
}
}
.docs-content h1, .docs-content h2, .docs-content h3, .docs-content h4, .docs-content h5, .docs-content h6 {
font-weight: 400;
color: #222;
}
.docs-content h2 {
margin-bottom: .25em;
font-size: 2em;
}
.docs-content h3 {
margin-bottom: .5em;
font-size: 1.25em;
}
.docs-content p {
margin-bottom: 1.5em;
font-size: 1em;
color: #555;
}
.docs-content .lead {
font-size: 1.1em;
color: #777;
}
.docs-header,
.docs-sub-header {
position: relative;
background-color: #0a1855;
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0a1855), color-stop(100%, #da0024));
background-image: -webkit-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
background-image: -moz-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
background-image: -ms-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
background-image: -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 );
}
.docs-header {
height: 100vh;
min-height: 750px;
}
.docs-header .carbonad {
position: relative !important;
margin-top: 0 !important;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
animation-name: fadeintext;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
}
.docs-header .version {
margin-top: 15px;
color: rgba(255, 255, 255, .5);
text-align: center;
}
.docs-header-bottom {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.docs-header {
min-height: 870px;
}
.docs-header .carbonad {
left: 50% !important;
width: 330px !important;
margin-bottom: 60px !important;
margin-left: -165px !important;
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
}
.docs-masthead {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.docs-title {
position: absolute;
left: 50%;
z-index: 20;
margin-bottom: 0;
font-size: 22px;
font-weight: 400;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.docs-nav .docs-nav-trigger {
color: #fff;
opacity: .7;
}
.docs-nav .docs-nav-trigger.active {
opacity: 1;
}
.docs-nav .docs-nav-group {
position: absolute;
top: 40px;
right: 0;
left: 0;
z-index: 20;
height: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, .9);
opacity: 0;
}
.docs-nav .docs-nav-group.active {
height: auto;
opacity: 1;
}
.docs-nav .docs-nav-item {
display: block;
padding: 20px 15px;
font-size: 22px;
}
.docs-jump-menu,
.docs-component-group {
display: none;
}
.docs-title a,
.docs-nav-item {
color: #fff;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
transition: opacity .2s linear;
}
.docs-title a:active, .docs-title a:focus,
.docs-nav-item:active,
.docs-nav-item:focus {
color: #fff;
opacity: .5;
}
@media screen and (min-width: 768px) {
.docs-title {
position: static;
float: left;
font-weight: 300;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.docs-nav {
float: right;
}
.docs-nav .docs-nav-trigger {
display: none;
}
.docs-nav .docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav .docs-nav-item {
position: relative;
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
.docs-jump-menu {
position: absolute;
left: 15px;
display: block;
color: #777;
cursor: pointer;
-webkit-transition: opacity .2 linear;
-moz-transition: opacity .2 linear;
transition: opacity .2 linear;
}
.docs-jump-menu:hover {
color: #428bca;
}
.docs-jump-menu:active {
opacity: .5;
}
.docs-jump-menu .icon-list {
margin-right: 3px;
font-size: 16px;
}
.docs-jump-menu .icon-caret {
position: relative;
top: 4px;
margin-left: -5px;
}
.docs-component-group {
position: absolute;
top: 35px;
left: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .05);
box-shadow: 0 0 8px rgba(0, 0, 0, .05);
}
.docs-component-group.active {
display: block;
}
.docs-component-group:before, .docs-component-group:after {
position: absolute;
left: 30px;
width: 0;
height: 0;
content: '';
}
.docs-component-group:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0, 0, 0, .3);
border-left: 11px solid transparent;
}
.docs-component-group:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
.docs-component-group .docs-component-item {
display: block;
padding: 10px 20px;
color: #777;
}
.docs-component-group .docs-component-item:hover {
color: #fff;
background-color: #428bca;
}
}
.docs-header-content {
position: relative;
padding: 50px 10px;
text-align: center;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
animation-name: fadeintext;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
}
.docs-header-content .btn {
display: block;
padding: 15px 60px 16px;
margin-bottom: 0;
font-size: 18px;
color: #0a1855;
background-color: #fff;
border: 0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.docs-header-content .btn:hover {
background-color: #fff;
-webkit-box-shadow: 0 0 50px rgba(255, 255, 255, .3);
box-shadow: 0 0 50px rgba(255, 255, 255, .3);
}
.docs-header-content .btn:active {
opacity: .5;
}
.docs-subtitle {
max-width: 750px;
margin: 0 auto 20px;
font-size: 28px;
font-weight: 300;
line-height: 38px;
color: #fff;
}
@media screen and (min-width: 768px) {
.docs-header-content {
top: 30%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.docs-header-content .btn {
display: inline-block;
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
}
.carbonad {
width: 100% !important;
height: auto !important;
padding: 15px !important;
font-size: 13px !important;
line-height: 18px !important;
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, .1) !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
}
.carbonad-img {
margin: 0 !important;
}
.carbonad-text,
.carbonad-tag {
display: block !important;
float: none !important;
width: auto !important;
height: auto !important;
margin-left: 145px !important;
font-family: "Open Sans", sans-serif !important;
color: rgba(255, 255, 255, .65) !important;
}
.carbonad-text {
padding-top: 0 !important;
}
.carbonad-tag {
text-align: left !important;
}
.carbonad-text a,
.carbonad-tag a {
color: #fff !important;
}
.carbonad #azcarbon > img {
display: none;
}
@media screen and (min-width: 768px) {
.carbonad {
width: 360px !important;
border-right: 1px solid rgba(255, 255, 255, .1) !important;
border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
border-left: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 3px !important;
}
}
.docs-sub-content {
position: relative;
padding: 55px 15px 65px;
overflow: hidden;
color: #fff;
text-align: center;
}
.docs-sub-content .page-title,
.docs-sub-content .page-description {
margin-top: 0;
margin-bottom: 0;
font-weight: 300;
}
.docs-sub-content .page-title {
margin-bottom: 5px;
font-size: 40px;
}
.docs-sub-content .page-description {
font-size: 24px;
color: #fff;
opacity: .7;
}
@media screen and (min-width: 768px) {
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
}
.docs-section {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #ddd;
}
.docs-section:last-child {
border-bottom: 0;
}
@media screen and (min-width: 768px) {
.docs-module {
margin-top: 35px;
}
}
.docs-module {
padding: 20px;
margin-top: 20px;
border: 1px solid #ddd;
border-radius: 3px;
}
.docs-module .btn-block {
margin-bottom: 0;
}
.version {
margin-top: 10px;
margin-bottom: 0;
font-size: 90%;
color: #777;
}
.docs-footer {
padding: 30px 20px;
margin-top: 50px;
font-size: 14px;
color: #777;
text-align: center;
border-top: 1px solid #ddd;
}
.docs-footer .social {
padding: 0 0 20px;
margin: 0;
list-style: none;
}
.docs-footer .social li {
display: inline-block;
height: 20px;
vertical-align: top;
}
.docs-footer .social .twitter-follow-button {
margin-top: 5px;
}
@media screen and (min-width: 768px) {
.docs-footer .social .twitter-follow-button {
margin-top: 0;
}
}
.docs-footer-text {
margin-top: 0;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.docs-footer-text {
width: 550px;
padding-right: 0;
padding-left: 0;
margin: 0 auto;
}
}
.docs-footer-links {
padding-left: 0;
}
.docs-footer-links li {
display: inline;
padding-right: 3px;
padding-left: 3px;
}
.docs-header .docs-footer {
margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.docs-header .docs-footer .docs-footer-text,
.docs-header .docs-footer .docs-footer-links {
color: rgba(255, 255, 255, .5);
}
.docs-header .docs-footer .docs-footer-text a,
.docs-header .docs-footer .docs-footer-links a {
color: rgba(255, 255, 255, .8);
}
.github-btn {
overflow: hidden;
border: 0;
}
.docs-component-toolbar {
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 20;
height: 44px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #fff;
border-bottom: 1px solid #ddd;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
-webkit-transform: translate3d(0, -55px, 0);
-ms-transform: translate3d(0, -55px, 0);
transform: translate3d(0, -55px, 0);
}
.docs-component-toolbar.visible {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.docs-component-toolbar .segmented-control {
max-width: 300px;
margin: 0 auto;
}
.docs-component-toolbar .segmented-control .control-item {
cursor: pointer;
}
.docs-examples {
margin-top: 30px;
}
.example-wrap {
margin-bottom: 30px;
}
.example-wrap .example {
display: block;
width: 100%;
padding: 3px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 3px;
}
.example-wrap .example-title {
margin-top: 10px;
}
.example-wrap img {
display: block;
width: 100%;
height: auto;
}
code {
padding: 2px 4px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 90%;
background-color: #f9f9f9;
border-radius: 3px;
}
.component {
padding: 50px 15px;
margin-right: -15px;
margin-left: -15px;
border-bottom: 1px solid #ddd;
}
.component.no-border {
border-bottom: 0;
}
@media screen and (min-width: 768px) {
.component {
border-bottom: 0;
}
}
.component-title {
margin-bottom: 10px;
font-size: 24px;
line-height: 34px;
}
.component-description {
margin-bottom: 15px;
font-size: 16px;
}
.component-example {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
}
.component-example,
.component-example .bar,
.component-example .content {
position: relative;
}
.component-example .bar {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.component-example .bar.bar-header-secondary {
top: 0 !important;
border-top: 0;
}
.component-example > .content-padded {
margin: 15px;
}
.component-example > .card {
margin: 15px 0 0;
}
.component-example > .card .control-content {
padding: 15px;
}
.component-example > .btn,
.component-example > .toggle {
margin-bottom: 10px;
}
.component-example .slider {
height: 300px;
}
.component-example .slider .slide {
height: 300px;
}
.component-example .slide img {
width: 100%;
}
.component-example .slide-text {
position: absolute;
top: 45%;
left: 0;
width: 100%;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.component-example-fullbleed,
.highlight {
margin-right: -15px;
margin-left: -15px;
}
.bar-nav ~ .content {
padding: 0;
}
.highlight pre {
padding: 15px;
margin-top: 15px;
overflow-x: auto;
font-size: 13px;
color: #777;
word-wrap: normal;
white-space: pre;
background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.highlight pre code {
padding: 0;
}
@media screen and (min-width: 768px) {
.component,
.component-example-fullbleed,
.highlight {
margin-right: 0;
margin-left: 0;
}
.component {
padding-right: 0;
padding-left: 0;
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.component.active {
opacity: 1;
}
.component-example {
display: none;
}
.highlight pre {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-radius: 3px;
}
}
#ratchicons .icon,
#ratchiconsInDevice .icon {
width: 50px;
height: 50px;
margin: 3px;
font-size: 24px;
line-height: 50px;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
}
#modals .modal {
left: 0;
z-index: 50;
}
#push .component-example {
height: 150px;
overflow: hidden;
}
#buttonsInDevice .btn,
#buttonsBadgesInDevice .btn,
#buttonsWithIconsInDevice .btn {
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
#blockButtonsInDevice .btn-block {
width: 300px;
margin: 10px auto;
}
#segmentedControlsInDevice .segmented-control {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#segmentedControlsInDevice .card span {
padding: 10px;
}
#badgesInDevice {
text-align: center;
}
#badgesInDevice .badge {
margin-top: 10px;
}
#formsInDevice form {
margin: 10px;
}
#formsInDevice form.input-group {
margin: 0;
}
#togglesInDevice .toggle {
margin: 10px auto;
}
.toggle {
cursor: pointer;
}
#popoversInDevice #iwindow:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 11;
content: '';
background-color: rgba(0, 0, 0, .3);
}
@media screen and (min-width: 768px) {
.popover {
position: absolute;
top: 72px;
display: block;
opacity: 1;
}
}
#modalsInDevice #iwindow > .btn {
margin: 10px;
}
@media screen and (min-width: 768px) {
.slider .slide {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.slider .slide img {
display: block;
width: 100%;
height: 570px;
}
.slider .slide-group .slide-text {
position: absolute;
top: 45%;
left: 0;
width: 100%;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
}
.device {
display: none;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
}
@media screen and (min-width: 768px) {
.device {
position: relative;
top: 50px;
display: block;
width: 395px;
height: 813px;
margin-left: -20px;
font-family: "Helvetica Neue", sans-serif;
background-image: url("../img/device-sprite.png");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 300%;
-webkit-transition: background-image .1s linear;
-moz-transition: background-image .1s linear;
transition: background-image .1s linear;
}
.device.device-fixed {
position: fixed;
right: auto;
}
.device .device-content {
position: absolute;
top: 117px;
left: 37px;
width: 321px;
height: 569px;
overflow: hidden;
font-size: 17px;
line-height: 21px;
background-color: #fff;
}
.device .content,
.device .bar,
.device .modal {
position: absolute;
}
.device .content {
top: 44px;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 1200px) {
.device {
margin-left: 39px;
}
}
hr {
height: 0;
margin: 10px 0 30px;
clear: both;
border: solid #ddd;
border-width: 1px 0 0;
}
.column-group:before, .column-group:after {
display: table;
content: " ";
}
.column-group:after {
clear: both;
}
.container {
position: relative;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.column-group {
width: auto;
}
.column {
float: left;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.column.pull-right {
float: right;
}
.column .column-group {
margin-right: -15px;
margin-left: -15px;
}
@media screen and (min-width: 768px) {
.container {
max-width: 940px;
padding: 0;
}
.lg-units-4 {
width: 33.333%;
}
.lg-units-5 {
width: 41.666%;
}
.lg-units-7 {
width: 58.333%;
}
.lg-units-8 {
width: 66.666%;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.platform-ios a {
color: #007aff;
}
.platform-ios a:active {
color: #0062cc;
}
.platform-ios .content {
background-color: #efeff4;
}
.platform-ios .h5, .platform-ios h5,
.platform-ios .h6, .platform-ios h6,
.platform-ios p {
color: #8f8f94;
}
.platform-ios .h5, .platform-ios h5,
.platform-ios .h6, .platform-ios h6 {
font-weight: normal;
text-transform: uppercase;
}
.platform-ios .btn {
color: #929292;
background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all;
-moz-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}
.platform-ios .btn:active, .platform-ios .btn.active {
color: #fff;
background-color: #929292;
}
.platform-ios .btn-primary {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
.platform-ios .btn-primary:active, .platform-ios .btn-primary.active {
background-color: #0062cc;
border: 1px solid #0062cc;
}
.platform-ios .btn-positive {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.platform-ios .btn-positive:active, .platform-ios .btn-positive.active {
background-color: #2ac845;
border: 1px solid #2ac845;
}
.platform-ios .btn-negative {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.platform-ios .btn-negative:active, .platform-ios .btn-negative.active {
background-color: #cf2d28;
border: 1px solid #cf2d28;
}
.platform-ios .btn-outlined {
background-color: transparent;
}
.platform-ios .btn-outlined.btn-primary {
color: #007aff;
}
.platform-ios .btn-outlined.btn-positive {
color: #4cd964;
}
.platform-ios .btn-outlined.btn-negative {
color: #dd524d;
}
.platform-ios .btn-outlined.btn-primary:active, .platform-ios .btn-outlined.btn-positive:active, .platform-ios .btn-outlined.btn-negative:active {
color: #fff;
}
.platform-ios .btn-link {
color: #007aff;
background-color: transparent;
border: none;
}
.platform-ios .btn-link:active, .platform-ios .btn-link.active {
color: #0062cc;
background-color: transparent;
}
.platform-ios .btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.platform-ios .btn .badge.badge-inverted {
background-color: transparent;
}
.platform-ios .btn:active .badge {
color: #fff;
}
.platform-ios .bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
}
.platform-ios .bar.bar-header-secondary {
top: 44px;
}
.platform-ios .bar.bar-footer-secondary {
bottom: 44px;
}
.platform-ios .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-ios .bar.bar-footer, .platform-ios .bar.bar-footer-secondary, .platform-ios .bar.bar-footer-secondary-tab {
border-top: 0;
}
.platform-ios .bar-tab {
border-top: 0;
}
.platform-ios .tab-item {
color: #929292;
}
.platform-ios .tab-item.active, .platform-ios .tab-item:active {
color: #007aff;
}
.platform-ios .bar-nav .btn-link {
color: #007aff;
}
.platform-ios .bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
}
.platform-ios .badge.badge-inverted {
color: #929292;
background-color: transparent;
}
.platform-ios .badge-primary {
color: #fff;
background-color: #007aff;
}
.platform-ios .badge-primary.badge-inverted {
color: #007aff;
background-color: transparent;
}
.platform-ios .badge-positive {
color: #fff;
background-color: #4cd964;
}
.platform-ios .badge-positive.badge-inverted {
color: #4cd964;
background-color: transparent;
}
.platform-ios .badge-negative {
color: #fff;
background-color: #dd524d;
}
.platform-ios .badge-negative.badge-inverted {
color: #dd524d;
background-color: transparent;
}
.platform-ios .card .table-view {
background-image: none;
}
.platform-ios .card .table-view-cell:last-child {
background-image: none;
}
.platform-ios .table-view {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
.platform-ios .table-view .table-view-cell {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.platform-ios .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-ios .table-view .table-view-cell > a:not(.btn):active {
color: inherit;
}
.platform-ios .table-view .table-view-divider {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios input[type="text"],
.platform-ios input[type="search"],
.platform-ios input[type="password"],
.platform-ios input[type="datetime"],
.platform-ios input[type="datetime-local"],
.platform-ios input[type="date"],
.platform-ios input[type="month"],
.platform-ios input[type="time"],
.platform-ios input[type="week"],
.platform-ios input[type="number"],
.platform-ios input[type="email"],
.platform-ios input[type="url"],
.platform-ios input[type="tel"],
.platform-ios input[type="color"],
.platform-ios .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
}
.platform-ios input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, .1);
border: 0;
border-radius: 6px;
}
.platform-ios input[type="search"]:focus {
text-align: left;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios .input-group {
height: auto;
}
.platform-ios .input-group {
padding: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
}
.platform-ios .input-group input {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
}
.platform-ios .input-group input:last-child {
background-image: none;
}
.platform-ios .input-row {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.platform-ios .input-row:last-child,
.platform-ios .input-row label + input {
background-image: none;
}
.platform-ios .segmented-control {
background-color: transparent;
border: 1px solid #929292;
}
.platform-ios .segmented-control .control-item {
color: #929292;
border-color: #929292;
-webkit-transition: background-color .1s linear;
-moz-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.platform-ios .segmented-control .control-item:active {
background-color: #ebebeb;
}
.platform-ios .segmented-control .control-item.active {
color: #fff;
background-color: #929292;
}
.platform-ios .segmented-control-primary {
border: 1px solid #007aff;
}
.platform-ios .segmented-control-primary .control-item {
color: #007aff;
border-color: inherit;
}
.platform-ios .segmented-control-primary .control-item:active {
background-color: #b3d7ff;
}
.platform-ios .segmented-control-primary .control-item.active {
color: #fff;
background-color: #007aff;
}
.platform-ios .segmented-control-positive {
border: 1px solid #4cd964;
}
.platform-ios .segmented-control-positive .control-item {
color: #4cd964;
border-color: inherit;
}
.platform-ios .segmented-control-positive .control-item:active {
background-color: #dff8e3;
}
.platform-ios .segmented-control-positive .control-item.active {
color: #fff;
background-color: #4cd964;
}
.platform-ios .segmented-control-negative {
border: 1px solid #dd524d;
}
.platform-ios .segmented-control-negative .control-item {
color: #dd524d;
border-color: inherit;
}
.platform-ios .segmented-control-negative .control-item:active {
background-color: #fae4e3;
}
.platform-ios .segmented-control-negative .control-item.active {
color: #fff;
background-color: #dd524d;
}
.platform-ios .popover {
border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
}
.platform-ios .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, .98);
}
.platform-ios .popover .bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-ios .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.platform-ios .popover .table-view {
background-image: none;
border-radius: 12px;
}
.platform-ios .modal {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.platform-ios .modal.active {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.platform-ios .toggle {
width: 47px;
border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border;
transition-property: box-shadow, border;
}
.platform-ios .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.platform-ios .toggle:before {
display: none;
}
.platform-ios .toggle.active {
background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964;
}
.platform-ios .toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0);
}
.platform-ios .toggle.active .toggle-handle {
border-color: #4cd964;
}
.platform-ios .content.fade {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.platform-ios .content.sliding {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.platform-ios .content.sliding.sliding-in, .platform-ios .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
-moz-animation-duration: .4s;
animation-duration: .4s;
}
.platform-ios .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.platform-ios .content.sliding.left {
-webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
@-webkit-keyframes fadeOverlay {
from {
-webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
}
to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
}
}
.platform-ios .device {
background-position: -395px 0;
}
.platform-ios .device .device-content {
background-color: #efeff4;
}
.platform-android body {
font-family: "Roboto", sans-serif;
font-size: 18px;
line-height: 22px;
color: #222;
}
.platform-android a {
color: #33b5e5;
}
.platform-android a:active {
color: #1a9bcb;
}
.platform-android .content {
background-color: #f2f2f2;
}
.platform-android .bar-nav ~ .content {
padding-top: 50px;
}
.platform-android .bar-header-secondary ~ .content {
padding-top: 100px;
}
.platform-android .bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.platform-android .bar-footer ~ .content {
padding-bottom: 50px;
}
.platform-android .bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.platform-android .btn {
padding: 8px 15px;
font-size: 14px;
color: #222;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
}
.platform-android .btn:active, .platform-android .btn.active {
color: #222;
background-color: #999;
border: 0;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.platform-android .btn-primary {
color: #fff;
background-color: #33b5e5;
border: 0;
}
.platform-android .btn-primary:active, .platform-android .btn-primary.active {
color: #fff;
background-color: #1a9bcb;
border: 0;
}
.platform-android .btn-positive {
color: #fff;
background-color: #9c0;
border: 0;
}
.platform-android .btn-positive:active, .platform-android .btn-positive.active {
color: #fff;
background-color: #739900;
border: 0;
}
.platform-android .btn-negative {
color: #fff;
background-color: #f44;
border: 0;
}
.platform-android .btn-negative:active, .platform-android .btn-negative.active {
color: #fff;
background-color: #f11;
border: 0;
}
.platform-android .btn-outlined {
background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary {
color: #33b5e5;
border: 1px solid #33b5e5;
}
.platform-android .btn-outlined.btn-primary:active {
background-color: #33b5e5;
border: 1px solid #33b5e5;
}
.platform-android .btn-outlined.btn-positive {
color: #9c0;
border: 1px solid #9c0;
}
.platform-android .btn-outlined.btn-positive:active {
background-color: #9c0;
border: 1px solid #9c0;
}
.platform-android .btn-outlined.btn-negative {
color: #f44;
border: 1px solid #f44;
}
.platform-android .btn-outlined.btn-negative:active {
background-color: #f44;
border: 1px solid #f44;
}
.platform-android .btn-outlined:active {
background-color: #999;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-link:active, .platform-android .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-block {
padding: 15px 0;
font-size: 18px;
}
.platform-android .btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.platform-android .btn .badge.badge-inverted {
background-color: transparent;
}
.platform-android .btn:active .badge {
color: #fff;
}
.platform-android .bar {
height: 50px;
background-color: #ddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
}
.platform-android .bar.bar-header-secondary {
top: 50px;
}
.platform-android .bar.bar-footer-secondary {
bottom: 50px;
}
.platform-android .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-android .bar .bar-footer,
.platform-android .bar .bar-footer-secondary,
.platform-android .bar .bar-footer-secondary-tab {
border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.platform-android .bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.platform-android .bar-tab .tab-item {
color: #929292;
}
.platform-android .bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.platform-android .bar-tab .tab-item:active {
color: #929292;
background-color: #78c6e3;
}
.platform-android .bar-tab .tab-item .icon {
top: 3px;
padding-top: 0;
padding-bottom: 0;
}
.platform-android .title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.platform-android .bar .btn {
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.platform-android .bar .btn-link {
top: 0;
padding: 0;
font-size: 18px;
line-height: 49px;
color: #33b5e5;
}
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb;
}
.platform-android .bar .btn-link .icon {
top: 2px;
padding: 0;
}
.platform-android .bar .btn-block {
top: 4px;
}
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .bar .icon {
padding-top: 13px;
padding-bottom: 13px;
}
.platform-android .bar .title .icon {
padding: 0;
}
.platform-android .bar .title .icon.icon-caret {
top: 10px;
color: #777;
}
.platform-android .bar input[type="search"] {
height: 35px;
}
.platform-android .badge.badge-inverted {
color: #999;
background-color: transparent;
}
.platform-android .badge-primary {
color: #fff;
background-color: #33b5e5;
}
.platform-android .badge-primary.badge-inverted {
color: #33b5e5;
background-color: transparent;
}
.platform-android .badge-positive {
color: #fff;
background-color: #9c0;
}
.platform-android .badge-positive.badge-inverted {
color: #9c0;
background-color: transparent;
}
.platform-android .badge-negative {
color: #fff;
background-color: #f44;
}
.platform-android .badge-negative.badge-inverted {
color: #f44;
background-color: transparent;
}
.platform-android .card {
background-color: transparent;
border-color: #d9d9d9;
border-radius: 2px;
}
.platform-android .table-view {
background-color: transparent;
}
.platform-android .table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.platform-android .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active {
color: inherit;
background-color: #e0e0e0;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.platform-android .table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: transparent;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
}
.platform-android .table-view-cell .navigate-left > .btn,
.platform-android .table-view-cell .navigate-left > .badge,
.platform-android .table-view-cell .navigate-left > .toggle,
.platform-android .table-view-cell .navigate-right > .btn,
.platform-android .table-view-cell .navigate-right > .badge,
.platform-android .table-view-cell .navigate-right > .toggle,
.platform-android .table-view-cell .push-left > .btn,
.platform-android .table-view-cell .push-left > .badge,
.platform-android .table-view-cell .push-left > .toggle,
.platform-android .table-view-cell .push-right > .btn,
.platform-android .table-view-cell .push-right > .badge,
.platform-android .table-view-cell .push-right > .toggle,
.platform-android .table-view-cell > a .navigate-left > .btn,
.platform-android .table-view-cell > a .navigate-left > .badge,
.platform-android .table-view-cell > a .navigate-left > .toggle,
.platform-android .table-view-cell > a .navigate-right > .btn,
.platform-android .table-view-cell > a .navigate-right > .badge,
.platform-android .table-view-cell > a .navigate-right > .toggle,
.platform-android .table-view-cell > a .push-left > .btn,
.platform-android .table-view-cell > a .push-left > .badge,
.platform-android .table-view-cell > a .push-left > .toggle,
.platform-android .table-view-cell > a .push-right > .btn,
.platform-android .table-view-cell > a .push-right > .badge,
.platform-android .table-view-cell > a .push-right > .toggle {
right: 15px;
}
.platform-android select,
.platform-android textarea,
.platform-android input[type="text"],
.platform-android input[type="search"],
.platform-android input[type="password"],
.platform-android input[type="datetime"],
.platform-android input[type="datetime-local"],
.platform-android input[type="date"],
.platform-android input[type="month"],
.platform-android input[type="time"],
.platform-android input[type="week"],
.platform-android input[type="number"],
.platform-android input[type="email"],
.platform-android input[type="url"],
.platform-android input[type="tel"],
.platform-android input[type="color"],
.platform-android .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.platform-android input[type="search"] {
border-radius: 2px;
}
.platform-android select,
.platform-android textarea,
.platform-android .input-group {
height: auto;
}
.platform-android .input-group {
padding: 0;
border: 0;
}
.platform-android .input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .input-group input:last-child {
background-image: none;
}
.platform-android .input-row {
height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.platform-android .input-row label {
padding-top: 10px;
padding-bottom: 10px;
}
.platform-android .input-row label + input {
background-image: none;
border-bottom: 0;
}
.platform-android .segmented-control {
font-size: 14px;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.platform-android .segmented-control .control-item {
padding-top: 10px;
padding-bottom: 10px;
color: #222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.platform-android .segmented-control .control-item:first-child {
border-left-width: 0;
}
.platform-android .segmented-control .control-item:active, .platform-android .segmented-control .control-item.active {
background-color: #999;
}
.platform-android .segmented-control-primary {
border: 0;
}
.platform-android .segmented-control-primary .control-item {
color: #fff;
border-color: inherit;
}
.platform-android .segmented-control-primary .control-item:active, .platform-android .segmented-control-primary .control-item.active {
color: #fff;
background-color: #33b5e5;
}
.platform-android .segmented-control-positive {
border: 0;
}
.platform-android .segmented-control-positive .control-item {
color: #fff;
border-color: inherit;
}
.platform-android .segmented-control-positive .control-item:active, .platform-android .segmented-control-positive .control-item.active {
color: #fff;
background-color: #9c0;
}
.platform-android .segmented-control-negative {
border: 0;
}
.platform-android .segmented-control-negative .control-item {
color: #fff;
border-color: inherit;
}
.platform-android .segmented-control-negative .control-item:active, .platform-android .segmented-control-negative .control-item.active {
color: #fff;
background-color: #f44;
}
.platform-android .popover {
top: 47px;
left: 15px;
width: 200px;
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
}
.platform-android .popover:before {
display: none;
}
.platform-android .popover.visible {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.platform-android .backdrop {
background-color: transparent;
}
.platform-android .popover .bar {
border-radius: 0;
}
.platform-android .popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.platform-android .popover .table-view {
border-radius: 12px;
}
.platform-android .toggle {
width: 104px;
height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
border-radius: 0;
}
.platform-android .toggle .toggle-handle {
top: 0;
left: 0;
width: 50px;
height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.platform-android .toggle:before {
top: 1px;
right: auto;
left: 11px;
z-index: 3;
color: #fff;
}
.platform-android .toggle.active {
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
}
.platform-android .toggle.active .toggle-handle {
margin-right: 2px;
background-color: #33b5e5;
border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
.platform-android .toggle.active:before {
right: 14px;
left: auto;
color: #fff;
}
.platform-android .navigate-left:after,
.platform-android .push-left:after {
content: '';
}
.platform-android .navigate-right:after,
.platform-android .push-right:after {
content: '';
}
.platform-android .icon-caret:before {
content: '\e800';
}
.platform-android .icon-down:before,
.platform-android .icon-down-nav:before {
content: '\e801';
}
.platform-android .icon-download:before {
content: '\e802';
}
.platform-android .icon-left:before,
.platform-android .icon-left-nav:before {
content: '\e803';
}
.platform-android .icon-more-vertical:before {
content: '\e804';
}
.platform-android .icon-more:before {
content: '\e805';
}
.platform-android .icon-right:before,
.platform-android .icon-right-nav:before {
content: '\e806';
}
.platform-android .icon-search:before {
content: '\e807';
}
.platform-android .icon-share:before {
content: '\e808';
}
.platform-android .icon-up:before,
.platform-android .icon-up-nav:before {
content: '\e809';
}
.platform-android .device {
font-family: 'Roboto', sans-serif;
background-position: -790px 0;
}
.platform-android .device .device-content {
font-size: 18px;
line-height: 22px;
background-color: #f2f2f2;
}
.platform-android .device .content {
top: 50px;
}
.platform-android .device .popover {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.platform-android .bar ~ .content {
padding: 0;
}
@-webkit-keyframes fadeintext {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bs-callout {
padding: 20px;
margin: 20px 0;
border-left: 3px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
background-color: #fff;
border-radius: 3px;
}
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
background-color: #fcf8f2;
border-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
background-color: #f4f8fa;
border-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group .team-member {
font-size: 14px;
line-height: 32px;
color: #555;
}
.list-group img {
float: left;
width: 32px;
margin-right: 10px;
border-radius: 4px;
}
.list-group .team-member-info {
overflow: hidden;
}
.list-group .github-btn {
float: right;
width: 121px;
height: 20px;
margin-top: 6px;
}
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/body,html{width:100%;height:100%}body{position:relative!important;font:400 14px/1.5 "Open Sans",sans-serif;color:#333;-webkit-text-size-adjust:100%;background-color:#fff;-webkit-font-smoothing:antialiased}.docs-content{font-size:14px}@media screen and (min-width:768px){.docs-content{font-size:18px}}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{font-weight:400;color:#222}.docs-content h2{margin-bottom:.25em;font-size:2em}.docs-content h3{margin-bottom:.5em;font-size:1.25em}.docs-content p{margin-bottom:1.5em;font-size:1em;color:#555}.docs-content .lead{font-size:1.1em;color:#777}.docs-header,.docs-sub-header{position:relative;background-color:#fffbe8;}.docs-header{height:100vh;min-height:750px}.docs-header .carbonad{position:relative!important;margin-top:0!important;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header .version{margin-top:15px;color:rgba(255,255,255,.5);text-align:center}.docs-header-bottom{position:absolute;right:0;bottom:0;left:0}@media screen and (min-width:768px){.docs-header{min-height:870px}.docs-header .carbonad{left:50%!important;width:330px!important;margin-bottom:60px!important;margin-left:-165px!important}.docs-sub-header .carbonad{position:absolute!important;top:50%!important;right:15px!important;margin-top:0!important;-webkit-transform:translateY(-50%)!important;-ms-transform:translateY(-50%)!important;transform:translateY(-50%)!important}}.docs-masthead{position:relative;padding-top:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1);background-color: #000;}.docs-title{position:absolute;left:50%;z-index:20;margin-bottom:0;font-size:22px;font-weight:400;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.docs-nav .docs-nav-trigger{color:#fff;opacity:.7}.docs-nav .docs-nav-trigger.active{opacity:1}.docs-nav .docs-nav-group{position:absolute;top:40px;right:0;left:0;z-index:20;height:0;overflow:hidden;background-color:rgba(0,0,0,.9);opacity:0}.docs-nav .docs-nav-group.active{height:auto;opacity:1}.docs-nav .docs-nav-item{display:block;padding:20px 15px;font-size:22px}.docs-component-group,.docs-jump-menu{display:none}.docs-nav-item,.docs-title a{color:#fff;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.docs-nav-item:active,.docs-nav-item:focus,.docs-title a:active,.docs-title a:focus{color:#fff;opacity:.5}@media screen and (min-width:768px){.docs-title{position:static;float:left;font-weight:300;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-nav{float:right}.docs-nav .docs-nav-trigger{display:none}.docs-nav .docs-nav-group{position:static;display:block;height:auto;background-color:transparent;opacity:1}.docs-nav .docs-nav-item{position:relative;display:inline-block;padding:0 15px;font-size:14px}.docs-jump-menu{position:absolute;left:15px;display:block;color:#777;cursor:pointer;-webkit-transition:opacity .2 linear;-moz-transition:opacity .2 linear;transition:opacity .2 linear}.docs-jump-menu:hover{color:#428bca}.docs-jump-menu:active{opacity:.5}.docs-jump-menu .icon-list{margin-right:3px;font-size:16px}.docs-jump-menu .icon-caret{position:relative;top:4px;margin-left:-5px}.docs-component-group{position:absolute;top:35px;left:15px;padding-top:10px;padding-bottom:10px;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:3px;-webkit-box-shadow:0 0 8px rgba(0,0,0,.05);box-shadow:0 0 8px rgba(0,0,0,.05)}.docs-component-group.active{display:block}.docs-component-group:after,.docs-component-group:before{position:absolute;left:30px;width:0;height:0;content:''}.docs-component-group:before{top:-11px;margin-left:-11px;border-right:11px solid transparent;border-bottom:11px solid rgba(0,0,0,.3);border-left:11px solid transparent}.docs-component-group:after{top:-10px;margin-left:-10px;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent}.docs-component-group .docs-component-item{display:block;padding:10px 20px;color:#777}.docs-component-group .docs-component-item:hover{color:#fff;background-color:#428bca}}.docs-header-content{position:relative;padding:50px 10px;text-align:center;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header-content .btn{display:block;padding:15px 60px 16px;margin-bottom:0;font-size:18px;color:#0a1855;background-color:#d64c28;border:0;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}.docs-header-content .btn:hover{background-color:#fff;-webkit-box-shadow:0 0 50px rgba(255,255,255,.3);box-shadow:0 0 50px rgba(255,255,255,.3)}.docs-header-content .btn:active{opacity:.5}.docs-subtitle{max-width:750px;margin:0 auto 20px;font-size:28px;font-weight:300;line-height:38px;color:#d64c28}@media screen and (min-width:768px){.docs-header-content{top:30%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.docs-header-content .btn{display:inline-block}.docs-subtitle{margin-bottom:30px;font-size:41px;line-height:60px}}.carbonad{width:100%!important;height:auto!important;padding:15px!important;font-size:13px!important;line-height:18px!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.1)!important;border-right:0!important;border-bottom:0!important;border-left:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Open Sans",sans-serif!important;color:rgba(255,255,255,.65)!important}.carbonad-text{padding-top:0!important}.carbonad-tag{text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media screen and (min-width:768px){.carbonad{width:360px!important;border-right:1px solid rgba(255,255,255,.1)!important;border-bottom:1px solid rgba(255,255,255,.1)!important;border-left:1px solid rgba(255,255,255,.1)!important;border-radius:3px!important}}.docs-sub-content{position:relative;padding:55px 15px 65px;overflow:hidden;color:#fff;text-align:center}.docs-sub-content .page-description,.docs-sub-content .page-title{margin-top:0;margin-bottom:0;font-weight:300}.docs-sub-content .page-title{margin-bottom:5px;font-size:40px}.docs-sub-content .page-description{font-size:24px;color:#fff;opacity:.7}@media screen and (min-width:768px){.docs-sub-content{margin-right:380px;text-align:left}}.docs-section{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #ddd}.docs-section:last-child{border-bottom:0}@media screen and (min-width:768px){.docs-module{margin-top:35px}}.docs-module{padding:20px;margin-top:20px;border:1px solid #ddd;border-radius:3px}.docs-module .btn-block{margin-bottom:0}.version{margin-top:10px;margin-bottom:0;font-size:90%;color:#777}.docs-footer{padding:30px 20px;margin-top:50px;font-size:14px;color:#777;text-align:center;border-top:1px solid #ddd}.docs-footer .social{padding:0 0 20px;margin:0;list-style:none}.docs-footer .social li{display:inline-block;height:20px;vertical-align:top}.docs-footer .social .twitter-follow-button{margin-top:5px}@media screen and (min-width:768px){.docs-footer .social .twitter-follow-button{margin-top:0}}.docs-footer-text{margin-top:0;margin-bottom:0}@media screen and (min-width:768px){.docs-footer-text{width:550px;padding-right:0;padding-left:0;margin:0 auto}}.docs-footer-links{padding-left:0}.docs-footer-links li{display:inline;padding-right:3px;padding-left:3px}.docs-header .docs-footer{margin-top:0;border-top:1px solid rgba(255,255,255,.1)}.docs-header .docs-footer .docs-footer-links,.docs-header .docs-footer .docs-footer-text{color:#696969}.docs-header .docs-footer .docs-footer-links a,.docs-header .docs-footer .docs-footer-text a{color:#696969;}.github-btn{overflow:hidden;border:0}.docs-component-toolbar{position:fixed;top:0;right:0;bottom:auto;left:0;z-index:20;height:44px;padding-top:8px;padding-bottom:8px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;transition:transform .5s;-webkit-transform:translate3d(0,-55px,0);-ms-transform:translate3d(0,-55px,0);transform:translate3d(0,-55px,0)}.docs-component-toolbar.visible{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.docs-component-toolbar .segmented-control{max-width:300px;margin:0 auto}.docs-component-toolbar .segmented-control .control-item{cursor:pointer}.docs-examples{margin-top:30px}.example-wrap{margin-bottom:30px}.example-wrap .example{display:block;width:100%;padding:3px;overflow:hidden;border:1px solid #ddd;border-radius:3px}.example-wrap .example-title{margin-top:10px}.example-wrap img{display:block;width:100%;height:auto}code{padding:2px 4px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:90%;background-color:#f9f9f9;border-radius:3px}.component{padding:50px 15px;margin-right:-15px;margin-left:-15px;border-bottom:1px solid #ddd}.component.no-border{border-bottom:0}@media screen and (min-width:768px){.component{border-bottom:0}}.component-title{margin-bottom:10px;font-size:24px;line-height:34px}.component-description{margin-bottom:15px;font-size:16px}.component-example{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}.component-example,.component-example .bar,.component-example .content{position:relative}.component-example .bar{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.component-example .bar.bar-header-secondary{top:0!important;border-top:0}.component-example>.content-padded{margin:15px}.component-example>.card{margin:15px 0 0}.component-example>.card .control-content{padding:15px}.component-example>.btn,.component-example>.toggle{margin-bottom:10px}.component-example .slider,.component-example .slider .slide{height:300px}.component-example .slide img{width:100%}.component-example .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.component-example-fullbleed,.highlight{margin-right:-15px;margin-left:-15px}.bar-nav~.content{padding:0}.highlight pre{padding:15px;margin-top:15px;overflow-x:auto;font-size:13px;color:#777;word-wrap:normal;white-space:pre;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.highlight pre code{padding:0}@media screen and (min-width:768px){.component,.component-example-fullbleed,.highlight{margin-right:0;margin-left:0}.component{padding-right:0;padding-left:0;opacity:.3;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.component.active{opacity:1}.component-example{display:none}.highlight pre{border-right:1px solid #ddd;border-left:1px solid #ddd;border-radius:3px}}#ratchicons .icon,#ratchiconsInDevice .icon{width:50px;height:50px;margin:3px;font-size:24px;line-height:50px;text-align:center;background-color:#fff;border:1px solid #ddd;border-radius:25px}#modals .modal{left:0;z-index:50}#push .component-example{height:150px;overflow:hidden}#buttonsBadgesInDevice .btn,#buttonsInDevice .btn,#buttonsWithIconsInDevice .btn{margin-top:10px;margin-right:100px;margin-left:10px}#blockButtonsInDevice .btn-block{width:300px;margin:10px auto}#segmentedControlsInDevice .segmented-control{margin-top:10px;margin-right:10px;margin-left:10px}#segmentedControlsInDevice .card span{padding:10px}#badgesInDevice{text-align:center}#badgesInDevice .badge{margin-top:10px}#formsInDevice form{margin:10px}#formsInDevice form.input-group{margin:0}#togglesInDevice .toggle{margin:10px auto}.toggle{cursor:pointer}#popoversInDevice #iwindow:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:11;content:'';background-color:rgba(0,0,0,.3)}@media screen and (min-width:768px){.popover{position:absolute;top:72px;display:block;opacity:1}}#modalsInDevice #iwindow>.btn{margin:10px}@media screen and (min-width:768px){.slider .slide{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.slider .slide img{display:block;width:100%;height:570px}.slider .slide-group .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}}.device{display:none;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}@media screen and (min-width:768px){.device{position:relative;top:50px;display:block;width:395px;height:813px;margin-left:-20px;font-family:"Helvetica Neue",sans-serif;background-image:url(../img/device-sprite.png);background-repeat:no-repeat;background-position:0 0;background-size:300%;-webkit-transition:background-image .1s linear;-moz-transition:background-image .1s linear;transition:background-image .1s linear}.device.device-fixed{position:fixed;right:auto}.device .device-content{position:absolute;top:117px;left:37px;width:321px;height:569px;overflow:hidden;font-size:17px;line-height:21px;background-color:#fff}.device .bar,.device .content,.device .modal{position:absolute}.device .content{top:44px;right:0;bottom:0;left:0}}@media screen and (min-width:1200px){.device{margin-left:39px}}hr{height:0;margin:10px 0 30px;clear:both;border:solid #ddd;border-width:1px 0 0}.column-group:after,.column-group:before{display:table;content:" "}.column-group:after{clear:both}.container{position:relative;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}.column-group{width:auto}.column{float:left;width:100%;padding-right:15px;padding-left:15px}.column.pull-right{float:right}.column .column-group{margin-right:-15px;margin-left:-15px}@media screen and (min-width:768px){.container{max-width:940px;padding:0}.lg-units-4{width:33.333%}.lg-units-5{width:41.666%}.lg-units-7{width:58.333%}.lg-units-8{width:66.666%}}@media screen and (min-width:1200px){.container{max-width:1170px}}.platform-ios a{color:#007aff}.platform-ios a:active{color:#0062cc}.platform-ios .content{background-color:#efeff4}.platform-ios .h5,.platform-ios .h6,.platform-ios h5,.platform-ios h6,.platform-ios p{color:#8f8f94}.platform-ios .h5,.platform-ios .h6,.platform-ios h5,.platform-ios h6{font-weight:400;text-transform:uppercase}.platform-ios .btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;-moz-transition:all;transition:all;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}.platform-ios .btn.active,.platform-ios .btn:active{color:#fff;background-color:#929292}.platform-ios .btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.platform-ios .btn-primary.active,.platform-ios .btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.platform-ios .btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.platform-ios .btn-positive.active,.platform-ios .btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.platform-ios .btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.platform-ios .btn-negative.active,.platform-ios .btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.platform-ios .btn-outlined{background-color:transparent}.platform-ios .btn-outlined.btn-primary{color:#007aff}.platform-ios .btn-outlined.btn-positive{color:#4cd964}.platform-ios .btn-outlined.btn-negative{color:#dd524d}.platform-ios .btn-outlined.btn-negative:active,.platform-ios .btn-outlined.btn-positive:active,.platform-ios .btn-outlined.btn-primary:active{color:#fff}.platform-ios .btn-link{color:#007aff;background-color:transparent;border:none}.platform-ios .btn-link.active,.platform-ios .btn-link:active{color:#0062cc;background-color:transparent}.platform-ios .btn .badge{background-color:rgba(0,0,0,.15)}.platform-ios .btn .badge.badge-inverted{background-color:transparent}.platform-ios .btn:active .badge{color:#fff}.platform-ios .bar{background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85)}.platform-ios .bar.bar-header-secondary{top:44px}.platform-ios .bar.bar-footer-secondary{bottom:44px}.platform-ios .bar.bar-footer-secondary-tab{bottom:50px}.platform-ios .bar-tab,.platform-ios .bar.bar-footer,.platform-ios .bar.bar-footer-secondary,.platform-ios .bar.bar-footer-secondary-tab{border-top:0}.platform-ios .tab-item{color:#929292}.platform-ios .bar-nav .btn-link,.platform-ios .tab-item.active,.platform-ios .tab-item:active{color:#007aff}.platform-ios .bar-nav .btn-link:active{color:#007aff;opacity:.6}.platform-ios .badge.badge-inverted{color:#929292;background-color:transparent}.platform-ios .badge-primary{color:#fff;background-color:#007aff}.platform-ios .badge-primary.badge-inverted{color:#007aff;background-color:transparent}.platform-ios .badge-positive{color:#fff;background-color:#4cd964}.platform-ios .badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.platform-ios .badge-negative{color:#fff;background-color:#dd524d}.platform-ios .badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.platform-ios .card .table-view,.platform-ios .card .table-view-cell:last-child{background-image:none}.platform-ios .table-view{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.platform-ios .table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.platform-ios .table-view .table-view-cell:last-child{background-image:none}.platform-ios .table-view .table-view-cell>a:not(.btn):active{color:inherit}.platform-ios .table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.platform-ios .input-group,.platform-ios input[type=color],.platform-ios input[type=date],.platform-ios input[type=datetime-local],.platform-ios input[type=datetime],.platform-ios input[type=email],.platform-ios input[type=month],.platform-ios input[type=number],.platform-ios input[type=password],.platform-ios input[type=search],.platform-ios input[type=tel],.platform-ios input[type=text],.platform-ios input[type=time],.platform-ios input[type=url],.platform-ios input[type=week],.platform-ios select,.platform-ios textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}.platform-ios input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}.platform-ios input[type=search]:focus{text-align:left}.platform-ios .input-group,.platform-ios select,.platform-ios textarea{height:auto}.platform-ios .input-group{padding:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border:0}.platform-ios .input-group input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border:0}.platform-ios .input-group input:last-child{background-image:none}.platform-ios .input-row{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.platform-ios .input-row label+input,.platform-ios .input-row:last-child{background-image:none}.platform-ios .segmented-control{background-color:transparent;border:1px solid #929292}.platform-ios .segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;transition:background-color .1s linear}.platform-ios .segmented-control .control-item:active{background-color:#ebebeb}.platform-ios .segmented-control .control-item.active{color:#fff;background-color:#929292}.platform-ios .segmented-control-primary{border:1px solid #007aff}.platform-ios .segmented-control-primary .control-item{color:#007aff;border-color:inherit}.platform-ios .segmented-control-primary .control-item:active{background-color:#b3d7ff}.platform-ios .segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.platform-ios .segmented-control-positive{border:1px solid #4cd964}.platform-ios .segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.platform-ios .segmented-control-positive .control-item:active{background-color:#dff8e3}.platform-ios .segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.platform-ios .segmented-control-negative{border:1px solid #dd524d}.platform-ios .segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.platform-ios .segmented-control-negative .control-item:active{background-color:#fae4e3}.platform-ios .segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.platform-ios .popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-moz-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.platform-ios .popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.platform-ios .popover .bar{-webkit-box-shadow:none;box-shadow:none}.platform-ios .popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.platform-ios .popover .table-view{background-image:none;border-radius:12px}.platform-ios .modal,.platform-ios .modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.platform-ios .toggle{width:47px;border:2px solid #e6e6e6;-webkit-box-shadow:inset 0 0 0 0 #e1e1e1;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;-moz-transition-property:box-shadow,border;transition-property:box-shadow,border}.platform-ios .toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.platform-ios .toggle:before{display:none}.platform-ios .toggle.active{background-color:transparent;border:2px solid #4cd964;-webkit-box-shadow:inset 0 0 0 13px #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.platform-ios .toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);-ms-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.platform-ios .content.fade{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.platform-ios .content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.platform-ios .content.sliding.right:not([class*=sliding-in]),.platform-ios .content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;-moz-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.4s}.platform-ios .content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;-moz-animation-direction:reverse;animation-direction:reverse}.platform-ios .content.sliding.left{-webkit-transform:translate3d(-20%,0,0);-ms-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{-webkit-box-shadow:0 0 10px transparent,-320px 0 0 transparent;box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{-webkit-box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}}.platform-ios .device{background-position:-395px 0}.platform-ios .device .device-content{background-color:#efeff4}.platform-android body{font-family:Roboto,sans-serif;font-size:18px;line-height:22px;color:#222}.platform-android a{color:#33b5e5}.platform-android a:active{color:#1a9bcb}.platform-android .content{background-color:#f2f2f2}.platform-android .bar-nav~.content{padding-top:50px}.platform-android .bar-header-secondary~.content{padding-top:100px}.platform-android .bar-tab~.content{padding-top:50px;padding-bottom:0}.platform-android .bar-footer~.content{padding-bottom:50px}.platform-android .bar-footer-secondary~.content{padding-bottom:100px}.platform-android .btn{padding:8px 15px;font-size:14px;color:#222;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25)}.platform-android .btn.active,.platform-android .btn:active{color:#222;background-color:#999;border:0;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.platform-android .btn-primary{color:#fff;background-color:#33b5e5;border:0}.platform-android .btn-primary.active,.platform-android .btn-primary:active{color:#fff;background-color:#1a9bcb;border:0}.platform-android .btn-positive{color:#fff;background-color:#9c0;border:0}.platform-android .btn-positive.active,.platform-android .btn-positive:active{color:#fff;background-color:#739900;border:0}.platform-android .btn-negative{color:#fff;background-color:#f44;border:0}.platform-android .btn-negative.active,.platform-android .btn-negative:active{color:#fff;background-color:#f11;border:0}.platform-android .btn-outlined{background-color:transparent;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-outlined.btn-primary{color:#33b5e5;border:1px solid #33b5e5}.platform-android .btn-outlined.btn-primary:active{background-color:#33b5e5;border:1px solid #33b5e5}.platform-android .btn-outlined.btn-positive{color:#9c0;border:1px solid #9c0}.platform-android .btn-outlined.btn-positive:active{background-color:#9c0;border:1px solid #9c0}.platform-android .btn-outlined.btn-negative{color:#f44;border:1px solid #f44}.platform-android .btn-outlined.btn-negative:active{background-color:#f44;border:1px solid #f44}.platform-android .btn-outlined:active{background-color:#999;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-outlined.btn-negative:active,.platform-android .btn-outlined.btn-positive:active,.platform-android .btn-outlined.btn-primary:active{color:#fff;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-link{color:#33b5e5;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-link.active,.platform-android .btn-link:active{color:#1a9bcb;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-block{padding:15px 0;font-size:18px}.platform-android .btn .badge{background-color:rgba(0,0,0,.15)}.platform-android .btn .badge.badge-inverted{background-color:transparent}.platform-android .btn:active .badge{color:#fff}.platform-android .bar{height:50px;background-color:#ddd;border-bottom:1px solid #b1b1b1;-webkit-box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07);box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07)}.platform-android .bar.bar-header-secondary{top:50px}.platform-android .bar.bar-footer-secondary,.platform-android .bar.bar-footer-secondary-tab{bottom:50px}.platform-android .bar .bar-footer,.platform-android .bar .bar-footer-secondary,.platform-android .bar .bar-footer-secondary-tab{border-top:1px solid #b1b1b1;border-bottom:0;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.platform-android .bar-tab{top:0;bottom:auto;height:50px;border-top:0}.platform-android .bar-tab .tab-item{color:#929292}.platform-android .bar-tab .tab-item.active{color:#33b5e5;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.platform-android .bar-tab .tab-item:active{color:#929292;background-color:#78c6e3}.platform-android .bar-tab .tab-item .icon{top:3px;padding-top:0;padding-bottom:0}.platform-android .title{position:static;padding-left:15px;font-size:18px;line-height:49px;text-align:left}.platform-android .bar .btn{top:7px;padding-top:10px;padding-bottom:10px}.platform-android .bar .btn-link{top:0;padding:0;font-size:18px;line-height:49px;color:#33b5e5}.platform-android .bar .btn-link.active,.platform-android .bar .btn-link:active{color:#1a9bcb}.platform-android .bar .btn-link .icon{top:2px;padding:0}.platform-android .bar .btn-block{top:4px}.platform-android .bar .segmented-control{top:7px}.platform-android .bar .icon{padding-top:13px;padding-bottom:13px}.platform-android .bar .title .icon{padding:0}.platform-android .bar .title .icon.icon-caret{top:10px;color:#777}.platform-android .bar input[type=search]{height:35px}.platform-android .badge.badge-inverted{color:#999;background-color:transparent}.platform-android .badge-primary{color:#fff;background-color:#33b5e5}.platform-android .badge-primary.badge-inverted{color:#33b5e5;background-color:transparent}.platform-android .badge-positive{color:#fff;background-color:#9c0}.platform-android .badge-positive.badge-inverted{color:#9c0;background-color:transparent}.platform-android .badge-negative{color:#fff;background-color:#f44}.platform-android .badge-negative.badge-inverted{color:#f44;background-color:transparent}.platform-android .card{background-color:transparent;border-color:#d9d9d9;border-radius:2px}.platform-android .table-view{background-color:transparent}.platform-android .table-view .table-view-cell{border-bottom:1px solid #d9d9d9}.platform-android .table-view .table-view-cell:last-child{background-image:none}.platform-android .table-view .table-view-cell>a:not(.btn):active{color:inherit;background-color:#e0e0e0}.platform-android .table-view .table-view-cell>a:not(.btn):active .icon{color:#fff}.platform-android .table-view .table-view-divider{padding-top:25px;font-size:12px;font-weight:700;text-transform:uppercase;background-color:transparent;border-top:0;border-bottom:2px solid #a9a9a9}.platform-android .table-view-cell .navigate-left>.badge,.platform-android .table-view-cell .navigate-left>.btn,.platform-android .table-view-cell .navigate-left>.toggle,.platform-android .table-view-cell .navigate-right>.badge,.platform-android .table-view-cell .navigate-right>.btn,.platform-android .table-view-cell .navigate-right>.toggle,.platform-android .table-view-cell .push-left>.badge,.platform-android .table-view-cell .push-left>.btn,.platform-android .table-view-cell .push-left>.toggle,.platform-android .table-view-cell .push-right>.badge,.platform-android .table-view-cell .push-right>.btn,.platform-android .table-view-cell .push-right>.toggle,.platform-android .table-view-cell>a .navigate-left>.badge,.platform-android .table-view-cell>a .navigate-left>.btn,.platform-android .table-view-cell>a .navigate-left>.toggle,.platform-android .table-view-cell>a .navigate-right>.badge,.platform-android .table-view-cell>a .navigate-right>.btn,.platform-android .table-view-cell>a .navigate-right>.toggle,.platform-android .table-view-cell>a .push-left>.badge,.platform-android .table-view-cell>a .push-left>.btn,.platform-android .table-view-cell>a .push-left>.toggle,.platform-android .table-view-cell>a .push-right>.badge,.platform-android .table-view-cell>a .push-right>.btn,.platform-android .table-view-cell>a .push-right>.toggle{right:15px}.platform-android .input-group,.platform-android input[type=color],.platform-android input[type=date],.platform-android input[type=datetime-local],.platform-android input[type=datetime],.platform-android input[type=email],.platform-android input[type=month],.platform-android input[type=number],.platform-android input[type=password],.platform-android input[type=search],.platform-android input[type=tel],.platform-android input[type=text],.platform-android input[type=time],.platform-android input[type=url],.platform-android input[type=week],.platform-android select,.platform-android textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}.platform-android input[type=search]{border-radius:2px}.platform-android .input-group,.platform-android select,.platform-android textarea{height:auto}.platform-android .input-group{padding:0;border:0}.platform-android .input-group input{border:0;border-bottom:1px solid #d9d9d9;-webkit-box-shadow:none;box-shadow:none}.platform-android .input-group input:last-child{background-image:none}.platform-android .input-row{height:40px;border-bottom:1px solid #d9d9d9}.platform-android .input-row label{padding-top:10px;padding-bottom:10px}.platform-android .input-row label+input{background-image:none;border-bottom:0}.platform-android .segmented-control{font-size:14px;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25)}.platform-android .segmented-control .control-item{padding-top:10px;padding-bottom:10px;color:#222;border-left:1px solid #999;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.platform-android .segmented-control .control-item:first-child{border-left-width:0}.platform-android .segmented-control .control-item.active,.platform-android .segmented-control .control-item:active{background-color:#999}.platform-android .segmented-control-primary{border:0}.platform-android .segmented-control-primary .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-primary .control-item.active,.platform-android .segmented-control-primary .control-item:active{color:#fff;background-color:#33b5e5}.platform-android .segmented-control-positive{border:0}.platform-android .segmented-control-positive .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-positive .control-item.active,.platform-android .segmented-control-positive .control-item:active{color:#fff;background-color:#9c0}.platform-android .segmented-control-negative{border:0}.platform-android .segmented-control-negative .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-negative .control-item.active,.platform-android .segmented-control-negative .control-item:active{color:#fff;background-color:#f44}.platform-android .popover{top:47px;left:15px;width:200px;margin-left:0;border:1px solid #9b9b9b;border-radius:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .2s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .2s ease-in-out;transition:transform .1s ease-in-out,opacity .2s ease-in-out;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}.platform-android .popover:before{display:none}.platform-android .popover.visible{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.platform-android .backdrop{background-color:transparent}.platform-android .popover .bar{border-radius:0}.platform-android .popover .bar-nav~.table-view{padding-top:50px}.platform-android .popover .table-view{border-radius:12px}.platform-android .toggle{width:104px;height:28px;background-color:#d7d7d7;border:2px solid #d7d7d7;border-radius:0}.platform-android .toggle .toggle-handle{top:0;left:0;width:50px;height:24px;background-color:#bebebe;border:1px solid #b5b5b5;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1)}.platform-android .toggle:before{top:1px;right:auto;left:11px;z-index:3;color:#fff}.platform-android .toggle.active{background-color:#d7d7d7;border:2px solid #d7d7d7}.platform-android .toggle.active .toggle-handle{margin-right:2px;background-color:#33b5e5;border-color:#33b5e5;-webkit-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}.platform-android .toggle.active:before{right:14px;left:auto;color:#fff}.platform-android .navigate-left:after,.platform-android .navigate-right:after,.platform-android .push-left:after,.platform-android .push-right:after{content:''}.platform-android .icon-caret:before{content:'\e800'}.platform-android .icon-down-nav:before,.platform-android .icon-down:before{content:'\e801'}.platform-android .icon-download:before{content:'\e802'}.platform-android .icon-left-nav:before,.platform-android .icon-left:before{content:'\e803'}.platform-android .icon-more-vertical:before{content:'\e804'}.platform-android .icon-more:before{content:'\e805'}.platform-android .icon-right-nav:before,.platform-android .icon-right:before{content:'\e806'}.platform-android .icon-search:before{content:'\e807'}.platform-android .icon-share:before{content:'\e808'}.platform-android .icon-up-nav:before,.platform-android .icon-up:before{content:'\e809'}.platform-android .device{font-family:Roboto,sans-serif;background-position:-790px 0}.platform-android .device .device-content{font-size:18px;line-height:22px;background-color:#f2f2f2}.platform-android .device .content{top:50px}.platform-android .device .popover{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.platform-android .bar~.content{padding:0}@-webkit-keyframes fadeintext{0%{opacity:0}100%{opacity:1}}.bs-callout{padding:20px;margin:20px 0;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.list-group{padding-left:0;margin-bottom:20px}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group .team-member{font-size:14px;line-height:32px;color:#555}.list-group img{float:left;width:32px;margin-right:10px;border-radius:4px}.list-group .team-member-info{overflow:hidden}.list-group .github-btn{float:right;width:121px;height:20px;margin-top:6px}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.sb,.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}
\ No newline at end of file
.hll { background-color: #ffffcc }
/*{ background: #f0f3f3; }*/
.c { color: #999; } /* Comment */
.err { color: #AA0000; background-color: #FFAAAA } /* Error */
.k { color: #006699; } /* Keyword */
.o { color: #555555 } /* Operator */
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #FF0000 } /* Generic.Error */
.gh { color: #003300; } /* Generic.Heading */
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.go { color: #AAAAAA } /* Generic.Output */
.gp { color: #000099; } /* Generic.Prompt */
.gs { } /* Generic.Strong */
.gu { color: #003300; } /* Generic.Subheading */
.gt { color: #99CC66 } /* Generic.Traceback */
.kc { color: #006699; } /* Keyword.Constant */
.kd { color: #006699; } /* Keyword.Declaration */
.kn { color: #006699; } /* Keyword.Namespace */
.kp { color: #006699 } /* Keyword.Pseudo */
.kr { color: #006699; } /* Keyword.Reserved */
.kt { color: #007788; } /* Keyword.Type */
.m { color: #FF6600 } /* Literal.Number */
.s { color: #d44950 } /* Literal.String */
.na { color: #4f9fcf } /* Name.Attribute */
.nb { color: #336666 } /* Name.Builtin */
.nc { color: #00AA88; } /* Name.Class */
.no { color: #336600 } /* Name.Constant */
.nd { color: #9999FF } /* Name.Decorator */
.ni { color: #999999; } /* Name.Entity */
.ne { color: #CC0000; } /* Name.Exception */
.nf { color: #CC00FF } /* Name.Function */
.nl { color: #9999FF } /* Name.Label */
.nn { color: #00CCFF; } /* Name.Namespace */
.nt { color: #2f6f9f; } /* Name.Tag */
.nv { color: #003333 } /* Name.Variable */
.ow { color: #000000; } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #FF6600 } /* Literal.Number.Float */
.mh { color: #FF6600 } /* Literal.Number.Hex */
.mi { color: #FF6600 } /* Literal.Number.Integer */
.mo { color: #FF6600 } /* Literal.Number.Oct */
.sb { color: #CC3300 } /* Literal.String.Backtick */
.sc { color: #CC3300 } /* Literal.String.Char */
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.s2 { color: #CC3300 } /* Literal.String.Double */
.se { color: #CC3300; } /* Literal.String.Escape */
.sh { color: #CC3300 } /* Literal.String.Heredoc */
.si { color: #AA0000 } /* Literal.String.Interpol */
.sx { color: #CC3300 } /* Literal.String.Other */
.sr { color: #33AAAA } /* Literal.String.Regex */
.s1 { color: #CC3300 } /* Literal.String.Single */
.ss { color: #FFCC33 } /* Literal.String.Symbol */
.bp { color: #336666 } /* Name.Builtin.Pseudo */
.vc { color: #003333 } /* Name.Variable.Class */
.vg { color: #003333 } /* Name.Variable.Global */
.vi { color: #003333 } /* Name.Variable.Instance */
.il { color: #FF6600 } /* Literal.Number.Integer.Long */
.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }
/* jshint jquery: true */
/* global FingerBlast: true */
$(function() {
'use strict';
var doc;
var device;
var windowWidth;
var windowHeight;
var pageHeight;
var contentPadding;
var footerHeight;
var navComponentLinks;
var componentsList;
var componentLinks;
var contentSection;
var currentActive;
var topCache;
var win;
var bod;
var eventListeners;
var toolbarToggle;
var initialize = function () {
currentActive = 0;
topCache = [];
win = $(window);
doc = $(document);
bod = $(document.body);
device = device || $('.js-device');
navComponentLinks = $('.js-jump-menu');
componentsList = $('.js-component-group');
componentLinks = $('.component-example a');
contentSection = $('.component');
topCache = contentSection.map(function () { return $(this).offset().top; });
windowHeight = $(window).height() / 3;
windowWidth = $(window).width();
pageHeight = $(document).height();
contentPadding = parseInt($('.docs-content').css('padding-bottom'), 10);
footerHeight = $('.docs-footer').outerHeight(false);
toolbarToggle = $('.js-docs-component-toolbar');
// Device placement
if (windowWidth >= 768 && device.offset()) {
device.initialLeft = device.offset().left;
device.initialTop = device.initialTop || device.offset().top;
device.dockingOffset = ($(window).height() - device.height()) / 2;
}
checkDesktopContent();
calculateScroll();
calculateToggle();
if (!eventListeners) {
addEventListeners();
}
};
var addEventListeners = function () {
eventListeners = true;
device.on('click', function (e) {
e.preventDefault();
});
// Mobile navigation
$('.js-docs-nav-trigger').on('click', function () {
var nav = $('.docs-nav-group');
var trigger = $('.js-docs-nav-trigger');
trigger.toggleClass('active');
nav.toggleClass('active');
});
navComponentLinks.click(function(e) {
e.stopPropagation();
e.preventDefault();
componentsList.toggleClass('active');
});
doc.on('click', function () {
componentsList.removeClass('active');
});
// Platform switcher
$('.platform-switch').on('click', function () {
var components = $('.docs-components');
var platform = $(this).attr('data-platform');
// Set platform
if (components.hasClass('platform-ios')) {
components.removeClass('platform-ios');
components.addClass(platform);
} else if (components.hasClass('platform-android')) {
components.removeClass('platform-android');
components.addClass(platform);
} else {
components.addClass(platform);
}
// Deal with active states
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
});
win.on('scroll', calculateScroll);
win.on('scroll', calculateToggle);
};
var checkDesktopContent = function () {
windowWidth = $(window).width();
if (windowWidth <= 768) {
var content = $('.content');
if (content.length > 1) {
$(content[0]).remove();
}
}
};
var calculateScroll = function() {
// if small screen don't worry about this
if (windowWidth <= 768) {
return;
}
// Save scrollTop value
var contentSectionItem;
var currentTop = win.scrollTop();
// exit if no device
if (!device.length) {
return;
}
if ((device.initialTop - currentTop) <= device.dockingOffset) {
device[0].className = 'device device-fixed';
device.css({ top: device.dockingOffset });
} else {
device[0].className = 'device';
device[0].setAttribute('style','');
}
function updateContent(content) {
$('#iwindow').html(content);
}
// Injection of components into device
for (var l = contentSection.length; l--;) {
if ((topCache[l] - currentTop) < windowHeight) {
if (currentActive === l) {
return;
}
currentActive = l;
bod.find('.component.active').removeClass('active');
contentSectionItem = $(contentSection[l]);
contentSectionItem.addClass('active');
if (contentSectionItem.attr('id')) {
device.attr('id', contentSectionItem.attr('id') + 'InDevice');
} else {
device.attr('id', '');
}
if (!contentSectionItem.hasClass('informational')) {
updateContent(contentSectionItem.find('.highlight .html').text());
}
break;
}
}
};
// Toolbar toggle
var calculateToggle = function () {
var currentTop = win.scrollTop();
var headerHeight = $('.docs-sub-header').outerHeight();
if (currentTop >= headerHeight) {
toolbarToggle.addClass('visible');
} else if (currentTop <= headerHeight) {
toolbarToggle.removeClass('visible');
componentsList.removeClass('active');
}
};
$(window).on('load resize', initialize);
$(window).on('load', function () {
window.FingerBlast && (new FingerBlast('.device-content'));
});
});
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
$(function(){"use strict";var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r=function(){l=0,m=[],n=$(window),a=$(document),o=$(document.body),b=b||$(".js-device"),h=$(".js-jump-menu"),i=$(".js-component-group"),j=$(".component-example a"),k=$(".component"),m=k.map(function(){return $(this).offset().top}),d=$(window).height()/3,c=$(window).width(),e=$(document).height(),f=parseInt($(".docs-content").css("padding-bottom"),10),g=$(".docs-footer").outerHeight(!1),q=$(".js-docs-component-toolbar"),c>=768&&b.offset()&&(b.initialLeft=b.offset().left,b.initialTop=b.initialTop||b.offset().top,b.dockingOffset=($(window).height()-b.height())/2),t(),u(),v(),p||s()},s=function(){p=!0,b.on("click",function(a){a.preventDefault()}),$(".js-docs-nav-trigger").on("click",function(){var a=$(".docs-nav-group"),b=$(".js-docs-nav-trigger");b.toggleClass("active"),a.toggleClass("active")}),h.click(function(a){a.stopPropagation(),a.preventDefault(),i.toggleClass("active")}),a.on("click",function(){i.removeClass("active")}),$(".platform-switch").on("click",function(){var a=$(".docs-components"),b=$(this).attr("data-platform");a.hasClass("platform-ios")?(a.removeClass("platform-ios"),a.addClass(b)):a.hasClass("platform-android")?(a.removeClass("platform-android"),a.addClass(b)):a.addClass(b),$(this).siblings(".active").removeClass("active"),$(this).addClass("active")}),n.on("scroll",u),n.on("scroll",v)},t=function(){if(c=$(window).width(),768>=c){var a=$(".content");a.length>1&&$(a[0]).remove()}},u=function(){function a(a){$("#iwindow").html(a)}if(!(768>=c)){var e,f=n.scrollTop();if(b.length){b.initialTop-f<=b.dockingOffset?(b[0].className="device device-fixed",b.css({top:b.dockingOffset})):(b[0].className="device",b[0].setAttribute("style",""));for(var g=k.length;g--;)if(m[g]-f<d){if(l===g)return;l=g,o.find(".component.active").removeClass("active"),e=$(k[g]),e.addClass("active"),e.attr("id")?b.attr("id",e.attr("id")+"InDevice"):b.attr("id",""),e.hasClass("informational")||a(e.find(".highlight .html").text());break}}}},v=function(){var a=n.scrollTop(),b=$(".docs-sub-header").outerHeight();a>=b?q.addClass("visible"):b>=a&&(q.removeClass("visible"),i.removeClass("active"))};$(window).on("load resize",r),$(window).on("load",function(){window.FingerBlast&&new FingerBlast(".device-content")})}),function(){"use strict";function a(a){this.element="string"==typeof a?document.querySelector(a):a,this.element&&this.listen()}a.prototype={x:0/0,y:0/0,startDistance:0/0,startAngle:0/0,mouseIsDown:!1,listen:function(){function a(a,b){var c,d,e;if(a){if("compareDocumentPosition"in b)return!!(16&b.compareDocumentPosition(a));if("contains"in b)return b!==a&&b.contains(a);for(c=b.getElementsByTagName("*"),d=0;e=c[d++];)if(e===a)return!0;return!1}}var b=this.activate.bind(this),c=this.deactivate.bind(this);this.element.addEventListener("mouseover",function(c){var d=c.relatedTarget;d===this||a(d,this)||b()}),this.element.addEventListener("mouseout",function(b){var d=b.relatedTarget;d===this||a(d,this)||c(b)})},activate:function(){this.active||(this.element.addEventListener("mousedown",this.touchStart=this.touchStart.bind(this),!0),this.element.addEventListener("mousemove",this.touchMove=this.touchMove.bind(this),!0),this.element.addEventListener("mouseup",this.touchEnd=this.touchEnd.bind(this),!0),this.element.addEventListener("click",this.click=this.click.bind(this),!0),this.active=!0)},deactivate:function(a){this.active=!1,this.mouseIsDown&&this.touchEnd(a),this.element.removeEventListener("mousedown",this.touchStart,!0),this.element.removeEventListener("mousemove",this.touchMove,!0),this.element.removeEventListener("mouseup",this.touchEnd,!0),this.element.removeEventListener("click",this.click,!0)},click:function(a){a.synthetic||(a.preventDefault(),a.stopPropagation())},touchStart:function(a){a.synthetic||/input|textarea/.test(a.target.tagName.toLowerCase())||(this.mouseIsDown=!0,a.preventDefault(),a.stopPropagation(),this.fireTouchEvents("touchstart",a))},touchMove:function(a){a.synthetic||(a.preventDefault(),a.stopPropagation(),this.move(a.clientX,a.clientY),this.mouseIsDown&&this.fireTouchEvents("touchmove",a))},touchEnd:function(a){a.synthetic||(this.mouseIsDown=!1,a.preventDefault(),a.stopPropagation(),this.fireTouchEvents("touchend",a),this.target&&(this.target.dispatchEvent(this.createMouseEvent("mouseover",a)),this.target.dispatchEvent(this.createMouseEvent("mousemove",a)),this.target.dispatchEvent(this.createMouseEvent("mousedown",a))))},fireTouchEvents:function(a,b){var c=[],d=[];if(this.target){var e="on"+a;if(e in this.target&&(console.warn("Converting `"+e+"` property to event listener.",this.target),this.target.addEventListener(a,this.target[e],!1),delete this.target[e]),this.target.hasAttribute(e)){console.warn("Converting `"+e+"` attribute to event listener.",this.target);var f=new GLOBAL.Function("event",this.target.getAttribute(e));this.target.addEventListener(a,f,!1),this.target.removeAttribute(e)}var g=this.createMouseEvent(a,b);if(c.push(g),c.length>1){var h=c[0].pageX-c[1].pageX,i=c[0].pageY-c[1].pageY,j=Math.sqrt(Math.pow(h,2)+Math.pow(i,2)),k=Math.atan2(h,i)*(180/Math.PI),l="gesturechange";"touchstart"===a&&(l="gesturestart",this.startDistance=j,this.startAngle=k),"touchend"===a&&(l="gestureend"),c.forEach(function(a){var b=this.createMouseEvent.call(a._finger,l,a);d.push(b)}.bind(this)),c.concat(d).forEach(function(a){a.scale=j/this.startDistance,a.rotation=this.startAngle-k})}c.forEach(function(a){a.touches=c.filter(function(a){return~a.type.indexOf("touch")&&"touchend"!==a.type}),a.changedTouches=c.filter(function(b){return~b.type.indexOf("touch")&&b._finger.target===a._finger.target}),a.targetTouches=a.changedTouches.filter(function(a){return~a.type.indexOf("touch")&&"touchend"!==a.type})}),c.concat(d).forEach(function(a,b){a.identifier=b,a._finger.target.dispatchEvent(a)})}},createMouseEvent:function(a,b){var c=new MouseEvent(a,{view:window,detail:b.detail,bubbles:!0,cancelable:!0,target:this.target||b.relatedTarget,clientX:this.x||b.clientX,clientY:this.y||b.clientY,screenX:this.x||b.screenX,screenY:this.y||b.screenY,ctrlKey:b.ctrlKey,shiftKey:b.shiftKey,altKey:b.altKey,metaKey:b.metaKey,button:b.button});return c.synthetic=!0,c._finger=this,c},move:function(a,b){isNaN(a)||isNaN(b)?this.target=null:(this.x=a,this.y=b,this.mouseIsDown||(this.target=document.elementFromPoint(a,b)))}},window.FingerBlast=a}();
\ No newline at end of file
// FINGERBLAST.js
// --------------
// Adapted from phantom limb by Brian Cartensen
/* jshint bitwise: false */
/* global GLOBAL: true */
(function () {
'use strict';
function FingerBlast(element) {
this.element = typeof element === 'string' ? document.querySelector(element) : element;
if (this.element) {
this.listen();
}
}
FingerBlast.prototype = {
x: NaN,
y: NaN,
startDistance: NaN,
startAngle: NaN,
mouseIsDown: false,
listen: function () {
var activate = this.activate.bind(this);
var deactivate = this.deactivate.bind(this);
function contains (element, ancestor) {
var descendants;
var index;
var descendant;
if (!element) {
return;
}
if ('compareDocumentPosition' in ancestor) {
return !!(ancestor.compareDocumentPosition(element) & 16);
} else if ('contains' in ancestor) {
return ancestor !== element && ancestor.contains(element);
} else {
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) {
if (descendant === element) {
return true;
}
}
return false;
}
}
this.element.addEventListener('mouseover', function (e) {
var target = e.relatedTarget;
if (target !== this && !contains(target, this)) {
activate();
}
});
this.element.addEventListener('mouseout', function (e) {
var target = e.relatedTarget;
if (target !== this && !contains(target, this)) {
deactivate(e);
}
});
},
activate: function () {
if (this.active) {
return;
}
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true);
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true);
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true);
this.element.addEventListener('click', (this.click = this.click.bind(this)), true);
this.active = true;
},
deactivate: function (e) {
this.active = false;
if (this.mouseIsDown) {
this.touchEnd(e);
}
this.element.removeEventListener('mousedown', this.touchStart, true);
this.element.removeEventListener('mousemove', this.touchMove, true);
this.element.removeEventListener('mouseup', this.touchEnd, true);
this.element.removeEventListener('click', this.click, true);
},
click: function (e) {
if (e.synthetic) {
return;
}
e.preventDefault();
e.stopPropagation();
},
touchStart: function (e) {
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) {
return;
}
this.mouseIsDown = true;
e.preventDefault();
e.stopPropagation();
this.fireTouchEvents('touchstart', e);
},
touchMove: function (e) {
if (e.synthetic) {
return;
}
e.preventDefault();
e.stopPropagation();
this.move(e.clientX, e.clientY);
if (this.mouseIsDown) {
this.fireTouchEvents('touchmove', e);
}
},
touchEnd: function (e) {
if (e.synthetic) {
return;
}
this.mouseIsDown = false;
e.preventDefault();
e.stopPropagation();
this.fireTouchEvents('touchend', e);
if (!this.target) {
return;
}
// Mobile Safari moves all the mouse events to fire after the touchend event.
this.target.dispatchEvent(this.createMouseEvent('mouseover', e));
this.target.dispatchEvent(this.createMouseEvent('mousemove', e));
this.target.dispatchEvent(this.createMouseEvent('mousedown', e));
},
fireTouchEvents: function (eventName, originalEvent) {
var events = [];
var gestures = [];
if (!this.target) {
return;
}
// Convert 'ontouch*' properties and attributes to listeners.
var onEventName = 'on' + eventName;
if (onEventName in this.target) {
console.warn('Converting `' + onEventName + '` property to event listener.', this.target);
this.target.addEventListener(eventName, this.target[onEventName], false);
delete this.target[onEventName];
}
if (this.target.hasAttribute(onEventName)) {
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target);
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName));
this.target.addEventListener(eventName, handler, false);
this.target.removeAttribute(onEventName);
}
// Set up a new event with the coordinates of the finger.
var touch = this.createMouseEvent(eventName, originalEvent);
events.push(touch);
// Figure out scale and rotation.
if (events.length > 1) {
var x = events[0].pageX - events[1].pageX;
var y = events[0].pageY - events[1].pageY;
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var angle = Math.atan2(x, y) * (180 / Math.PI);
var gestureName = 'gesturechange';
if (eventName === 'touchstart') {
gestureName = 'gesturestart';
this.startDistance = distance;
this.startAngle = angle;
}
if (eventName === 'touchend') {
gestureName = 'gestureend';
}
events.forEach(function(event) {
var gesture = this.createMouseEvent.call(event._finger, gestureName, event);
gestures.push(gesture);
}.bind(this));
events.concat(gestures).forEach(function(event) {
event.scale = distance / this.startDistance;
event.rotation = this.startAngle - angle;
});
}
// Loop through the events array and fill in each touch array.
events.forEach(function(touch) {
touch.touches = events.filter(function(e) {
return ~e.type.indexOf('touch') && e.type !== 'touchend';
});
touch.changedTouches = events.filter(function(e) {
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target;
});
touch.targetTouches = touch.changedTouches.filter(function(e) {
return ~e.type.indexOf('touch') && e.type !== 'touchend';
});
});
// Then fire the events.
events.concat(gestures).forEach(function(event, i) {
event.identifier = i;
event._finger.target.dispatchEvent(event);
});
},
createMouseEvent: function (eventName, originalEvent) {
var e = new MouseEvent(eventName, {
view : window,
detail : originalEvent.detail,
bubbles : true,
cancelable : true,
target : this.target || originalEvent.relatedTarget,
clientX : this.x || originalEvent.clientX,
clientY : this.y || originalEvent.clientY,
screenX : this.x || originalEvent.screenX,
screenY : this.y || originalEvent.screenY,
ctrlKey : originalEvent.ctrlKey,
shiftKey : originalEvent.shiftKey,
altKey : originalEvent.altKey,
metaKey : originalEvent.metaKey,
button : originalEvent.button
});
e.synthetic = true;
e._finger = this;
return e;
},
move: function (x, y) {
if (isNaN(x) || isNaN(y)) {
this.target = null;
} else {
this.x = x;
this.y = y;
if (!this.mouseIsDown) {
this.target = document.elementFromPoint(x, y);
}
}
}
};
window.FingerBlast = FingerBlast;
}());
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Components &middot; Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<!-- <link rel="stylesheet" href="/dist/css/googleapis.css"> -->
<link rel="stylesheet" href="../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks.</p>
</div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
<div class="docs-component-toolbar js-docs-component-toolbar">
<div class="container">
<div class="column units-2">
<span class="docs-jump-menu pull-left js-jump-menu">
<span class="icon icon-list"></span>
Jump to
<span class="icon icon-caret"></span>
</span>
<div class="docs-component-group js-component-group">
<a class="docs-component-item" href="#bars" data-ignore="push">Bars</a>
<a class="docs-component-item" href="#typography" data-ignore="push">Typography</a>
<a class="docs-component-item" href="#table-views" data-ignore="push">Table views</a>
<a class="docs-component-item" href="#buttons" data-ignore="push">Buttons</a>
<a class="docs-component-item" href="#segmentedControls" data-ignore="push">Segmented controls</a>
<a class="docs-component-item" href="#badges" data-ignore="push">Badges</a>
<a class="docs-component-item" href="#forms" data-ignore="push">Forms</a>
<a class="docs-component-item" href="#toggles" data-ignore="push">Toggles</a>
<a class="docs-component-item" href="#popovers" data-ignore="push">Popovers</a>
<a class="docs-component-item" href="#modals" data-ignore="push">Modals</a>
<a class="docs-component-item" href="#sliders" data-ignore="push">Sliders</a>
<a class="docs-component-item" href="#push" data-ignore="push">Push</a>
<a class="docs-component-item" href="#ratchicons" data-ignore="push">Ratchicons</a>
</div>
<div class="segmented-control">
<a class="platform-switch control-item active" data-platform="">
Base
</a>
<a class="platform-switch control-item" data-platform="platform-ios">
iOS
</a>
<a class="platform-switch control-item" data-platform="platform-android">
Android
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Components -->
<div class="docs-components column-group">
<div class="device-column column lg-units-5 pull-right">
<!-- In phone examples -->
<div class="device js-device">
<div class="device-content">
<div id="iwindow">
<header class="bar bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
</div>
</div>
</div>
<div class="column lg-units-7 docs-content">
<!-- Bars -->
<article class="component active" id="bars">
<h3 class="component-title">Title bar</h3>
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Title bar with buttons</h3>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-left</code> utility classes to float the buttons. Also, be sure to place any floated elements before the title.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<button class="btn pull-left">
Left
</button>
<button class="btn pull-right">
Right
</button>
<h1 class="title">Title</h1>
</header>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn pull-left&quot;</span><span class="nt">&gt;</span>
Left
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn pull-right&quot;</span><span class="nt">&gt;</span>
Right
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Title bar with icons</h3>
<p class="component-description">Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left"></a>
<a class="icon icon-compose pull-right"></a>
<h1 class="title">Title</h1>
</header>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;icon icon-left-nav pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;icon icon-compose pull-right&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Title bar with link buttons and icons</h3>
<p class="component-description">Link buttons can be used in tool bars to remove the outline. Use these in conjuction with icons to recreate the nav feel from iOS7. Note the use of <code>.btn-nav</code> to bring the buttons a little bit closer to the edge of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span>
Left
</button>
<button class="btn btn-link btn-nav pull-right">
Right
<span class="icon icon-right-nav"></span>
</button>
<h1 class="title">Title</h1>
</header>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-link btn-nav pull-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-left-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Left
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-link btn-nav pull-right&quot;</span><span class="nt">&gt;</span>
Right
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-right-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Title bar with segmented control</h3>
<p class="component-description">Title bars can also house segmented controls. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<button class="btn pull-left">
Left
</button>
<button class="btn pull-right">
Right
</button>
<div class="segmented-control">
<a class="control-item active">One</a>
<a class="control-item">Two</a>
<a class="control-item">Three</a>
</div>
</header>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn pull-left&quot;</span><span class="nt">&gt;</span>
Left
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn pull-right&quot;</span><span class="nt">&gt;</span>
Right
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item active&quot;</span><span class="nt">&gt;</span>One<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Tab bar</h3>
<p class="component-description">Use Ratchicons in the <code>.tab-bar</code> to represent different sections of your app.</p>
<div class="component-example component-example-fullbleed">
<nav class="bar bar-tab">
<a class="tab-item active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">Label</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-person"></span>
<span class="tab-label">Label</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-star-filled"></span>
<span class="tab-label">Label</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-search"></span>
<span class="tab-label">Label</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-gear"></span>
<span class="tab-label">Label</span>
</a>
</nav>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;bar bar-tab&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item active&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-home&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;tab-label&quot;</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-person&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;tab-label&quot;</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-star-filled&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;tab-label&quot;</span><span class="nt">&gt;</span>Favorites<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;tab-label&quot;</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-gear&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;tab-label&quot;</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
</article>
<article class="component">
<h3 class="component-title">Tab bar (labels only)</h3>
<p class="component-description">If you don't want to use icons, that's okay too. The text will appear larger to use the additional space.</p>
<div class="component-example component-example-fullbleed">
<nav class="bar bar-tab">
<a class="tab-item active" href="#">
Label
</a>
<a class="tab-item" href="#">
Label
</a>
<a class="tab-item" href="#">
Label
</a>
</nav>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;bar bar-tab&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item active&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
Label
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
Label
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
Label
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
</article>
<article class="component">
<h3 class="component-title">Standard bars</h3>
<p class="component-description">Standard bars are basic fixed elements that can be positioned in four places. These can be used to house buttons, icons, or segmented controls (see following examples).</p>
<div class="component-example component-example-fullbleed">
<!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard">
<div class="segmented-control">
<a class="control-item active">Thing one</a>
<a class="control-item">Thing two</a>
<a class="control-item">Thing three</a>
</div>
</nav>
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
<button class="btn btn-block">Block level button</button>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Segmented control in standard bar fixed to top --&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;bar bar-standard&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item active&quot;</span><span class="nt">&gt;</span>Thing one<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span><span class="nt">&gt;</span>Thing two<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span><span class="nt">&gt;</span>Thing three<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="c">&lt;!-- Block button in standard bar fixed below top bar --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;bar bar-standard bar-header-secondary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-block&quot;</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Block button in standard bar fixed above the footer --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;bar bar-standard bar-footer-secondary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-block&quot;</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Icons in standard bar fixed to the bottom of the screen --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;bar bar-standard bar-footer&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;icon icon-compose pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;icon icon-gear pull-right&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</article>
<!-- Typography -->
<article class="component" id="typography">
<h3 class="component-title">Typography</h3>
<p class="component-description">Use headings and paragraphs to title and describe sections of your app. Apply or wrap elements with <code>.content-padded</code> to give the content space around the screen.</p>
<div class="component-example component-example-fullbleed">
<div class="content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content-padded&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>h1. Heading<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>h2. Heading<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h3&gt;</span>h3. Heading<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h4&gt;</span>h4. Heading<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;h5&gt;</span>h5. Heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Heading<span class="nt">&lt;/h6&gt;</span>
<span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</article>
<!-- Table views -->
<article class="component" id="table-views">
<h3 class="component-title">Table views</h3>
<p class="component-description">Table views can be used for organizing data, showing collections of links, or a series of controls.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</li>
<li class="table-view-cell table-view-divider">Divider</li>
<li class="table-view-cell">Item 3</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-divider&quot;</span><span class="nt">&gt;</span>Divider<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.navigate-right</code> or <code>.navigate-left</code> to use a chevron.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right">
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right">
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
Item 2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
Item 3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Table views with the Android theme don't have chevrons to comply with Android Design guidelines. More information can be found <a href="http://developer.android.com/design/patterns/pure-android.html">here</a>.</p>
</article>
<article class="component">
<h3 class="component-title">Table view with badges</h3>
<p class="component-description">Badges are a great way of showing data.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">Item 1 <span class="badge">4</span></li>
<li class="table-view-cell">Item 2 <span class="badge">1</span></li>
<li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with badges and chevrons</h3>
<p class="component-description">Feel free to use chevrons and badges together. They'll automatically positon themselves correctly.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right">
<span class="badge">5</span>
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right">
<span class="badge">5</span>
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right">
<span class="badge">5</span>
Item 3
</a>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
Item 1
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
Item 2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
Item 3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with media (images)</h3>
<p class="component-description">Showing media inside table views is easy. This component to perfect for images and text.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left&quot;</span> <span class="na">src=</span><span class="s">&quot;http://placehold.it/42x42&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left&quot;</span> <span class="na">src=</span><span class="s">&quot;http://placehold.it/42x42&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left&quot;</span> <span class="na">src=</span><span class="s">&quot;http://placehold.it/42x42&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with media (icons)</h3>
<p class="component-description">Ratchicons can also used instead of images.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span>
<div class="media-body">
Item 1
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span>
<div class="media-body">
Item 2
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
</div>
</a>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left icon icon-trash&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left icon icon-gear&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;media-object pull-left icon icon-pages&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;media-body&quot;</span><span class="nt">&gt;</span>
Item 3
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with buttons</h3>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 4 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Table view with toggles</h3>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 2
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
Item 2
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle active&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
Item 3
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre></div>
</article>
<article class="component">
<h3 class="component-title">Carded table views</h3>
<p class="component-description">Use <code>.card</code> to wrap any content in a padded element.</p>
<div class="component-example">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</li>
<li class="table-view-cell table-view-divider">Divider</li>
<li class="table-view-cell">Item 3</li>
<li class="table-view-cell">Item 4</li>
</ul>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell table-view-divider&quot;</span><span class="nt">&gt;</span>Divider<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item 4<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</article>
<!-- Buttons -->
<article class="component" id="buttons">
<h3 class="component-title">Buttons</h3>
<p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
<div class="component-example">
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-outlined">Button</button>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-link&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
</code></pre></div>
</article>
<!-- Buttons -->
<article class="component" id="buttonsWithIcons">
<h3 class="component-title">Buttons with icons</h3>
<p class="component-description">Ratchicons work inside buttons too.</p>
<div class="component-example">
<button class="btn">
<span class="icon icon-search"></span>
Button
</button>
<button class="btn btn-primary">
<span class="icon icon-search"></span>
Button
</button>
<button class="btn btn-positive">
<span class="icon icon-search"></span>
Button
</button>
<button class="btn btn-negative">
<span class="icon icon-search"></span>
Button
</button>
<button class="btn btn-link">
<span class="icon icon-left"></span>
Button
</button>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-link&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-left&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
</code></pre></div>
</article>
<article class="component" id="buttonsBadges">
<h3 class="component-title">Buttons with badges</h3>
<div class="component-example">
<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-primary&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-positive&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-negative&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-outlined&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-outlined btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-primary badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-outlined btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-positive badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-outlined btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-negative badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
</code></pre></div>
</article>
<article class="component" id="blockButtons">
<h3 class="component-title">Block buttons</h3>
<div class="component-example">
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-block btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary btn-block btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive btn-block btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-negative btn-block btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
</code></pre></div>
</article>
<!-- Segmented Control -->
<article class="component" id="segmentedControls">
<h3 class="component-title">Segmented control</h3>
<p class="component-description">Content sections that are to be swapped in and out by the controller should all be siblings and have the class <code>.control-content</code>. Then, just give each content section an id and point the link in the segmented control to that id.</p>
<div class="component-example">
<div class="segmented-control">
<a class="control-item active" href="#item1mobile">
Thing one
</a>
<a class="control-item" href="#item2mobile">
Thing two
</a>
<a class="control-item" href="#item3mobile">
Thing three
</a>
</div>
<div class="card">
<span id="item1mobile" class="control-content active">Item 1</span>
<span id="item2mobile" class="control-content">Item 2</span>
<span id="item3mobile" class="control-content">Item 3</span>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item active&quot;</span> <span class="na">href=</span><span class="s">&quot;#item1mobile&quot;</span><span class="nt">&gt;</span>
Thing one
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item2mobile&quot;</span><span class="nt">&gt;</span>
Thing two
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item3mobile&quot;</span><span class="nt">&gt;</span>
Thing three
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item1mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;control-content active&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item2mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;control-content&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item3mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;control-content&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</article>
<!-- Badges -->
<article class="component" id="badges">
<h3 class="component-title">Badges</h3>
<p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are. Adding the a class of <code>.badge-inverted</code> will remove the badges background color.</p>
<div class="component-example">
<span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-negative">4</span>
<span class="badge badge-inverted">1</span>
<span class="badge badge-primary badge-inverted">2</span>
<span class="badge badge-positive badge-inverted">3</span>
<span class="badge badge-negative badge-inverted">4</span>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-primary&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-positive&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-negative&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-primary badge-inverted&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-positive badge-inverted&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;badge badge-negative badge-inverted&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
</code></pre></div>
</article>
<!-- Forms -->
<article class="component" id="forms">
<h3 class="component-title">Forms</h3>
<div class="component-example">
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<button class="btn btn-positive btn-block">Choose existing</button>
</form>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Full name&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Search&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">rows=</span><span class="s">&quot;5&quot;</span><span class="nt">&gt;&lt;/textarea&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-positive btn-block&quot;</span><span class="nt">&gt;</span>Choose existing<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre></div>
</article>
<!-- Form with input group -->
<article class="component" id="formsWithInputGroup">
<h3 class="component-title">Form with input group</h3>
<div class="component-example component-example-fullbleed">
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Full name&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;email&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Email&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Username&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre></div>
</article>
<!-- Form with input group and labels -->
<article class="component" id="formsWithInputGroupAndLabels">
<h3 class="component-title">Form with input group and labels</h3>
<div class="component-example component-example-fullbleed">
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</form>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Full name<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Mister Ratchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Email<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;email&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;ratchetframework@gmail.com&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;goRatchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre></div>
</article>
<!-- Toggle -->
<article class="component" id="toggles">
<h3 class="component-title">Toggles</h3>
<p class="component-description">Toggles can be used by sliding or tapping the control.</p>
<div class="component-example">
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle active&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;toggle-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<div class="highlight"><pre><code class="js"><span class="c1">// Only needed if you want to fire a callback</span>
<span class="nb">document</span>
<span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myToggle&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;toggle&#39;</span><span class="p">,</span> <span class="nx">myFunction</span><span class="p">)</span>
</code></pre></div>
</article>
<!-- Popovers -->
<article class="component" id="popovers">
<h3 class="component-title">Popovers</h3>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;popover&quot;</span> <span class="na">class=</span><span class="s">&quot;popover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Popover title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item1<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item2<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item4<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item5<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item6<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item7<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>Item8<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#myPopover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>
Tap title
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-caret&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</code></pre></div>
</article>
<!-- Modals -->
<article class="component" id="modals">
<h3 class="component-title">Modals</h3>
<div class="component-example">
<a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal mobile</h1>
</header>
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;btn&quot;</span><span class="nt">&gt;</span>Open modal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;modal&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;icon icon-close pull-right&quot;</span> <span class="na">href=</span><span class="s">&quot;#myModalexample&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Modal<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">&quot;content-padded&quot;</span><span class="nt">&gt;</span>The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
</article>
<!-- Slider -->
<article class="component" id="sliders">
<h3 class="component-title">Sliders</h3>
<p class="component-description">Can be used with any number of slides with any type of content.</p>
<div class="component-example component-example-fullbleed">
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg" alt="Mountain and sky">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg" alt="Giant mecha">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg" alt="Big Ben">
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slider&quot;</span> <span class="na">id=</span><span class="s">&quot;mySlider&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/assets/img/slide-1.jpg&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;slide-text&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-left-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Slide me
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/assets/img/slide-2.jpg&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/assets/img/slide-3.jpg&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<div class="highlight"><pre><code class="js"><span class="c1">// Only needed if you want to fire a callback</span>
<span class="nb">document</span>
<span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#mySlider&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;slide&#39;</span><span class="p">,</span> <span class="nx">myFunction</span><span class="p">)</span>
</code></pre></div>
</article>
<!-- Push docs -->
<article class="component" id="push">
<h3 class="component-title">Push</h3>
<p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- A one.html link --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;two.html&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
<p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- An one.html link that animates to two.html --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;fade&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
<p class="component-description">A working version of push:</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="/two.html" data-transition="slide-in">
Load new page with push
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Push<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navigate-right&quot;</span> <span class="na">href=</span><span class="s">&quot;../two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;slide-in&quot;</span><span class="nt">&gt;</span>
Load new page with push
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Use data-ignore=&quot;push&quot; to prevent the push.js interception --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://www.google.com&quot;</span> <span class="na">data-ignore=</span><span class="s">&quot;push&quot;</span><span class="nt">&gt;</span>Google<span class="nt">&lt;a&gt;</span>
</code></pre></div>
<p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<div class="highlight"><pre><code class="js"><span class="c1">// Only needed if you want to fire a callback</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;push&#39;</span><span class="p">,</span> <span class="nx">myFunction</span><span class="p">);</span>
</code></pre></div>
</article>
<!-- Ratchicons -->
<article class="component no-border" id="ratchicons">
<h3 class="component-title">Ratchicons</h3>
<p class="component-description">Use Ratchicons in your application to help inform interactions.</p>
<div class="component-example">
<div class="content-padded">
<span class="icon icon-back"></span>
<span class="icon icon-bars"></span>
<span class="icon icon-caret"></span>
<span class="icon icon-check"></span>
<span class="icon icon-close"></span>
<span class="icon icon-code"></span>
<span class="icon icon-compose"></span>
<span class="icon icon-download"></span>
<span class="icon icon-edit"></span>
<span class="icon icon-forward"></span>
<span class="icon icon-gear"></span>
<span class="icon icon-home"></span>
<span class="icon icon-info"></span>
<span class="icon icon-list"></span>
<span class="icon icon-more-vertical"></span>
<span class="icon icon-more"></span>
<span class="icon icon-pages"></span>
<span class="icon icon-pause"></span>
<span class="icon icon-person"></span>
<span class="icon icon-play"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-refresh"></span>
<span class="icon icon-search"></span>
<span class="icon icon-share"></span>
<span class="icon icon-sound"></span>
<span class="icon icon-sound2"></span>
<span class="icon icon-sound3"></span>
<span class="icon icon-sound4"></span>
<span class="icon icon-star-filled"></span>
<span class="icon icon-star"></span>
<span class="icon icon-stop"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-up-nav"></span>
<span class="icon icon-up"></span>
<span class="icon icon-right-nav"></span>
<span class="icon icon-right"></span>
<span class="icon icon-down-nav"></span>
<span class="icon icon-down"></span>
<span class="icon icon-left-nav"></span>
<span class="icon icon-left"></span>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content-padded&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-back&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-bars&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-caret&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-check&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-close&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-code&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-compose&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-download&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-edit&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-forward&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-gear&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-home&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-info&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-list&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-more-vertical&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-more&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-pages&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-pause&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-person&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-play&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-plus&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-refresh&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-share&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-sound&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-sound2&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-sound3&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-sound4&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-star-filled&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-star&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-stop&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-trash&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-up-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-up&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-right-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-right&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-down-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-down&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-left-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon icon-left&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</article>
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
</li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="../dist/js/jquery-2.1.1.js"></script>
<script src="../dist/js/ratchet.min.js"></script>
<script src="../assets/js/docs.min.js"></script>
</div>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v13/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v13/RxZJdnzeo3R5zSexge8UUbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v13/d-6IYplOFocCacKzxwXSOLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
\ No newline at end of file
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
line-height: 22px;
color: #222;
}
a {
color: #33b5e5;
}
a:active {
color: #1a9bcb;
}
.content {
background-color: #f2f2f2;
}
.bar-nav ~ .content {
padding-top: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
}
.bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.bar-footer ~ .content {
padding-bottom: 50px;
}
.bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.btn {
padding: 8px 15px;
font-size: 14px;
color: #222;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
}
.btn:active, .btn.active {
color: #222;
background-color: #999;
border: 0;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-primary {
color: #fff;
background-color: #33b5e5;
border: 0;
}
.btn-primary:active, .btn-primary.active {
color: #fff;
background-color: #1a9bcb;
border: 0;
}
.btn-positive {
color: #fff;
background-color: #9c0;
border: 0;
}
.btn-positive:active, .btn-positive.active {
color: #fff;
background-color: #739900;
border: 0;
}
.btn-negative {
color: #fff;
background-color: #f44;
border: 0;
}
.btn-negative:active, .btn-negative.active {
color: #fff;
background-color: #f11;
border: 0;
}
.btn-outlined {
background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary {
color: #33b5e5;
border: 1px solid #33b5e5;
}
.btn-outlined.btn-primary:active {
background-color: #33b5e5;
border: 1px solid #33b5e5;
}
.btn-outlined.btn-positive {
color: #9c0;
border: 1px solid #9c0;
}
.btn-outlined.btn-positive:active {
background-color: #9c0;
border: 1px solid #9c0;
}
.btn-outlined.btn-negative {
color: #f44;
border: 1px solid #f44;
}
.btn-outlined.btn-negative:active {
background-color: #f44;
border: 1px solid #f44;
}
.btn-outlined:active {
background-color: #999;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-block {
padding: 15px 0;
font-size: 18px;
}
.btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
height: 50px;
background-color: #ddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
}
.bar.bar-header-secondary {
top: 50px;
}
.bar.bar-footer-secondary {
bottom: 50px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar .bar-footer,
.bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab {
border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.bar-tab .tab-item {
color: #929292;
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab .tab-item:active {
color: #929292;
background-color: #78c6e3;
}
.bar-tab .tab-item .icon {
top: 3px;
padding-top: 0;
padding-bottom: 0;
}
.title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.bar .btn {
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
top: 0;
padding: 0;
font-size: 18px;
line-height: 49px;
color: #33b5e5;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb;
}
.bar .btn-link .icon {
top: 2px;
padding: 0;
}
.bar .btn-block {
top: 4px;
}
.bar .segmented-control {
top: 7px;
}
.bar .icon {
padding-top: 13px;
padding-bottom: 13px;
}
.bar .title .icon {
padding: 0;
}
.bar .title .icon.icon-caret {
top: 10px;
color: #777;
}
.bar input[type="search"] {
height: 35px;
}
.badge.badge-inverted {
color: #999;
background-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #33b5e5;
}
.badge-primary.badge-inverted {
color: #33b5e5;
background-color: transparent;
}
.badge-positive {
color: #fff;
background-color: #9c0;
}
.badge-positive.badge-inverted {
color: #9c0;
background-color: transparent;
}
.badge-negative {
color: #fff;
background-color: #f44;
}
.badge-negative.badge-inverted {
color: #f44;
background-color: transparent;
}
.card {
background-color: transparent;
border-color: #d9d9d9;
border-radius: 2px;
}
.table-view {
background-color: transparent;
}
.table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
color: inherit;
background-color: #e0e0e0;
}
.table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: transparent;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
.table-view-cell > a .push-right > .btn,
.table-view-cell > a .push-right > .badge,
.table-view-cell > a .push-right > .toggle {
right: 15px;
}
select,
textarea,
input[type="text"],
input[type="search"],
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="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
input[type="search"] {
border-radius: 2px;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.input-row label {
padding-top: 10px;
padding-bottom: 10px;
}
.input-row label + input {
background-image: none;
border-bottom: 0;
}
.segmented-control {
font-size: 14px;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.segmented-control .control-item {
padding-top: 10px;
padding-bottom: 10px;
color: #222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.segmented-control .control-item:first-child {
border-left-width: 0;
}
.segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999;
}
.segmented-control-primary {
border: 0;
}
.segmented-control-primary .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
color: #fff;
background-color: #33b5e5;
}
.segmented-control-positive {
border: 0;
}
.segmented-control-positive .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff;
background-color: #9c0;
}
.segmented-control-negative {
border: 0;
}
.segmented-control-negative .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff;
background-color: #f44;
}
.popover {
top: 47px;
left: 15px;
width: 200px;
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
}
.popover:before {
display: none;
}
.popover.visible {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.backdrop {
background-color: transparent;
}
.popover .bar {
border-radius: 0;
}
.popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.popover .table-view {
border-radius: 12px;
}
.toggle {
width: 104px;
height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
border-radius: 0;
}
.toggle .toggle-handle {
top: 0;
left: 0;
width: 50px;
height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.toggle:before {
top: 1px;
right: auto;
left: 11px;
z-index: 3;
color: #fff;
}
.toggle.active {
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
}
.toggle.active .toggle-handle {
margin-right: 2px;
background-color: #33b5e5;
border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
.toggle.active:before {
right: 14px;
left: auto;
color: #fff;
}
.navigate-left:after,
.push-left:after {
content: '';
}
.navigate-right:after,
.push-right:after {
content: '';
}
.icon-caret:before {
content: '\e800';
}
.icon-down:before,
.icon-down-nav:before {
content: '\e801';
}
.icon-download:before {
content: '\e802';
}
.icon-left:before,
.icon-left-nav:before {
content: '\e803';
}
.icon-more-vertical:before {
content: '\e804';
}
.icon-more:before {
content: '\e805';
}
.icon-right:before,
.icon-right-nav:before {
content: '\e806';
}
.icon-search:before {
content: '\e807';
}
.icon-share:before {
content: '\e808';
}
.icon-up:before,
.icon-up-nav:before {
content: '\e809';
}
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/body{font-family:Roboto,sans-serif;font-size:18px;line-height:22px;color:#222}a{color:#33b5e5}a:active{color:#1a9bcb}.content{background-color:#f2f2f2}.bar-nav~.content{padding-top:50px}.bar-header-secondary~.content{padding-top:100px}.bar-tab~.content{padding-top:50px;padding-bottom:0}.bar-footer~.content{padding-bottom:50px}.bar-footer-secondary~.content{padding-bottom:100px}.btn{padding:8px 15px;font-size:14px;color:#222;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25)}.btn.active,.btn:active{color:#222;background-color:#999;border:0;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.btn-primary{color:#fff;background-color:#33b5e5;border:0}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#1a9bcb;border:0}.btn-positive{color:#fff;background-color:#9c0;border:0}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#739900;border:0}.btn-negative{color:#fff;background-color:#f44;border:0}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#f11;border:0}.btn-outlined{background-color:transparent;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-primary{color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-primary:active{background-color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-positive{color:#9c0;border:1px solid #9c0}.btn-outlined.btn-positive:active{background-color:#9c0;border:1px solid #9c0}.btn-outlined.btn-negative{color:#f44;border:1px solid #f44}.btn-outlined.btn-negative:active{background-color:#f44;border:1px solid #f44}.btn-outlined:active{background-color:#999;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff;-webkit-box-shadow:none;box-shadow:none}.btn-link{color:#33b5e5;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.btn-link.active,.btn-link:active{color:#1a9bcb;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-block{padding:15px 0;font-size:18px}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{height:50px;background-color:#ddd;border-bottom:1px solid #b1b1b1;-webkit-box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07);box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07)}.bar.bar-header-secondary{top:50px}.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{bottom:50px}.bar .bar-footer,.bar .bar-footer-secondary,.bar .bar-footer-secondary-tab{border-top:1px solid #b1b1b1;border-bottom:0;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab{top:0;bottom:auto;height:50px;border-top:0}.bar-tab .tab-item{color:#929292}.bar-tab .tab-item.active{color:#33b5e5;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab .tab-item:active{color:#929292;background-color:#78c6e3}.bar-tab .tab-item .icon{top:3px;padding-top:0;padding-bottom:0}.title{position:static;padding-left:15px;font-size:18px;line-height:49px;text-align:left}.bar .btn{top:7px;padding-top:10px;padding-bottom:10px}.bar .btn-link{top:0;padding:0;font-size:18px;line-height:49px;color:#33b5e5}.bar .btn-link.active,.bar .btn-link:active{color:#1a9bcb}.bar .btn-link .icon{top:2px;padding:0}.bar .btn-block{top:4px}.bar .segmented-control{top:7px}.bar .icon{padding-top:13px;padding-bottom:13px}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:10px;color:#777}.bar input[type=search]{height:35px}.badge.badge-inverted{color:#999;background-color:transparent}.badge-primary{color:#fff;background-color:#33b5e5}.badge-primary.badge-inverted{color:#33b5e5;background-color:transparent}.badge-positive{color:#fff;background-color:#9c0}.badge-positive.badge-inverted{color:#9c0;background-color:transparent}.badge-negative{color:#fff;background-color:#f44}.badge-negative.badge-inverted{color:#f44;background-color:transparent}.card{background-color:transparent;border-color:#d9d9d9;border-radius:2px}.table-view{background-color:transparent}.table-view .table-view-cell{border-bottom:1px solid #d9d9d9}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit;background-color:#e0e0e0}.table-view .table-view-cell>a:not(.btn):active .icon{color:#fff}.table-view .table-view-divider{padding-top:25px;font-size:12px;font-weight:700;text-transform:uppercase;background-color:transparent;border-top:0;border-bottom:2px solid #a9a9a9}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:15px}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}input[type=search]{border-radius:2px}.input-group,select,textarea{height:auto}.input-group{padding:0;border:0}.input-group input{border:0;border-bottom:1px solid #d9d9d9;-webkit-box-shadow:none;box-shadow:none}.input-group input:last-child{background-image:none}.input-row{height:40px;border-bottom:1px solid #d9d9d9}.input-row label{padding-top:10px;padding-bottom:10px}.input-row label+input{background-image:none;border-bottom:0}.segmented-control{font-size:14px;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25)}.segmented-control .control-item{padding-top:10px;padding-bottom:10px;color:#222;border-left:1px solid #999;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item.active,.segmented-control .control-item:active{background-color:#999}.segmented-control-primary{border:0}.segmented-control-primary .control-item{color:#fff;border-color:inherit}.segmented-control-primary .control-item.active,.segmented-control-primary .control-item:active{color:#fff;background-color:#33b5e5}.segmented-control-positive{border:0}.segmented-control-positive .control-item{color:#fff;border-color:inherit}.segmented-control-positive .control-item.active,.segmented-control-positive .control-item:active{color:#fff;background-color:#9c0}.segmented-control-negative{border:0}.segmented-control-negative .control-item{color:#fff;border-color:inherit}.segmented-control-negative .control-item.active,.segmented-control-negative .control-item:active{color:#fff;background-color:#f44}.popover{top:47px;left:15px;width:200px;margin-left:0;border:1px solid #9b9b9b;border-radius:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .2s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .2s ease-in-out;transition:transform .1s ease-in-out,opacity .2s ease-in-out;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}.popover:before{display:none}.popover.visible{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.backdrop{background-color:transparent}.popover .bar{border-radius:0}.popover .bar-nav~.table-view{padding-top:50px}.popover .table-view{border-radius:12px}.toggle{width:104px;height:28px;background-color:#d7d7d7;border:2px solid #d7d7d7;border-radius:0}.toggle .toggle-handle{top:0;left:0;width:50px;height:24px;background-color:#bebebe;border:1px solid #b5b5b5;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1)}.toggle:before{top:1px;right:auto;left:11px;z-index:3;color:#fff}.toggle.active{background-color:#d7d7d7;border:2px solid #d7d7d7}.toggle.active .toggle-handle{margin-right:2px;background-color:#33b5e5;border-color:#33b5e5;-webkit-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}.toggle.active:before{right:14px;left:auto;color:#fff}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{content:''}.icon-caret:before{content:'\e800'}.icon-down-nav:before,.icon-down:before{content:'\e801'}.icon-download:before{content:'\e802'}.icon-left-nav:before,.icon-left:before{content:'\e803'}.icon-more-vertical:before{content:'\e804'}.icon-more:before{content:'\e805'}.icon-right-nav:before,.icon-right:before{content:'\e806'}.icon-search:before{content:'\e807'}.icon-share:before{content:'\e808'}.icon-up-nav:before,.icon-up:before{content:'\e809'}
\ No newline at end of file
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
a {
color: #007aff;
}
a:active {
color: #0062cc;
}
.content {
background-color: #efeff4;
}
.h5, h5,
.h6, h6,
p {
color: #8f8f94;
}
.h5, h5,
.h6, h6 {
font-weight: normal;
text-transform: uppercase;
}
.btn {
color: #929292;
background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all;
-moz-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}
.btn:active, .btn.active {
color: #fff;
background-color: #929292;
}
.btn-primary {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
.btn-primary:active, .btn-primary.active {
background-color: #0062cc;
border: 1px solid #0062cc;
}
.btn-positive {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.btn-positive:active, .btn-positive.active {
background-color: #2ac845;
border: 1px solid #2ac845;
}
.btn-negative {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.btn-negative:active, .btn-negative.active {
background-color: #cf2d28;
border: 1px solid #cf2d28;
}
.btn-outlined {
background-color: transparent;
}
.btn-outlined.btn-primary {
color: #007aff;
}
.btn-outlined.btn-positive {
color: #4cd964;
}
.btn-outlined.btn-negative {
color: #dd524d;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
.btn-link {
color: #007aff;
background-color: transparent;
border: none;
}
.btn-link:active, .btn-link.active {
color: #0062cc;
background-color: transparent;
}
.btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
}
.bar.bar-header-secondary {
top: 44px;
}
.bar.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab {
border-top: 0;
}
.bar-tab {
border-top: 0;
}
.tab-item {
color: #929292;
}
.tab-item.active, .tab-item:active {
color: #007aff;
}
.bar-nav .btn-link {
color: #007aff;
}
.bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
}
.badge.badge-inverted {
color: #929292;
background-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #007aff;
}
.badge-primary.badge-inverted {
color: #007aff;
background-color: transparent;
}
.badge-positive {
color: #fff;
background-color: #4cd964;
}
.badge-positive.badge-inverted {
color: #4cd964;
background-color: transparent;
}
.badge-negative {
color: #fff;
background-color: #dd524d;
}
.badge-negative.badge-inverted {
color: #dd524d;
background-color: transparent;
}
.card .table-view {
background-image: none;
}
.card .table-view-cell:last-child {
background-image: none;
}
.table-view {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
.table-view .table-view-cell {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
color: inherit;
}
.table-view .table-view-divider {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
select,
textarea,
input[type="text"],
input[type="search"],
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="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
}
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, .1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
}
.input-group input {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.input-row:last-child,
.input-row label + input {
background-image: none;
}
.segmented-control {
background-color: transparent;
border: 1px solid #929292;
}
.segmented-control .control-item {
color: #929292;
border-color: #929292;
-webkit-transition: background-color .1s linear;
-moz-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.segmented-control .control-item:active {
background-color: #ebebeb;
}
.segmented-control .control-item.active {
color: #fff;
background-color: #929292;
}
.segmented-control-primary {
border: 1px solid #007aff;
}
.segmented-control-primary .control-item {
color: #007aff;
border-color: inherit;
}
.segmented-control-primary .control-item:active {
background-color: #b3d7ff;
}
.segmented-control-primary .control-item.active {
color: #fff;
background-color: #007aff;
}
.segmented-control-positive {
border: 1px solid #4cd964;
}
.segmented-control-positive .control-item {
color: #4cd964;
border-color: inherit;
}
.segmented-control-positive .control-item:active {
background-color: #dff8e3;
}
.segmented-control-positive .control-item.active {
color: #fff;
background-color: #4cd964;
}
.segmented-control-negative {
border: 1px solid #dd524d;
}
.segmented-control-negative .control-item {
color: #dd524d;
border-color: inherit;
}
.segmented-control-negative .control-item:active {
background-color: #fae4e3;
}
.segmented-control-negative .control-item.active {
color: #fff;
background-color: #dd524d;
}
.popover {
border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
}
.popover:before {
border-bottom: 15px solid rgba(247, 247, 247, .98);
}
.popover .bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.popover .table-view {
background-image: none;
border-radius: 12px;
}
.modal {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.modal.active {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.toggle {
width: 47px;
border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border;
transition-property: box-shadow, border;
}
.toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
display: none;
}
.toggle.active {
background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964;
}
.toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0);
}
.toggle.active .toggle-handle {
border-color: #4cd964;
}
.content.fade {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.content.sliding {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
-moz-animation-duration: .4s;
animation-duration: .4s;
}
.content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.content.sliding.left {
-webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
@-webkit-keyframes fadeOverlay {
from {
-webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
}
to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
}
}
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/a{color:#007aff}a:active{color:#0062cc}.content{background-color:#efeff4}.h5,.h6,h5,h6,p{color:#8f8f94}.h5,.h6,h5,h6{font-weight:400;text-transform:uppercase}.btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;-moz-transition:all;transition:all;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}.btn.active,.btn:active{color:#fff;background-color:#929292}.btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.btn-primary.active,.btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.btn-positive.active,.btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.btn-negative.active,.btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#007aff}.btn-outlined.btn-positive{color:#4cd964}.btn-outlined.btn-negative{color:#dd524d}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{color:#007aff;background-color:transparent;border:none}.btn-link.active,.btn-link:active{color:#0062cc;background-color:transparent}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85)}.bar.bar-header-secondary{top:44px}.bar.bar-footer-secondary{bottom:44px}.bar.bar-footer-secondary-tab{bottom:50px}.bar-tab,.bar.bar-footer,.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{border-top:0}.tab-item{color:#929292}.bar-nav .btn-link,.tab-item.active,.tab-item:active{color:#007aff}.bar-nav .btn-link:active{color:#007aff;opacity:.6}.badge.badge-inverted{color:#929292;background-color:transparent}.badge-primary{color:#fff;background-color:#007aff}.badge-primary.badge-inverted{color:#007aff;background-color:transparent}.badge-positive{color:#fff;background-color:#4cd964}.badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.badge-negative{color:#fff;background-color:#dd524d}.badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.card .table-view,.card .table-view-cell:last-child{background-image:none}.table-view{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit}.table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}.input-group,select,textarea{height:auto}.input-group{padding:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border:0}.input-group input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border:0}.input-group input:last-child{background-image:none}.input-row{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.input-row label+input,.input-row:last-child{background-image:none}.segmented-control{background-color:transparent;border:1px solid #929292}.segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;transition:background-color .1s linear}.segmented-control .control-item:active{background-color:#ebebeb}.segmented-control .control-item.active{color:#fff;background-color:#929292}.segmented-control-primary{border:1px solid #007aff}.segmented-control-primary .control-item{color:#007aff;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#b3d7ff}.segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.segmented-control-positive{border:1px solid #4cd964}.segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#dff8e3}.segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.segmented-control-negative{border:1px solid #dd524d}.segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#fae4e3}.segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-moz-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.popover .bar{-webkit-box-shadow:none;box-shadow:none}.popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.popover .table-view{background-image:none;border-radius:12px}.modal,.modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.toggle{width:47px;border:2px solid #e6e6e6;-webkit-box-shadow:inset 0 0 0 0 #e1e1e1;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;-moz-transition-property:box-shadow,border;transition-property:box-shadow,border}.toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{display:none}.toggle.active{background-color:transparent;border:2px solid #4cd964;-webkit-box-shadow:inset 0 0 0 13px #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);-ms-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.content.fade{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.content.sliding.right:not([class*=sliding-in]),.content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;-moz-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.4s}.content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;-moz-animation-direction:reverse;animation-direction:reverse}.content.sliding.left{-webkit-transform:translate3d(-20%,0,0);-ms-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{-webkit-box-shadow:0 0 10px transparent,-320px 0 0 transparent;box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{-webkit-box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}}
\ No newline at end of file
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
color: #000;
background-color: #fff;
}
a {
color: #428bca;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a:active {
color: #3071a9;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff;
}
.content > * {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.bar-nav ~ .content {
padding-top: 44px;
}
.bar-header-secondary ~ .content {
padding-top: 88px;
}
.bar-footer ~ .content {
padding-bottom: 44px;
}
.bar-footer-secondary ~ .content {
padding-bottom: 88px;
}
.bar-tab ~ .content {
padding-bottom: 50px;
}
.bar-footer-secondary-tab ~ .content {
padding-bottom: 94px;
}
.content-padded {
margin: 10px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.clearfix:before, .clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
line-height: 1;
}
h1, .h1 {
font-size: 36px;
}
h2, .h2 {
font-size: 30px;
}
h3, .h3 {
font-size: 24px;
}
h4, .h4 {
font-size: 18px;
}
h5, .h5 {
margin-top: 20px;
font-size: 14px;
}
h6, .h6 {
margin-top: 20px;
font-size: 12px;
}
p {
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #777;
}
.btn {
position: relative;
display: inline-block;
padding: 6px 8px 7px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1;
color: #333;
text-align: center;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: white;
border: 1px solid #ccc;
border-radius: 3px;
}
.btn:active, .btn.active {
color: inherit;
background-color: #ccc;
}
.btn:disabled, .btn.disabled {
opacity: .6;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border: 1px solid #428bca;
}
.btn-primary:active, .btn-primary.active {
color: #fff;
background-color: #3071a9;
border: 1px solid #3071a9;
}
.btn-positive {
color: #fff;
background-color: #5cb85c;
border: 1px solid #5cb85c;
}
.btn-positive:active, .btn-positive.active {
color: #fff;
background-color: #449d44;
border: 1px solid #449d44;
}
.btn-negative {
color: #fff;
background-color: #d9534f;
border: 1px solid #d9534f;
}
.btn-negative:active, .btn-negative.active {
color: #fff;
background-color: #c9302c;
border: 1px solid #c9302c;
}
.btn-outlined {
background-color: transparent;
}
.btn-outlined.btn-primary {
color: #428bca;
}
.btn-outlined.btn-positive {
color: #5cb85c;
}
.btn-outlined.btn-negative {
color: #d9534f;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
.btn-link {
padding-top: 6px;
padding-bottom: 6px;
color: #428bca;
background-color: transparent;
border: 0;
}
.btn-link:active, .btn-link.active {
color: #3071a9;
background-color: transparent;
}
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
}
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
.btn .badge {
margin: -2px -4px -2px 4px;
font-size: 12px;
background-color: rgba(0, 0, 0, .15);
}
.btn .badge-inverted,
.btn:active .badge-inverted {
background-color: transparent;
}
.btn-primary:active .badge-inverted,
.btn-positive:active .badge-inverted,
.btn-negative:active .badge-inverted {
color: #fff;
}
.btn-block .badge {
position: absolute;
right: 0;
margin-right: 10px;
}
.btn .icon {
font-size: inherit;
}
.bar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
padding-right: 10px;
padding-left: 10px;
background-color: white;
border-bottom: 1px solid #ddd;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.bar-header-secondary {
top: 44px;
}
.bar-footer {
bottom: 0;
}
.bar-footer-secondary {
bottom: 44px;
}
.bar-footer-secondary-tab {
bottom: 50px;
}
.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
border-top: 1px solid #ddd;
border-bottom: 0;
}
.bar-nav {
top: 0;
}
.title {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0 -10px;
font-size: 17px;
font-weight: 500;
line-height: 44px;
color: #000;
text-align: center;
white-space: nowrap;
}
.title a {
color: inherit;
}
.bar-tab {
bottom: 0;
display: table;
width: 100%;
height: 50px;
padding: 0;
table-layout: fixed;
border-top: 1px solid #ddd;
border-bottom: 0;
}
.bar-tab .tab-item {
display: table-cell;
width: 1%;
height: 50px;
color: #929292;
text-align: center;
vertical-align: middle;
}
.bar-tab .tab-item.active, .bar-tab .tab-item:active {
color: #428bca;
}
.bar-tab .tab-item .icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.bar-tab .tab-item .icon ~ .tab-label {
display: block;
font-size: 11px;
}
.bar .btn {
position: relative;
top: 7px;
z-index: 20;
padding: 6px 12px 7px;
margin-top: 0;
font-weight: 400;
}
.bar .btn.pull-right {
margin-left: 10px;
}
.bar .btn.pull-left {
margin-right: 10px;
}
.bar .btn-link {
top: 0;
padding: 0;
font-size: 16px;
line-height: 44px;
color: #428bca;
border: 0;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #3071a9;
}
.bar .btn-block {
top: 6px;
padding: 7px 0;
margin-bottom: 0;
font-size: 16px;
}
.bar .btn-nav.pull-left {
margin-left: -5px;
}
.bar .btn-nav.pull-left .icon-left-nav {
margin-right: -3px;
}
.bar .btn-nav.pull-right {
margin-right: -5px;
}
.bar .btn-nav.pull-right .icon-right-nav {
margin-left: -3px;
}
.bar .icon {
position: relative;
z-index: 20;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
}
.bar .btn .icon {
top: 3px;
padding: 0;
}
.bar .title .icon {
padding: 0;
}
.bar .title .icon.icon-caret {
top: 4px;
margin-left: -5px;
}
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
.bar .segmented-control {
top: 7px;
margin: 0 auto;
}
.badge {
display: inline-block;
padding: 2px 9px 3px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, .15);
border-radius: 100px;
}
.badge.badge-inverted {
padding: 0 5px 0 0;
background-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #428bca;
}
.badge-primary.badge-inverted {
color: #428bca;
}
.badge-positive {
color: #fff;
background-color: #5cb85c;
}
.badge-positive.badge-inverted {
color: #5cb85c;
}
.badge-negative {
color: #fff;
background-color: #d9534f;
}
.badge-negative.badge-inverted {
color: #d9534f;
}
.card {
margin: 10px;
overflow: hidden;
background-color: white;
border: 1px solid #ddd;
border-radius: 6px;
}
.card .table-view {
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
}
.card .table-view .table-view-divider:first-child {
top: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.card .table-view .table-view-divider:last-child {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.card .table-view-cell:last-child {
border-bottom: 0;
}
.table-view {
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none;
background-color: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.table-view-cell {
position: relative;
padding: 11px 65px 11px 15px;
overflow: hidden;
border-bottom: 1px solid #ddd;
}
.table-view-cell:last-child {
border-bottom: 0;
}
.table-view-cell > a:not(.btn) {
position: relative;
display: block;
padding: inherit;
margin: -11px -65px -11px -15px;
overflow: hidden;
color: inherit;
}
.table-view-cell > a:not(.btn):active {
background-color: #eee;
}
.table-view-cell p {
margin-bottom: 0;
}
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px;
margin-left: 0;
font-weight: 500;
color: #999;
background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.table-view .media,
.table-view .media-body {
overflow: hidden;
}
.table-view .media-object.pull-left {
margin-right: 10px;
}
.table-view .media-object.pull-right {
margin-left: 10px;
}
.table-view-cell > .btn,
.table-view-cell > .badge,
.table-view-cell > .toggle,
.table-view-cell > a > .btn,
.table-view-cell > a > .badge,
.table-view-cell > a > .toggle {
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
.table-view-cell > a .push-right > .btn,
.table-view-cell > a .push-right > .badge,
.table-view-cell > a .push-right > .toggle {
right: 35px;
}
.content > .table-view:first-child {
margin-top: 15px;
}
input,
textarea,
button,
select {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
}
select,
textarea,
input[type="text"],
input[type="search"],
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="tel"],
input[type="color"] {
width: 100%;
height: 35px;
-webkit-appearance: none;
padding: 0 15px;
margin-bottom: 15px;
line-height: 21px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
outline: none;
}
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
font-size: 16px;
border-radius: 20px;
}
input[type="search"]:focus {
text-align: left;
}
textarea {
height: auto;
}
select {
height: auto;
font-size: 14px;
background-color: #f8f8f8;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}
.input-group {
background-color: #fff;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;
background-color: transparent;
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.input-row {
height: 35px;
overflow: hidden;
border-bottom: 1px solid #ddd;
}
.input-row label {
float: left;
width: 35%;
padding: 8px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.1;
}
.input-row input {
float: right;
width: 65%;
padding-left: 0;
margin-bottom: 0;
border: 0;
}
.segmented-control {
position: relative;
display: table;
overflow: hidden;
font-size: 12px;
font-weight: 400;
background-color: white;
border: 1px solid #ccc;
border-radius: 3px;
}
.segmented-control .control-item {
display: table-cell;
width: 1%;
padding-top: 6px;
padding-bottom: 7px;
overflow: hidden;
line-height: 1;
color: #333;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc;
}
.segmented-control .control-item:first-child {
border-left-width: 0;
}
.segmented-control .control-item:active {
background-color: #eee;
}
.segmented-control .control-item.active {
background-color: #ccc;
}
.segmented-control-primary {
border-color: #428bca;
}
.segmented-control-primary .control-item {
color: #428bca;
border-color: inherit;
}
.segmented-control-primary .control-item:active {
background-color: #cde1f1;
}
.segmented-control-primary .control-item.active {
color: #fff;
background-color: #428bca;
}
.segmented-control-positive {
border-color: #5cb85c;
}
.segmented-control-positive .control-item {
color: #5cb85c;
border-color: inherit;
}
.segmented-control-positive .control-item:active {
background-color: #d8eed8;
}
.segmented-control-positive .control-item.active {
color: #fff;
background-color: #5cb85c;
}
.segmented-control-negative {
border-color: #d9534f;
}
.segmented-control-negative .control-item {
color: #d9534f;
border-color: inherit;
}
.segmented-control-negative .control-item:active {
background-color: #f9e2e2;
}
.segmented-control-negative .control-item.active {
color: #fff;
background-color: #d9534f;
}
.control-content {
display: none;
}
.control-content.active {
display: block;
}
.popover {
position: fixed;
top: 55px;
left: 50%;
z-index: 20;
display: none;
width: 280px;
margin-left: -140px;
background-color: white;
border-radius: 6px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
.popover:before {
position: absolute;
top: -15px;
left: 50%;
width: 0;
height: 0;
margin-left: -15px;
content: '';
border-right: 15px solid transparent;
border-bottom: 15px solid white;
border-left: 15px solid transparent;
}
.popover.visible {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.popover .bar ~ .table-view {
padding-top: 44px;
}
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
background-color: rgba(0, 0, 0, .3);
}
.popover .btn-block {
margin-bottom: 5px;
}
.popover .btn-block:last-child {
margin-bottom: 0;
}
.popover .bar-nav {
border-bottom: 1px solid #ddd;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .table-view {
max-height: 300px;
margin-bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff;
border-top: 0;
border-bottom: 0;
border-radius: 6px;
}
.modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.modal.active {
height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slider {
width: 100%;
}
.slider {
overflow: hidden;
background-color: #000;
}
.slider .slide-group {
position: relative;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
transition: all 0s linear;
}
.slider .slide-group .slide {
display: inline-block;
width: 100%;
height: 100%;
font-size: 14px;
vertical-align: top;
}
.toggle {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border;
}
.toggle .toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #999;
text-transform: uppercase;
content: "Off";
}
.toggle.active {
background-color: #5cb85c;
border: 2px solid #5cb85c;
}
.toggle.active .toggle-handle {
border-color: #5cb85c;
-webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0);
}
.toggle.active:before {
right: auto;
left: 15px;
color: #fff;
content: "On";
}
.toggle input[type="checkbox"] {
display: none;
}
.content.fade {
left: 0;
opacity: 0;
}
.content.fade.in {
opacity: 1;
}
.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.content.sliding.left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.content.sliding.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.navigate-left:after,
.navigate-right:after,
.push-left:after,
.push-right:after {
position: absolute;
top: 50%;
display: inline-block;
font-family: Ratchicons;
font-size: inherit;
line-height: 1;
color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
}
.navigate-left:after,
.push-left:after {
left: 15px;
content: '\e822';
}
.navigate-right:after,
.push-right:after {
right: 15px;
content: '\e826';
}
@font-face {
font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
}
.icon {
display: inline-block;
font-family: Ratchicons;
font-size: 24px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.icon-back:before {
content: '\e80a';
}
.icon-bars:before {
content: '\e80e';
}
.icon-caret:before {
content: '\e80f';
}
.icon-check:before {
content: '\e810';
}
.icon-close:before {
content: '\e811';
}
.icon-code:before {
content: '\e812';
}
.icon-compose:before {
content: '\e813';
}
.icon-download:before {
content: '\e815';
}
.icon-edit:before {
content: '\e829';
}
.icon-forward:before {
content: '\e82a';
}
.icon-gear:before {
content: '\e821';
}
.icon-home:before {
content: '\e82b';
}
.icon-info:before {
content: '\e82c';
}
.icon-list:before {
content: '\e823';
}
.icon-more-vertical:before {
content: '\e82e';
}
.icon-more:before {
content: '\e82f';
}
.icon-pages:before {
content: '\e824';
}
.icon-pause:before {
content: '\e830';
}
.icon-person:before {
content: '\e832';
}
.icon-play:before {
content: '\e816';
}
.icon-plus:before {
content: '\e817';
}
.icon-refresh:before {
content: '\e825';
}
.icon-search:before {
content: '\e819';
}
.icon-share:before {
content: '\e81a';
}
.icon-sound:before {
content: '\e827';
}
.icon-sound2:before {
content: '\e828';
}
.icon-sound3:before {
content: '\e80b';
}
.icon-sound4:before {
content: '\e80c';
}
.icon-star-filled:before {
content: '\e81b';
}
.icon-star:before {
content: '\e81c';
}
.icon-stop:before {
content: '\e81d';
}
.icon-trash:before {
content: '\e81e';
}
.icon-up-nav:before {
content: '\e81f';
}
.icon-up:before {
content: '\e80d';
}
.icon-right-nav:before {
content: '\e818';
}
.icon-right:before {
content: '\e826';
}
.icon-down-nav:before {
content: '\e814';
}
.icon-down:before {
content: '\e820';
}
.icon-left-nav:before {
content: '\e82d';
}
.icon-left:before {
content: '\e822';
}
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{position:fixed;top:0;right:0;bottom:0;left:0;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#fff}a{color:#428bca;text-decoration:none;-webkit-tap-highlight-color:transparent}a:active{color:#3071a9}.content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff}.content>*{-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.bar-nav~.content{padding-top:44px}.bar-header-secondary~.content{padding-top:88px}.bar-footer~.content{padding-bottom:44px}.bar-footer-secondary~.content{padding-bottom:88px}.bar-tab~.content{padding-bottom:50px}.bar-footer-secondary-tab~.content{padding-bottom:94px}.content-padded{margin:10px}.pull-left{float:left}.pull-right{float:right}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;line-height:1}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{margin-top:20px;font-size:14px}.h6,h6{margin-top:20px;font-size:12px}p{margin-top:0;margin-bottom:10px;font-size:14px;color:#777}.btn{position:relative;display:inline-block;padding:6px 8px 7px;margin-bottom:0;font-size:12px;font-weight:400;line-height:1;color:#333;text-align:center;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px}.btn.active,.btn:active{color:inherit;background-color:#ccc}.btn.disabled,.btn:disabled{opacity:.6}.btn-primary{color:#fff;background-color:#428bca;border:1px solid #428bca}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#3071a9;border:1px solid #3071a9}.btn-positive{color:#fff;background-color:#5cb85c;border:1px solid #5cb85c}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#449d44;border:1px solid #449d44}.btn-negative{color:#fff;background-color:#d9534f;border:1px solid #d9534f}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#c9302c;border:1px solid #c9302c}.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#428bca}.btn-outlined.btn-positive{color:#5cb85c}.btn-outlined.btn-negative{color:#d9534f}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{padding-top:6px;padding-bottom:6px;color:#428bca;background-color:transparent;border:0}.btn-link.active,.btn-link:active{color:#3071a9;background-color:transparent}.btn-block{display:block;width:100%;padding:15px 0;margin-bottom:10px;font-size:18px}input[type=button],input[type=reset],input[type=submit]{width:100%}.btn .badge{margin:-2px -4px -2px 4px;font-size:12px;background-color:rgba(0,0,0,.15)}.btn .badge-inverted,.btn:active .badge-inverted{background-color:transparent}.btn-negative:active .badge-inverted,.btn-positive:active .badge-inverted,.btn-primary:active .badge-inverted{color:#fff}.btn-block .badge{position:absolute;right:0;margin-right:10px}.btn .icon{font-size:inherit}.bar{position:fixed;right:0;left:0;z-index:10;height:44px;padding-right:10px;padding-left:10px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bar-header-secondary{top:44px}.bar-footer{bottom:0}.bar-footer-secondary{bottom:44px}.bar-footer-secondary-tab{bottom:50px}.bar-footer,.bar-footer-secondary,.bar-footer-secondary-tab{border-top:1px solid #ddd;border-bottom:0}.bar-nav{top:0}.title{position:absolute;display:block;width:100%;padding:0;margin:0 -10px;font-size:17px;font-weight:500;line-height:44px;color:#000;text-align:center;white-space:nowrap}.title a{color:inherit}.bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:1px solid #ddd;border-bottom:0}.bar-tab .tab-item{display:table-cell;width:1%;height:50px;color:#929292;text-align:center;vertical-align:middle}.bar-tab .tab-item.active,.bar-tab .tab-item:active{color:#428bca}.bar-tab .tab-item .icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.bar-tab .tab-item .icon~.tab-label{display:block;font-size:11px}.bar .btn{position:relative;top:7px;z-index:20;padding:6px 12px 7px;margin-top:0;font-weight:400}.bar .btn.pull-right{margin-left:10px}.bar .btn.pull-left{margin-right:10px}.bar .btn-link{top:0;padding:0;font-size:16px;line-height:44px;color:#428bca;border:0}.bar .btn-link.active,.bar .btn-link:active{color:#3071a9}.bar .btn-block{top:6px;padding:7px 0;margin-bottom:0;font-size:16px}.bar .btn-nav.pull-left{margin-left:-5px}.bar .btn-nav.pull-left .icon-left-nav{margin-right:-3px}.bar .btn-nav.pull-right{margin-right:-5px}.bar .btn-nav.pull-right .icon-right-nav{margin-left:-3px}.bar .icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.bar .btn .icon{top:3px;padding:0}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:4px;margin-left:-5px}.bar input[type=search]{height:29px;margin:6px 0}.bar .segmented-control{top:7px;margin:0 auto}.badge{display:inline-block;padding:2px 9px 3px;font-size:12px;line-height:1;color:#333;background-color:rgba(0,0,0,.15);border-radius:100px}.badge.badge-inverted{padding:0 5px 0 0;background-color:transparent}.badge-primary{color:#fff;background-color:#428bca}.badge-primary.badge-inverted{color:#428bca}.badge-positive{color:#fff;background-color:#5cb85c}.badge-positive.badge-inverted{color:#5cb85c}.badge-negative{color:#fff;background-color:#d9534f}.badge-negative.badge-inverted{color:#d9534f}.card{margin:10px;overflow:hidden;background-color:#fff;border:1px solid #ddd;border-radius:6px}.card .table-view{margin-bottom:0;border-top:0;border-bottom:0}.card .table-view .table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.card .table-view .table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.card .table-view-cell:last-child{border-bottom:0}.table-view{padding-left:0;margin-top:0;margin-bottom:15px;list-style:none;background-color:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view-cell{position:relative;padding:11px 65px 11px 15px;overflow:hidden;border-bottom:1px solid #ddd}.table-view-cell:last-child{border-bottom:0}.table-view-cell>a:not(.btn){position:relative;display:block;padding:inherit;margin:-11px -65px -11px -15px;overflow:hidden;color:inherit}.table-view-cell>a:not(.btn):active{background-color:#eee}.table-view-cell p{margin-bottom:0}.table-view-divider{padding-top:6px;padding-bottom:6px;padding-left:15px;margin-top:-1px;margin-left:0;font-weight:500;color:#999;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view .media,.table-view .media-body{overflow:hidden}.table-view .media-object.pull-left{margin-right:10px}.table-view .media-object.pull-right{margin-left:10px}.table-view-cell>.badge,.table-view-cell>.btn,.table-view-cell>.toggle,.table-view-cell>a>.badge,.table-view-cell>a>.btn,.table-view-cell>a>.toggle{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:35px}.content>.table-view:first-child{margin-top:15px}button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;height:35px;-webkit-appearance:none;padding:0 15px;margin-bottom:15px;line-height:21px;background-color:#fff;border:1px solid #ddd;border-radius:3px;outline:0}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 10px;font-size:16px;border-radius:20px}input[type=search]:focus{text-align:left}textarea{height:auto}select{height:auto;font-size:14px;background-color:#f8f8f8;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.input-group{background-color:#fff}.input-group input,.input-group textarea{margin-bottom:0;background-color:transparent;border-top:0;border-right:0;border-left:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.input-row{height:35px;overflow:hidden;border-bottom:1px solid #ddd}.input-row label{float:left;width:35%;padding:8px 15px;font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.1}.input-row input{float:right;width:65%;padding-left:0;margin-bottom:0;border:0}.segmented-control{position:relative;display:table;overflow:hidden;font-size:12px;font-weight:400;background-color:#fff;border:1px solid #ccc;border-radius:3px}.segmented-control .control-item{display:table-cell;width:1%;padding-top:6px;padding-bottom:7px;overflow:hidden;line-height:1;color:#333;text-align:center;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid #ccc}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item:active{background-color:#eee}.segmented-control .control-item.active{background-color:#ccc}.segmented-control-primary{border-color:#428bca}.segmented-control-primary .control-item{color:#428bca;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#cde1f1}.segmented-control-primary .control-item.active{color:#fff;background-color:#428bca}.segmented-control-positive{border-color:#5cb85c}.segmented-control-positive .control-item{color:#5cb85c;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#d8eed8}.segmented-control-positive .control-item.active{color:#fff;background-color:#5cb85c}.segmented-control-negative{border-color:#d9534f}.segmented-control-negative .control-item{color:#d9534f;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#f9e2e2}.segmented-control-negative .control-item.active{color:#fff;background-color:#d9534f}.control-content{display:none}.control-content.active{display:block}.popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;margin-left:-140px;background-color:#fff;border-radius:6px;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1);opacity:0;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;transition:all .25s linear;-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}.popover:before{position:absolute;top:-15px;left:50%;width:0;height:0;margin-left:-15px;content:'';border-right:15px solid transparent;border-bottom:15px solid #fff;border-left:15px solid transparent}.popover.visible{opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.popover .bar~.table-view{padding-top:44px}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background-color:rgba(0,0,0,.3)}.popover .btn-block{margin-bottom:5px}.popover .btn-block:last-child{margin-bottom:0}.popover .bar-nav{border-bottom:1px solid #ddd;border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.popover .table-view{max-height:300px;margin-bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff;border-top:0;border-bottom:0;border-radius:6px}.modal{position:fixed;top:0;z-index:11;width:100%;min-height:100%;overflow:hidden;background-color:#fff;opacity:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.modal.active{height:100%;opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slider{width:100%;overflow:hidden;background-color:#000}.slider .slide-group{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;transition:all 0s linear}.slider .slide-group .slide{display:inline-block;width:100%;height:100%;font-size:14px;vertical-align:top}.toggle{position:relative;display:block;width:74px;height:30px;background-color:#fff;border:2px solid #ddd;border-radius:20px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;-moz-transition-property:background-color,border;transition-property:background-color,border}.toggle .toggle-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;border:1px solid #ddd;border-radius:100px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{position:absolute;top:3px;right:11px;font-size:13px;color:#999;text-transform:uppercase;content:"Off"}.toggle.active{background-color:#5cb85c;border:2px solid #5cb85c}.toggle.active .toggle-handle{border-color:#5cb85c;-webkit-transform:translate3d(44px,0,0);-ms-transform:translate3d(44px,0,0);transform:translate3d(44px,0,0)}.toggle.active:before{right:auto;left:15px;color:#fff;content:"On"}.toggle input[type=checkbox]{display:none}.content.fade{left:0;opacity:0}.content.fade.in{opacity:1}.content.sliding{z-index:2;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.content.sliding.left{z-index:1;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.content.sliding.right{z-index:3;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{position:absolute;top:50%;display:inline-block;font-family:Ratchicons;font-size:inherit;line-height:1;color:#bbb;text-decoration:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased}.navigate-left:after,.push-left:after{left:15px;content:'\e822'}.navigate-right:after,.push-right:after{right:15px;content:'\e826'}@font-face{font-family:Ratchicons;font-style:normal;font-weight:400;src:url(../fonts/ratchicons.eot);src:url(../fonts/ratchicons.eot?#iefix) format("embedded-opentype"),url(../fonts/ratchicons.woff) format("woff"),url(../fonts/ratchicons.ttf) format("truetype"),url(../fonts/ratchicons.svg#svgFontName) format("svg")}.icon{display:inline-block;font-family:Ratchicons;font-size:24px;line-height:1;text-decoration:none;-webkit-font-smoothing:antialiased}.icon-back:before{content:'\e80a'}.icon-bars:before{content:'\e80e'}.icon-caret:before{content:'\e80f'}.icon-check:before{content:'\e810'}.icon-close:before{content:'\e811'}.icon-code:before{content:'\e812'}.icon-compose:before{content:'\e813'}.icon-download:before{content:'\e815'}.icon-edit:before{content:'\e829'}.icon-forward:before{content:'\e82a'}.icon-gear:before{content:'\e821'}.icon-home:before{content:'\e82b'}.icon-info:before{content:'\e82c'}.icon-list:before{content:'\e823'}.icon-more-vertical:before{content:'\e82e'}.icon-more:before{content:'\e82f'}.icon-pages:before{content:'\e824'}.icon-pause:before{content:'\e830'}.icon-person:before{content:'\e832'}.icon-play:before{content:'\e816'}.icon-plus:before{content:'\e817'}.icon-refresh:before{content:'\e825'}.icon-search:before{content:'\e819'}.icon-share:before{content:'\e81a'}.icon-sound:before{content:'\e827'}.icon-sound2:before{content:'\e828'}.icon-sound3:before{content:'\e80b'}.icon-sound4:before{content:'\e80c'}.icon-star-filled:before{content:'\e81b'}.icon-star:before{content:'\e81c'}.icon-stop:before{content:'\e81d'}.icon-trash:before{content:'\e81e'}.icon-up-nav:before{content:'\e81f'}.icon-up:before{content:'\e80d'}.icon-right-nav:before{content:'\e818'}.icon-right:before{content:'\e826'}.icon-down-nav:before{content:'\e814'}.icon-down:before{content:'\e820'}.icon-left-nav:before{content:'\e82d'}.icon-left:before{content:'\e822'}
\ No newline at end of file
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
<defs>
<font id="ratchicons" horiz-adv-x="1000" >
<font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
<glyph glyph-name="up-nav" unicode="&#xe81f;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
<glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
<glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
<glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
<glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
<glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
<glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
<glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
<glyph glyph-name="down" unicode="&#xe820;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
<glyph glyph-name="gear" unicode="&#xe821;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
<glyph glyph-name="left" unicode="&#xe822;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
<glyph glyph-name="list" unicode="&#xe823;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
<glyph glyph-name="pages" unicode="&#xe824;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
<glyph glyph-name="refresh" unicode="&#xe825;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
<glyph glyph-name="right" unicode="&#xe826;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
<glyph glyph-name="sound" unicode="&#xe827;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound2" unicode="&#xe828;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound3" unicode="&#xe80b;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound4" unicode="&#xe80c;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
<glyph glyph-name="up" unicode="&#xe80d;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
<glyph glyph-name="bars" unicode="&#xe80e;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
<glyph glyph-name="caret" unicode="&#xe80f;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
<glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="close" unicode="&#xe811;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="code" unicode="&#xe812;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
<glyph glyph-name="compose" unicode="&#xe813;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
<glyph glyph-name="down-nav" unicode="&#xe814;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
<glyph glyph-name="download" unicode="&#xe815;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
<glyph glyph-name="edit" unicode="&#xe829;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
<glyph glyph-name="forward" unicode="&#xe82a;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
<glyph glyph-name="home" unicode="&#xe82b;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
<glyph glyph-name="info" unicode="&#xe82c;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
<glyph glyph-name="left-nav" unicode="&#xe82d;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
<glyph glyph-name="more-vertical" unicode="&#xe82e;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
<glyph glyph-name="more" unicode="&#xe82f;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
<glyph glyph-name="pause" unicode="&#xe830;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
<glyph glyph-name="person" unicode="&#xe832;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
<glyph glyph-name="play" unicode="&#xe816;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
<glyph glyph-name="plus" unicode="&#xe817;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="right-nav" unicode="&#xe818;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
<glyph glyph-name="search" unicode="&#xe819;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
<glyph glyph-name="share" unicode="&#xe81a;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
<glyph glyph-name="star-filled" unicode="&#xe81b;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
<glyph glyph-name="star" unicode="&#xe81c;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
<glyph glyph-name="stop" unicode="&#xe81d;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
<glyph glyph-name="trash" unicode="&#xe81e;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
</font>
</defs>
</svg>
\ No newline at end of file
/*! jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k="".trim,l={},m="1.11.0",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(n.isPlainObject(c)||(b=n.isArray(c)))?(b?(b=!1,f=a&&n.isArray(a)?a:[]):f=a&&n.isPlainObject(a)?a:{},g[d]=n.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray||function(a){return"array"===n.type(a)},isWindow:function(a){return null!=a&&a==a.window},isNumeric:function(a){return a-parseFloat(a)>=0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},isPlainObject:function(a){var b;if(!a||"object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;try{if(a.constructor&&!j.call(a,"constructor")&&!j.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}if(l.ownLast)for(b in a)return j.call(a,b);for(b in a);return void 0===b||j.call(a,b)},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(b){b&&n.trim(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:k&&!k.call("\ufeff\xa0")?function(a){return null==a?"":k.call(a)}:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){var d;if(b){if(g)return g.call(b,a,c);for(d=b.length,c=c?0>c?Math.max(0,d+c):c:0;d>c;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,b){var c=+b.length,d=0,e=a.length;while(c>d)a[e++]=b[d++];if(c!==c)while(void 0!==b[d])a[e++]=b[d++];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(f=a[b],b=a,a=f),n.isFunction(a)?(c=d.call(arguments,2),e=function(){return a.apply(b||this,c.concat(d.call(arguments)))},e.guid=a.guid=a.guid||n.guid++,e):void 0},now:function(){return+new Date},support:l}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s="sizzle"+-new Date,t=a.document,u=0,v=0,w=eb(),x=eb(),y=eb(),z=function(a,b){return a===b&&(j=!0),0},A="undefined",B=1<<31,C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=D.indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",M=L.replace("w","w#"),N="\\["+K+"*("+L+")"+K+"*(?:([*^$|!~]?=)"+K+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+M+")|)|)"+K+"*\\]",O=":("+L+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+N.replace(3,8)+")*)|.*)\\)|)",P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(O),U=new RegExp("^"+M+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L.replace("w","w*")+")"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=/'|\\/g,ab=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),bb=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)};try{G.apply(D=H.call(t.childNodes),t.childNodes),D[t.childNodes.length].nodeType}catch(cb){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function db(a,b,d,e){var f,g,h,i,j,m,p,q,u,v;if((b?b.ownerDocument||b:t)!==l&&k(b),b=b||l,d=d||[],!a||"string"!=typeof a)return d;if(1!==(i=b.nodeType)&&9!==i)return[];if(n&&!e){if(f=Z.exec(a))if(h=f[1]){if(9===i){if(g=b.getElementById(h),!g||!g.parentNode)return d;if(g.id===h)return d.push(g),d}else if(b.ownerDocument&&(g=b.ownerDocument.getElementById(h))&&r(b,g)&&g.id===h)return d.push(g),d}else{if(f[2])return G.apply(d,b.getElementsByTagName(a)),d;if((h=f[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(h)),d}if(c.qsa&&(!o||!o.test(a))){if(q=p=s,u=b,v=9===i&&a,1===i&&"object"!==b.nodeName.toLowerCase()){m=ob(a),(p=b.getAttribute("id"))?q=p.replace(_,"\\$&"):b.setAttribute("id",q),q="[id='"+q+"'] ",j=m.length;while(j--)m[j]=q+pb(m[j]);u=$.test(a)&&mb(b.parentNode)||b,v=m.join(",")}if(v)try{return G.apply(d,u.querySelectorAll(v)),d}catch(w){}finally{p||b.removeAttribute("id")}}}return xb(a.replace(P,"$1"),b,d,e)}function eb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function fb(a){return a[s]=!0,a}function gb(a){var b=l.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function hb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function ib(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||B)-(~a.sourceIndex||B);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function jb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function kb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function lb(a){return fb(function(b){return b=+b,fb(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function mb(a){return a&&typeof a.getElementsByTagName!==A&&a}c=db.support={},f=db.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},k=db.setDocument=function(a){var b,e=a?a.ownerDocument||a:t,g=e.defaultView;return e!==l&&9===e.nodeType&&e.documentElement?(l=e,m=e.documentElement,n=!f(e),g&&g!==g.top&&(g.addEventListener?g.addEventListener("unload",function(){k()},!1):g.attachEvent&&g.attachEvent("onunload",function(){k()})),c.attributes=gb(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=gb(function(a){return a.appendChild(e.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(e.getElementsByClassName)&&gb(function(a){return a.innerHTML="<div class='a'></div><div class='a i'></div>",a.firstChild.className="i",2===a.getElementsByClassName("i").length}),c.getById=gb(function(a){return m.appendChild(a).id=s,!e.getElementsByName||!e.getElementsByName(s).length}),c.getById?(d.find.ID=function(a,b){if(typeof b.getElementById!==A&&n){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ab,bb);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ab,bb);return function(a){var c=typeof a.getAttributeNode!==A&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return typeof b.getElementsByTagName!==A?b.getElementsByTagName(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return typeof b.getElementsByClassName!==A&&n?b.getElementsByClassName(a):void 0},p=[],o=[],(c.qsa=Y.test(e.querySelectorAll))&&(gb(function(a){a.innerHTML="<select t=''><option selected=''></option></select>",a.querySelectorAll("[t^='']").length&&o.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||o.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll(":checked").length||o.push(":checked")}),gb(function(a){var b=e.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&o.push("name"+K+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||o.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),o.push(",.*:")})),(c.matchesSelector=Y.test(q=m.webkitMatchesSelector||m.mozMatchesSelector||m.oMatchesSelector||m.msMatchesSelector))&&gb(function(a){c.disconnectedMatch=q.call(a,"div"),q.call(a,"[s!='']:x"),p.push("!=",O)}),o=o.length&&new RegExp(o.join("|")),p=p.length&&new RegExp(p.join("|")),b=Y.test(m.compareDocumentPosition),r=b||Y.test(m.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},z=b?function(a,b){if(a===b)return j=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===e||a.ownerDocument===t&&r(t,a)?-1:b===e||b.ownerDocument===t&&r(t,b)?1:i?I.call(i,a)-I.call(i,b):0:4&d?-1:1)}:function(a,b){if(a===b)return j=!0,0;var c,d=0,f=a.parentNode,g=b.parentNode,h=[a],k=[b];if(!f||!g)return a===e?-1:b===e?1:f?-1:g?1:i?I.call(i,a)-I.call(i,b):0;if(f===g)return ib(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)k.unshift(c);while(h[d]===k[d])d++;return d?ib(h[d],k[d]):h[d]===t?-1:k[d]===t?1:0},e):l},db.matches=function(a,b){return db(a,null,null,b)},db.matchesSelector=function(a,b){if((a.ownerDocument||a)!==l&&k(a),b=b.replace(S,"='$1']"),!(!c.matchesSelector||!n||p&&p.test(b)||o&&o.test(b)))try{var d=q.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return db(b,l,null,[a]).length>0},db.contains=function(a,b){return(a.ownerDocument||a)!==l&&k(a),r(a,b)},db.attr=function(a,b){(a.ownerDocument||a)!==l&&k(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!n):void 0;return void 0!==f?f:c.attributes||!n?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},db.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},db.uniqueSort=function(a){var b,d=[],e=0,f=0;if(j=!c.detectDuplicates,i=!c.sortStable&&a.slice(0),a.sort(z),j){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return i=null,a},e=db.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=db.selectors={cacheLength:50,createPseudo:fb,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ab,bb),a[3]=(a[4]||a[5]||"").replace(ab,bb),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||db.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&db.error(a[0]),a},PSEUDO:function(a){var b,c=!a[5]&&a[2];return V.CHILD.test(a[0])?null:(a[3]&&void 0!==a[4]?a[2]=a[4]:c&&T.test(c)&&(b=ob(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ab,bb).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=w[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&w(a,function(a){return b.test("string"==typeof a.className&&a.className||typeof a.getAttribute!==A&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=db.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),t=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&t){k=q[s]||(q[s]={}),j=k[a]||[],n=j[0]===u&&j[1],m=j[0]===u&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[u,n,m];break}}else if(t&&(j=(b[s]||(b[s]={}))[a])&&j[0]===u)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(t&&((l[s]||(l[s]={}))[a]=[u,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||db.error("unsupported pseudo: "+a);return e[s]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?fb(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I.call(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:fb(function(a){var b=[],c=[],d=g(a.replace(P,"$1"));return d[s]?fb(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:fb(function(a){return function(b){return db(a,b).length>0}}),contains:fb(function(a){return function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:fb(function(a){return U.test(a||"")||db.error("unsupported lang: "+a),a=a.replace(ab,bb).toLowerCase(),function(b){var c;do if(c=n?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===m},focus:function(a){return a===l.activeElement&&(!l.hasFocus||l.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:lb(function(){return[0]}),last:lb(function(a,b){return[b-1]}),eq:lb(function(a,b,c){return[0>c?c+b:c]}),even:lb(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:lb(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:lb(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:lb(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=jb(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=kb(b);function nb(){}nb.prototype=d.filters=d.pseudos,d.setFilters=new nb;function ob(a,b){var c,e,f,g,h,i,j,k=x[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=Q.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?db.error(a):x(a,i).slice(0)}function pb(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function qb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=v++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[u,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[s]||(b[s]={}),(h=i[d])&&h[0]===u&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function rb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function sb(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function tb(a,b,c,d,e,f){return d&&!d[s]&&(d=tb(d)),e&&!e[s]&&(e=tb(e,f)),fb(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||wb(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:sb(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=sb(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I.call(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=sb(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ub(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],i=g||d.relative[" "],j=g?1:0,k=qb(function(a){return a===b},i,!0),l=qb(function(a){return I.call(b,a)>-1},i,!0),m=[function(a,c,d){return!g&&(d||c!==h)||((b=c).nodeType?k(a,c,d):l(a,c,d))}];f>j;j++)if(c=d.relative[a[j].type])m=[qb(rb(m),c)];else{if(c=d.filter[a[j].type].apply(null,a[j].matches),c[s]){for(e=++j;f>e;e++)if(d.relative[a[e].type])break;return tb(j>1&&rb(m),j>1&&pb(a.slice(0,j-1).concat({value:" "===a[j-2].type?"*":""})).replace(P,"$1"),c,e>j&&ub(a.slice(j,e)),f>e&&ub(a=a.slice(e)),f>e&&pb(a))}m.push(c)}return rb(m)}function vb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,i,j,k){var m,n,o,p=0,q="0",r=f&&[],s=[],t=h,v=f||e&&d.find.TAG("*",k),w=u+=null==t?1:Math.random()||.1,x=v.length;for(k&&(h=g!==l&&g);q!==x&&null!=(m=v[q]);q++){if(e&&m){n=0;while(o=a[n++])if(o(m,g,i)){j.push(m);break}k&&(u=w)}c&&((m=!o&&m)&&p--,f&&r.push(m))}if(p+=q,c&&q!==p){n=0;while(o=b[n++])o(r,s,g,i);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=E.call(j));s=sb(s)}G.apply(j,s),k&&!f&&s.length>0&&p+b.length>1&&db.uniqueSort(j)}return k&&(u=w,h=t),r};return c?fb(f):f}g=db.compile=function(a,b){var c,d=[],e=[],f=y[a+" "];if(!f){b||(b=ob(a)),c=b.length;while(c--)f=ub(b[c]),f[s]?d.push(f):e.push(f);f=y(a,vb(e,d))}return f};function wb(a,b,c){for(var d=0,e=b.length;e>d;d++)db(a,b[d],c);return c}function xb(a,b,e,f){var h,i,j,k,l,m=ob(a);if(!f&&1===m.length){if(i=m[0]=m[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&c.getById&&9===b.nodeType&&n&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(ab,bb),b)||[])[0],!b)return e;a=a.slice(i.shift().value.length)}h=V.needsContext.test(a)?0:i.length;while(h--){if(j=i[h],d.relative[k=j.type])break;if((l=d.find[k])&&(f=l(j.matches[0].replace(ab,bb),$.test(i[0].type)&&mb(b.parentNode)||b))){if(i.splice(h,1),a=f.length&&pb(i),!a)return G.apply(e,f),e;break}}}return g(a,m)(f,b,!n,e,$.test(a)&&mb(b.parentNode)||b),e}return c.sortStable=s.split("").sort(z).join("")===s,c.detectDuplicates=!!j,k(),c.sortDetached=gb(function(a){return 1&a.compareDocumentPosition(l.createElement("div"))}),gb(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||hb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&gb(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||hb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),gb(function(a){return null==a.getAttribute("disabled")})||hb(J,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),db}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return n.inArray(a,b)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=[],d=this,e=d.length;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;e>b;b++)if(n.contains(d[b],this))return!0}));for(b=0;e>b;b++)n.find(a,d[b],c);return c=this.pushStack(e>1?n.unique(c):c),c.selector=this.selector?this.selector+" "+a:a,c},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=a.document,A=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,B=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a.charAt(0)&&">"===a.charAt(a.length-1)&&a.length>=3?[null,a,null]:A.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:z,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}if(d=z.getElementById(c[2]),d&&d.parentNode){if(d.id!==c[2])return y.find(a);this.length=1,this[0]=d}return this.context=z,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};B.prototype=n.fn,y=n(z);var C=/^(?:parents|prev(?:Until|All))/,D={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=a[b];while(e&&9!==e.nodeType&&(void 0===c||1!==e.nodeType||!n(e).is(c)))1===e.nodeType&&d.push(e),e=e[b];return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b,c=n(a,this),d=c.length;return this.filter(function(){for(b=0;d>b;b++)if(n.contains(this,c[b]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?n.inArray(this[0],n(a)):n.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function E(a,b){do a=a[b];while(a&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return E(a,"nextSibling")},prev:function(a){return E(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return n.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(D[a]||(e=n.unique(e)),C.test(a)&&(e=e.reverse())),this.pushStack(e)}});var F=/\S+/g,G={};function H(a){var b=G[a]={};return n.each(a.match(F)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?G[a]||H(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(c=a.memory&&l,d=!0,f=g||0,g=0,e=h.length,b=!0;h&&e>f;f++)if(h[f].apply(l[0],l[1])===!1&&a.stopOnFalse){c=!1;break}b=!1,h&&(i?i.length&&j(i.shift()):c?h=[]:k.disable())},k={add:function(){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this},remove:function(){return h&&n.each(arguments,function(a,c){var d;while((d=n.inArray(c,h,d))>-1)h.splice(d,1),b&&(e>=d&&e--,f>=d&&f--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],e=0,this},disable:function(){return h=i=c=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,c||k.disable(),this},locked:function(){return!i},fireWith:function(a,c){return!h||d&&!i||(c=c||[],c=[a,c.slice?c.slice():c],b?i.push(c):j(c)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!d}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){if(a===!0?!--n.readyWait:!n.isReady){if(!z.body)return setTimeout(n.ready);n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(z,[n]),n.fn.trigger&&n(z).trigger("ready").off("ready"))}}});function J(){z.addEventListener?(z.removeEventListener("DOMContentLoaded",K,!1),a.removeEventListener("load",K,!1)):(z.detachEvent("onreadystatechange",K),a.detachEvent("onload",K))}function K(){(z.addEventListener||"load"===event.type||"complete"===z.readyState)&&(J(),n.ready())}n.ready.promise=function(b){if(!I)if(I=n.Deferred(),"complete"===z.readyState)setTimeout(n.ready);else if(z.addEventListener)z.addEventListener("DOMContentLoaded",K,!1),a.addEventListener("load",K,!1);else{z.attachEvent("onreadystatechange",K),a.attachEvent("onload",K);var c=!1;try{c=null==a.frameElement&&z.documentElement}catch(d){}c&&c.doScroll&&!function e(){if(!n.isReady){try{c.doScroll("left")}catch(a){return setTimeout(e,50)}J(),n.ready()}}()}return I.promise(b)};var L="undefined",M;for(M in n(l))break;l.ownLast="0"!==M,l.inlineBlockNeedsLayout=!1,n(function(){var a,b,c=z.getElementsByTagName("body")[0];c&&(a=z.createElement("div"),a.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",b=z.createElement("div"),c.appendChild(a).appendChild(b),typeof b.style.zoom!==L&&(b.style.cssText="border:0;margin:0;width:1px;padding:1px;display:inline;zoom:1",(l.inlineBlockNeedsLayout=3===b.offsetWidth)&&(c.style.zoom=1)),c.removeChild(a),a=b=null)}),function(){var a=z.createElement("div");if(null==l.deleteExpando){l.deleteExpando=!0;try{delete a.test}catch(b){l.deleteExpando=!1}}a=null}(),n.acceptData=function(a){var b=n.noData[(a.nodeName+" ").toLowerCase()],c=+a.nodeType||1;return 1!==c&&9!==c?!1:!b||b!==!0&&a.getAttribute("classid")===b};var N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){if(void 0===c&&1===a.nodeType){var d="data-"+b.replace(O,"-$1").toLowerCase();if(c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}n.data(a,b,c)}else c=void 0}return c}function Q(a){var b;for(b in a)if(("data"!==b||!n.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function R(a,b,d,e){if(n.acceptData(a)){var f,g,h=n.expando,i=a.nodeType,j=i?n.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||n.guid++:h),j[k]||(j[k]=i?{}:{toJSON:n.noop}),("object"==typeof b||"function"==typeof b)&&(e?j[k]=n.extend(j[k],b):j[k].data=n.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void 0!==d&&(g[n.camelCase(b)]=d),"string"==typeof b?(f=g[b],null==f&&(f=g[n.camelCase(b)])):f=g,f
}}function S(a,b,c){if(n.acceptData(a)){var d,e,f=a.nodeType,g=f?n.cache:a,h=f?a[n.expando]:n.expando;if(g[h]){if(b&&(d=c?g[h]:g[h].data)){n.isArray(b)?b=b.concat(n.map(b,n.camelCase)):b in d?b=[b]:(b=n.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;while(e--)delete d[b[e]];if(c?!Q(d):!n.isEmptyObject(d))return}(c||(delete g[h].data,Q(g[h])))&&(f?n.cleanData([a],!0):l.deleteExpando||g!=g.window?delete g[h]:g[h]=null)}}}n.extend({cache:{},noData:{"applet ":!0,"embed ":!0,"object ":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(a){return a=a.nodeType?n.cache[a[n.expando]]:a[n.expando],!!a&&!Q(a)},data:function(a,b,c){return R(a,b,c)},removeData:function(a,b){return S(a,b)},_data:function(a,b,c){return R(a,b,c,!0)},_removeData:function(a,b){return S(a,b,!0)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=n.data(f),1===f.nodeType&&!n._data(f,"parsedAttrs"))){c=g.length;while(c--)d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d]));n._data(f,"parsedAttrs",!0)}return e}return"object"==typeof a?this.each(function(){n.data(this,a)}):arguments.length>1?this.each(function(){n.data(this,a,b)}):f?P(f,a,n.data(f,a)):void 0},removeData:function(a){return this.each(function(){n.removeData(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=n._data(a,b),c&&(!d||n.isArray(c)?d=n._data(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return n._data(a,c)||n._data(a,c,{empty:n.Callbacks("once memory").add(function(){n._removeData(a,b+"queue"),n._removeData(a,c)})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=n._data(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var T=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,U=["Top","Right","Bottom","Left"],V=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)},W=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},X=/^(?:checkbox|radio)$/i;!function(){var a=z.createDocumentFragment(),b=z.createElement("div"),c=z.createElement("input");if(b.setAttribute("className","t"),b.innerHTML=" <link/><table></table><a href='/a'>a</a>",l.leadingWhitespace=3===b.firstChild.nodeType,l.tbody=!b.getElementsByTagName("tbody").length,l.htmlSerialize=!!b.getElementsByTagName("link").length,l.html5Clone="<:nav></:nav>"!==z.createElement("nav").cloneNode(!0).outerHTML,c.type="checkbox",c.checked=!0,a.appendChild(c),l.appendChecked=c.checked,b.innerHTML="<textarea>x</textarea>",l.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue,a.appendChild(b),b.innerHTML="<input type='radio' checked='checked' name='t'/>",l.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,l.noCloneEvent=!0,b.attachEvent&&(b.attachEvent("onclick",function(){l.noCloneEvent=!1}),b.cloneNode(!0).click()),null==l.deleteExpando){l.deleteExpando=!0;try{delete b.test}catch(d){l.deleteExpando=!1}}a=b=c=null}(),function(){var b,c,d=z.createElement("div");for(b in{submit:!0,change:!0,focusin:!0})c="on"+b,(l[b+"Bubbles"]=c in a)||(d.setAttribute(c,"t"),l[b+"Bubbles"]=d.attributes[c].expando===!1);d=null}();var Y=/^(?:input|select|textarea)$/i,Z=/^key/,$=/^(?:mouse|contextmenu)|click/,_=/^(?:focusinfocus|focusoutblur)$/,ab=/^([^.]*)(?:\.(.+)|)$/;function bb(){return!0}function cb(){return!1}function db(){try{return z.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n._data(a);if(r){c.handler&&(i=c,c=i.handler,e=i.selector),c.guid||(c.guid=n.guid++),(g=r.events)||(g=r.events={}),(k=r.handle)||(k=r.handle=function(a){return typeof n===L||a&&n.event.triggered===a.type?void 0:n.event.dispatch.apply(k.elem,arguments)},k.elem=a),b=(b||"").match(F)||[""],h=b.length;while(h--)f=ab.exec(b[h])||[],o=q=f[1],p=(f[2]||"").split(".").sort(),o&&(j=n.event.special[o]||{},o=(e?j.delegateType:j.bindType)||o,j=n.event.special[o]||{},l=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},i),(m=g[o])||(m=g[o]=[],m.delegateCount=0,j.setup&&j.setup.call(a,d,p,k)!==!1||(a.addEventListener?a.addEventListener(o,k,!1):a.attachEvent&&a.attachEvent("on"+o,k))),j.add&&(j.add.call(a,l),l.handler.guid||(l.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,l):m.push(l),n.event.global[o]=!0);a=null}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n.hasData(a)&&n._data(a);if(r&&(k=r.events)){b=(b||"").match(F)||[""],j=b.length;while(j--)if(h=ab.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=k[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),i=f=m.length;while(f--)g=m[f],!e&&q!==g.origType||c&&c.guid!==g.guid||h&&!h.test(g.namespace)||d&&d!==g.selector&&("**"!==d||!g.selector)||(m.splice(f,1),g.selector&&m.delegateCount--,l.remove&&l.remove.call(a,g));i&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete k[o])}else for(o in k)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(k)&&(delete r.handle,n._removeData(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,l,m,o=[d||z],p=j.call(b,"type")?b.type:b,q=j.call(b,"namespace")?b.namespace.split("."):[];if(h=l=d=d||z,3!==d.nodeType&&8!==d.nodeType&&!_.test(p+n.event.triggered)&&(p.indexOf(".")>=0&&(q=p.split("."),p=q.shift(),q.sort()),g=p.indexOf(":")<0&&"on"+p,b=b[n.expando]?b:new n.Event(p,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=q.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),k=n.event.special[p]||{},e||!k.trigger||k.trigger.apply(d,c)!==!1)){if(!e&&!k.noBubble&&!n.isWindow(d)){for(i=k.delegateType||p,_.test(i+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),l=h;l===(d.ownerDocument||z)&&o.push(l.defaultView||l.parentWindow||a)}m=0;while((h=o[m++])&&!b.isPropagationStopped())b.type=m>1?i:k.bindType||p,f=(n._data(h,"events")||{})[b.type]&&n._data(h,"handle"),f&&f.apply(h,c),f=g&&h[g],f&&f.apply&&n.acceptData(h)&&(b.result=f.apply(h,c),b.result===!1&&b.preventDefault());if(b.type=p,!e&&!b.isDefaultPrevented()&&(!k._default||k._default.apply(o.pop(),c)===!1)&&n.acceptData(d)&&g&&d[p]&&!n.isWindow(d)){l=d[g],l&&(d[g]=null),n.event.triggered=p;try{d[p]()}catch(r){}n.event.triggered=void 0,l&&(d[g]=l)}return b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(n._data(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,g=0;while((e=f.handlers[g++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(e.namespace))&&(a.handleObj=e,a.data=e.data,c=((n.event.special[e.origType]||{}).handle||e.handler).apply(f.elem,i),void 0!==c&&(a.result=c)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!=this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(e=[],f=0;h>f;f++)d=b[f],c=d.selector+" ",void 0===e[c]&&(e[c]=d.needsContext?n(c,this).index(i)>=0:n.find(c,this,null,[i]).length),e[c]&&e.push(d);e.length&&g.push({elem:i,handlers:e})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},fix:function(a){if(a[n.expando])return a;var b,c,d,e=a.type,f=a,g=this.fixHooks[e];g||(this.fixHooks[e]=g=$.test(e)?this.mouseHooks:Z.test(e)?this.keyHooks:{}),d=g.props?this.props.concat(g.props):this.props,a=new n.Event(f),b=d.length;while(b--)c=d[b],a[c]=f[c];return a.target||(a.target=f.srcElement||z),3===a.target.nodeType&&(a.target=a.target.parentNode),a.metaKey=!!a.metaKey,g.filter?g.filter(a,f):a},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,d,e,f=b.button,g=b.fromElement;return null==a.pageX&&null!=b.clientX&&(d=a.target.ownerDocument||z,e=d.documentElement,c=d.body,a.pageX=b.clientX+(e&&e.scrollLeft||c&&c.scrollLeft||0)-(e&&e.clientLeft||c&&c.clientLeft||0),a.pageY=b.clientY+(e&&e.scrollTop||c&&c.scrollTop||0)-(e&&e.clientTop||c&&c.clientTop||0)),!a.relatedTarget&&g&&(a.relatedTarget=g===a.target?b.toElement:g),a.which||void 0===f||(a.which=1&f?1:2&f?3:4&f?2:0),a}},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==db()&&this.focus)try{return this.focus(),!1}catch(a){}},delegateType:"focusin"},blur:{trigger:function(){return this===db()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return n.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&(a.originalEvent.returnValue=a.result)}}},simulate:function(a,b,c,d){var e=n.extend(new n.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?n.event.trigger(e,null,b):n.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},n.removeEvent=z.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){var d="on"+b;a.detachEvent&&(typeof a[d]===L&&(a[d]=null),a.detachEvent(d,c))},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&(a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault())?bb:cb):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={isDefaultPrevented:cb,isPropagationStopped:cb,isImmediatePropagationStopped:cb,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=bb,a&&(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=bb,a&&(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=bb,this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),l.submitBubbles||(n.event.special.submit={setup:function(){return n.nodeName(this,"form")?!1:void n.event.add(this,"click._submit keypress._submit",function(a){var b=a.target,c=n.nodeName(b,"input")||n.nodeName(b,"button")?b.form:void 0;c&&!n._data(c,"submitBubbles")&&(n.event.add(c,"submit._submit",function(a){a._submit_bubble=!0}),n._data(c,"submitBubbles",!0))})},postDispatch:function(a){a._submit_bubble&&(delete a._submit_bubble,this.parentNode&&!a.isTrigger&&n.event.simulate("submit",this.parentNode,a,!0))},teardown:function(){return n.nodeName(this,"form")?!1:void n.event.remove(this,"._submit")}}),l.changeBubbles||(n.event.special.change={setup:function(){return Y.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(n.event.add(this,"propertychange._change",function(a){"checked"===a.originalEvent.propertyName&&(this._just_changed=!0)}),n.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1),n.event.simulate("change",this,a,!0)})),!1):void n.event.add(this,"beforeactivate._change",function(a){var b=a.target;Y.test(b.nodeName)&&!n._data(b,"changeBubbles")&&(n.event.add(b,"change._change",function(a){!this.parentNode||a.isSimulated||a.isTrigger||n.event.simulate("change",this.parentNode,a,!0)}),n._data(b,"changeBubbles",!0))})},handle:function(a){var b=a.target;return this!==b||a.isSimulated||a.isTrigger||"radio"!==b.type&&"checkbox"!==b.type?a.handleObj.handler.apply(this,arguments):void 0},teardown:function(){return n.event.remove(this,"._change"),!Y.test(this.nodeName)}}),l.focusinBubbles||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a),!0)};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=n._data(d,b);e||d.addEventListener(a,c,!0),n._data(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=n._data(d,b)-1;e?n._data(d,b,e):(d.removeEventListener(a,c,!0),n._removeData(d,b))}}}),n.fn.extend({on:function(a,b,c,d,e){var f,g;if("object"==typeof a){"string"!=typeof b&&(c=c||b,b=void 0);for(f in a)this.on(f,b,c,a[f],e);return this}if(null==c&&null==d?(d=b,c=b=void 0):null==d&&("string"==typeof b?(d=c,c=void 0):(d=c,c=b,b=void 0)),d===!1)d=cb;else if(!d)return this;return 1===e&&(g=d,d=function(a){return n().off(a),g.apply(this,arguments)},d.guid=g.guid||(g.guid=n.guid++)),this.each(function(){n.event.add(this,a,d,c,b)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=cb),this.each(function(){n.event.remove(this,a,c,b)})},trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}});function eb(a){var b=fb.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}var fb="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",gb=/ jQuery\d+="(?:null|\d+)"/g,hb=new RegExp("<(?:"+fb+")[\\s/>]","i"),ib=/^\s+/,jb=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,kb=/<([\w:]+)/,lb=/<tbody/i,mb=/<|&#?\w+;/,nb=/<(?:script|style|link)/i,ob=/checked\s*(?:[^=]|=\s*.checked.)/i,pb=/^$|\/(?:java|ecma)script/i,qb=/^true\/(.*)/,rb=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,sb={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:l.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},tb=eb(z),ub=tb.appendChild(z.createElement("div"));sb.optgroup=sb.option,sb.tbody=sb.tfoot=sb.colgroup=sb.caption=sb.thead,sb.th=sb.td;function vb(a,b){var c,d,e=0,f=typeof a.getElementsByTagName!==L?a.getElementsByTagName(b||"*"):typeof a.querySelectorAll!==L?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||n.nodeName(d,b)?f.push(d):n.merge(f,vb(d,b));return void 0===b||b&&n.nodeName(a,b)?n.merge([a],f):f}function wb(a){X.test(a.type)&&(a.defaultChecked=a.checked)}function xb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function yb(a){return a.type=(null!==n.find.attr(a,"type"))+"/"+a.type,a}function zb(a){var b=qb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ab(a,b){for(var c,d=0;null!=(c=a[d]);d++)n._data(c,"globalEval",!b||n._data(b[d],"globalEval"))}function Bb(a,b){if(1===b.nodeType&&n.hasData(a)){var c,d,e,f=n._data(a),g=n._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)n.event.add(b,c,h[c][d])}g.data&&(g.data=n.extend({},g.data))}}function Cb(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!l.noCloneEvent&&b[n.expando]){e=n._data(b);for(d in e.events)n.removeEvent(b,d,e.handle);b.removeAttribute(n.expando)}"script"===c&&b.text!==a.text?(yb(b).text=a.text,zb(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),l.html5Clone&&a.innerHTML&&!n.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&X.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}n.extend({clone:function(a,b,c){var d,e,f,g,h,i=n.contains(a.ownerDocument,a);if(l.html5Clone||n.isXMLDoc(a)||!hb.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(ub.innerHTML=a.outerHTML,ub.removeChild(f=ub.firstChild)),!(l.noCloneEvent&&l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(d=vb(f),h=vb(a),g=0;null!=(e=h[g]);++g)d[g]&&Cb(e,d[g]);if(b)if(c)for(h=h||vb(a),d=d||vb(f),g=0;null!=(e=h[g]);g++)Bb(e,d[g]);else Bb(a,f);return d=vb(f,"script"),d.length>0&&Ab(d,!i&&vb(a,"script")),d=h=e=null,f},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k,m=a.length,o=eb(b),p=[],q=0;m>q;q++)if(f=a[q],f||0===f)if("object"===n.type(f))n.merge(p,f.nodeType?[f]:f);else if(mb.test(f)){h=h||o.appendChild(b.createElement("div")),i=(kb.exec(f)||["",""])[1].toLowerCase(),k=sb[i]||sb._default,h.innerHTML=k[1]+f.replace(jb,"<$1></$2>")+k[2],e=k[0];while(e--)h=h.lastChild;if(!l.leadingWhitespace&&ib.test(f)&&p.push(b.createTextNode(ib.exec(f)[0])),!l.tbody){f="table"!==i||lb.test(f)?"<table>"!==k[1]||lb.test(f)?0:h:h.firstChild,e=f&&f.childNodes.length;while(e--)n.nodeName(j=f.childNodes[e],"tbody")&&!j.childNodes.length&&f.removeChild(j)}n.merge(p,h.childNodes),h.textContent="";while(h.firstChild)h.removeChild(h.firstChild);h=o.lastChild}else p.push(b.createTextNode(f));h&&o.removeChild(h),l.appendChecked||n.grep(vb(p,"input"),wb),q=0;while(f=p[q++])if((!d||-1===n.inArray(f,d))&&(g=n.contains(f.ownerDocument,f),h=vb(o.appendChild(f),"script"),g&&Ab(h),c)){e=0;while(f=h[e++])pb.test(f.type||"")&&c.push(f)}return h=null,o},cleanData:function(a,b){for(var d,e,f,g,h=0,i=n.expando,j=n.cache,k=l.deleteExpando,m=n.event.special;null!=(d=a[h]);h++)if((b||n.acceptData(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)m[e]?n.event.remove(d,e):n.removeEvent(d,e,g.handle);j[f]&&(delete j[f],k?delete d[i]:typeof d.removeAttribute!==L?d.removeAttribute(i):d[i]=null,c.push(f))}}}),n.fn.extend({text:function(a){return W(this,function(a){return void 0===a?n.text(this):this.empty().append((this[0]&&this[0].ownerDocument||z).createTextNode(a))},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=xb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=xb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(vb(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&Ab(vb(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&n.cleanData(vb(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&n.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return W(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(gb,""):void 0;if(!("string"!=typeof a||nb.test(a)||!l.htmlSerialize&&hb.test(a)||!l.leadingWhitespace&&ib.test(a)||sb[(kb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(jb,"<$1></$2>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(vb(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(vb(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,k=this.length,m=this,o=k-1,p=a[0],q=n.isFunction(p);if(q||k>1&&"string"==typeof p&&!l.checkClone&&ob.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(k&&(i=n.buildFragment(a,this[0].ownerDocument,!1,this),c=i.firstChild,1===i.childNodes.length&&(i=c),c)){for(g=n.map(vb(i,"script"),yb),f=g.length;k>j;j++)d=i,j!==o&&(d=n.clone(d,!0,!0),f&&n.merge(g,vb(d,"script"))),b.call(this[j],d,j);if(f)for(h=g[g.length-1].ownerDocument,n.map(g,zb),j=0;f>j;j++)d=g[j],pb.test(d.type||"")&&!n._data(d,"globalEval")&&n.contains(h,d)&&(d.src?n._evalUrl&&n._evalUrl(d.src):n.globalEval((d.text||d.textContent||d.innerHTML||"").replace(rb,"")));i=c=null}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=0,e=[],g=n(a),h=g.length-1;h>=d;d++)c=d===h?this:this.clone(!0),n(g[d])[b](c),f.apply(e,c.get());return this.pushStack(e)}});var Db,Eb={};function Fb(b,c){var d=n(c.createElement(b)).appendTo(c.body),e=a.getDefaultComputedStyle?a.getDefaultComputedStyle(d[0]).display:n.css(d[0],"display");return d.detach(),e}function Gb(a){var b=z,c=Eb[a];return c||(c=Fb(a,b),"none"!==c&&c||(Db=(Db||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=(Db[0].contentWindow||Db[0].contentDocument).document,b.write(),b.close(),c=Fb(a,b),Db.detach()),Eb[a]=c),c}!function(){var a,b,c=z.createElement("div"),d="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;padding:0;margin:0;border:0";c.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",a=c.getElementsByTagName("a")[0],a.style.cssText="float:left;opacity:.5",l.opacity=/^0.5/.test(a.style.opacity),l.cssFloat=!!a.style.cssFloat,c.style.backgroundClip="content-box",c.cloneNode(!0).style.backgroundClip="",l.clearCloneStyle="content-box"===c.style.backgroundClip,a=c=null,l.shrinkWrapBlocks=function(){var a,c,e,f;if(null==b){if(a=z.getElementsByTagName("body")[0],!a)return;f="border:0;width:0;height:0;position:absolute;top:0;left:-9999px",c=z.createElement("div"),e=z.createElement("div"),a.appendChild(c).appendChild(e),b=!1,typeof e.style.zoom!==L&&(e.style.cssText=d+";width:1px;padding:1px;zoom:1",e.innerHTML="<div></div>",e.firstChild.style.width="5px",b=3!==e.offsetWidth),a.removeChild(c),a=c=e=null}return b}}();var Hb=/^margin/,Ib=new RegExp("^("+T+")(?!px)[a-z%]+$","i"),Jb,Kb,Lb=/^(top|right|bottom|left)$/;a.getComputedStyle?(Jb=function(a){return a.ownerDocument.defaultView.getComputedStyle(a,null)},Kb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Jb(a),g=c?c.getPropertyValue(b)||c[b]:void 0,c&&(""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),Ib.test(g)&&Hb.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0===g?g:g+""}):z.documentElement.currentStyle&&(Jb=function(a){return a.currentStyle},Kb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Jb(a),g=c?c[b]:void 0,null==g&&h&&h[b]&&(g=h[b]),Ib.test(g)&&!Lb.test(b)&&(d=h.left,e=a.runtimeStyle,f=e&&e.left,f&&(e.left=a.currentStyle.left),h.left="fontSize"===b?"1em":g,g=h.pixelLeft+"px",h.left=d,f&&(e.left=f)),void 0===g?g:g+""||"auto"});function Mb(a,b){return{get:function(){var c=a();if(null!=c)return c?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d,e,f,g,h=z.createElement("div"),i="border:0;width:0;height:0;position:absolute;top:0;left:-9999px",j="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;padding:0;margin:0;border:0";h.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",b=h.getElementsByTagName("a")[0],b.style.cssText="float:left;opacity:.5",l.opacity=/^0.5/.test(b.style.opacity),l.cssFloat=!!b.style.cssFloat,h.style.backgroundClip="content-box",h.cloneNode(!0).style.backgroundClip="",l.clearCloneStyle="content-box"===h.style.backgroundClip,b=h=null,n.extend(l,{reliableHiddenOffsets:function(){if(null!=c)return c;var a,b,d,e=z.createElement("div"),f=z.getElementsByTagName("body")[0];if(f)return e.setAttribute("className","t"),e.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",a=z.createElement("div"),a.style.cssText=i,f.appendChild(a).appendChild(e),e.innerHTML="<table><tr><td></td><td>t</td></tr></table>",b=e.getElementsByTagName("td"),b[0].style.cssText="padding:0;margin:0;border:0;display:none",d=0===b[0].offsetHeight,b[0].style.display="",b[1].style.display="none",c=d&&0===b[0].offsetHeight,f.removeChild(a),e=f=null,c},boxSizing:function(){return null==d&&k(),d},boxSizingReliable:function(){return null==e&&k(),e},pixelPosition:function(){return null==f&&k(),f},reliableMarginRight:function(){var b,c,d,e;if(null==g&&a.getComputedStyle){if(b=z.getElementsByTagName("body")[0],!b)return;c=z.createElement("div"),d=z.createElement("div"),c.style.cssText=i,b.appendChild(c).appendChild(d),e=d.appendChild(z.createElement("div")),e.style.cssText=d.style.cssText=j,e.style.marginRight=e.style.width="0",d.style.width="1px",g=!parseFloat((a.getComputedStyle(e,null)||{}).marginRight),b.removeChild(c)}return g}});function k(){var b,c,h=z.getElementsByTagName("body")[0];h&&(b=z.createElement("div"),c=z.createElement("div"),b.style.cssText=i,h.appendChild(b).appendChild(c),c.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:absolute;display:block;padding:1px;border:1px;width:4px;margin-top:1%;top:1%",n.swap(h,null!=h.style.zoom?{zoom:1}:{},function(){d=4===c.offsetWidth}),e=!0,f=!1,g=!0,a.getComputedStyle&&(f="1%"!==(a.getComputedStyle(c,null)||{}).top,e="4px"===(a.getComputedStyle(c,null)||{width:"4px"}).width),h.removeChild(b),c=h=null)}}(),n.swap=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};var Nb=/alpha\([^)]*\)/i,Ob=/opacity\s*=\s*([^)]*)/,Pb=/^(none|table(?!-c[ea]).+)/,Qb=new RegExp("^("+T+")(.*)$","i"),Rb=new RegExp("^([+-])=("+T+")","i"),Sb={position:"absolute",visibility:"hidden",display:"block"},Tb={letterSpacing:0,fontWeight:400},Ub=["Webkit","O","Moz","ms"];function Vb(a,b){if(b in a)return b;var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=Ub.length;while(e--)if(b=Ub[e]+c,b in a)return b;return d}function Wb(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=n._data(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&V(d)&&(f[g]=n._data(d,"olddisplay",Gb(d.nodeName)))):f[g]||(e=V(d),(c&&"none"!==c||!e)&&n._data(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}function Xb(a,b,c){var d=Qb.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function Yb(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+U[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+U[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+U[f]+"Width",!0,e))):(g+=n.css(a,"padding"+U[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+U[f]+"Width",!0,e)));return g}function Zb(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=Jb(a),g=l.boxSizing()&&"border-box"===n.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=Kb(a,b,f),(0>e||null==e)&&(e=a.style[b]),Ib.test(e))return e;d=g&&(l.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Yb(a,b,c||(g?"border":"content"),d,f)+"px"}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Kb(a,"opacity");return""===c?"1":c}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":l.cssFloat?"cssFloat":"styleFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;if(b=n.cssProps[h]||(n.cssProps[h]=Vb(i,h)),g=n.cssHooks[b]||n.cssHooks[h],void 0===c)return g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b];if(f=typeof c,"string"===f&&(e=Rb.exec(c))&&(c=(e[1]+1)*e[2]+parseFloat(n.css(a,b)),f="number"),null!=c&&c===c&&("number"!==f||n.cssNumber[h]||(c+="px"),l.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),!(g&&"set"in g&&void 0===(c=g.set(a,c,d)))))try{i[b]="",i[b]=c}catch(j){}}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Vb(a.style,h)),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(f=g.get(a,!0,c)),void 0===f&&(f=Kb(a,b,d)),"normal"===f&&b in Tb&&(f=Tb[b]),""===c||c?(e=parseFloat(f),c===!0||n.isNumeric(e)?e||0:f):f}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?0===a.offsetWidth&&Pb.test(n.css(a,"display"))?n.swap(a,Sb,function(){return Zb(a,b,d)}):Zb(a,b,d):void 0},set:function(a,c,d){var e=d&&Jb(a);return Xb(a,c,d?Yb(a,b,d,l.boxSizing()&&"border-box"===n.css(a,"boxSizing",!1,e),e):0)}}}),l.opacity||(n.cssHooks.opacity={get:function(a,b){return Ob.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=n.isNumeric(b)?"alpha(opacity="+100*b+")":"",f=d&&d.filter||c.filter||"";c.zoom=1,(b>=1||""===b)&&""===n.trim(f.replace(Nb,""))&&c.removeAttribute&&(c.removeAttribute("filter"),""===b||d&&!d.filter)||(c.filter=Nb.test(f)?f.replace(Nb,e):f+" "+e)}}),n.cssHooks.marginRight=Mb(l.reliableMarginRight,function(a,b){return b?n.swap(a,{display:"inline-block"},Kb,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+U[d]+b]=f[d]||f[d-2]||f[0];return e}},Hb.test(a)||(n.cssHooks[a+b].set=Xb)}),n.fn.extend({css:function(a,b){return W(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=Jb(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)
},a,b,arguments.length>1)},show:function(){return Wb(this,!0)},hide:function(){return Wb(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){V(this)?n(this).show():n(this).hide()})}});function $b(a,b,c,d,e){return new $b.prototype.init(a,b,c,d,e)}n.Tween=$b,$b.prototype={constructor:$b,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=$b.propHooks[this.prop];return a&&a.get?a.get(this):$b.propHooks._default.get(this)},run:function(a){var b,c=$b.propHooks[this.prop];return this.pos=b=this.options.duration?n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):$b.propHooks._default.set(this),this}},$b.prototype.init.prototype=$b.prototype,$b.propHooks={_default:{get:function(a){var b;return null==a.elem[a.prop]||a.elem.style&&null!=a.elem.style[a.prop]?(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0):a.elem[a.prop]},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):a.elem.style&&(null!=a.elem.style[n.cssProps[a.prop]]||n.cssHooks[a.prop])?n.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},$b.propHooks.scrollTop=$b.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},n.fx=$b.prototype.init,n.fx.step={};var _b,ac,bc=/^(?:toggle|show|hide)$/,cc=new RegExp("^(?:([+-])=|)("+T+")([a-z%]*)$","i"),dc=/queueHooks$/,ec=[jc],fc={"*":[function(a,b){var c=this.createTween(a,b),d=c.cur(),e=cc.exec(b),f=e&&e[3]||(n.cssNumber[a]?"":"px"),g=(n.cssNumber[a]||"px"!==f&&+d)&&cc.exec(n.css(c.elem,a)),h=1,i=20;if(g&&g[3]!==f){f=f||g[3],e=e||[],g=+d||1;do h=h||".5",g/=h,n.style(c.elem,a,g+f);while(h!==(h=c.cur()/d)&&1!==h&&--i)}return e&&(g=c.start=+g||+d||0,c.unit=f,c.end=e[1]?g+(e[1]+1)*e[2]:+e[2]),c}]};function gc(){return setTimeout(function(){_b=void 0}),_b=n.now()}function hc(a,b){var c,d={height:a},e=0;for(b=b?1:0;4>e;e+=2-b)c=U[e],d["margin"+c]=d["padding"+c]=a;return b&&(d.opacity=d.width=a),d}function ic(a,b,c){for(var d,e=(fc[b]||[]).concat(fc["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function jc(a,b,c){var d,e,f,g,h,i,j,k,m=this,o={},p=a.style,q=a.nodeType&&V(a),r=n._data(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,m.always(function(){m.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[p.overflow,p.overflowX,p.overflowY],j=n.css(a,"display"),k=Gb(a.nodeName),"none"===j&&(j=k),"inline"===j&&"none"===n.css(a,"float")&&(l.inlineBlockNeedsLayout&&"inline"!==k?p.zoom=1:p.display="inline-block")),c.overflow&&(p.overflow="hidden",l.shrinkWrapBlocks()||m.always(function(){p.overflow=c.overflow[0],p.overflowX=c.overflow[1],p.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],bc.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(q?"hide":"show")){if("show"!==e||!r||void 0===r[d])continue;q=!0}o[d]=r&&r[d]||n.style(a,d)}if(!n.isEmptyObject(o)){r?"hidden"in r&&(q=r.hidden):r=n._data(a,"fxshow",{}),f&&(r.hidden=!q),q?n(a).show():m.done(function(){n(a).hide()}),m.done(function(){var b;n._removeData(a,"fxshow");for(b in o)n.style(a,b,o[b])});for(d in o)g=ic(q?r[d]:0,d,m),d in r||(r[d]=g.start,q&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function kc(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function lc(a,b,c){var d,e,f=0,g=ec.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=_b||gc(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:_b||gc(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;for(kc(k,j.opts.specialEasing);g>f;f++)if(d=ec[f].call(j,a,k,j.opts))return d;return n.map(k,ic,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(lc,{tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");for(var c,d=0,e=a.length;e>d;d++)c=a[d],fc[c]=fc[c]||[],fc[c].unshift(b)},prefilter:function(a,b){b?ec.unshift(a):ec.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(V).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=lc(this,n.extend({},a),f);(e||n._data(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=n._data(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&dc.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=n._data(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(hc(b,!0),a,d,e)}}),n.each({slideDown:hc("show"),slideUp:hc("hide"),slideToggle:hc("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=n.timers,c=0;for(_b=n.now();c<b.length;c++)a=b[c],a()||b[c]!==a||b.splice(c--,1);b.length||n.fx.stop(),_b=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){ac||(ac=setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){clearInterval(ac),ac=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(a,b){return a=n.fx?n.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},function(){var a,b,c,d,e=z.createElement("div");e.setAttribute("className","t"),e.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",a=e.getElementsByTagName("a")[0],c=z.createElement("select"),d=c.appendChild(z.createElement("option")),b=e.getElementsByTagName("input")[0],a.style.cssText="top:1px",l.getSetAttribute="t"!==e.className,l.style=/top/.test(a.getAttribute("style")),l.hrefNormalized="/a"===a.getAttribute("href"),l.checkOn=!!b.value,l.optSelected=d.selected,l.enctype=!!z.createElement("form").enctype,c.disabled=!0,l.optDisabled=!d.disabled,b=z.createElement("input"),b.setAttribute("value",""),l.input=""===b.getAttribute("value"),b.value="t",b.setAttribute("type","radio"),l.radioValue="t"===b.value,a=b=c=d=e=null}();var mc=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(mc,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){var b=n.find.attr(a,"value");return null!=b?b:n.text(a)}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],!(!c.selected&&i!==e||(l.optDisabled?c.disabled:null!==c.getAttribute("disabled"))||c.parentNode.disabled&&n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)if(d=e[g],n.inArray(n.valHooks.option.get(d),f)>=0)try{d.selected=c=!0}catch(h){d.scrollHeight}else d.selected=!1;return c||(a.selectedIndex=-1),e}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>=0:void 0}},l.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var nc,oc,pc=n.expr.attrHandle,qc=/^(?:checked|selected)$/i,rc=l.getSetAttribute,sc=l.input;n.fn.extend({attr:function(a,b){return W(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(a&&3!==f&&8!==f&&2!==f)return typeof a.getAttribute===L?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),d=n.attrHooks[b]||(n.expr.match.bool.test(b)?oc:nc)),void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=n.find.attr(a,b),null==e?void 0:e):null!==c?d&&"set"in d&&void 0!==(e=d.set(a,c,b))?e:(a.setAttribute(b,c+""),c):void n.removeAttr(a,b))},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(F);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)?sc&&rc||!qc.test(c)?a[d]=!1:a[n.camelCase("default-"+c)]=a[d]=!1:n.attr(a,c,""),a.removeAttribute(rc?c:d)},attrHooks:{type:{set:function(a,b){if(!l.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}}}),oc={set:function(a,b,c){return b===!1?n.removeAttr(a,c):sc&&rc||!qc.test(c)?a.setAttribute(!rc&&n.propFix[c]||c,c):a[n.camelCase("default-"+c)]=a[c]=!0,c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=pc[b]||n.find.attr;pc[b]=sc&&rc||!qc.test(b)?function(a,b,d){var e,f;return d||(f=pc[b],pc[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,pc[b]=f),e}:function(a,b,c){return c?void 0:a[n.camelCase("default-"+b)]?b.toLowerCase():null}}),sc&&rc||(n.attrHooks.value={set:function(a,b,c){return n.nodeName(a,"input")?void(a.defaultValue=b):nc&&nc.set(a,b,c)}}),rc||(nc={set:function(a,b,c){var d=a.getAttributeNode(c);return d||a.setAttributeNode(d=a.ownerDocument.createAttribute(c)),d.value=b+="","value"===c||b===a.getAttribute(c)?b:void 0}},pc.id=pc.name=pc.coords=function(a,b,c){var d;return c?void 0:(d=a.getAttributeNode(b))&&""!==d.value?d.value:null},n.valHooks.button={get:function(a,b){var c=a.getAttributeNode(b);return c&&c.specified?c.value:void 0},set:nc.set},n.attrHooks.contenteditable={set:function(a,b,c){nc.set(a,""===b?!1:b,c)}},n.each(["width","height"],function(a,b){n.attrHooks[b]={set:function(a,c){return""===c?(a.setAttribute(b,"auto"),c):void 0}}})),l.style||(n.attrHooks.style={get:function(a){return a.style.cssText||void 0},set:function(a,b){return a.style.cssText=b+""}});var tc=/^(?:input|select|textarea|button|object)$/i,uc=/^(?:a|area)$/i;n.fn.extend({prop:function(a,b){return W(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return a=n.propFix[a]||a,this.each(function(){try{this[a]=void 0,delete this[a]}catch(b){}})}}),n.extend({propFix:{"for":"htmlFor","class":"className"},prop:function(a,b,c){var d,e,f,g=a.nodeType;if(a&&3!==g&&8!==g&&2!==g)return f=1!==g||!n.isXMLDoc(a),f&&(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=n.find.attr(a,"tabindex");return b?parseInt(b,10):tc.test(a.nodeName)||uc.test(a.nodeName)&&a.href?0:-1}}}}),l.hrefNormalized||n.each(["href","src"],function(a,b){n.propHooks[b]={get:function(a){return a.getAttribute(b,4)}}}),l.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex),null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this}),l.enctype||(n.propFix.enctype="encoding");var vc=/[\t\r\n\f]/g;n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h=0,i=this.length,j="string"==typeof a&&a;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,this.className))});if(j)for(b=(a||"").match(F)||[];i>h;h++)if(c=this[h],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(vc," "):" ")){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=n.trim(d),c.className!==g&&(c.className=g)}return this},removeClass:function(a){var b,c,d,e,f,g,h=0,i=this.length,j=0===arguments.length||"string"==typeof a&&a;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,this.className))});if(j)for(b=(a||"").match(F)||[];i>h;h++)if(c=this[h],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(vc," "):"")){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g=a?n.trim(d):"",c.className!==g&&(c.className=g)}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):this.each(n.isFunction(a)?function(c){n(this).toggleClass(a.call(this,c,this.className,b),b)}:function(){if("string"===c){var b,d=0,e=n(this),f=a.match(F)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===L||"boolean"===c)&&(this.className&&n._data(this,"__className__",this.className),this.className=this.className||a===!1?"":n._data(this,"__className__")||"")})},hasClass:function(a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(vc," ").indexOf(b)>=0)return!0;return!1}}),n.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(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}});var wc=n.now(),xc=/\?/,yc=/(,)|(\[|{)|(}|])|"(?:[^"\\\r\n]|\\["\\\/bfnrt]|\\u[\da-fA-F]{4})*"\s*:?|true|false|null|-?(?!0\d)\d+(?:\.\d+|)(?:[eE][+-]?\d+|)/g;n.parseJSON=function(b){if(a.JSON&&a.JSON.parse)return a.JSON.parse(b+"");var c,d=null,e=n.trim(b+"");return e&&!n.trim(e.replace(yc,function(a,b,e,f){return c&&b&&(d=0),0===d?a:(c=e||b,d+=!f-!e,"")}))?Function("return "+e)():n.error("Invalid JSON: "+b)},n.parseXML=function(b){var c,d;if(!b||"string"!=typeof b)return null;try{a.DOMParser?(d=new DOMParser,c=d.parseFromString(b,"text/xml")):(c=new ActiveXObject("Microsoft.XMLDOM"),c.async="false",c.loadXML(b))}catch(e){c=void 0}return c&&c.documentElement&&!c.getElementsByTagName("parsererror").length||n.error("Invalid XML: "+b),c};var zc,Ac,Bc=/#.*$/,Cc=/([?&])_=[^&]*/,Dc=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Ec=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Fc=/^(?:GET|HEAD)$/,Gc=/^\/\//,Hc=/^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,Ic={},Jc={},Kc="*/".concat("*");try{Ac=location.href}catch(Lc){Ac=z.createElement("a"),Ac.href="",Ac=Ac.href}zc=Hc.exec(Ac.toLowerCase())||[];function Mc(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(F)||[];if(n.isFunction(c))while(d=f[e++])"+"===d.charAt(0)?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Nc(a,b,c,d){var e={},f=a===Jc;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Oc(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(d in b)void 0!==b[d]&&((e[d]?a:c||(c={}))[d]=b[d]);return c&&n.extend(!0,a,c),a}function Pc(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===e&&(e=a.mimeType||b.getResponseHeader("Content-Type"));if(e)for(g in h)if(h[g]&&h[g].test(e)){i.unshift(g);break}if(i[0]in c)f=i[0];else{for(g in c){if(!i[0]||a.converters[g+" "+i[0]]){f=g;break}d||(d=g)}f=f||d}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function Qc(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Ac,type:"GET",isLocal:Ec.test(zc[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Kc,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Oc(Oc(a,n.ajaxSettings),b):Oc(n.ajaxSettings,a)},ajaxPrefilter:Mc(Ic),ajaxTransport:Mc(Jc),ajax:function(a,b){"object"==typeof a&&(b=a,a=void 0),b=b||{};var c,d,e,f,g,h,i,j,k=n.ajaxSetup({},b),l=k.context||k,m=k.context&&(l.nodeType||l.jquery)?n(l):n.event,o=n.Deferred(),p=n.Callbacks("once memory"),q=k.statusCode||{},r={},s={},t=0,u="canceled",v={readyState:0,getResponseHeader:function(a){var b;if(2===t){if(!j){j={};while(b=Dc.exec(f))j[b[1].toLowerCase()]=b[2]}b=j[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===t?f:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this},overrideMimeType:function(a){return t||(k.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this},abort:function(a){var b=a||u;return i&&i.abort(b),x(0,b),this}};if(o.promise(v).complete=p.add,v.success=v.done,v.error=v.fail,k.url=((a||k.url||Ac)+"").replace(Bc,"").replace(Gc,zc[1]+"//"),k.type=b.method||b.type||k.method||k.type,k.dataTypes=n.trim(k.dataType||"*").toLowerCase().match(F)||[""],null==k.crossDomain&&(c=Hc.exec(k.url.toLowerCase()),k.crossDomain=!(!c||c[1]===zc[1]&&c[2]===zc[2]&&(c[3]||("http:"===c[1]?"80":"443"))===(zc[3]||("http:"===zc[1]?"80":"443")))),k.data&&k.processData&&"string"!=typeof k.data&&(k.data=n.param(k.data,k.traditional)),Nc(Ic,k,b,v),2===t)return v;h=k.global,h&&0===n.active++&&n.event.trigger("ajaxStart"),k.type=k.type.toUpperCase(),k.hasContent=!Fc.test(k.type),e=k.url,k.hasContent||(k.data&&(e=k.url+=(xc.test(e)?"&":"?")+k.data,delete k.data),k.cache===!1&&(k.url=Cc.test(e)?e.replace(Cc,"$1_="+wc++):e+(xc.test(e)?"&":"?")+"_="+wc++)),k.ifModified&&(n.lastModified[e]&&v.setRequestHeader("If-Modified-Since",n.lastModified[e]),n.etag[e]&&v.setRequestHeader("If-None-Match",n.etag[e])),(k.data&&k.hasContent&&k.contentType!==!1||b.contentType)&&v.setRequestHeader("Content-Type",k.contentType),v.setRequestHeader("Accept",k.dataTypes[0]&&k.accepts[k.dataTypes[0]]?k.accepts[k.dataTypes[0]]+("*"!==k.dataTypes[0]?", "+Kc+"; q=0.01":""):k.accepts["*"]);for(d in k.headers)v.setRequestHeader(d,k.headers[d]);if(k.beforeSend&&(k.beforeSend.call(l,v,k)===!1||2===t))return v.abort();u="abort";for(d in{success:1,error:1,complete:1})v[d](k[d]);if(i=Nc(Jc,k,b,v)){v.readyState=1,h&&m.trigger("ajaxSend",[v,k]),k.async&&k.timeout>0&&(g=setTimeout(function(){v.abort("timeout")},k.timeout));try{t=1,i.send(r,x)}catch(w){if(!(2>t))throw w;x(-1,w)}}else x(-1,"No Transport");function x(a,b,c,d){var j,r,s,u,w,x=b;2!==t&&(t=2,g&&clearTimeout(g),i=void 0,f=d||"",v.readyState=a>0?4:0,j=a>=200&&300>a||304===a,c&&(u=Pc(k,v,c)),u=Qc(k,u,v,j),j?(k.ifModified&&(w=v.getResponseHeader("Last-Modified"),w&&(n.lastModified[e]=w),w=v.getResponseHeader("etag"),w&&(n.etag[e]=w)),204===a||"HEAD"===k.type?x="nocontent":304===a?x="notmodified":(x=u.state,r=u.data,s=u.error,j=!s)):(s=x,(a||!x)&&(x="error",0>a&&(a=0))),v.status=a,v.statusText=(b||x)+"",j?o.resolveWith(l,[r,x,v]):o.rejectWith(l,[v,x,s]),v.statusCode(q),q=void 0,h&&m.trigger(j?"ajaxSuccess":"ajaxError",[v,k,j?r:s]),p.fireWith(l,[v,x]),h&&(m.trigger("ajaxComplete",[v,k]),--n.active||n.event.trigger("ajaxStop")))}return v},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax({url:a,type:b,dataType:e,data:c,success:d})}}),n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){if(n.isFunction(a))return this.each(function(b){n(this).wrapAll(a.call(this,b))});if(this[0]){var b=n(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&1===a.firstChild.nodeType)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){return this.each(n.isFunction(a)?function(b){n(this).wrapInner(a.call(this,b))}:function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return a.offsetWidth<=0&&a.offsetHeight<=0||!l.reliableHiddenOffsets()&&"none"===(a.style&&a.style.display||n.css(a,"display"))},n.expr.filters.visible=function(a){return!n.expr.filters.hidden(a)};var Rc=/%20/g,Sc=/\[\]$/,Tc=/\r?\n/g,Uc=/^(?:submit|button|image|reset|file)$/i,Vc=/^(?:input|select|textarea|keygen)/i;function Wc(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||Sc.test(a)?d(a,e):Wc(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Wc(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Wc(c,a[c],b,e);return d.join("&").replace(Rc,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Vc.test(this.nodeName)&&!Uc.test(a)&&(this.checked||!X.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(Tc,"\r\n")}}):{name:b.name,value:c.replace(Tc,"\r\n")}}).get()}}),n.ajaxSettings.xhr=void 0!==a.ActiveXObject?function(){return!this.isLocal&&/^(get|post|head|put|delete|options)$/i.test(this.type)&&$c()||_c()}:$c;var Xc=0,Yc={},Zc=n.ajaxSettings.xhr();a.ActiveXObject&&n(a).on("unload",function(){for(var a in Yc)Yc[a](void 0,!0)}),l.cors=!!Zc&&"withCredentials"in Zc,Zc=l.ajax=!!Zc,Zc&&n.ajaxTransport(function(a){if(!a.crossDomain||l.cors){var b;return{send:function(c,d){var e,f=a.xhr(),g=++Xc;if(f.open(a.type,a.url,a.async,a.username,a.password),a.xhrFields)for(e in a.xhrFields)f[e]=a.xhrFields[e];a.mimeType&&f.overrideMimeType&&f.overrideMimeType(a.mimeType),a.crossDomain||c["X-Requested-With"]||(c["X-Requested-With"]="XMLHttpRequest");for(e in c)void 0!==c[e]&&f.setRequestHeader(e,c[e]+"");f.send(a.hasContent&&a.data||null),b=function(c,e){var h,i,j;if(b&&(e||4===f.readyState))if(delete Yc[g],b=void 0,f.onreadystatechange=n.noop,e)4!==f.readyState&&f.abort();else{j={},h=f.status,"string"==typeof f.responseText&&(j.text=f.responseText);try{i=f.statusText}catch(k){i=""}h||!a.isLocal||a.crossDomain?1223===h&&(h=204):h=j.text?200:404}j&&d(h,i,j,f.getAllResponseHeaders())},a.async?4===f.readyState?setTimeout(b):f.onreadystatechange=Yc[g]=b:b()},abort:function(){b&&b(void 0,!0)}}}});function $c(){try{return new a.XMLHttpRequest}catch(b){}}function _c(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c=z.head||n("head")[0]||z.documentElement;return{send:function(d,e){b=z.createElement("script"),b.async=!0,a.scriptCharset&&(b.charset=a.scriptCharset),b.src=a.url,b.onload=b.onreadystatechange=function(a,c){(c||!b.readyState||/loaded|complete/.test(b.readyState))&&(b.onload=b.onreadystatechange=null,b.parentNode&&b.parentNode.removeChild(b),b=null,c||e(200,"success"))},c.insertBefore(b,c.firstChild)},abort:function(){b&&b.onload(void 0,!0)}}}});var ad=[],bd=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=ad.pop()||n.expando+"_"+wc++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(bd.test(b.url)?"url":"string"==typeof b.data&&!(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&bd.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(bd,"$1"+e):b.jsonp!==!1&&(b.url+=(xc.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,ad.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||z;var d=v.exec(a),e=!c&&[];return d?[b.createElement(d[1])]:(d=n.buildFragment([a],b,e),e&&e.length&&n(e).remove(),n.merge([],d.childNodes))};var cd=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&cd)return cd.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>=0&&(d=a.slice(h,a.length),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(f="POST"),g.length>0&&n.ajax({url:a,type:f,dataType:"html",data:b}).done(function(a){e=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var dd=a.document.documentElement;function ed(a){return n.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&n.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,n.contains(b,e)?(typeof e.getBoundingClientRect!==L&&(d=e.getBoundingClientRect()),c=ed(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===n.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(c=a.offset()),c.top+=n.css(a[0],"borderTopWidth",!0),c.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-n.css(d,"marginTop",!0),left:b.left-c.left-n.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||dd;while(a&&!n.nodeName(a,"html")&&"static"===n.css(a,"position"))a=a.offsetParent;return a||dd})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);n.fn[a]=function(d){return W(this,function(a,d,e){var f=ed(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?n(f).scrollLeft():e,c?e:n(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=Mb(l.pixelPosition,function(a,c){return c?(c=Kb(a,b),Ib.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return W(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var fd=a.jQuery,gd=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=gd),b&&a.jQuery===n&&(a.jQuery=fd),n},typeof b===L&&(a.jQuery=a.$=n),n});
\ No newline at end of file
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
/* ========================================================================
* Ratchet: modals.js v2.0.2
* http://dcloudio.github.io/mui/components#modals
* ========================================================================
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
var findModals = function (target) {
var i;
var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) {
if (modals[i] === target) {
return target;
}
}
}
};
var getModal = function (event) {
var modalToggle = findModals(event.target);
if (modalToggle && modalToggle.hash) {
return document.querySelector(modalToggle.hash);
}
};
window.addEventListener('touchend', function (event) {
var modal = getModal(event);
if (modal) {
if (modal && modal.classList.contains('modal')) {
modal.classList.toggle('active');
}
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
}());
/* ========================================================================
* Ratchet: popovers.js v2.0.2
* http://dcloudio.github.io/mui/components#popovers
* ========================================================================
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
var popover;
var findPopovers = function (target) {
var i;
var popovers = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) {
if (popovers[i] === target) {
return target;
}
}
}
};
var onPopoverHidden = function () {
popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
};
var backdrop = (function () {
var element = document.createElement('div');
element.classList.add('backdrop');
element.addEventListener('touchend', function () {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove('visible');
popover.parentNode.removeChild(backdrop);
});
return element;
}());
var getPopover = function (e) {
var anchor = findPopovers(e.target);
if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
return;
}
try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover === null) {
return;
}
if (!popover || !popover.classList.contains('popover')) {
return;
}
return popover;
};
var showHidePopover = function (e) {
var popover = getPopover(e);
if (!popover) {
return;
}
popover.style.display = 'block';
popover.offsetHeight;
popover.classList.add('visible');
popover.parentNode.appendChild(backdrop);
};
window.addEventListener('touchend', showHidePopover);
}());
/* ========================================================================
* Ratchet: push.js v2.0.2
* http://dcloudio.github.io/mui/components#push
* ========================================================================
* inspired by @defunkt's jquery.pjax.js
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
/* global _gaq: true */
!(function () {
'use strict';
var noop = function () {};
// Pushstate caching
// ==================
var isScrolling;
var maxCacheLength = 20;
var cacheMapping = sessionStorage;
var domCache = {};
var transitionMap = {
slideIn : 'slide-out',
slideOut : 'slide-in',
fade : 'fade'
};
var bars = {
bartab : '.bar-tab',
barnav : '.bar-nav',
barfooter : '.bar-footer',
barheadersecondary : '.bar-header-secondary'
};
var cacheReplace = function (data, updates) {
PUSH.id = data.id;
if (updates) {
data = getCached(data.id);
}
cacheMapping[data.id] = JSON.stringify(data);
window.history.replaceState(data.id, data.title, data.url);
domCache[data.id] = document.body.cloneNode(true);
};
var cachePush = function () {
var id = PUSH.id;
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
cacheBackStack.push(id);
while (cacheForwardStack.length) {
delete cacheMapping[cacheForwardStack.shift()];
}
while (cacheBackStack.length > maxCacheLength) {
delete cacheMapping[cacheBackStack.shift()];
}
window.history.pushState(null, '', cacheMapping[PUSH.id].url);
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
};
var cachePop = function (id, direction) {
var forward = direction === 'forward';
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
var pushStack = forward ? cacheBackStack : cacheForwardStack;
var popStack = forward ? cacheForwardStack : cacheBackStack;
if (PUSH.id) {
pushStack.push(PUSH.id);
}
popStack.pop();
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
};
var getCached = function (id) {
return JSON.parse(cacheMapping[id] || null) || {};
};
var getTarget = function (e) {
var target = findTarget(e.target);
if (!target ||
e.which > 1 ||
e.metaKey ||
e.ctrlKey ||
isScrolling ||
location.protocol !== target.protocol ||
location.host !== target.host ||
!target.hash && /#/.test(target.href) ||
target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') ||
target.getAttribute('data-ignore') === 'push') { return; }
return target;
};
// Main event handlers (touchend, popstate)
// ==========================================
var touchend = function (e) {
var target = getTarget(e);
if (!target) {
return;
}
e.preventDefault();
PUSH({
url : target.href,
hash : target.hash,
timeout : target.getAttribute('data-timeout'),
transition : target.getAttribute('data-transition')
});
};
var popstate = function (e) {
var key;
var barElement;
var activeObj;
var activeDom;
var direction;
var transition;
var transitionFrom;
var transitionFromObj;
var id = e.state;
if (!id || !cacheMapping[id]) {
return;
}
direction = PUSH.id < id ? 'forward' : 'back';
cachePop(id, direction);
activeObj = getCached(id);
activeDom = domCache[id];
if (activeObj.title) {
document.title = activeObj.title;
}
if (direction === 'back') {
transitionFrom = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
} else {
transitionFromObj = activeObj;
}
if (direction === 'back' && !transitionFromObj.id) {
return (PUSH.id = id);
}
transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
if (!activeDom) {
return PUSH({
id : activeObj.id,
url : activeObj.url,
title : activeObj.title,
timeout : activeObj.timeout,
transition : transition,
ignorePush : true
});
}
if (transitionFromObj.transition) {
activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
for (key in bars) {
if (bars.hasOwnProperty(key)) {
barElement = document.querySelector(bars[key]);
if (activeObj[key]) {
swapContent(activeObj[key], barElement);
} else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
}
}
}
swapContent(
(activeObj.contents || activeDom).cloneNode(true),
document.querySelector('.content'),
transition
);
PUSH.id = id;
document.body.offsetHeight; // force reflow to prevent scroll
};
// Core PUSH functionality
// =======================
var PUSH = function (options) {
var key;
var xhr = PUSH.xhr;
options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
for (key in bars) {
if (bars.hasOwnProperty(key)) {
options[key] = options[key] || document.querySelector(bars[key]);
}
}
if (xhr && xhr.readyState < 4) {
xhr.onreadystatechange = noop;
xhr.abort();
}
xhr = new XMLHttpRequest();
xhr.open('GET', options.url, true);
xhr.setRequestHeader('X-PUSH', 'true');
xhr.onreadystatechange = function () {
if (options._timeout) {
clearTimeout(options._timeout);
}
if (xhr.readyState === 4) {
xhr.status === 200 ? success(xhr, options) : failure(options.url);
}
};
if (!PUSH.id) {
cacheReplace({
id : +new Date(),
url : window.location.href,
title : document.title,
timeout : options.timeout,
transition : null
});
}
if (options.timeout) {
options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout);
}
xhr.send();
if (xhr.readyState && !options.ignorePush) {
cachePush();
}
};
// Main XHR handlers
// =================
var success = function (xhr, options) {
var key;
var barElement;
var data = parseXHR(xhr, options);
if (!data.contents) {
return locationReplace(options.url);
}
if (data.title) {
document.title = data.title;
}
if (options.transition) {
for (key in bars) {
if (bars.hasOwnProperty(key)) {
barElement = document.querySelector(bars[key]);
if (data[key]) {
swapContent(data[key], barElement);
} else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
}
}
}
swapContent(data.contents, options.container, options.transition, function () {
cacheReplace({
id : options.id || +new Date(),
url : data.url,
title : data.title,
timeout : options.timeout,
transition : options.transition
}, options.id);
triggerStateChange();
});
if (!options.ignorePush && window._gaq) {
_gaq.push(['_trackPageview']); // google analytics
}
if (!options.hash) {
return;
}
};
var failure = function (url) {
throw new Error('Could not get: ' + url);
};
// PUSH helpers
// ============
var swapContent = function (swap, container, transition, complete) {
var enter;
var containerDirection;
var swapDirection;
if (!transition) {
if (container) {
container.innerHTML = swap.innerHTML;
} else if (swap.classList.contains('content')) {
document.body.appendChild(swap);
} else {
document.body.insertBefore(swap, document.querySelector('.content'));
}
} else {
enter = /in$/.test(transition);
if (transition === 'fade') {
container.classList.add('in');
container.classList.add('fade');
swap.classList.add('fade');
}
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('sliding');
container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
}
if (!transition) {
complete && complete();
}
if (transition === 'fade') {
container.offsetWidth; // force reflow
container.classList.remove('in');
var fadeContainerEnd = function () {
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
};
var fadeSwapEnd = function () {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
complete && complete();
};
container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
}
if (/slide/.test(transition)) {
var slideEnd = function () {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
};
container.offsetWidth; // force reflow
swapDirection = enter ? 'right' : 'left';
containerDirection = enter ? 'left' : 'right';
container.classList.add(containerDirection);
swap.classList.remove(swapDirection);
swap.addEventListener('webkitTransitionEnd', slideEnd);
}
};
var triggerStateChange = function () {
var e = new CustomEvent('push', {
detail: { state: getCached(PUSH.id) },
bubbles: true,
cancelable: true
});
window.dispatchEvent(e);
};
var findTarget = function (target) {
var i;
var toggles = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) {
if (toggles[i] === target) {
return target;
}
}
}
};
var locationReplace = function (url) {
window.history.replaceState(null, '', '#');
window.location.replace(url);
};
var extendWithDom = function (obj, fragment, dom) {
var i;
var result = {};
for (i in obj) {
if (obj.hasOwnProperty(i)) {
result[i] = obj[i];
}
}
Object.keys(bars).forEach(function (key) {
var el = dom.querySelector(bars[key]);
if (el) {
el.parentNode.removeChild(el);
}
result[key] = el;
});
result.contents = dom.querySelector(fragment);
return result;
};
var parseXHR = function (xhr, options) {
var head;
var body;
var data = {};
var responseText = xhr.responseText;
data.url = options.url;
if (!responseText) {
return data;
}
if (/<html/i.test(responseText)) {
head = document.createElement('div');
body = document.createElement('div');
head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0];
} else {
head = body = document.createElement('div');
head.innerHTML = responseText;
}
data.title = head.querySelector('title');
var text = 'innerText' in data.title ? 'innerText' : 'textContent';
data.title = data.title && data.title[text].trim();
if (options.transition) {
data = extendWithDom(data, '.content', body);
} else {
data.contents = body;
}
return data;
};
// Attach PUSH event handlers
// ==========================
window.addEventListener('touchstart', function () { isScrolling = false; });
window.addEventListener('touchmove', function () { isScrolling = true; });
window.addEventListener('touchend', touchend);
window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} });
window.addEventListener('popstate', popstate);
window.PUSH = PUSH;
}());
/* ========================================================================
* Ratchet: segmented-controllers.js v2.0.2
* http://dcloudio.github.io/mui/components#segmentedControls
* ========================================================================
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
var getTarget = function (target) {
var i;
var segmentedControls = document.querySelectorAll('.segmented-control .control-item');
for (; target && target !== document; target = target.parentNode) {
for (i = segmentedControls.length; i--;) {
if (segmentedControls[i] === target) {
return target;
}
}
}
};
window.addEventListener('touchend', function (e) {
var activeTab;
var activeBodies;
var targetBody;
var targetTab = getTarget(e.target);
var className = 'active';
var classSelector = '.' + className;
if (!targetTab) {
return;
}
activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) {
activeTab.classList.remove(className);
}
targetTab.classList.add(className);
if (!targetTab.hash) {
return;
}
targetBody = document.querySelector(targetTab.hash);
if (!targetBody) {
return;
}
activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
for (var i = 0; i < activeBodies.length; i++) {
activeBodies[i].classList.remove(className);
}
targetBody.classList.add(className);
});
window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} });
}());
/* ========================================================================
* Ratchet: sliders.js v2.0.2
* http://dcloudio.github.io/mui/components#sliders
* ========================================================================
Adapted from Brad Birdsall's swipe
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
var pageX;
var pageY;
var slider;
var deltaX;
var deltaY;
var offsetX;
var lastSlide;
var startTime;
var resistance;
var sliderWidth;
var slideNumber;
var isScrolling;
var scrollableArea;
var getSlider = function (target) {
var i;
var sliders = document.querySelectorAll('.slider > .slide-group');
for (; target && target !== document; target = target.parentNode) {
for (i = sliders.length; i--;) {
if (sliders[i] === target) {
return target;
}
}
}
};
var getScroll = function () {
if ('webkitTransform' in slider.style) {
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
}
};
var setSlideNumber = function (offset) {
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
slideNumber += offset;
slideNumber = Math.min(slideNumber, 0);
slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
};
var onTouchStart = function (e) {
slider = getSlider(e.target);
if (!slider) {
return;
}
var firstItem = slider.querySelector('.slide');
scrollableArea = firstItem.offsetWidth * slider.children.length;
isScrolling = undefined;
sliderWidth = slider.offsetWidth;
resistance = 1;
lastSlide = -(slider.children.length - 1);
startTime = +new Date();
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
deltaX = 0;
deltaY = 0;
setSlideNumber(0);
slider.style['-webkit-transition-duration'] = 0;
};
var onTouchMove = function (e) {
if (e.touches.length > 1 || !slider) {
return; // Exit if a pinch || no slider
}
deltaX = e.touches[0].pageX - pageX;
deltaY = e.touches[0].pageY - pageY;
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
if (typeof isScrolling === 'undefined') {
isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
}
if (isScrolling) {
return;
}
offsetX = (deltaX / resistance) + getScroll();
e.preventDefault();
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
};
var onTouchEnd = function (e) {
if (!slider || isScrolling) {
return;
}
setSlideNumber(
(+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
);
offsetX = slideNumber * sliderWidth;
slider.style['-webkit-transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) },
bubbles: true,
cancelable: true
});
slider.parentNode.dispatchEvent(e);
};
window.addEventListener('touchstart', onTouchStart);
window.addEventListener('touchmove', onTouchMove);
window.addEventListener('touchend', onTouchEnd);
}());
/* ========================================================================
* Ratchet: toggles.js v2.0.2
* http://dcloudio.github.io/mui/components#toggles
* ========================================================================
Adapted from Brad Birdsall's swipe
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
var start = {};
var touchMove = false;
var distanceX = false;
var toggle = false;
var findToggle = function (target) {
var i;
var toggles = document.querySelectorAll('.toggle');
for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) {
if (toggles[i] === target) {
return target;
}
}
}
};
window.addEventListener('touchstart', function (e) {
e = e.originalEvent || e;
toggle = findToggle(e.target);
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
touchMove = false;
});
window.addEventListener('touchmove', function (e) {
e = e.originalEvent || e;
if (e.touches.length > 1) {
return; // Exit if a pinch
}
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var current = e.touches[0];
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = toggleWidth - handleWidth;
touchMove = true;
distanceX = current.pageX - start.pageX;
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
return;
}
e.preventDefault();
if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)');
}
if (distanceX > offset) {
return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
}
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
});
window.addEventListener('touchend', function (e) {
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = (toggleWidth - handleWidth);
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
}
toggle.classList[slideOn ? 'add' : 'remove']('active');
e = new CustomEvent('toggle', {
detail: { isActive: slideOn },
bubbles: true,
cancelable: true
});
toggle.dispatchEvent(e);
touchMove = false;
toggle = false;
});
}());
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a,b=function(){},c=20,d=sessionStorage,e={},f={slideIn:"slide-out",slideOut:"slide-in",fade:"fade"},g={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},h=function(a,b){o.id=a.id,b&&(a=k(a.id)),d[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url),e[a.id]=document.body.cloneNode(!0)},i=function(){var a=o.id,b=JSON.parse(d.cacheForwardStack||"[]"),e=JSON.parse(d.cacheBackStack||"[]");for(e.push(a);b.length;)delete d[b.shift()];for(;e.length>c;)delete d[e.shift()];window.history.pushState(null,"",d[o.id].url),d.cacheForwardStack=JSON.stringify(b),d.cacheBackStack=JSON.stringify(e)},j=function(a,b){var c="forward"===b,e=JSON.parse(d.cacheForwardStack||"[]"),f=JSON.parse(d.cacheBackStack||"[]"),g=c?f:e,h=c?e:f;o.id&&g.push(o.id),h.pop(),d.cacheForwardStack=JSON.stringify(e),d.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(d[a]||null)||{}},l=function(b){var c=t(b.target);if(!(!c||b.which>1||b.metaKey||b.ctrlKey||a||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,h,i,l,m,n,p,q=a.state;if(q&&d[q]){if(l=o.id<q?"forward":"back",j(q,l),h=k(q),i=e[q],h.title&&(document.title=h.title),"back"===l?(n=JSON.parse("back"===l?d.cacheForwardStack:d.cacheBackStack),p=k(n[n.length-1])):p=h,"back"===l&&!p.id)return o.id=q;if(m="back"===l?f[p.transition]:p.transition,!i)return o({id:h.id,url:h.url,title:h.title,timeout:h.timeout,transition:m,ignorePush:!0});if(p.transition){h=v(h,".content",i.cloneNode(!0));for(b in g)g.hasOwnProperty(b)&&(c=document.querySelector(g[b]),h[b]?r(h[b],c):c&&c.parentNode.removeChild(c))}r((h.contents||i).cloneNode(!0),document.querySelector(".content"),m),o.id=q,document.body.offsetHeight}},o=function(a){var c,d=o.xhr;a.container=a.container||a.transition?document.querySelector(".content"):document.body;for(c in g)g.hasOwnProperty(c)&&(a[c]=a[c]||document.querySelector(g[c]));d&&d.readyState<4&&(d.onreadystatechange=b,d.abort()),d=new XMLHttpRequest,d.open("GET",a.url,!0),d.setRequestHeader("X-PUSH","true"),d.onreadystatechange=function(){a._timeout&&clearTimeout(a._timeout),4===d.readyState&&(200===d.status?p(d,a):q(a.url))},o.id||h({id:+new Date,url:window.location.href,title:document.title,timeout:a.timeout,transition:null}),a.timeout&&(a._timeout=setTimeout(function(){d.abort("timeout")},a.timeout)),d.send(),d.readyState&&!a.ignorePush&&i()},p=function(a,b){var c,d,e=w(a,b);if(!e.contents)return u(b.url);if(e.title&&(document.title=e.title),b.transition)for(c in g)g.hasOwnProperty(c)&&(d=document.querySelector(g[c]),e[c]?r(e[c],d):d&&d.parentNode.removeChild(d));r(e.contents,b.container,b.transition,function(){h({id:b.id||+new Date,url:e.url,title:e.title,timeout:b.timeout,transition:b.transition},b.id),s()}),!b.ignorePush&&window._gaq&&_gaq.push(["_trackPageview"]),!b.hash},q=function(a){throw new Error("Could not get: "+a)},r=function(a,b,c,d){var e,f,g;if(c?(e=/in$/.test(c),"fade"===c&&(b.classList.add("in"),b.classList.add("fade"),a.classList.add("fade")),/slide/.test(c)&&(a.classList.add("sliding-in",e?"right":"left"),a.classList.add("sliding"),b.classList.add("sliding")),b.parentNode.insertBefore(a,b)):b?b.innerHTML=a.innerHTML:a.classList.contains("content")?document.body.appendChild(a):document.body.insertBefore(a,document.querySelector(".content")),c||d&&d(),"fade"===c){b.offsetWidth,b.classList.remove("in");var h=function(){b.removeEventListener("webkitTransitionEnd",h),a.classList.add("in"),a.addEventListener("webkitTransitionEnd",i)},i=function(){a.removeEventListener("webkitTransitionEnd",i),b.parentNode.removeChild(b),a.classList.remove("fade"),a.classList.remove("in"),d&&d()};b.addEventListener("webkitTransitionEnd",h)}if(/slide/.test(c)){var j=function(){a.removeEventListener("webkitTransitionEnd",j),a.classList.remove("sliding","sliding-in"),a.classList.remove(g),b.parentNode.removeChild(b),d&&d()};b.offsetWidth,g=e?"right":"left",f=e?"left":"right",b.classList.add(f),a.classList.remove(g),a.addEventListener("webkitTransitionEnd",j)}},s=function(){var a=new CustomEvent("push",{detail:{state:k(o.id)},bubbles:!0,cancelable:!0});window.dispatchEvent(a)},t=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},u=function(a){window.history.replaceState(null,"","#"),window.location.replace(a)},v=function(a,b,c){var d,e={};for(d in a)a.hasOwnProperty(d)&&(e[d]=a[d]);return Object.keys(g).forEach(function(a){var b=c.querySelector(g[a]);b&&b.parentNode.removeChild(b),e[a]=b}),e.contents=c.querySelector(b),e},w=function(a,b){var c,d,e={},f=a.responseText;if(e.url=b.url,!f)return e;/<html/i.test(f)?(c=document.createElement("div"),d=document.createElement("div"),c.innerHTML=f.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=v(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){a=!1}),window.addEventListener("touchmove",function(){a=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i<d.length;i++)d[i].classList.remove(g);e.classList.add(g)}}),window.addEventListener("click",function(b){a(b.target)&&b.preventDefault()})}(),!function(){"use strict";var a,b,c,d,e,f,g,h,i,j,k,l,m,n=function(a){for(var b,c=document.querySelectorAll(".slider > .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},o=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},p=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](o()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},q=function(f){if(c=n(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,p(0),c.style["-webkit-transition-duration"]=0}},r=function(h){h.touches.length>1||!c||(d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+o(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)"))},s=function(a){c&&!l&&(p(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",q),window.addEventListener("touchmove",r),window.addEventListener("touchend",s)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)<Math.abs(g.pageY-a.pageY))){if(e.preventDefault(),0>c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}();
\ No newline at end of file
.slider,
.slider img {
margin-bottom: 0;
height: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-android.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<a href="#navPopover">
<h1 class="title">
<span class="icon icon-home"></span>
Notes
<span class="icon icon-caret"></span>
</h1>
</a>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
</ul>
</div>
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-left pull-left" href="#composeModal"></a>
<h1 class="title">New note</h1>
</header>
<div class="content">
<form class="content-padded">
<input type="text" placeholder="Title">
<textarea rows="10"></textarea>
<a class="btn btn-positive btn-block" href="#composeModal">Save note</a>
</form>
</div>
</div><!-- /.modal -->
<!-- Popover -->
<div id="navPopover" class="popover">
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell">Item4</li>
<li class="table-view-cell">Item5</li>
<li class="table-view-cell">Item6</li>
<li class="table-view-cell">Item7</li>
<li class="table-view-cell">Item8</li>
<li class="table-view-cell">Item9</li>
<li class="table-view-cell">Item10</li>
</ul>
</div>
</body>
</html>
.updated-text {
position: absolute;
left: 0;
right: 0;
padding: 10px 0;
font-size: 11px;
text-align: center;
}
.table-view-cell .icon {
color: #007aff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">All inboxes</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
</ul>
</div><!-- /.content -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-pages pull-left"></span>
<div class="media-body">
All inboxes
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-person pull-left"></span>
<div class="media-body">
Personal email
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-star-filled pull-left"></span>
<div class="media-body">
Starred
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-trash pull-left"></span>
<div class="media-body">
Trash
</div>
</a>
</li>
</ul>
<h5 class="content-padded">Other accounts</h5>
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-more pull-left"></span>
<div class="media-body">
Misc
</div>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="btn btn-link pull-right" href="#composeModal">
<strong>Send</strong>
</a>
<a class="btn btn-link pull-left" href="#composeModal">
Cancel
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">
<input type="email" placeholder="From:">
<input type="text" placeholder="Subject:">
<textarea rows="20"></textarea>
</form>
</div>
</div><!-- /.modal -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left" href="index.html" data-transition="slide-out">
<span class="icon icon-left-nav"></span>
Back
</a>
<h1 class="title">Argo</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
Metreon 16
<p>1.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 5
<p>3.5 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
Regal 42
<p>7.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
Shorline theater
<p>12.5 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 16
<p>12.2 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
BW3 16
<p>13.4 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
MC Hammer 16
<p>14.1 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 3
<p>14.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 2
<p>14.7 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 10
<p>15 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>
.slider {
margin-bottom: 0;
}
.slider img {
width: auto;
height: 150px;
}
.content-padded {
margin: 30px 15px 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-gear pull-right" href="#settingsModal"></a>
<h1 class="title">Movie finder</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="content">
<div class="slider">
<div class="slide-group">
<div class="slide">
<img src="img/argo.png" alt="Argo" width="640" height="300">
</div>
<div class="slide">
<img src="img/skyfall.png" alt="Skyfall" width="640" height="300">
</div>
<div class="slide">
<img src="img/ralph.png" alt="Wreck-It Ralph" width="640" height="300">
</div>
</div>
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Settings modal -->
<div id="settingsModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<h5 class="content-padded">App settings</h5>
<ul class="table-view">
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-sound"></span>
<div class="media-body">
Enable sounds
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Parental controls
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div><!-- /.modal -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Getting started &middot; Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<!-- <link rel="stylesheet" href="/dist/css/googleapis.css"> -->
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">Getting started</h2>
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-content">
<div class="docs-section">
<h2>Quick start</h2>
<p class="lead">Quickly get up and running with a Ratchet app.</p>
<h3>1. Create your pages</h3>
<p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p>
<h3>2. Connect pages with push.js</h3>
<p>Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events" data-ignore="push">Check out this tutorial on emulating touch events in Chrome</a> (<a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View" data-ignore="push">or Firefox</a>) if you're not sure how to do that.</p>
<h3>3. Save the app to your phone</h3>
<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p>
</div>
<div class="docs-section">
<h2>What&#8217;s included</h2>
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<div class="highlight"><pre><code class="bash">ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ ├── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ ├── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff
</code></pre></div>
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<div class="highlight"><pre><code class="bash">ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
</code></pre></div>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<div class="docs-section">
<h2>Page setup</h2>
<p class="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
</div>
<div class="docs-section">
<h2 id="pageLayout">Basic template</h2>
<p class="lead">Use this basic template to get your app started.</p>
<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;utf-8&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;title&gt;</span>Ratchet template page<span class="nt">&lt;/title&gt;</span>
<span class="c">&lt;!-- Sets initial viewport load and disables zooming --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Makes your prototype chrome-less once bookmarked to your phone&#39;s home screen --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-capable&quot;</span> <span class="na">content=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-status-bar-style&quot;</span> <span class="na">content=</span><span class="s">&quot;black&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Include the compiled Ratchet CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&quot;ratchet.css&quot;</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Include the compiled Ratchet JS --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ratchet.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="c">&lt;!-- Make sure all your bars are the first things in your &lt;body&gt; --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Ratchet<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="c">&lt;!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">&quot;content-padded&quot;</span><span class="nt">&gt;</span>Thanks for downloading Ratchet. This is an example HTML page that&#39;s linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;http://goratchet.com&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet documentation<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://github.com/twbs/ratchet/&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet on Github<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://groups.google.com/forum/#!forum/goratchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet Google group<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://twitter.com/goratchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet on Twitter<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
</div>
<div class="docs-section">
<h2>Community</h2>
<p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<li>
<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
</li>
<li>
<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
</li>
<li>
<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
</li>
</ol>
<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
</li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="/dist/js/jquery-2.1.1.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MUI</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<!-- <link rel="stylesheet" href="dist/css/googleapis.css"> -->
<link rel="stylesheet" href="dist/css/ratchet.min.css">
<link rel="stylesheet" href="assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="docs-home" ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">MUI</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">首页</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">新手指南</a>
<a class="docs-nav-item" href="/components" data-ignore="push">CSS组件</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">JavaScript</a>
<a class="docs-nav-item" href="/about" data-ignore="push">关于</a>
<a class="docs-nav-item" href="https://github.com/dcloudio/mui" data-ignore="push">GitHub 地址</a>
</div>
</nav>
</div>
</div>
</header>
<div class="docs-header-content">
<p class="docs-subtitle">最接近原生APP体验的高性能前端框架</p>
<a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">下载</a>
<p class="version">最新版本 v0.5.3</p>
</div>
<div class="docs-header-bottom">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div>
<script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=dcloudio&amp;repo=mui&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li>
</ul>
<p class="docs-footer-text">mui遵循 <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> </p>
<ul class="docs-footer-links">
<li>最新版本 v0.5.3</li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="dist/js/jquery-2.1.1.js"></script>
<script src="dist/js/ratchet.min.js"></script>
<script src="assets/js/docs.min.js"></script>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<header class="bar bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="/two.html" data-transition="slide-in" data-selector=".device-content">
Load new page with push
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
# www.robotstxt.org/
# Allow crawling of all content
User-agent: *
Disallow:
Sitemap: http://dcloudio.github.io/mui/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://dcloudio.github.io/mui/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/about/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/components/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/examples/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
</urlset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<!-- Intro paragraph styles. Delete once you start using this page -->
<style>
.welcome {
line-height: 1.5;
color: #555;
}
</style>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="http://goratchet.com">
<strong>Ratchet documentation</strong>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="https://twitter.com/goratchet">
<strong>Ratchet on Twitter</strong>
</a>
</li>
</ul>
</div>
</div>
<!-- Include the compiled Ratchet JS -->
<script src="/dist/js/ratchet.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="/one.html" data-transition="slide-out"></a>
<h1 class="title">Page two</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a href="/one.html" data-transition="slide-out">Tap or click here to go back. You can also try your browser's back button.</a>
</li>
</ul>
</div>
</div>
</body>
</html>
...@@ -3,33 +3,18 @@ ...@@ -3,33 +3,18 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>About &middot; Ratchet</title> <title>关于 &middot; MUI</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components."> <meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="author" content="Connor Sears"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts --> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans:400,300"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css">
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
...@@ -44,21 +29,21 @@ ...@@ -44,21 +29,21 @@
<![endif]--> <![endif]-->
<div class="docs-sub-header"> <div class="docs-sub-header">
<header class="docs-masthead clearfix"> <header class="docs-masthead mui-clearfix">
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<h1 class="docs-title"> <h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a> <a href="http://dcloudio.github.io/mui/" >MUI</a>
</h1> </h1>
<nav class="docs-nav clearfix"> <nav class="docs-nav mui-clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> <a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group"> <div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> <a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div> </div>
</nav> </nav>
</div> </div>
...@@ -70,8 +55,6 @@ ...@@ -70,8 +55,6 @@
<h2 class="page-title">About</h2> <h2 class="page-title">About</h2>
<p class="page-description">Learn about the project's history and meet the maintaining team.</p> <p class="page-description">Learn about the project's history and meet the maintaining team.</p>
</div> </div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div> </div>
</div> </div>
...@@ -146,45 +129,23 @@ ...@@ -146,45 +129,23 @@
<div class="column"> <div class="column">
<!-- Footer --> <!-- Footer -->
<div class="docs-footer"> <div class="docs-footer">
<!-- Social links --> <p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
<ul class="social"> </p>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe> <ul class="docs-footer-links">
</li> <li>最新版本 v0.5.3</li>
<li> <li>&middot;</li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> <li>&middot;</li>
Follow @GoRatchet</a> <li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
</li> </li>
</ul> <li>&middot;</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js"></script>
<script> <script src="http://dcloudio.github.io/mui/assets/js/docs.js"></script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div> </div>
</div> </div>
......
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
html, html,
body { body {
width: 100%; width: 100%;
...@@ -86,8 +76,8 @@ body { ...@@ -86,8 +76,8 @@ body {
left: 0; left: 0;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/*.docs-header { /*.docs-header {
min-height: 870px; min-height: 870px;
}*/ }*/
.docs-header .carbonad { .docs-header .carbonad {
left: 50% !important; left: 50% !important;
...@@ -127,7 +117,7 @@ body { ...@@ -127,7 +117,7 @@ body {
color: #fff; color: #fff;
opacity: .7; opacity: .7;
} }
.docs-nav .docs-nav-trigger.active { .docs-nav .docs-nav-trigger.mui-active {
opacity: 1; opacity: 1;
} }
.docs-nav .docs-nav-group { .docs-nav .docs-nav-group {
...@@ -141,7 +131,7 @@ body { ...@@ -141,7 +131,7 @@ body {
background-color: rgba(0, 0, 0, .9); background-color: rgba(0, 0, 0, .9);
opacity: 0; opacity: 0;
} }
.docs-nav .docs-nav-group.active { .docs-nav .docs-nav-group.mui-active {
height: auto; height: auto;
opacity: 1; opacity: 1;
} }
...@@ -234,7 +224,7 @@ body { ...@@ -234,7 +224,7 @@ body {
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .05);
box-shadow: 0 0 8px rgba(0, 0, 0, .05); box-shadow: 0 0 8px rgba(0, 0, 0, .05);
} }
.docs-component-group.active { .docs-component-group.mui-active {
display: block; display: block;
} }
.docs-component-group:before, .docs-component-group:before,
...@@ -660,7 +650,7 @@ code { ...@@ -660,7 +650,7 @@ code {
-moz-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.component.active { .component.mui-active {
opacity: 1; opacity: 1;
} }
.component-example { .component-example {
...@@ -969,4 +959,8 @@ hr { ...@@ -969,4 +959,8 @@ hr {
width: 121px; width: 121px;
height: 20px; height: 20px;
margin-top: 6px; margin-top: 6px;
}
.mui-spin {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
} }
\ No newline at end of file
...@@ -6,7 +6,4 @@ ...@@ -6,7 +6,4 @@
* *
* v2.0.2 designed by @connors. * v2.0.2 designed by @connors.
* ===================================================== * =====================================================
*/html,body{width:100%;height:100%}body{position:relative!important;font:400 14px/1.5 "Open Sans",sans-serif;color:#333;-webkit-text-size-adjust:100%;background-color:#fff;-webkit-font-smoothing:antialiased}.docs-content{font-size:14px}@media screen and (min-width:768px){.docs-content{font-size:18px}}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{font-weight:400;color:#222}.docs-content h2{margin-bottom:.25em;font-size:2em}.docs-content h3{margin-bottom:.5em;font-size:1.25em}.docs-content p{margin-bottom:1.5em;font-size:1em;color:#555}.docs-content .lead{font-size:1.1em;color:#777}.docs-header,.docs-sub-header{position:relative;background-color:#0a1855;background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#0a1855),color-stop(100%,#da0024));background-image:-webkit-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-moz-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-ms-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-o-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:linear-gradient(45deg,#0a1855 0,#da0024 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855',endColorstr='#da0024',GradientType=1)}.docs-header{height:100vh;min-height:750px}.docs-header .carbonad{position:relative!important;margin-top:0!important;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header .version{margin-top:15px;color:rgba(255,255,255,.5);text-align:center}.docs-header-bottom{position:absolute;right:0;bottom:0;left:0}@media screen and (min-width:768px){.docs-header{min-height:870px}.docs-header .carbonad{left:50%!important;width:330px!important;margin-bottom:60px!important;margin-left:-165px!important}.docs-sub-header .carbonad{position:absolute!important;top:50%!important;right:15px!important;margin-top:0!important;-webkit-transform:translateY(-50%)!important;-ms-transform:translateY(-50%)!important;transform:translateY(-50%)!important}}.docs-masthead{position:relative;padding-top:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.docs-title{position:absolute;left:50%;z-index:20;margin-bottom:0;font-size:22px;font-weight:400;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.docs-nav .docs-nav-trigger{color:#fff;opacity:.7}.docs-nav .docs-nav-trigger.active{opacity:1}.docs-nav .docs-nav-group{position:absolute;top:40px;right:0;left:0;z-index:20;height:0;overflow:hidden;background-color:rgba(0,0,0,.9);opacity:0}.docs-nav .docs-nav-group.active{height:auto;opacity:1}.docs-nav .docs-nav-item{display:block;padding:20px 15px;font-size:22px}.docs-jump-menu,.docs-component-group{display:none}.docs-title a,.docs-nav-item{color:#fff;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.docs-title a:active,.docs-title a:focus,.docs-nav-item:active,.docs-nav-item:focus{color:#fff;opacity:.5}@media screen and (min-width:768px){.docs-title{position:static;float:left;font-weight:300;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-nav{float:right}.docs-nav .docs-nav-trigger{display:none}.docs-nav .docs-nav-group{position:static;display:block;height:auto;background-color:transparent;opacity:1}.docs-nav .docs-nav-item{position:relative;display:inline-block;padding:0 15px;font-size:14px}.docs-jump-menu{position:absolute;left:15px;display:block;color:#777;cursor:pointer;-webkit-transition:opacity .2 linear;-moz-transition:opacity .2 linear;transition:opacity .2 linear}.docs-jump-menu:hover{color:#428bca}.docs-jump-menu:active{opacity:.5}.docs-jump-menu .icon-list{margin-right:3px;font-size:16px}.docs-jump-menu .icon-caret{position:relative;top:4px;margin-left:-5px}.docs-component-group{position:absolute;top:35px;left:15px;padding-top:10px;padding-bottom:10px;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:3px;-webkit-box-shadow:0 0 8px rgba(0,0,0,.05);box-shadow:0 0 8px rgba(0,0,0,.05)}.docs-component-group.active{display:block}.docs-component-group:before,.docs-component-group:after{position:absolute;left:30px;width:0;height:0;content:''}.docs-component-group:before{top:-11px;margin-left:-11px;border-right:11px solid transparent;border-bottom:11px solid rgba(0,0,0,.3);border-left:11px solid transparent}.docs-component-group:after{top:-10px;margin-left:-10px;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent}.docs-component-group .docs-component-item{display:block;padding:10px 20px;color:#777}.docs-component-group .docs-component-item:hover{color:#fff;background-color:#428bca} */body,html{width:100%;height:100%}body{position:relative!important;font:400 14px/1.5 "Open Sans",sans-serif;color:#333;-webkit-text-size-adjust:100%;background-color:#fff;-webkit-font-smoothing:antialiased}.docs-content{font-size:14px}@media screen and (min-width:768px){.docs-content{font-size:18px}}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{font-weight:400;color:#222}.docs-content h2{margin-bottom:.25em;font-size:2em}.docs-content h3{margin-bottom:.5em;font-size:1.25em}.docs-content p{margin-bottom:1.5em;font-size:1em;color:#555}.docs-content .lead{font-size:1.1em;color:#777}.docs-header,.docs-sub-header{position:relative;background-color:#0a1855;background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#0a1855),color-stop(100%,#da0024));background-image:-webkit-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-moz-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-ms-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:-o-linear-gradient(45deg,#0a1855 0,#da0024 100%);background-image:linear-gradient(45deg,#0a1855 0,#da0024 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855', endColorstr='#da0024', GradientType=1)}.docs-header{height:100vh;min-height:750px}.docs-header .carbonad{position:relative!important;margin-top:0!important;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header .version{margin-top:15px;color:rgba(255,255,255,.5);text-align:center}.docs-header-bottom{position:absolute;right:0;bottom:0;left:0}@media screen and (min-width:768px){.docs-header{min-height:870px}.docs-header .carbonad{left:50%!important;width:330px!important;margin-bottom:60px!important;margin-left:-165px!important}.docs-sub-header .carbonad{position:absolute!important;top:50%!important;right:15px!important;margin-top:0!important;-webkit-transform:translateY(-50%)!important;-ms-transform:translateY(-50%)!important;transform:translateY(-50%)!important}}.docs-masthead{position:relative;padding-top:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.docs-title{position:absolute;left:50%;z-index:20;margin-bottom:0;font-size:22px;font-weight:400;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.docs-nav .docs-nav-trigger{color:#fff;opacity:.7}.docs-nav .docs-nav-trigger.active{opacity:1}.docs-nav .docs-nav-group{position:absolute;top:40px;right:0;left:0;z-index:20;height:0;overflow:hidden;background-color:rgba(0,0,0,.9);opacity:0}.docs-nav .docs-nav-group.active{height:auto;opacity:1}.docs-nav .docs-nav-item{display:block;padding:20px 15px;font-size:22px}.docs-component-group,.docs-jump-menu{display:none}.docs-nav-item,.docs-title a{color:#fff;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.docs-nav-item:active,.docs-nav-item:focus,.docs-title a:active,.docs-title a:focus{color:#fff;opacity:.5}@media screen and (min-width:768px){.docs-title{position:static;float:left;font-weight:300;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-nav{float:right}.docs-nav .docs-nav-trigger{display:none}.docs-nav .docs-nav-group{position:static;display:block;height:auto;background-color:transparent;opacity:1}.docs-nav .docs-nav-item{position:relative;display:inline-block;padding:0 15px;font-size:14px}.docs-jump-menu{position:absolute;left:15px;display:block;color:#777;cursor:pointer;-webkit-transition:opacity .2 linear;-moz-transition:opacity .2 linear;transition:opacity .2 linear}.docs-jump-menu:hover{color:#428bca}.docs-jump-menu:active{opacity:.5}.docs-jump-menu .icon-list{margin-right:3px;font-size:16px}.docs-jump-menu .icon-caret{position:relative;top:4px;margin-left:-5px}.docs-component-group{position:absolute;top:35px;left:15px;padding-top:10px;padding-bottom:10px;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:3px;-webkit-box-shadow:0 0 8px rgba(0,0,0,.05);box-shadow:0 0 8px rgba(0,0,0,.05)}.docs-component-group.active{display:block}.docs-component-group:after,.docs-component-group:before{position:absolute;left:30px;width:0;height:0;content:''}.docs-component-group:before{top:-11px;margin-left:-11px;border-right:11px solid transparent;border-bottom:11px solid rgba(0,0,0,.3);border-left:11px solid transparent}.docs-component-group:after{top:-10px;margin-left:-10px;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent}.docs-component-group .docs-component-item{display:block;padding:10px 20px;color:#777}.docs-component-group .docs-component-item:hover{color:#fff;background-color:#428bca}}.docs-header-content{position:relative;padding:50px 10px;text-align:center;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header-content .btn{display:block;padding:15px 60px 16px;margin-bottom:0;font-size:18px;color:#0a1855;background-color:#fff;border:0;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}.docs-header-content .btn:hover{background-color:#fff;-webkit-box-shadow:0 0 50px rgba(255,255,255,.3);box-shadow:0 0 50px rgba(255,255,255,.3)}.docs-header-content .btn:active{opacity:.5}.docs-subtitle{max-width:750px;margin:0 auto 20px;font-size:28px;font-weight:300;line-height:38px;color:#fff}@media screen and (min-width:768px){.docs-header-content{top:30%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.docs-header-content .btn{display:inline-block}.docs-subtitle{margin-bottom:30px;font-size:41px;line-height:60px}}.carbonad{width:100%!important;height:auto!important;padding:15px!important;font-size:13px!important;line-height:18px!important;background:0 0!important;border-top:1px solid rgba(255,255,255,.1)!important;border-right:0!important;border-bottom:0!important;border-left:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Open Sans",sans-serif!important;color:rgba(255,255,255,.65)!important}.carbonad-text{padding-top:0!important}.carbonad-tag{text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media screen and (min-width:768px){.carbonad{width:360px!important;border-right:1px solid rgba(255,255,255,.1)!important;border-bottom:1px solid rgba(255,255,255,.1)!important;border-left:1px solid rgba(255,255,255,.1)!important;border-radius:3px!important}}.docs-sub-content{position:relative;padding:55px 15px 65px;overflow:hidden;color:#fff;text-align:center}.docs-sub-content .page-description,.docs-sub-content .page-title{margin-top:0;margin-bottom:0;font-weight:300}.docs-sub-content .page-title{margin-bottom:5px;font-size:40px}.docs-sub-content .page-description{font-size:24px;color:#fff;opacity:.7}@media screen and (min-width:768px){.docs-sub-content{margin-right:380px;text-align:left}}.docs-section{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #ddd}.docs-section:last-child{border-bottom:0}@media screen and (min-width:768px){.docs-module{margin-top:35px}}.docs-module{padding:20px;margin-top:20px;border:1px solid #ddd;border-radius:3px}.docs-module .btn-block{margin-bottom:0}.version{margin-top:10px;margin-bottom:0;font-size:90%;color:#777}.docs-footer{padding:30px 20px;margin-top:50px;font-size:14px;color:#777;text-align:center;border-top:1px solid #ddd}.docs-footer .social{padding:0 0 20px;margin:0;list-style:none}.docs-footer .social li{display:inline-block;height:20px;vertical-align:top}.docs-footer .social .twitter-follow-button{margin-top:5px}@media screen and (min-width:768px){.docs-footer .social .twitter-follow-button{margin-top:0}}.docs-footer-text{margin-top:0;margin-bottom:0}@media screen and (min-width:768px){.docs-footer-text{width:550px;padding-right:0;padding-left:0;margin:0 auto}}.docs-footer-links{padding-left:0}.docs-footer-links li{display:inline;padding-right:3px;padding-left:3px}.docs-header .docs-footer{margin-top:0;border-top:1px solid rgba(255,255,255,.1)}.docs-header .docs-footer .docs-footer-links,.docs-header .docs-footer .docs-footer-text{color:rgba(255,255,255,.5)}.docs-header .docs-footer .docs-footer-links a,.docs-header .docs-footer .docs-footer-text a{color:rgba(255,255,255,.8)}.github-btn{overflow:hidden;border:0}.docs-component-toolbar{position:fixed;top:0;right:0;bottom:auto;left:0;z-index:20;height:44px;padding-top:8px;padding-bottom:8px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;transition:transform .5s;-webkit-transform:translate3d(0,-55px,0);-ms-transform:translate3d(0,-55px,0);transform:translate3d(0,-55px,0)}.docs-component-toolbar.visible{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.docs-component-toolbar .segmented-control{max-width:300px;margin:0 auto}.docs-component-toolbar .segmented-control .control-item{cursor:pointer}.docs-examples{margin-top:30px}.example-wrap{margin-bottom:30px}.example-wrap .example{display:block;width:100%;padding:3px;overflow:hidden;border:1px solid #ddd;border-radius:3px}.example-wrap .example-title{margin-top:10px}.example-wrap img{display:block;width:100%;height:auto}code{padding:2px 4px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:90%;background-color:#f9f9f9;border-radius:3px}.component{padding:50px 15px;margin-right:-15px;margin-left:-15px;border-bottom:1px solid #ddd}.component.no-border{border-bottom:0}@media screen and (min-width:768px){.component{border-bottom:0}}.component-title{margin-bottom:10px;font-size:24px;line-height:34px}.component-description{margin-bottom:15px;font-size:16px}.component-example{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}.component-example,.component-example .bar,.component-example .content{position:relative}.component-example .bar{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.component-example .bar.bar-header-secondary{top:0!important;border-top:0}.component-example>.content-padded{margin:15px}.component-example>.card{margin:15px 0 0}.component-example>.card .control-content{padding:15px}.component-example>.btn,.component-example>.toggle{margin-bottom:10px}.component-example .slider,.component-example .slider .slide{height:300px}.component-example .slide img{width:100%}.component-example .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.component-example-fullbleed,.highlight{margin-right:-15px;margin-left:-15px}.bar-nav~.content{padding:0}.highlight pre{padding:15px;margin-top:15px;overflow-x:auto;font-size:13px;color:#777;word-wrap:normal;white-space:pre;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.highlight pre code{padding:0}@media screen and (min-width:768px){.component,.component-example-fullbleed,.highlight{margin-right:0;margin-left:0}.component{padding-right:0;padding-left:0;opacity:.3;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.component.active{opacity:1}.component-example{display:none}.highlight pre{border-right:1px solid #ddd;border-left:1px solid #ddd;border-radius:3px}}#ratchicons .icon,#ratchiconsInDevice .icon{width:50px;height:50px;margin:3px;font-size:24px;line-height:50px;text-align:center;background-color:#fff;border:1px solid #ddd;border-radius:25px}#modals .modal{left:0;z-index:50}#push .component-example{height:150px;overflow:hidden}#buttonsBadgesInDevice .btn,#buttonsInDevice .btn,#buttonsWithIconsInDevice .btn{margin-top:10px;margin-right:100px;margin-left:10px}#blockButtonsInDevice .btn-block{width:300px;margin:10px auto}#segmentedControlsInDevice .segmented-control{margin-top:10px;margin-right:10px;margin-left:10px}#segmentedControlsInDevice .card span{padding:10px}#badgesInDevice{text-align:center}#badgesInDevice .badge{margin-top:10px}#formsInDevice form{margin:10px}#formsInDevice form.input-group{margin:0}#togglesInDevice .toggle{margin:10px auto}.toggle{cursor:pointer}#popoversInDevice #iwindow:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:11;content:'';background-color:rgba(0,0,0,.3)}@media screen and (min-width:768px){.popover{position:absolute;top:72px;display:block;opacity:1}}#modalsInDevice #iwindow>.btn{margin:10px}@media screen and (min-width:768px){.slider .slide{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.slider .slide img{display:block;width:100%;height:570px}.slider .slide-group .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}}.device{display:none;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}@media screen and (min-width:768px){.device{position:relative;top:50px;display:block;width:395px;height:813px;margin-left:-20px;font-family:"Helvetica Neue",sans-serif;background-image:url(../img/device-sprite.png);background-repeat:no-repeat;background-position:0 0;background-size:300%;-webkit-transition:background-image .1s linear;-moz-transition:background-image .1s linear;transition:background-image .1s linear}.device.device-fixed{position:fixed;right:auto}.device .device-content{position:absolute;top:117px;left:37px;width:321px;height:569px;overflow:hidden;font-size:17px;line-height:21px;background-color:#fff}.device .bar,.device .content,.device .modal{position:absolute}.device .content{top:44px;right:0;bottom:0;left:0}}@media screen and (min-width:1200px){.device{margin-left:39px}}hr{height:0;margin:10px 0 30px;clear:both;border:solid #ddd;border-width:1px 0 0}.column-group:after,.column-group:before{display:table;content:" "}.column-group:after{clear:both}.container{position:relative;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}.column-group{width:auto}.column{float:left;width:100%;padding-right:15px;padding-left:15px}.column.pull-right{float:right}.column .column-group{margin-right:-15px;margin-left:-15px}@media screen and (min-width:768px){.container{max-width:940px;padding:0}.lg-units-4{width:33.333%}.lg-units-5{width:41.666%}.lg-units-7{width:58.333%}.lg-units-8{width:66.666%}}@media screen and (min-width:1200px){.container{max-width:1170px}}.platform-ios a{color:#007aff}.platform-ios a:active{color:#0062cc}.platform-ios .content{background-color:#efeff4}.platform-ios .h5,.platform-ios .h6,.platform-ios h5,.platform-ios h6,.platform-ios p{color:#8f8f94}.platform-ios .h5,.platform-ios .h6,.platform-ios h5,.platform-ios h6{font-weight:400;text-transform:uppercase}.platform-ios .btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;-moz-transition:all;transition:all;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}.platform-ios .btn.active,.platform-ios .btn:active{color:#fff;background-color:#929292}.platform-ios .btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.platform-ios .btn-primary.active,.platform-ios .btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.platform-ios .btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.platform-ios .btn-positive.active,.platform-ios .btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.platform-ios .btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.platform-ios .btn-negative.active,.platform-ios .btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.platform-ios .btn-outlined{background-color:transparent}.platform-ios .btn-outlined.btn-primary{color:#007aff}.platform-ios .btn-outlined.btn-positive{color:#4cd964}.platform-ios .btn-outlined.btn-negative{color:#dd524d}.platform-ios .btn-outlined.btn-negative:active,.platform-ios .btn-outlined.btn-positive:active,.platform-ios .btn-outlined.btn-primary:active{color:#fff}.platform-ios .btn-link{color:#007aff;background-color:transparent;border:none}.platform-ios .btn-link.active,.platform-ios .btn-link:active{color:#0062cc;background-color:transparent}.platform-ios .btn .badge{background-color:rgba(0,0,0,.15)}.platform-ios .btn .badge.badge-inverted{background-color:transparent}.platform-ios .btn:active .badge{color:#fff}.platform-ios .bar{background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85)}.platform-ios .bar.bar-header-secondary{top:44px}.platform-ios .bar.bar-footer-secondary{bottom:44px}.platform-ios .bar.bar-footer-secondary-tab{bottom:50px}.platform-ios .bar-tab,.platform-ios .bar.bar-footer,.platform-ios .bar.bar-footer-secondary,.platform-ios .bar.bar-footer-secondary-tab{border-top:0}.platform-ios .tab-item{color:#929292}.platform-ios .bar-nav .btn-link,.platform-ios .tab-item.active,.platform-ios .tab-item:active{color:#007aff}.platform-ios .bar-nav .btn-link:active{color:#007aff;opacity:.6}.platform-ios .badge.badge-inverted{color:#929292;background-color:transparent}.platform-ios .badge-primary{color:#fff;background-color:#007aff}.platform-ios .badge-primary.badge-inverted{color:#007aff;background-color:transparent}.platform-ios .badge-positive{color:#fff;background-color:#4cd964}.platform-ios .badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.platform-ios .badge-negative{color:#fff;background-color:#dd524d}.platform-ios .badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.platform-ios .card .table-view,.platform-ios .card .table-view-cell:last-child{background-image:none}.platform-ios .table-view{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.platform-ios .table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.platform-ios .table-view .table-view-cell:last-child{background-image:none}.platform-ios .table-view .table-view-cell>a:not(.btn):active{color:inherit}.platform-ios .table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.platform-ios .input-group,.platform-ios input[type=color],.platform-ios input[type=date],.platform-ios input[type=datetime-local],.platform-ios input[type=datetime],.platform-ios input[type=email],.platform-ios input[type=month],.platform-ios input[type=number],.platform-ios input[type=password],.platform-ios input[type=search],.platform-ios input[type=tel],.platform-ios input[type=text],.platform-ios input[type=time],.platform-ios input[type=url],.platform-ios input[type=week],.platform-ios select,.platform-ios textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}.platform-ios input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}.platform-ios input[type=search]:focus{text-align:left}.platform-ios .input-group,.platform-ios select,.platform-ios textarea{height:auto}.platform-ios .input-group{padding:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:0 100%,0 0;border:0}.platform-ios .input-group input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border:0}.platform-ios .input-group input:last-child{background-image:none}.platform-ios .input-row{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.platform-ios .input-row label+input,.platform-ios .input-row:last-child{background-image:none}.platform-ios .segmented-control{background-color:transparent;border:1px solid #929292}.platform-ios .segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;transition:background-color .1s linear}.platform-ios .segmented-control .control-item:active{background-color:#ebebeb}.platform-ios .segmented-control .control-item.active{color:#fff;background-color:#929292}.platform-ios .segmented-control-primary{border:1px solid #007aff}.platform-ios .segmented-control-primary .control-item{color:#007aff;border-color:inherit}.platform-ios .segmented-control-primary .control-item:active{background-color:#b3d7ff}.platform-ios .segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.platform-ios .segmented-control-positive{border:1px solid #4cd964}.platform-ios .segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.platform-ios .segmented-control-positive .control-item:active{background-color:#dff8e3}.platform-ios .segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.platform-ios .segmented-control-negative{border:1px solid #dd524d}.platform-ios .segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.platform-ios .segmented-control-negative .control-item:active{background-color:#fae4e3}.platform-ios .segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.platform-ios .popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-moz-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.platform-ios .popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.platform-ios .popover .bar{-webkit-box-shadow:none;box-shadow:none}.platform-ios .popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.platform-ios .popover .table-view{background-image:none;border-radius:12px}.platform-ios .modal,.platform-ios .modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.platform-ios .toggle{width:47px;border:2px solid #e6e6e6;-webkit-box-shadow:inset 0 0 0 0 #e1e1e1;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;-moz-transition-property:box-shadow,border;transition-property:box-shadow,border}.platform-ios .toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.platform-ios .toggle:before{display:none}.platform-ios .toggle.active{background-color:transparent;border:2px solid #4cd964;-webkit-box-shadow:inset 0 0 0 13px #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.platform-ios .toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);-ms-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.platform-ios .content.fade{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.platform-ios .content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.platform-ios .content.sliding.right:not([class*=sliding-in]),.platform-ios .content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;-moz-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.4s}.platform-ios .content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;-moz-animation-direction:reverse;animation-direction:reverse}.platform-ios .content.sliding.left{-webkit-transform:translate3d(-20%,0,0);-ms-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{-webkit-box-shadow:0 0 10px transparent,-320px 0 0 transparent;box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{-webkit-box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}}.platform-ios .device{background-position:-395px 0}.platform-ios .device .device-content{background-color:#efeff4}.platform-android body{font-family:Roboto,sans-serif;font-size:18px;line-height:22px;color:#222}.platform-android a{color:#33b5e5}.platform-android a:active{color:#1a9bcb}.platform-android .content{background-color:#f2f2f2}.platform-android .bar-nav~.content{padding-top:50px}.platform-android .bar-header-secondary~.content{padding-top:100px}.platform-android .bar-tab~.content{padding-top:50px;padding-bottom:0}.platform-android .bar-footer~.content{padding-bottom:50px}.platform-android .bar-footer-secondary~.content{padding-bottom:100px}.platform-android .btn{padding:8px 15px;font-size:14px;color:#222;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25)}.platform-android .btn.active,.platform-android .btn:active{color:#222;background-color:#999;border:0;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.platform-android .btn-primary{color:#fff;background-color:#33b5e5;border:0}.platform-android .btn-primary.active,.platform-android .btn-primary:active{color:#fff;background-color:#1a9bcb;border:0}.platform-android .btn-positive{color:#fff;background-color:#9c0;border:0}.platform-android .btn-positive.active,.platform-android .btn-positive:active{color:#fff;background-color:#739900;border:0}.platform-android .btn-negative{color:#fff;background-color:#f44;border:0}.platform-android .btn-negative.active,.platform-android .btn-negative:active{color:#fff;background-color:#f11;border:0}.platform-android .btn-outlined{background-color:transparent;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-outlined.btn-primary{color:#33b5e5;border:1px solid #33b5e5}.platform-android .btn-outlined.btn-primary:active{background-color:#33b5e5;border:1px solid #33b5e5}.platform-android .btn-outlined.btn-positive{color:#9c0;border:1px solid #9c0}.platform-android .btn-outlined.btn-positive:active{background-color:#9c0;border:1px solid #9c0}.platform-android .btn-outlined.btn-negative{color:#f44;border:1px solid #f44}.platform-android .btn-outlined.btn-negative:active{background-color:#f44;border:1px solid #f44}.platform-android .btn-outlined:active{background-color:#999;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-outlined.btn-negative:active,.platform-android .btn-outlined.btn-positive:active,.platform-android .btn-outlined.btn-primary:active{color:#fff;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-link{color:#33b5e5;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-link.active,.platform-android .btn-link:active{color:#1a9bcb;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.platform-android .btn-block{padding:15px 0;font-size:18px}.platform-android .btn .badge{background-color:rgba(0,0,0,.15)}.platform-android .btn .badge.badge-inverted{background-color:transparent}.platform-android .btn:active .badge{color:#fff}.platform-android .bar{height:50px;background-color:#ddd;border-bottom:1px solid #b1b1b1;-webkit-box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07);box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07)}.platform-android .bar.bar-header-secondary{top:50px}.platform-android .bar.bar-footer-secondary,.platform-android .bar.bar-footer-secondary-tab{bottom:50px}.platform-android .bar .bar-footer,.platform-android .bar .bar-footer-secondary,.platform-android .bar .bar-footer-secondary-tab{border-top:1px solid #b1b1b1;border-bottom:0;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.platform-android .bar-tab{top:0;bottom:auto;height:50px;border-top:0}.platform-android .bar-tab .tab-item{color:#929292}.platform-android .bar-tab .tab-item.active{color:#33b5e5;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.platform-android .bar-tab .tab-item:active{color:#929292;background-color:#78c6e3}.platform-android .bar-tab .tab-item .icon{top:3px;padding-top:0;padding-bottom:0}.platform-android .title{position:static;padding-left:15px;font-size:18px;line-height:49px;text-align:left}.platform-android .bar .btn{top:7px;padding-top:10px;padding-bottom:10px}.platform-android .bar .btn-link{top:0;padding:0;font-size:18px;line-height:49px;color:#33b5e5}.platform-android .bar .btn-link.active,.platform-android .bar .btn-link:active{color:#1a9bcb}.platform-android .bar .btn-link .icon{top:2px;padding:0}.platform-android .bar .btn-block{top:4px}.platform-android .bar .segmented-control{top:7px}.platform-android .bar .icon{padding-top:13px;padding-bottom:13px}.platform-android .bar .title .icon{padding:0}.platform-android .bar .title .icon.icon-caret{top:10px;color:#777}.platform-android .bar input[type=search]{height:35px}.platform-android .badge.badge-inverted{color:#999;background-color:transparent}.platform-android .badge-primary{color:#fff;background-color:#33b5e5}.platform-android .badge-primary.badge-inverted{color:#33b5e5;background-color:transparent}.platform-android .badge-positive{color:#fff;background-color:#9c0}.platform-android .badge-positive.badge-inverted{color:#9c0;background-color:transparent}.platform-android .badge-negative{color:#fff;background-color:#f44}.platform-android .badge-negative.badge-inverted{color:#f44;background-color:transparent}.platform-android .card{background-color:transparent;border-color:#d9d9d9;border-radius:2px}.platform-android .table-view{background-color:transparent}.platform-android .table-view .table-view-cell{border-bottom:1px solid #d9d9d9}.platform-android .table-view .table-view-cell:last-child{background-image:none}.platform-android .table-view .table-view-cell>a:not(.btn):active{color:inherit;background-color:#e0e0e0}.platform-android .table-view .table-view-cell>a:not(.btn):active .icon{color:#fff}.platform-android .table-view .table-view-divider{padding-top:25px;font-size:12px;font-weight:700;text-transform:uppercase;background-color:transparent;border-top:0;border-bottom:2px solid #a9a9a9}.platform-android .table-view-cell .navigate-left>.badge,.platform-android .table-view-cell .navigate-left>.btn,.platform-android .table-view-cell .navigate-left>.toggle,.platform-android .table-view-cell .navigate-right>.badge,.platform-android .table-view-cell .navigate-right>.btn,.platform-android .table-view-cell .navigate-right>.toggle,.platform-android .table-view-cell .push-left>.badge,.platform-android .table-view-cell .push-left>.btn,.platform-android .table-view-cell .push-left>.toggle,.platform-android .table-view-cell .push-right>.badge,.platform-android .table-view-cell .push-right>.btn,.platform-android .table-view-cell .push-right>.toggle,.platform-android .table-view-cell>a .navigate-left>.badge,.platform-android .table-view-cell>a .navigate-left>.btn,.platform-android .table-view-cell>a .navigate-left>.toggle,.platform-android .table-view-cell>a .navigate-right>.badge,.platform-android .table-view-cell>a .navigate-right>.btn,.platform-android .table-view-cell>a .navigate-right>.toggle,.platform-android .table-view-cell>a .push-left>.badge,.platform-android .table-view-cell>a .push-left>.btn,.platform-android .table-view-cell>a .push-left>.toggle,.platform-android .table-view-cell>a .push-right>.badge,.platform-android .table-view-cell>a .push-right>.btn,.platform-android .table-view-cell>a .push-right>.toggle{right:15px}.platform-android .input-group,.platform-android input[type=color],.platform-android input[type=date],.platform-android input[type=datetime-local],.platform-android input[type=datetime],.platform-android input[type=email],.platform-android input[type=month],.platform-android input[type=number],.platform-android input[type=password],.platform-android input[type=search],.platform-android input[type=tel],.platform-android input[type=text],.platform-android input[type=time],.platform-android input[type=url],.platform-android input[type=week],.platform-android select,.platform-android textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}.platform-android input[type=search]{border-radius:2px}.platform-android .input-group,.platform-android select,.platform-android textarea{height:auto}.platform-android .input-group{padding:0;border:0}.platform-android .input-group input{border:0;border-bottom:1px solid #d9d9d9;-webkit-box-shadow:none;box-shadow:none}.platform-android .input-group input:last-child{background-image:none}.platform-android .input-row{height:40px;border-bottom:1px solid #d9d9d9}.platform-android .input-row label{padding-top:10px;padding-bottom:10px}.platform-android .input-row label+input{background-image:none;border-bottom:0}.platform-android .segmented-control{font-size:14px;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25)}.platform-android .segmented-control .control-item{padding-top:10px;padding-bottom:10px;color:#222;border-left:1px solid #999;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.platform-android .segmented-control .control-item:first-child{border-left-width:0}.platform-android .segmented-control .control-item.active,.platform-android .segmented-control .control-item:active{background-color:#999}.platform-android .segmented-control-primary{border:0}.platform-android .segmented-control-primary .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-primary .control-item.active,.platform-android .segmented-control-primary .control-item:active{color:#fff;background-color:#33b5e5}.platform-android .segmented-control-positive{border:0}.platform-android .segmented-control-positive .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-positive .control-item.active,.platform-android .segmented-control-positive .control-item:active{color:#fff;background-color:#9c0}.platform-android .segmented-control-negative{border:0}.platform-android .segmented-control-negative .control-item{color:#fff;border-color:inherit}.platform-android .segmented-control-negative .control-item.active,.platform-android .segmented-control-negative .control-item:active{color:#fff;background-color:#f44}.platform-android .popover{top:47px;left:15px;width:200px;margin-left:0;border:1px solid #9b9b9b;border-radius:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .2s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .2s ease-in-out;transition:transform .1s ease-in-out,opacity .2s ease-in-out;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}.platform-android .popover:before{display:none}.platform-android .popover.visible{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.platform-android .backdrop{background-color:transparent}.platform-android .popover .bar{border-radius:0}.platform-android .popover .bar-nav~.table-view{padding-top:50px}.platform-android .popover .table-view{border-radius:12px}.platform-android .toggle{width:104px;height:28px;background-color:#d7d7d7;border:2px solid #d7d7d7;border-radius:0}.platform-android .toggle .toggle-handle{top:0;left:0;width:50px;height:24px;background-color:#bebebe;border:1px solid #b5b5b5;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1)}.platform-android .toggle:before{top:1px;right:auto;left:11px;z-index:3;color:#fff}.platform-android .toggle.active{background-color:#d7d7d7;border:2px solid #d7d7d7}.platform-android .toggle.active .toggle-handle{margin-right:2px;background-color:#33b5e5;border-color:#33b5e5;-webkit-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}.platform-android .toggle.active:before{right:14px;left:auto;color:#fff}.platform-android .navigate-left:after,.platform-android .navigate-right:after,.platform-android .push-left:after,.platform-android .push-right:after{content:''}.platform-android .icon-caret:before{content:'\e800'}.platform-android .icon-down-nav:before,.platform-android .icon-down:before{content:'\e801'}.platform-android .icon-download:before{content:'\e802'}.platform-android .icon-left-nav:before,.platform-android .icon-left:before{content:'\e803'}.platform-android .icon-more-vertical:before{content:'\e804'}.platform-android .icon-more:before{content:'\e805'}.platform-android .icon-right-nav:before,.platform-android .icon-right:before{content:'\e806'}.platform-android .icon-search:before{content:'\e807'}.platform-android .icon-share:before{content:'\e808'}.platform-android .icon-up-nav:before,.platform-android .icon-up:before{content:'\e809'}.platform-android .device{font-family:Roboto,sans-serif;background-position:-790px 0}.platform-android .device .device-content{font-size:18px;line-height:22px;background-color:#f2f2f2}.platform-android .device .content{top:50px}.platform-android .device .popover{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.platform-android .bar~.content{padding:0}@-webkit-keyframes fadeintext{0%{opacity:0}100%{opacity:1}}.bs-callout{padding:20px;margin:20px 0;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.list-group{padding-left:0;margin-bottom:20px}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group .team-member{font-size:14px;line-height:32px;color:#555}.list-group img{float:left;width:32px;margin-right:10px;border-radius:4px}.list-group .team-member-info{overflow:hidden}.list-group .github-btn{float:right;width:121px;height:20px;margin-top:6px}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.sb,.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}
}.docs-header-content{position:relative;padding:50px 10px;text-align:center;-webkit-animation-name:fadeintext;-moz-animation-name:fadeintext;animation-name:fadeintext;-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.docs-header-content .mui-btn{display:block;padding:15px 60px 16px;margin-bottom:0;font-size:18px;color:#0a1855;background-color:#fff;border:0;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}.docs-header-content .mui-btn:hover{background-color:#fff;-webkit-box-shadow:0 0 50px rgba(255,255,255,.3);box-shadow:0 0 50px rgba(255,255,255,.3)}.docs-header-content .mui-btn:active{opacity:.5}.docs-subtitle{max-width:750px;margin:0 auto 20px;font-size:28px;font-weight:300;line-height:38px;color:#fff}@media screen and (min-width:768px){.docs-header-content{top:30%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.docs-header-content .mui-btn{display:inline-block}.docs-subtitle{margin-bottom:30px;font-size:41px;line-height:60px}}.carbonad{width:100%!important;height:auto!important;padding:15px!important;font-size:13px!important;line-height:18px!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.1)!important;border-right:0!important;border-bottom:0!important;border-left:0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Open Sans",sans-serif!important;color:rgba(255,255,255,.65)!important}.carbonad-text{padding-top:0!important}.carbonad-tag{text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media screen and (min-width:768px){.carbonad{width:360px!important;border-right:1px solid rgba(255,255,255,.1)!important;border-bottom:1px solid rgba(255,255,255,.1)!important;border-left:1px solid rgba(255,255,255,.1)!important;border-radius:3px!important}}.docs-sub-content{position:relative;padding:55px 15px 65px;overflow:hidden;color:#fff;text-align:center}.docs-sub-content .page-title,.docs-sub-content .page-description{margin-top:0;margin-bottom:0;font-weight:300}.docs-sub-content .page-title{margin-bottom:5px;font-size:40px}.docs-sub-content .page-description{font-size:24px;color:#fff;opacity:.7}@media screen and (min-width:768px){.docs-sub-content{margin-right:380px;text-align:left}}.docs-section{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #ddd}.docs-section:last-child{border-bottom:0}@media screen and (min-width:768px){.docs-module{margin-top:35px}}.docs-module{padding:20px;margin-top:20px;border:1px solid #ddd;border-radius:3px}.docs-module .mui-btn-block{margin-bottom:0}.version{margin-top:10px;margin-bottom:0;font-size:90%;color:#777}.docs-footer{padding:30px 20px;margin-top:50px;font-size:14px;color:#777;text-align:center;border-top:1px solid #ddd}.docs-footer .social{padding:0 0 20px;margin:0;list-style:none}.docs-footer .social li{display:inline-block;height:20px;vertical-align:top}.docs-footer .social .twitter-follow-button{margin-top:5px}@media screen and (min-width:768px){.docs-footer .social .twitter-follow-button{margin-top:0}}.docs-footer-text{margin-top:0;margin-bottom:0}@media screen and (min-width:768px){.docs-footer-text{width:550px;padding-right:0;padding-left:0;margin:0 auto}}.docs-footer-links{padding-left:0}.docs-footer-links li{display:inline;padding-right:3px;padding-left:3px}.docs-header .docs-footer{margin-top:0;border-top:1px solid rgba(255,255,255,.1)}.docs-header .docs-footer .docs-footer-text,.docs-header .docs-footer .docs-footer-links{color:rgba(255,255,255,.5)}.docs-header .docs-footer .docs-footer-text a,.docs-header .docs-footer .docs-footer-links a{color:rgba(255,255,255,.8)}.github-btn{overflow:hidden;border:0}.docs-component-toolbar{position:fixed;top:0;right:0;bottom:auto;left:0;z-index:20;height:44px;padding-top:8px;padding-bottom:8px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;transition:transform .5s;-webkit-transform:translate3d(0,-55px,0);-ms-transform:translate3d(0,-55px,0);transform:translate3d(0,-55px,0)}.docs-component-toolbar.visible{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.docs-component-toolbar .mui-segmented-control{max-width:300px;margin:0 auto}.docs-component-toolbar .mui-segmented-control .mui-control-item{cursor:pointer}.docs-examples{margin-top:30px}.example-wrap{margin-bottom:30px}.example-wrap .example{display:block;width:100%;padding:3px;overflow:hidden;border:1px solid #ddd;border-radius:3px}.example-wrap .example-title{margin-top:10px}.example-wrap img{display:block;width:100%;height:auto}code{padding:2px 4px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:90%;background-color:#f9f9f9;border-radius:3px} \ No newline at end of file
.component{padding:50px 15px;margin-right:-15px;margin-left:-15px;border-bottom:1px solid #ddd}.component.no-border{border-bottom:0}@media screen and (min-width:768px){.component{border-bottom:0}}.component-title{margin-bottom:10px;font-size:24px;line-height:34px}.component-description{margin-bottom:15px;font-size:16px}.component-example{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}.component-example,.component-example .mui-bar,.component-example .mui-content{position:relative}.component-example .mui-bar{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.component-example .mui-bar.mui-bar-header-secondary{top:0!important;border-top:0}.component-example>.mui-content-padded{margin:15px}.component-example>.mui-card{margin:15px 0 0}.component-example>.mui-card .mui-control-content{padding:15px}.component-example>.mui-btn,.component-example>.mui-toggle{margin-bottom:10px}.component-example .slider{height:300px}.component-example .slider .slide{height:300px}.component-example .slide img{width:100%}.component-example .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.component-example-fullbleed,.highlight{margin-right:-15px;margin-left:-15px}.bar-nav ~ .mui-content{padding:0}.highlight pre{padding:15px;margin-top:15px;overflow-x:auto;font-size:13px;color:#777;word-wrap:normal;white-space:pre;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.highlight pre code{padding:0}@media screen and (min-width:768px){.component,.component-example-fullbleed,.highlight{margin-right:0;margin-left:0}.component{padding-right:0;padding-left:0;opacity:.3;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.component.active{opacity:1}.component-example{display:none}.highlight pre{border-right:1px solid #ddd;border-left:1px solid #ddd;border-radius:3px}}#muiicons .mui-icon,#muiiconsInDevice .mui-icon{width:50px;height:50px;margin:3px;font-size:24px;line-height:50px;text-align:center;background-color:#fff;border:1px solid #ddd;border-radius:25px}#modals .mui-modal{left:0;z-index:50}#push .component-example{height:150px;overflow:hidden}#buttonsInDevice .mui-btn,#buttonsBadgesInDevice .mui-btn,#buttonsWithIconsInDevice .mui-btn{margin-top:10px;margin-right:100px;margin-left:10px}#blockButtonsInDevice .mui-btn-block{width:300px;margin:10px auto}#segmentedControlsInDevice .mui-segmented-control{margin-top:10px;margin-right:10px;margin-left:10px}#segmentedControlsInDevice .mui-card span{padding:10px}#badgesInDevice{text-align:center}#badgesInDevice .mui-badge{margin-top:10px}#formsInDevice form{margin:10px}#formsInDevice form.mui-input-group{margin:0}#togglesInDevice .mui-toggle{margin:10px auto}.mui-toggle{cursor:pointer}#popoversInDevice #iwindow:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:11;content:'';background-color:rgba(0,0,0,.3)}@media screen and (min-width:768px){.mui-popover{position:absolute;top:72px;display:block;opacity:1}}#modalsInDevice #iwindow>.mui-btn{margin:10px}@media screen and (min-width:768px){.slider .slide{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.slider .slide img{display:block;width:100%;height:570px}.slider .slide-group .slide-text{position:absolute;top:45%;left:0;width:100%;font-size:24px;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}}.device{display:none;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px}@media screen and (min-width:768px){.device{position:relative;top:50px;display:block;width:395px;height:813px;margin-left:-20px;font-family:"Helvetica Neue",sans-serif;background-image:url("../img/device-sprite.png");background-repeat:no-repeat;background-position:0 0;background-size:300%;-webkit-transition:background-image .1s linear;-moz-transition:background-image .1s linear;transition:background-image .1s linear}.device.device-fixed{position:fixed;right:auto}.device .device-content{position:absolute;top:117px;left:37px;width:321px;height:569px;overflow:hidden;font-size:17px;line-height:21px;background-color:#fff}.device .mui-content,.device .mui-bar,.device .mui-modal{position:absolute}.device .mui-content{top:44px;right:0;bottom:0;left:0}}@media screen and (min-width:1200px){.device{margin-left:39px}}hr{height:0;margin:10px 0 30px;clear:both;border:solid #ddd;border-width:1px 0 0}.column-group:before,.column-group:after{display:table;content:" "}.column-group:after{clear:both}.container{position:relative;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}.column-group{width:auto}.column{float:left;width:100%;padding-right:15px;padding-left:15px}.column.mui-pull-right{float:right}.column .column-group{margin-right:-15px;margin-left:-15px}@media screen and (min-width:768px){.container{max-width:940px;padding:0}
.lg-units-4{width:33.333%}.lg-units-5{width:41.666%}.lg-units-7{width:58.333%}.lg-units-8{width:66.666%}}@media screen and (min-width:1200px){.container{max-width:1170px}}@-webkit-keyframes fadeintext{0%{opacity:0}100%{opacity:1}}.bs-callout{padding:20px;margin:20px 0;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.list-group{padding-left:0;margin-bottom:20px}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group .team-member{font-size:14px;line-height:32px;color:#555}.list-group img{float:left;width:32px;margin-right:10px;border-radius:4px}.list-group .team-member-info{overflow:hidden}.list-group .github-btn{float:right;width:121px;height:20px;margin-top:6px}
\ No newline at end of file
...@@ -70,40 +70,20 @@ $(function() { ...@@ -70,40 +70,20 @@ $(function() {
var nav = $('.docs-nav-group'); var nav = $('.docs-nav-group');
var trigger = $('.js-docs-nav-trigger'); var trigger = $('.js-docs-nav-trigger');
trigger.toggleClass('active'); trigger.toggleClass('mui-active');
nav.toggleClass('active'); nav.toggleClass('mui-active');
}); });
navComponentLinks.click(function(e) { navComponentLinks.click(function(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
componentsList.toggleClass('active'); componentsList.toggleClass('mui-active');
}); });
doc.on('click', function () { doc.on('click', function () {
componentsList.removeClass('active'); componentsList.removeClass('mui-active');
}); });
// Platform switcher
$('.platform-switch').on('click', function () {
var components = $('.docs-components');
var platform = $(this).attr('data-platform');
// Set platform
if (components.hasClass('platform-ios')) {
components.removeClass('platform-ios');
components.addClass(platform);
} else if (components.hasClass('platform-android')) {
components.removeClass('platform-android');
components.addClass(platform);
} else {
components.addClass(platform);
}
// Deal with active states
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
});
win.on('scroll', calculateScroll); win.on('scroll', calculateScroll);
win.on('scroll', calculateToggle); win.on('scroll', calculateToggle);
...@@ -153,16 +133,16 @@ $(function() { ...@@ -153,16 +133,16 @@ $(function() {
return; return;
} }
currentActive = l; currentActive = l;
bod.find('.component.active').removeClass('active'); bod.find('.component.mui-active').removeClass('mui-active');
contentSectionItem = $(contentSection[l]); contentSectionItem = $(contentSection[l]);
contentSectionItem.addClass('active'); contentSectionItem.addClass('mui-active');
if (contentSectionItem.attr('id')) { if (contentSectionItem.attr('id')) {
device.attr('id', contentSectionItem.attr('id') + 'InDevice'); device.attr('id', contentSectionItem.attr('id') + 'InDevice');
} else { } else {
device.attr('id', ''); device.attr('id', '');
} }
if (!contentSectionItem.hasClass('informational')) { if (!contentSectionItem.hasClass('informational')) {
updateContent(contentSectionItem.find('.highlight .html').text()); updateContent(contentSectionItem.find('.highlight .language-html').text());
} }
break; break;
} }
...@@ -179,7 +159,7 @@ $(function() { ...@@ -179,7 +159,7 @@ $(function() {
toolbarToggle.addClass('visible'); toolbarToggle.addClass('visible');
} else if (currentTop <= headerHeight) { } else if (currentTop <= headerHeight) {
toolbarToggle.removeClass('visible'); toolbarToggle.removeClass('visible');
componentsList.removeClass('active'); componentsList.removeClass('mui-active');
} }
}; };
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Notes</title> <title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mail</title> <title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mail</title> <title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Movie finder</title> <title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Movie finder</title> <title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Examples &middot; Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans:400,300">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-examples docs-content">
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<div class="column-group">
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-movies" data-ignore="push">
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
</a>
<h4 class="example-title">Movie finder</h4>
</div>
</div>
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-ios-mail" data-ignore="push">
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
</a>
<h4 class="example-title">iOS mail app</h4>
</div>
</div>
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-android-notes" data-ignore="push">
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
</a>
<h4 class="example-title">Android notes app</h4>
</div>
</div> <!-- .column-group -->
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
</li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div>
</div>
</body>
</html>
favicon.ico

8.15 KB

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新手指南 &middot; MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<head> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css">
<meta charset="utf-8"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新手指南 &middot; MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="mui-icon" href="/mui/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/mui/dist/css/mui.min.css"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="/mui/assets/css/docs.css">
<link rel="apple-touch-mui-icon-precomposed" sizes="114x114" href="/mui/assets/img/apple-touch-mui-icon-114x114.png">
</head> </head>
<body ontouchstart="">
<body ontouchstart=""> <!--[if lt IE 9]>
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Attention!</h4> <h4>Attention!</h4>
<p> <p>
...@@ -29,64 +28,62 @@ ...@@ -29,64 +28,62 @@
</div> </div>
<![endif]--> <![endif]-->
<div class="docs-sub-header"> <div class="docs-sub-header">
<header class="docs-masthead mui-clearfix"> <header class="docs-masthead mui-clearfix">
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<h1 class="docs-title"><a href="/">MUI</a></h1> <h1 class="docs-title">
<nav class="docs-nav mui-clearfix"> <a href="http://dcloudio.github.io/mui/" >MUI</a>
<a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a> </h1>
<div class="docs-nav-group"> <nav class="docs-nav mui-clearfix">
<a class="docs-nav-item" href="/mui/">首页</a> <a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<a class="docs-nav-item" href="/mui/getting-started">新手指南</a> <div class="docs-nav-group">
<a class="docs-nav-item" href="/mui/components">CSS组件</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="/mui/examples">JavaScript</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="/mui/about">关于</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="https://github.com/dcloudio/mui">GitHub 地址</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
</div> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a>
</nav> <a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div> </div>
</div> </nav>
</header> </div>
</div>
<div class="container"> </header>
<div class="docs-sub-content">
<h2 class="page-title">Getting started</h2> <div class="container">
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p> <div class="docs-sub-content">
</div> <h2 class="page-title">Getting started</h2>
</div> <p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div> </div>
</div>
<div class="container"> </div>
<div class="column-group">
<div class="column lg-units-8 docs-content"> <div class="container">
<div class="docs-section"> <div class="column-group">
<h2>Quick start</h2> <div class="column lg-units-8 docs-content">
<p class="lead">Quickly get up and running with a Ratchet app.</p> <div class="docs-section">
<h2>Quick start</h2>
<h3>1. Create your pages</h3> <p class="lead">Quickly get up and running with a Ratchet app.</p>
<p>Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>.
Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p> <h3>1. Create your pages</h3>
<p>Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p>
<h3>2. Connect pages with push.js</h3>
<p>Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating <h3>2. Connect pages with push.js</h3>
touch events. <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) <p>Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) if you're not sure how to do that.</p>
if you're not sure how to do that.</p>
<h3>3. Save the app to your phone</h3>
<h3>3. Save the app to your phone</h3> <p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the </div>
<span class="mui-icon mui-icon-share"></span>button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
</div> <div class="docs-section">
<h2>What's included</h2>
<div class="docs-section"> <p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h2>What&#8217;s included</h2>
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<h3>Precompiled Ratchet</h3> <!-- NOTE: This info is intentionally duplicated in the README.
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. --> Copy any changes made here over to the README too. -->
<div class="highlight"><pre><code class="bash">ratchet/ <div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── css/ ├── css/
│ ├── ratchet.css │ ├── ratchet.css
│ ├── ratchet.min.css │ ├── ratchet.min.css
...@@ -101,16 +98,13 @@ Copy any changes made here over to the README too. --> ...@@ -101,16 +98,13 @@ Copy any changes made here over to the README too. -->
├── ratchicons.eot ├── ratchicons.eot
├── ratchicons.svg ├── ratchicons.svg
├── ratchicons.ttf ├── ratchicons.ttf
└── ratchicons.woff └── ratchicons.woff</code></pre></div>
</code></pre>
</div>
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon <p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3> <h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p> <p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<div class="highlight"><pre><code class="bash">ratchet/ <div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── sass/ ├── sass/
├── js/ ├── js/
├── fonts/ ├── fonts/
...@@ -119,42 +113,39 @@ Copy any changes made here over to the README too. --> ...@@ -119,42 +113,39 @@ Copy any changes made here over to the README too. -->
│ ├── js/ │ ├── js/
│ └── fonts/ │ └── fonts/
└── docs/ └── docs/
└── examples/ └── examples/</code></pre></div>
</code></pre>
</div>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and mui-icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder <p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p> </div>
</div>
<div class="docs-section"> <div class="docs-section">
<h2>Page setup</h2> <h2>Page setup</h2>
<p class="lead">Three simple rules for structuring your Ratchet pages</p> <p class="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3> <h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p> <p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3> <h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p> <p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3> <h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p> <p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important for Ratchet to work just right.</p>
</div> </div>
<div class="docs-section"> <div class="docs-section">
<h2 id="pageLayout">Basic template</h2> <h2 id="pageLayout">Basic template</h2>
<p class="lead">Use this basic template to get your app started.</p> <p class="lead">Use this basic template to get your app started.</p>
<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span> <span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span> <span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;utf-8&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;utf-8&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;title&gt;</span>Ratchet template page<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;title&gt;</span>Ratchet template page<span class="nt">&lt;/title&gt;</span>
<span class="c">&lt;!-- Sets initial viewport load and disables zooming --&gt;</span> <span class="c">&lt;!-- Sets initial viewport load and disables zooming --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;initial-scale=1, maximum-scale=1&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Makes your prototype chrome-less once bookmarked to your phone&#39;s home screen --&gt;</span> <span class="c">&lt;!-- Makes your prototype chrome-less once bookmarked to your phone&#39;s home screen --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-capable&quot;</span> <span class="na">content=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-capable&quot;</span> <span class="na">content=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>
...@@ -164,7 +155,7 @@ Copy any changes made here over to the README too. --> ...@@ -164,7 +155,7 @@ Copy any changes made here over to the README too. -->
<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&quot;ratchet.css&quot;</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&quot;ratchet.css&quot;</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Include the compiled Ratchet JS --&gt;</span> <span class="c">&lt;!-- Include the compiled Ratchet JS --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ratchet.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;mui.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span> <span class="nt">&lt;body&gt;</span>
...@@ -203,68 +194,69 @@ Copy any changes made here over to the README too. --> ...@@ -203,68 +194,69 @@ Copy any changes made here over to the README too. -->
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span> <span class="nt">&lt;/html&gt;</span></code></pre></div>
</code></pre> </div>
</div>
</div>
<div class="docs-section">
<h2>Community</h2>
<div class="docs-section"> <p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<h2>Community</h2> <ol>
<p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p> <li>
<ol> <p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
<li> </li>
<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p> <li>
</li> <p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
<li> </li>
<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p> <li>
</li> <p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
<li> </li>
<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p> </ol>
</li> <p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</ol> </div>
<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p> </div>
</div>
</div> <div class="column lg-units-4">
<div class="docs-module">
<div class="column lg-units-4"> <h4 class="docs-module-title">Ratchet</h4>
<div class="docs-module"> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<h4 class="docs-module-title">Ratchet</h4> <a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p class="version">Currently v2.0.2</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a> </div>
<p class="version">Currently v2.0.2</p>
</div> <div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<div class="docs-module"> <p>If you haven't already, download the source code for Ratchet.</p>
<h4 class="docs-module-title">Source code</h4> <a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
<p>If you haven't already, download the source code for Ratchet.</p> </div>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div> </div>
</div>
</div>
</div> <div class="column">
<!-- Footer -->
<div class="column"> <div class="docs-footer">
<!-- Footer --> <p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
<div class="docs-footer"> </p>
<p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
</p> <ul class="docs-footer-links">
<li>最新版本 v0.5.3</li>
<ul class="docs-footer-links"> <li>&middot;</li>
<li>最新版本 v0.5.3</li> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
<li>&middot;</li> </li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li>&middot;</li>
</li> <li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
<li>&middot;</li> </li>
<li><a href="https://github.com/dcloudio/mui/releases">Releases</a> <li>&middot;</li>
</li> </ul>
<li>&middot;</li> </div>
</ul> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
</div> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js"></script>
</div> <script src="http://dcloudio.github.io/mui/assets/js/docs.js"></script>
</div>
</div>
</body> </div>
</body>
</html> </html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<head> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css">
<meta charset="utf-8"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="mui-icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="dist/css/mui.min.css">
<link rel="stylesheet" href="assets/css/docs.css">
<link rel="apple-touch-mui-icon-precomposed" sizes="114x114" href="assets/img/apple-touch-mui-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
</head> </head>
<body class="docs-home" ontouchstart="">
<body class="docs-home" ontouchstart=""> <!--[if lt IE 9]>
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Attention!</h4> <h4>Attention!</h4>
<p> <p>
...@@ -29,51 +28,56 @@ ...@@ -29,51 +28,56 @@
</div> </div>
<![endif]--> <![endif]-->
<div class="docs-header"> <div class="docs-header">
<header class="docs-masthead mui-clearfix"> <header class="docs-masthead mui-clearfix">
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<h1 class="docs-title"><a href="/mui/">MUI</a></h1> <h1 class="docs-title">
<nav class="docs-nav mui-clearfix"> <a href="http://dcloudio.github.io/mui/" >MUI</a>
<a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a> </h1>
<div class="docs-nav-group"> <nav class="docs-nav mui-clearfix">
<a class="docs-nav-item" href="/mui/">首页</a> <a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<a class="docs-nav-item" href="/mui/getting-started">新手指南</a> <div class="docs-nav-group">
<a class="docs-nav-item" href="/mui/components">CSS组件</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="/mui/examples">JavaScript</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="/mui/about">关于</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="https://github.com/dcloudio/mui">GitHub 地址</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
</div> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a>
</nav> <a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div> </div>
</div> </nav>
</header> </div>
</div>
</header>
<div class="docs-header-content"> <div class="docs-header-content">
<p class="docs-subtitle">最接近原生APP体验的高性能前端框架</p> <p class="docs-subtitle">最接近原生APP体验的高性能前端框架</p>
<a href="https://github.com/dcloudio/mui/" class="mui-btn mui-btn-primary">下载</a> <a href="https://github.com/dcloudio/mui/" class="mui-btn mui-btn-primary">下载</a>
<p class="version">最新版本 v0.5.3</p> <p class="version">最新版本:V0.5.3</p>
</div> </div>
<div class="docs-header-bottom"> <div class="docs-header-bottom">
<div class="docs-footer"> <div class="docs-footer">
<p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a> <p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.3</li> <li>最新版本 v0.5.3</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/releases">Releases</a> <li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
</li> </li>
<li>&middot;</li> <li>&middot;</li>
</ul> </ul>
</div> </div>
</div> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
</div> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.js"></script>
</body> </div>
</div>
</body>
</html> </html>
...@@ -4,32 +4,17 @@ ...@@ -4,32 +4,17 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Examples &middot; Ratchet</title> <title>Examples &middot; Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components."> <meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="author" content="Connor Sears"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<link rel="icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts --> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans:400,300"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css">
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
...@@ -44,21 +29,21 @@ ...@@ -44,21 +29,21 @@
<![endif]--> <![endif]-->
<div class="docs-sub-header"> <div class="docs-sub-header">
<header class="docs-masthead clearfix"> <header class="docs-masthead mui-clearfix">
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<h1 class="docs-title"> <h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a> <a href="http://dcloudio.github.io/mui/" >MUI</a>
</h1> </h1>
<nav class="docs-nav clearfix"> <nav class="docs-nav mui-clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> <a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group"> <div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> <a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div> </div>
</nav> </nav>
</div> </div>
...@@ -70,8 +55,6 @@ ...@@ -70,8 +55,6 @@
<h2 class="page-title">Examples</h2> <h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p> <p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div> </div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div> </div>
</div> </div>
...@@ -129,45 +112,23 @@ ...@@ -129,45 +112,23 @@
<div class="column"> <div class="column">
<!-- Footer --> <!-- Footer -->
<div class="docs-footer"> <div class="docs-footer">
<!-- Social links --> <p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
<ul class="social"> </p>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe> <ul class="docs-footer-links">
</li> <li>最新版本 v0.5.3</li>
<li> <li>&middot;</li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> <li>&middot;</li>
Follow @GoRatchet</a> <li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
</li> </li>
</ul> <li>&middot;</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>&middot;</li>
<li><a href="http://dcloudio.github.io/mui/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js"></script>
<script> <script src="http://dcloudio.github.io/mui/assets/js/docs.js"></script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div> </div>
</div> </div>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<header class="bar bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="/two.html" data-transition="slide-in" data-selector=".device-content">
Load new page with push
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://dcloudio.github.io/mui/</loc> <loc>http://dcloudio.github.io/mui/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod> <lastmod>2014-08-29T22:31:33+08:00</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/about/</loc> <loc>http://dcloudio.github.io/mui/about/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod> <lastmod>2014-08-29T22:31:33+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/components/</loc> <loc>http://dcloudio.github.io/mui/components/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod> <lastmod>2014-08-29T22:31:33+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -27,22 +27,22 @@ ...@@ -27,22 +27,22 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/examples/</loc> <loc>http://dcloudio.github.io/mui/getting-started/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod> <lastmod>2014-08-29T22:31:33+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc> <loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-04-02T08:50:45-07:00</lastmod> <lastmod>2014-08-29T22:31:33+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
</urlset> </urlset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="/one.html" data-transition="slide-out"></a>
<h1 class="title">Page two</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a href="/one.html" data-transition="slide-out">Tap or click here to go back. You can also try your browser's back button.</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment