<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Topcoat</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../css/topcoat-mobile-light.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/brackets.css"><!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body class="light">
    <div id="wrapper">
      <div class="max-width">
        <div id="sideNav">
          <nav class="site">
            <ul>
              <li><a href="http://topcoat.io">Home</a></li>
              <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
              <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
              <li><a href="http://topcoat.io/blog">Blog</a></li>
            </ul>
          </nav>
          <div class="combo">
            <select class="docNav">
              <option value="index.html">Topcoat Desktop Dark</option>
              <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>
              <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>
              <option value="topcoat-mobile-light.html" selected="selected">Topcoat Mobile Light</option>
            </select>
          </div>
          <div id="pageNav">
            <ul>
              <li><a href="#button-bar">Button Bar</a></li>
              <li><a href="#large-buttonbar">Large Button Bar</a></li>
              <li><a href="#button">Button</a></li>
              <li><a href="#quiet-button">Quiet Button</a></li>
              <li><a href="#large-button">Large Button</a></li>
              <li><a href="#large-quietbutton">Large Quiet Button</a></li>
              <li><a href="#call-toaction button">Call To Action Button</a></li>
              <li><a href="#large-callto action button">Large Call To Action Button</a></li>
              <li><a href="#checkbox">Checkbox</a></li>
              <li><a href="#icon-button">Icon Button</a></li>
              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>
              <li><a href="#large-iconbutton">Large Icon Button</a></li>
              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>
              <li><a href="#list">List</a></li>
              <li><a href="#navigation-bar">Navigation Bar</a></li>
              <li><a href="#notification">Notification</a></li>
              <li><a href="#radio-button">Radio Button</a></li>
              <li><a href="#range">Range</a></li>
              <li><a href="#search-input">Search Input</a></li>
              <li><a href="#large-searchinput">Large Search Input</a></li>
              <li><a href="#switch">Switch</a></li>
              <li><a href="#tab-bar">Tab Bar</a></li>
              <li><a href="#text-input">Text input</a></li>
              <li><a href="#large-textinput">Large Text Input</a></li>
              <li><a href="#textarea">Textarea</a></li>
              <li><a href="#large-textarea">Large Textarea</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="site">
        <header id="main-header">
          <div class="max-width">
            <hgroup>
              <h1><a href="http://topcoat.io">Topcoat</a></h1>
              <p>CSS for clean and fast web apps</p>
            </hgroup>
            <nav>
              <ul>
                <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
                <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
                <li><a href="http://topcoat.io/blog">Blog</a></li>
                <li><a id="download-btn" href="https://github.com/topcoat/topcoat/archive/v0.7.0.zip" onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);">Download</a></li>
              </ul>
            </nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>
          </div>
        </header>
        <div id="content" class="max-width">
          <article id="button-bar" class="component">
            <header>
              <h2>Button Bar</h2>
            </header>
            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,
.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {
  border-right: none;
}

.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,
.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {
  border-left: none;
}

.topcoat-button-bar__button {
  border-radius: inherit;
}

.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
  z-index: 1;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-buttonbar" class="component">
            <header>
              <h2>Large Button Bar</h2>
            </header>
            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button-bar__button--large {
  border-radius: inherit;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="button" class="component">
            <header>
              <h2>Button</h2>
            </header>
            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  padding: 0 1.25rem;
  font-size: 16px;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #a5a8a8;
  border-radius: 6px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
  background-color: #edf1f1;
}

.topcoat-button:active,
.topcoat-button--large:active {
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
  outline: 0;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="quiet-button" class="component">
            <header>
              <h2>Quiet Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #a5a8a8;
  box-shadow: inset 0 1px #fff;
}

.topcoat-button--quiet:active,
.topcoat-button--large--quiet:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d3d7d7;
  border: 1px solid #a5a8a8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-button" class="component">
            <header>
              <h2>Large Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 4.375rem;
  padding: 0 1.25rem;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-quietbutton" class="component">
            <header>
              <h2>Large Quiet Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="call-toaction button" class="component">
            <header>
              <h2>Call To Action Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #143250;
  background-color: #288edf;
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background-color: #509bef;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background-color: #0380e8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-callto action button" class="component">
            <header>
              <h2>Large Call To Action Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large--cta {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 4.375rem;
  padding: 0 1.25rem;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;checkbox&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after {
  content: '';
  position: absolute;
}

.checkbox:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;checkbox&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox,
.topcoat-checkbox__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label,
.topcoat-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled,
input[type=&quot;checkbox&quot;]:disabled + .topcoat-checkbox__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
  content: '';
  position: absolute;
}

.checkbox:before,
.topcoat-checkbox__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="checkbox" class="component">
            <header>
              <h2>Checkbox</h2>
            </header>
            <section class="component"><label class="topcoat-checkbox">  <input type="checkbox">  <div class="topcoat-checkbox__checkmark"></div>  Default</label><br><br><label class="topcoat-checkbox">  <input type="checkbox" disabled>  <div class="topcoat-checkbox__checkmark"></div>  Disabled</label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-checkbox__checkmark {
  height: 2rem;
}

input[type=&quot;checkbox&quot;] {
  height: 2rem;
  width: 2rem;
  margin-top: 0;
  margin-right: -2rem;
  margin-bottom: -2rem;
  margin-left: 0;
}

input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {
  opacity: 1;
}

.topcoat-checkbox {
  line-height: 2rem;
}

.topcoat-checkbox__checkmark:before {
  width: 2rem;
  height: 2rem;
  background: #e5e9e8;
  border: 1px solid #a5a8a8;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-checkbox__checkmark {
  width: 2rem;
  height: 2rem;
}

.topcoat-checkbox__checkmark:after {
  top: 1px;
  left: 2px;
  opacity: 0;
  width: 28px;
  height: 11px;
  background: transparent;
  border: 7px solid #666;
  border-width: 7px;
  border-top: none;
  border-right: none;
  border-radius: 2px;
  -webkit-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-icon-button:disabled,
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large--quiet:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="icon-button" class="component">
            <header>
              <h2>Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button">  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button" disabled>  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  padding: 0 0.75rem;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: baseline;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #a5a8a8;
  border-radius: 6px;
}

.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
  background-color: #edf1f1;
}

.topcoat-icon-button:active {
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}

.topcoat-icon-button:focus,
.topcoat-icon-button--quiet:focus,
.topcoat-icon-button--quiet:hover:focus,
.topcoat-icon-button--large:focus,
.topcoat-icon-button--large--quiet:focus,
.topcoat-icon-button--large--quiet:hover:focus {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
  outline: 0;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="quiet-iconbutton" class="component">
            <header>
              <h2>Quiet Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--quiet">  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--quiet" disabled>  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #a5a8a8;
  box-shadow: inset 0 1px #fff;
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--large--quiet:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d3d7d7;
  border: 1px solid #a5a8a8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-iconbutton" class="component">
            <header>
              <h2>Large Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--large">  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--large" disabled>  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  width: 4.375rem;
  height: 4.375rem;
  line-height: 4.375rem;
}

.topcoat-icon-button--large:active {
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-quieticon button" class="component">
            <header>
              <h2>Large Quiet Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--large--quiet">  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--large--quiet" disabled>  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 1.62rem;
  height: 1.62rem;
  vertical-align: middle;
  top: -1px;
}

.topcoat-icon--large {
  width: 2.499999998125rem;
  height: 2.499999998125rem;
  top: -2px;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list__header {
  margin: 0;
}

.list__container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list__item {
  margin: 0;
  padding: 0;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.list,
.topcoat-list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list__header,
.topcoat-list__header {
  margin: 0;
}

.list__container,
.topcoat-list__container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list__item,
.topcoat-list__item {
  margin: 0;
  padding: 0;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="list" class="component">
            <header>
              <h2>List</h2>
            </header>
            <section class="component"><div class="topcoat-list">  <h3 class="topcoat-list__header">Category</h3>  <ul class="topcoat-list__container">    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>  </ul></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-list&quot;&gt;  &lt;h3 class=&quot;topcoat-list__header&quot;&gt;Category&lt;/h3&gt;  &lt;ul class=&quot;topcoat-list__container&quot;&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-list {
  border-top: 1px solid #bcbfbf;
  border-bottom: 1px solid #eff1f1;
  background-color: #dfe2e2;
}

.topcoat-list__header {
  padding: 4px 20px;
  font-size: 0.9em;
  font-weight: 400;
  background-color: #cccfcf;
  color: #656565;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.23);
}

.topcoat-list__container {
  border-top: 1px solid #bcbfbf;
  color: #454545;
}

.topcoat-list__item {
  padding: 1.25rem;
  border-top: 1px solid #eff1f1;
  border-bottom: 1px solid #bcbfbf;
}

.topcoat-list__item:first-child {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.navigation-bar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-bar__item {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.navigation-bar,
.topcoat-navigation-bar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-bar__item,
.topcoat-navigation-bar__item {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.navigation-bar__title,
.topcoat-navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="navigation-bar" class="component">
            <header>
              <h2>Navigation Bar</h2>
            </header>
            <section class="component"><div class="topcoat-navigation-bar">    <div class="topcoat-navigation-bar__item center full">        <h1 class="topcoat-navigation-bar__title">Header</h1>    </div></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-navigation-bar&quot;&gt;    &lt;div class=&quot;topcoat-navigation-bar__item center full&quot;&gt;        &lt;h1 class=&quot;topcoat-navigation-bar__title&quot;&gt;Header&lt;/h1&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-navigation-bar {
  height: 4.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: #e5e9e8;
  color: #000;
  box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6;
}

.topcoat-navigation-bar__item {
  margin: 0;
  line-height: 4.375rem;
  vertical-align: top;
}

.topcoat-navigation-bar__title {
  font-size: 1.3rem;
  font-weight: 400;
  color: #000;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification,
.topcoat-notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="notification" class="component">
            <header>
              <h2>Notification</h2>
            </header>
            <section class="component"><span class="topcoat-notification">1</span></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-notification {
  padding: 0.15em 0.5em 0.2em;
  border-radius: 2px;
  background-color: #ec514e;
  color: #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;radio&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;radio&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button,
.topcoat-radio-button__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label,
.topcoat-radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after,
.topcoat-radio-button__checkmark:before,
.topcoat-radio-button__checkmark:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after,
.topcoat-radio-button__checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before,
.topcoat-radio-button__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled,
input[type=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="radio-button" class="component">
            <header>
              <h2>Radio Button</h2>
            </header>
            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
input[type=&quot;radio&quot;] {
  height: 1.875rem;
  width: 1.875rem;
  margin-top: 0;
  margin-right: -1.875rem;
  margin-bottom: -1.875rem;
  margin-left: 0;
}

input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {
  opacity: 1;
}

.topcoat-radio-button {
  color: #454545;
  line-height: 1.875rem;
}

.topcoat-radio-button__checkmark:before {
  width: 1.875rem;
  height: 1.875rem;
  background: #e5e9e8;
  border: 1px solid #a5a8a8;
  box-shadow: inset 0 1px #fff;
}

.topcoat-radio-button__checkmark {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
}

.topcoat-radio-button__checkmark:after {
  opacity: 0;
  width: 0.875rem;
  height: 0.875rem;
  background: #666;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px rgba(255,255,255,0.5);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  top: 7px;
  left: 7px;
}

input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb {
  cursor: pointer;
}

.range__thumb--webkit {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range,
.topcoat-range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb,
.topcoat-range::-moz-range-thumb {
  cursor: pointer;
}

.range__thumb--webkit,
.topcoat-range::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled,
.topcoat-range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="range" class="component">
            <header>
              <h2>Range</h2>
            </header>
            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-range {
  border-radius: 6px;
  border: 1px solid #a5a8a8;
  background-color: #d3d7d7;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-moz-range-track {
  border-radius: 6px;
  border: 1px solid #a5a8a8;
  background-color: #d3d7d7;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-webkit-slider-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #a5a8a8;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range::-moz-range-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #a5a8a8;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range:focus::-webkit-slider-thumb {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-range:focus::-moz-range-thumb {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type=&quot;search&quot;]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input,
.topcoat-search-input,
.topcoat-search-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type=&quot;search&quot;]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled,
.topcoat-search-input:disabled,
.topcoat-search-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="search-input" class="component">
            <header>
              <h2>Search Input</h2>
            </header>
            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-search-input,
.topcoat-search-input--large {
  line-height: 3rem;
  font-size: 16px;
  border: 1px solid #a5a8a8;
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
  color: #454545;
  padding: 0 0 0 2rem;
  border-radius: 30px;
  background-image: url(&quot;../img/search.svg&quot;);
  background-position: 1em center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
  background-image: url(&quot;../img/search_dark.svg&quot;);
  background-color: #edf1f1;
  color: #000;
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-search-input::-webkit-search-cancel-button,
.topcoat-search-input::-webkit-search-decoration,
.topcoat-search-input--large::-webkit-search-cancel-button,
.topcoat-search-input--large::-webkit-search-decoration {
  margin-right: 5px;
}

.topcoat-search-input:focus::-webkit-input-placeholder,
.topcoat-search-input:focus::-webkit-input-placeholder {
  color: #c6c8c8;
}

.topcoat-search-input:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-search-input:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-search-input:disabled:-ms-input-placeholder {
  color: #000;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-searchinput" class="component">
            <header>
              <h2>Large Search Input</h2>
            </header>
            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-search-input--large {
  line-height: 4.375rem;
  font-size: 1.3rem;
  font-weight: 200;
  padding: 0 0 0 2.9rem;
  border-radius: 40px;
  background-position: 1.2em center;
  background-size: 1.3rem;
}

.topcoat-search-input--large:disabled {
  color: #000;
}

.topcoat-search-input--large:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-search-input--large:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-search-input--large:disabled:-ms-input-placeholder {
  color: #000;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch,
.topcoat-switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input,
.topcoat-switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle,
.topcoat-switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after,
.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled,
.topcoat-switch__input:disabled + .topcoat-switch__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="switch" class="component">
            <header>
              <h2>Switch</h2>
            </header>
            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-switch {
  font-size: 16px;
  padding: 0 1.25rem;
  border-radius: 6px;
  border: 1px solid #a5a8a8;
  overflow: hidden;
  width: 6rem;
}

.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  top: -1px;
  width: 5rem;
}

.topcoat-switch__toggle:before {
  content: 'ON';
  color: #0083e8;
  background-color: #e0f0fa;
  right: 1rem;
  padding-left: 1.5rem;
}

.topcoat-switch__toggle {
  line-height: 3rem;
  height: 3rem;
  width: 2rem;
  border-radius: 6px;
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #e5e9e8;
  border: 1px solid #a5a8a8;
  margin-left: -1.3rem;
  margin-bottom: -1px;
  margin-top: -1px;
  box-shadow: inset 0 1px #fff;
  -webkit-transition: margin-left 0.05s ease-in-out;
  transition: margin-left 0.05s ease-in-out;
}

.topcoat-switch__toggle:after {
  content: 'OFF';
  background-color: #d3d7d7;
  left: 1rem;
  padding-left: 2rem;
}

.topcoat-switch__input:checked + .topcoat-switch__toggle {
  margin-left: 2.7rem;
}

.topcoat-switch__input:focus + .topcoat-switch__toggle {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
  background: transparent;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-tab-bar__button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-tab-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.button-bar,
.topcoat-tab-bar {
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.button-bar__item,
.topcoat-tab-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.button-bar__item &gt; input,
.topcoat-tab-bar__item &gt; input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.button-bar__button {
  border-radius: inherit;
}

.button-bar__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="tab-bar" class="component">
            <header>
              <h2>Tab Bar</h2>
            </header>
            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-tab-bar__button {
  padding: 0 1.25rem;
  height: 3rem;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border-top: 1px solid #a5a8a8;
}

.topcoat-tab-bar__button:active,
.topcoat-tab-bar__button--large:active,
:checked + .topcoat-tab-bar__button {
  color: #0083e8;
  background-color: #e0f0fa;
  box-shadow: inset 0 0 2px #c0ced8;
}

.topcoat-tab-bar__button:focus,
.topcoat-tab-bar__button--large:focus {
  z-index: 1;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input,
.topcoat-text-input,
.topcoat-text-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled,
.topcoat-text-input:disabled,
.topcoat-text-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="text-input" class="component">
            <header>
              <h2>Text input</h2>
            </header>
            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-text-input,
.topcoat-text-input--large {
  line-height: 3rem;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 0 1.25rem;
  border: 1px solid #a5a8a8;
  border-radius: 6px;
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
  color: #454545;
  vertical-align: top;
}

.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
  background-color: #edf1f1;
  color: #000;
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-text-input:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-text-input:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-text-input:disabled:-ms-input-placeholder {
  color: #000;
}

.topcoat-text-input:invalid {
  border: 1px solid #d83b75;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-textinput" class="component">
            <header>
              <h2>Large Text Input</h2>
            </header>
            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-text-input--large {
  line-height: 4.375rem;
  font-size: 1.3rem;
}

.topcoat-text-input--large:disabled {
  color: #000;
}

.topcoat-text-input--large:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-text-input--large:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-text-input--large:disabled:-ms-input-placeholder {
  color: #000;
}

.topcoat-text-input--large:invalid {
  border: 1px solid #d83b75;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea,
.topcoat-textarea,
.topcoat-textarea--large {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled,
.topcoat-textarea:disabled,
.topcoat-textarea--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="textarea" class="component">
            <header>
              <h2>Textarea</h2>
            </header>
            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-textarea,
.topcoat-textarea--large {
  padding: 2rem;
  font-size: 2.5rem;
  font-weight: 200;
  border-radius: 6px;
  line-height: 3rem;
  border: 1px solid #a5a8a8;
  background-color: #d3d7d7;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
  color: #454545;
  letter-spacing: 1px;
}

.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
  background-color: #edf1f1;
  color: #000;
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-textarea:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-textarea:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-textarea:disabled:-ms-input-placeholder {
  color: #000;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-textarea" class="component">
            <header>
              <h2>Large Textarea</h2>
            </header>
            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-textarea--large {
  font-size: 3rem;
  line-height: 4.375rem;
}

.topcoat-textarea--large:disabled {
  color: #000;
}

.topcoat-textarea--large:disabled::-webkit-input-placeholder {
  color: #000;
}

.topcoat-textarea--large:disabled::-moz-placeholder {
  color: #000;
}

.topcoat-textarea--large:disabled:-ms-input-placeholder {
  color: #000;
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);
  font-weight: 200;
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);
  font-weight: 600;
}

body {
  margin: 0;
  padding: 0;
  background: #dfe2e2;
  color: #000;
  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;
  font-weight: 200;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.topcoat-icon--menu-stack {
  background: url(&quot;../img/hamburger_dark.svg&quot;) no-repeat;
  background-size: cover;
}

.quarter {
  width: 25%;
}

.half {
  width: 50%;
}

.three-quarters {
  width: 75%;
}

.third {
  width: 33.333%;
}

.two-thirds {
  width: 66.666%;
}

.full {
  width: 100%;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.reset-ui {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* This file should include color and image variables corresponding to the dark theme */

/* Call To Action */

/* Icons */

/* Navigation Bar */

/* Text Input */

/* Search Input */

/* List */

/* Checkbox */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Textarea */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* This file should include color and image variables corresponding to the light theme */

/* Call To Action */

/* Icons */

/* Navigation Bar */

/* Text Input */

/* List */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Range input */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Containers */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Text Area */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* Text Input */

/* Radio input */

/* Overlay */

/* Textarea */

/* Progress bar container */

/* Progress bar progress */

/* Search input */

/* Switch */

/* Notification */</code></pre>
                </div>
              </section>
            </footer>
          </article>
        </div>
        <footer></footer>
      </div>
    </div>
    <script src="js/rainbow-custom.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>