blaze-css-rails 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4a87a4ea3ffb6d9414f5141a5b7510171ce0e6f4
-  data.tar.gz: 00e01985077425458e9e102ba455b3db5ad0e89e
+  metadata.gz: a47d120b99e12f9bb31c881dffb035c4c44d8257
+  data.tar.gz: 7e600a09724c5e8c6908f7e170d022cf7f8c1842
 SHA512:
-  metadata.gz: 7b7466dec3701dd2ccbfd938a75fcbbcc795ca0e560f97cf462f4126bf03af5ef152289b04f04a6f23474a0a271092171bb288afe8420453e9d8f395aa4bb451
-  data.tar.gz: 8d8ef134c438f29fa779addbce672848f57c19bcfb62f9be4776cb592f2dcd9f3d5b5fec93fa7d6716dd264c77bbace6ee4240180e26bd3b9a3e6fbe7f81e854
+  metadata.gz: 32169c49b1e876f9b38376da7fe3280132e0416c1218e24c581421e5c9cc6030625ff477b4fb96af71fc3ecd5147d7699fdaa095d4ba81795f41241b8aa2bb8a
+  data.tar.gz: d2dc6204ce2605c84302cf59f232d424c8f217cfa3b4999af4558936431eb8f3ba5c22c57d9386e9baca44ce9b1342c4cba52928eac04dbc8de5a2dfe1dd2cb7

data/lib/blaze/css/rails.rb

@@ -1,2 +1,10 @@
 require "blaze/css/rails/version"
-require "blaze/css/rails/engine" if defined?(::Rails)
+
+module Blaze
+  module Css
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/blaze/css/rails/version.rb

@@ -1,8 +1,8 @@
 module Blaze
   module Css
     module Rails
+      VERSION = "0.0.9"
       BLAZE_CSS_VERSION = "3.0.0"
-      VERSION = "0.0.8"
     end
   end
 end

data/vendor/assets/stylesheets/blaze.scss

@@ -0,0 +1 @@
+@import '../../blaze-css/scss/blaze';

data/vendor/blaze-css/CONTRIBUTING.md

@@ -0,0 +1,35 @@
+# Contributing
+
+First of all, Pull Requests, suggestions or comments about Blaze are all welcome and valued. To start contributing follow these steps:
+
+## Step 1
+
+**Fork the repo!**
+
+## Step 2
+
+Write some code...
+
+## Step 3
+
+**Submit your Pull Request to our DEV branch** so that we can review the code before merging into master.
+
+## Sit back
+
+At some point your changes will get merged in and we'll publish a new version! Yay!
+
+---
+#### Code Conduct
+We're all friends! Please try and adhere to our simple rules 
+
+**Be friendly and patient**.
+
+**Be welcoming**: We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
+
+**Be considerate**: Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that we’re a world-wide community, so you might not be communicating in someone else’s primary language.
+
+**Be respectful**: Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It’s important to remember that a community where people feel uncomfortable or threatened is not a productive one.
+
+**Be careful in the words that we choose**: we are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior aren’t acceptable.
+
+**Try to understand why we disagree**: Disagreements, both social and technical, happen all the time. It is important that we resolve disagreements and differing views constructively. Remember that we’re different. The strength of our community comes from its diversity, people from a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to err and blaming each other doesn’t get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.

data/{LICENSE.md → vendor/blaze-css/LICENSE}

@@ -19,3 +19,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

data/vendor/blaze-css/README.md

@@ -0,0 +1,18 @@
+# <a href="http://blazecss.com">Blaze_CSS</a>
+
+Open Source Modular CSS Framework - providing great structure for building websites quickly
+
+:globe_with_meridians: **http://blazecss.com**
+
+<a href="https://www.npmjs.com/package/blaze"><img src="https://img.shields.io/npm/v/blaze.svg?style=flat-square"></a>
+<a href="https://www.npmjs.com/package/blaze"><img src="https://img.shields.io/npm/dm/blaze.svg?style=flat-square"></a>
+<a href="https://github.com/BlazeCSS/blaze/blob/master/LICENSE"><img src="https://img.shields.io/badge/licence-MIT-000000.svg?style=flat-square"></a>
+
+<a href="https://gitter.im/BlazeCSS/blaze"><img src="https://img.shields.io/gitter/room/blazecss/blaze.svg?style=flat-square&maxAge=2592000"></a>
+<a href="http://blazecss.com/community/forum"><img src="https://img.shields.io/badge/chat-forum-1fadc5.svg?style=flat-square"></a>
+<a href="https://twitter.com/blazecss"><img src="https://img.shields.io/twitter/follow/blazecss.svg?style=flat-square&maxAge=2592000"></a>
+
+<a href="https://www.patreon.com/blaze"><img src="https://img.shields.io/badge/patreon-support blaze-e6461a.svg?style=flat-square"></a>
+
+
+<a class="link" href="https://www.browserstack.com/">Thanks to BrowserStack</a> for providing a free plan for testing Blaze.

data/vendor/blaze-css/bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "blaze",
+  "version": "3.0.0",
+  "description": "Open Source CSS Framework",
+  "main": "dist/blaze.min.css",
+  "authors": [
+    "Gregory Pratt"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "html5",
+    "sass",
+    "scss",
+    "css",
+    "bem",
+    "itcss",
+    "bemit",
+    "ui",
+    "ux",
+    "framework",
+    "components"
+  ],
+  "homepage": "https://github.com/BlazeCSS/blaze",
+  "moduleType": [],
+  "ignore": [
+    "*.*",
+    "node_modules",
+    "bower_components",
+    "demo",
+    "scss"
+  ]
+}

data/vendor/blaze-css/demo/blaze.colors.min.css

@@ -0,0 +1 @@
+/*!v3.0.0*/.u-color-black{color:#111}.u-bg-black{background-color:#111}.u-color-grey{color:#b0bec5}.u-bg-grey{background-color:#b0bec5}.u-color-white{color:#fff}.u-bg-white{background-color:#fff}.u-color-beige{color:#f2f2ea}.u-bg-beige{background-color:#f2f2ea}.u-color-red{color:#f44336}.u-bg-red{background-color:#f44336}.u-color-pink{color:#e91e63}.u-bg-pink{background-color:#e91e63}.u-color-purple{color:#9c27b0}.u-bg-purple{background-color:#9c27b0}.u-color-blue{color:#2196f3}.u-bg-blue{background-color:#2196f3}.u-color-green{color:#4caf50}.u-bg-green{background-color:#4caf50}.u-color-cyan{color:#00bcd4}.u-bg-cyan{background-color:#00bcd4}.u-color-yellow{color:#ffeb3b}.u-bg-yellow{background-color:#ffeb3b}.u-color-orange{color:#ff9800}.u-bg-orange{background-color:#ff9800}.u-color-brown{color:#795548}.u-bg-brown{background-color:#795548}.u-color-brand{color:#2c3e50}.u-bg-brand{background-color:#2c3e50}.u-color-info{color:#2196f3}.u-bg-info{background-color:#2196f3}.u-color-warning{color:#ff9800}.u-bg-warning{background-color:#ff9800}.u-color-success{color:#4caf50}.u-bg-success{background-color:#4caf50}.u-color-error{color:#f44336}.u-bg-error{background-color:#f44336}.u-color-default{color:#96a8b2}.u-bg-default{background-color:#96a8b2}.u-color-disabled{color:#96a8b2}.u-bg-disabled{background-color:#96a8b2}.u-color-quiet{color:#96a8b2}.u-bg-quiet{background-color:#96a8b2}.u-color-grey-dark{color:#96a8b2}.u-bg-grey-dark{background-color:#96a8b2}.u-color-red-dark{color:#ef1d0d}.u-bg-red-dark{background-color:#ef1d0d}.u-color-pink-dark{color:#c61350}.u-bg-pink-dark{background-color:#c61350}.u-color-purple-dark{color:#7b1f8a}.u-bg-purple-dark{background-color:#7b1f8a}.u-color-blue-dark{color:#0c7fda}.u-bg-blue-dark{background-color:#0c7fda}.u-color-green-dark{color:#3e8f41}.u-bg-green-dark{background-color:#3e8f41}.u-color-cyan-dark{color:#0093a6}.u-bg-cyan-dark{background-color:#0093a6}.u-color-yellow-dark{color:#ffe60d}.u-bg-yellow-dark{background-color:#ffe60d}.u-color-orange-dark{color:#d17d00}.u-bg-orange-dark{background-color:#d17d00}.u-color-brown-dark{color:#5c4137}.u-bg-brown-dark{background-color:#5c4137}.u-color-grey-darker{color:#7b929e}.u-bg-grey-darker{background-color:#7b929e}.u-color-red-darker{color:#c4170b}.u-bg-red-darker{background-color:#c4170b}.u-color-grey-light{color:#cad4d8}.u-bg-grey-light{background-color:#cad4d8}.u-color-red-light{color:#f66c62}.u-bg-red-light{background-color:#f66c62}.u-color-pink-light{color:#ed4880}.u-bg-pink-light{background-color:#ed4880}.u-color-purple-light{color:#bb33d2}.u-bg-purple-light{background-color:#bb33d2}.u-color-blue-light{color:#4dabf5}.u-bg-blue-light{background-color:#4dabf5}.u-color-green-light{color:#6abe6e}.u-bg-green-light{background-color:#6abe6e}.u-color-cyan-light{color:#03e2ff}.u-bg-cyan-light{background-color:#03e2ff}.u-color-yellow-light{color:#fff069}.u-bg-yellow-light{background-color:#fff069}.u-color-orange-light{color:#ffab2e}.u-bg-orange-light{background-color:#ffab2e}.u-color-brown-light{color:#966959}.u-bg-brown-light{background-color:#966959}.u-color-grey-lighter{color:#e5eaec}.u-bg-grey-lighter{background-color:#e5eaec}.u-color-red-lighter{color:#f9948d}.u-bg-red-lighter{background-color:#f9948d}.u-color-pink-lighter{color:#f1729d}.u-bg-pink-lighter{background-color:#f1729d}.u-color-purple-lighter{color:#c759da}.u-bg-purple-lighter{background-color:#c759da}.u-color-blue-lighter{color:#78bff8}.u-bg-blue-lighter{background-color:#78bff8}.u-color-green-lighter{color:#8acc8d}.u-bg-green-lighter{background-color:#8acc8d}.u-color-cyan-lighter{color:#31e8ff}.u-bg-cyan-lighter{background-color:#31e8ff}.u-color-yellow-lighter{color:#fff497}.u-bg-yellow-lighter{background-color:#fff497}.u-color-orange-lighter{color:#ffbd5c}.u-bg-orange-lighter{background-color:#ffbd5c}.u-color-brown-lighter{color:#ab8172}.u-bg-brown-lighter{background-color:#ab8172}.u-color-pink-darker{color:#9c0f3f}.u-bg-pink-darker{background-color:#9c0f3f}.u-color-purple-darker{color:#591665}.u-bg-purple-darker{background-color:#591665}.u-color-blue-darker{color:#0966af}.u-bg-blue-darker{background-color:#0966af}.u-color-green-darker{color:#306f33}.u-bg-green-darker{background-color:#306f33}.u-color-cyan-darker{color:#006b78}.u-bg-cyan-darker{background-color:#006b78}.u-color-yellow-darker{color:#dec800}.u-bg-yellow-darker{background-color:#dec800}.u-color-orange-darker{color:#a36100}.u-bg-orange-darker{background-color:#a36100}.u-color-brown-darker{color:#3f2d26}.u-bg-brown-darker{background-color:#3f2d26}.u-color-brand-dark{color:#1c2732}.u-bg-brand-dark{background-color:#1c2732}.u-color-brand-darker{color:#0b1015}.u-bg-brand-darker{background-color:#0b1015}.u-color-brand-light{color:#3c556e}.u-bg-brand-light{background-color:#3c556e}.u-color-brand-lighter{color:#4d6c8b}.u-bg-brand-lighter{background-color:#4d6c8b}.u-color-info-dark{color:#0c7fda}.u-bg-info-dark{background-color:#0c7fda}.u-color-info-darker{color:#0966af}.u-bg-info-darker{background-color:#0966af}.u-color-info-light{color:#4dabf5}.u-bg-info-light{background-color:#4dabf5}.u-color-info-lighter{color:#78bff8}.u-bg-info-lighter{background-color:#78bff8}.u-color-warning-dark{color:#d17d00}.u-bg-warning-dark{background-color:#d17d00}.u-color-warning-darker{color:#a36100}.u-bg-warning-darker{background-color:#a36100}.u-color-warning-light{color:#ffab2e}.u-bg-warning-light{background-color:#ffab2e}.u-color-warning-lighter{color:#ffbd5c}.u-bg-warning-lighter{background-color:#ffbd5c}.u-color-success-dark{color:#3e8f41}.u-bg-success-dark{background-color:#3e8f41}.u-color-success-darker{color:#306f33}.u-bg-success-darker{background-color:#306f33}.u-color-success-light{color:#6abe6e}.u-bg-success-light{background-color:#6abe6e}.u-color-success-lighter{color:#8acc8d}.u-bg-success-lighter{background-color:#8acc8d}.u-color-error-dark{color:#ef1d0d}.u-bg-error-dark{background-color:#ef1d0d}.u-color-error-darker{color:#c4170b}.u-bg-error-darker{background-color:#c4170b}.u-color-error-light{color:#f66c62}.u-bg-error-light{background-color:#f66c62}.u-color-error-lighter{color:#f9948d}.u-bg-error-lighter{background-color:#f9948d}

data/vendor/blaze-css/demo/blaze.min.css

@@ -0,0 +1 @@
+/*!v3.0.0*/@charset "UTF-8";html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{margin:0}.o-container{margin:auto}.o-container--xsmall{max-width:20em}.o-container--small{max-width:30em}.o-container--medium{max-width:48em}.o-container--large{max-width:64em}.o-container--xlarge{max-width:78em}.o-container--super{max-width:116em}.o-grid{display:-ms-flexbox;display:flex}.o-grid--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid--top{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.o-grid--center{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.o-grid--bottom{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.o-grid--no-gutter>.o-grid__cell{padding-right:0;padding-left:0}.o-grid__cell{-ms-flex:1;flex:1;padding-right:1em;padding-left:1em}.o-grid__cell--width-5{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5{margin-left:5%}.o-grid__cell--width-10{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10{margin-left:10%}.o-grid__cell--width-15{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15{margin-left:15%}.o-grid__cell--width-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20{margin-left:20%}.o-grid__cell--width-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25{margin-left:25%}.o-grid__cell--width-30{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30{margin-left:30%}.o-grid__cell--width-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33{margin-left:33.33333%}.o-grid__cell--width-35{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35{margin-left:35%}.o-grid__cell--width-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40{margin-left:40%}.o-grid__cell--width-45{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45{margin-left:45%}.o-grid__cell--width-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50{margin-left:50%}.o-grid__cell--width-55{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55{margin-left:55%}.o-grid__cell--width-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60{margin-left:60%}.o-grid__cell--width-65{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65{margin-left:65%}.o-grid__cell--width-66{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66{margin-left:66.66667%}.o-grid__cell--width-70{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70{margin-left:70%}.o-grid__cell--width-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75{margin-left:75%}.o-grid__cell--width-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80{margin-left:80%}.o-grid__cell--width-85{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85{margin-left:85%}.o-grid__cell--width-90{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90{margin-left:90%}.o-grid__cell--width-95{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95{margin-left:95%}.o-grid__cell--width-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100{margin-left:100%}.o-grid__cell--top{-ms-flex-item-align:start;align-self:flex-start}.o-grid__cell--center{-ms-flex-item-align:center;align-self:center}.o-grid__cell--bottom{-ms-flex-item-align:end;align-self:flex-end}.o-grid__cell--no-gutter{padding-right:0;padding-left:0}.o-grid__cell--width-fixed{-ms-flex:0 1 auto;flex:0 1 auto}.o-grid__cell--hidden{display:none}.o-grid__cell--visible{display:initial}@media (max-width:19.99em){.o-grid.o-grid--xsmall-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--xsmall-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--xsmall-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:20em) and (max-width:29.99em){.o-grid.o-grid--small-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--small-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--small-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:30em) and (max-width:47.99em){.o-grid.o-grid--medium-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--medium-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--medium-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:48em) and (max-width:63.99em){.o-grid.o-grid--large-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--large-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--large-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:64em) and (max-width:77.99em){.o-grid.o-grid--xlarge-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--xlarge-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--xlarge-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:64em){.o-grid.o-grid--super-fit>.o-grid__cell:not([class*=o-grid__cell--width]){-ms-flex:1;flex:1}.o-grid.o-grid--super-full{-ms-flex-wrap:wrap;flex-wrap:wrap}.o-grid.o-grid--super-full>.o-grid__cell{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}}@media (min-width:20em){.o-grid__cell--width-5\@xsmall{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@xsmall{margin-left:5%}.o-grid__cell--width-10\@xsmall{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@xsmall{margin-left:10%}.o-grid__cell--width-15\@xsmall{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@xsmall{margin-left:15%}.o-grid__cell--width-20\@xsmall{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@xsmall{margin-left:20%}.o-grid__cell--width-25\@xsmall{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@xsmall{margin-left:25%}.o-grid__cell--width-30\@xsmall{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@xsmall{margin-left:30%}.o-grid__cell--width-33\@xsmall{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@xsmall{margin-left:33.33333%}.o-grid__cell--width-35\@xsmall{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@xsmall{margin-left:35%}.o-grid__cell--width-40\@xsmall{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@xsmall{margin-left:40%}.o-grid__cell--width-45\@xsmall{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@xsmall{margin-left:45%}.o-grid__cell--width-50\@xsmall{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@xsmall{margin-left:50%}.o-grid__cell--width-55\@xsmall{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@xsmall{margin-left:55%}.o-grid__cell--width-60\@xsmall{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@xsmall{margin-left:60%}.o-grid__cell--width-65\@xsmall{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@xsmall{margin-left:65%}.o-grid__cell--width-66\@xsmall{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@xsmall{margin-left:66.66667%}.o-grid__cell--width-70\@xsmall{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@xsmall{margin-left:70%}.o-grid__cell--width-75\@xsmall{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@xsmall{margin-left:75%}.o-grid__cell--width-80\@xsmall{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@xsmall{margin-left:80%}.o-grid__cell--width-85\@xsmall{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@xsmall{margin-left:85%}.o-grid__cell--width-90\@xsmall{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@xsmall{margin-left:90%}.o-grid__cell--width-95\@xsmall{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@xsmall{margin-left:95%}.o-grid__cell--hidden\@xsmall{display:none}.o-grid__cell--visible\@xsmall{display:initial}.o-grid__cell--width-100\@xsmall{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@xsmall{margin-left:100%}.o-grid__cell--width-fixed\@xsmall{-ms-flex:0 1 auto;flex:0 1 auto}}@media (min-width:30em){.o-grid__cell--width-5\@small{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@small{margin-left:5%}.o-grid__cell--width-10\@small{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@small{margin-left:10%}.o-grid__cell--width-15\@small{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@small{margin-left:15%}.o-grid__cell--width-20\@small{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@small{margin-left:20%}.o-grid__cell--width-25\@small{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@small{margin-left:25%}.o-grid__cell--width-30\@small{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@small{margin-left:30%}.o-grid__cell--width-33\@small{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@small{margin-left:33.33333%}.o-grid__cell--width-35\@small{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@small{margin-left:35%}.o-grid__cell--width-40\@small{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@small{margin-left:40%}.o-grid__cell--width-45\@small{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@small{margin-left:45%}.o-grid__cell--width-50\@small{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@small{margin-left:50%}.o-grid__cell--width-55\@small{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@small{margin-left:55%}.o-grid__cell--width-60\@small{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@small{margin-left:60%}.o-grid__cell--width-65\@small{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@small{margin-left:65%}.o-grid__cell--width-66\@small{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@small{margin-left:66.66667%}.o-grid__cell--width-70\@small{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@small{margin-left:70%}.o-grid__cell--width-75\@small{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@small{margin-left:75%}.o-grid__cell--width-80\@small{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@small{margin-left:80%}.o-grid__cell--width-85\@small{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@small{margin-left:85%}.o-grid__cell--width-90\@small{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@small{margin-left:90%}.o-grid__cell--width-95\@small{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@small{margin-left:95%}.o-grid__cell--hidden\@small{display:none}.o-grid__cell--visible\@small{display:initial}.o-grid__cell--width-100\@small{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@small{margin-left:100%}.o-grid__cell--width-fixed\@small{-ms-flex:0 1 auto;flex:0 1 auto}}@media (min-width:48em){.o-grid__cell--width-5\@medium{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@medium{margin-left:5%}.o-grid__cell--width-10\@medium{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@medium{margin-left:10%}.o-grid__cell--width-15\@medium{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@medium{margin-left:15%}.o-grid__cell--width-20\@medium{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@medium{margin-left:20%}.o-grid__cell--width-25\@medium{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@medium{margin-left:25%}.o-grid__cell--width-30\@medium{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@medium{margin-left:30%}.o-grid__cell--width-33\@medium{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@medium{margin-left:33.33333%}.o-grid__cell--width-35\@medium{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@medium{margin-left:35%}.o-grid__cell--width-40\@medium{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@medium{margin-left:40%}.o-grid__cell--width-45\@medium{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@medium{margin-left:45%}.o-grid__cell--width-50\@medium{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@medium{margin-left:50%}.o-grid__cell--width-55\@medium{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@medium{margin-left:55%}.o-grid__cell--width-60\@medium{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@medium{margin-left:60%}.o-grid__cell--width-65\@medium{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@medium{margin-left:65%}.o-grid__cell--width-66\@medium{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@medium{margin-left:66.66667%}.o-grid__cell--width-70\@medium{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@medium{margin-left:70%}.o-grid__cell--width-75\@medium{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@medium{margin-left:75%}.o-grid__cell--width-80\@medium{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@medium{margin-left:80%}.o-grid__cell--width-85\@medium{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@medium{margin-left:85%}.o-grid__cell--width-90\@medium{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@medium{margin-left:90%}.o-grid__cell--width-95\@medium{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@medium{margin-left:95%}.o-grid__cell--hidden\@medium{display:none}.o-grid__cell--visible\@medium{display:initial}.o-grid__cell--width-100\@medium{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@medium{margin-left:100%}.o-grid__cell--width-fixed\@medium{-ms-flex:0 1 auto;flex:0 1 auto}}@media (min-width:64em){.o-grid__cell--width-5\@large{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@large{margin-left:5%}.o-grid__cell--width-10\@large{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@large{margin-left:10%}.o-grid__cell--width-15\@large{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@large{margin-left:15%}.o-grid__cell--width-20\@large{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@large{margin-left:20%}.o-grid__cell--width-25\@large{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@large{margin-left:25%}.o-grid__cell--width-30\@large{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@large{margin-left:30%}.o-grid__cell--width-33\@large{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@large{margin-left:33.33333%}.o-grid__cell--width-35\@large{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@large{margin-left:35%}.o-grid__cell--width-40\@large{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@large{margin-left:40%}.o-grid__cell--width-45\@large{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@large{margin-left:45%}.o-grid__cell--width-50\@large{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@large{margin-left:50%}.o-grid__cell--width-55\@large{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@large{margin-left:55%}.o-grid__cell--width-60\@large{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@large{margin-left:60%}.o-grid__cell--width-65\@large{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@large{margin-left:65%}.o-grid__cell--width-66\@large{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@large{margin-left:66.66667%}.o-grid__cell--width-70\@large{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@large{margin-left:70%}.o-grid__cell--width-75\@large{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@large{margin-left:75%}.o-grid__cell--width-80\@large{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@large{margin-left:80%}.o-grid__cell--width-85\@large{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@large{margin-left:85%}.o-grid__cell--width-90\@large{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@large{margin-left:90%}.o-grid__cell--width-95\@large{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@large{margin-left:95%}.o-grid__cell--hidden\@large{display:none}.o-grid__cell--visible\@large{display:initial}.o-grid__cell--width-100\@large{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@large{margin-left:100%}.o-grid__cell--width-fixed\@large{-ms-flex:0 1 auto;flex:0 1 auto}}@media (min-width:78em){.o-grid__cell--width-5\@xlarge{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@xlarge{margin-left:5%}.o-grid__cell--width-10\@xlarge{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@xlarge{margin-left:10%}.o-grid__cell--width-15\@xlarge{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@xlarge{margin-left:15%}.o-grid__cell--width-20\@xlarge{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@xlarge{margin-left:20%}.o-grid__cell--width-25\@xlarge{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@xlarge{margin-left:25%}.o-grid__cell--width-30\@xlarge{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@xlarge{margin-left:30%}.o-grid__cell--width-33\@xlarge{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@xlarge{margin-left:33.33333%}.o-grid__cell--width-35\@xlarge{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@xlarge{margin-left:35%}.o-grid__cell--width-40\@xlarge{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@xlarge{margin-left:40%}.o-grid__cell--width-45\@xlarge{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@xlarge{margin-left:45%}.o-grid__cell--width-50\@xlarge{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@xlarge{margin-left:50%}.o-grid__cell--width-55\@xlarge{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@xlarge{margin-left:55%}.o-grid__cell--width-60\@xlarge{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@xlarge{margin-left:60%}.o-grid__cell--width-65\@xlarge{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@xlarge{margin-left:65%}.o-grid__cell--width-66\@xlarge{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@xlarge{margin-left:66.66667%}.o-grid__cell--width-70\@xlarge{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@xlarge{margin-left:70%}.o-grid__cell--width-75\@xlarge{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@xlarge{margin-left:75%}.o-grid__cell--width-80\@xlarge{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@xlarge{margin-left:80%}.o-grid__cell--width-85\@xlarge{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@xlarge{margin-left:85%}.o-grid__cell--width-90\@xlarge{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@xlarge{margin-left:90%}.o-grid__cell--width-95\@xlarge{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@xlarge{margin-left:95%}.o-grid__cell--hidden\@xlarge{display:none}.o-grid__cell--visible\@xlarge{display:initial}.o-grid__cell--width-100\@xlarge{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@xlarge{margin-left:100%}.o-grid__cell--width-fixed\@xlarge{-ms-flex:0 1 auto;flex:0 1 auto}}@media (min-width:116em){.o-grid__cell--width-5\@super{-ms-flex:0 0 5%;flex:0 0 5%;max-width:5%}.o-grid__cell--offset-5\@super{margin-left:5%}.o-grid__cell--width-10\@super{-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.o-grid__cell--offset-10\@super{margin-left:10%}.o-grid__cell--width-15\@super{-ms-flex:0 0 15%;flex:0 0 15%;max-width:15%}.o-grid__cell--offset-15\@super{margin-left:15%}.o-grid__cell--width-20\@super{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.o-grid__cell--offset-20\@super{margin-left:20%}.o-grid__cell--width-25\@super{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.o-grid__cell--offset-25\@super{margin-left:25%}.o-grid__cell--width-30\@super{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.o-grid__cell--offset-30\@super{margin-left:30%}.o-grid__cell--width-33\@super{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.o-grid__cell--offset-33\@super{margin-left:33.33333%}.o-grid__cell--width-35\@super{-ms-flex:0 0 35%;flex:0 0 35%;max-width:35%}.o-grid__cell--offset-35\@super{margin-left:35%}.o-grid__cell--width-40\@super{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.o-grid__cell--offset-40\@super{margin-left:40%}.o-grid__cell--width-45\@super{-ms-flex:0 0 45%;flex:0 0 45%;max-width:45%}.o-grid__cell--offset-45\@super{margin-left:45%}.o-grid__cell--width-50\@super{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.o-grid__cell--offset-50\@super{margin-left:50%}.o-grid__cell--width-55\@super{-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%}.o-grid__cell--offset-55\@super{margin-left:55%}.o-grid__cell--width-60\@super{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.o-grid__cell--offset-60\@super{margin-left:60%}.o-grid__cell--width-65\@super{-ms-flex:0 0 65%;flex:0 0 65%;max-width:65%}.o-grid__cell--offset-65\@super{margin-left:65%}.o-grid__cell--width-66\@super{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.o-grid__cell--offset-66\@super{margin-left:66.66667%}.o-grid__cell--width-70\@super{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.o-grid__cell--offset-70\@super{margin-left:70%}.o-grid__cell--width-75\@super{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.o-grid__cell--offset-75\@super{margin-left:75%}.o-grid__cell--width-80\@super{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.o-grid__cell--offset-80\@super{margin-left:80%}.o-grid__cell--width-85\@super{-ms-flex:0 0 85%;flex:0 0 85%;max-width:85%}.o-grid__cell--offset-85\@super{margin-left:85%}.o-grid__cell--width-90\@super{-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.o-grid__cell--offset-90\@super{margin-left:90%}.o-grid__cell--width-95\@super{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}.o-grid__cell--offset-95\@super{margin-left:95%}.o-grid__cell--hidden\@super{display:none}.o-grid__cell--visible\@super{display:initial}.o-grid__cell--width-100\@super{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.o-grid__cell--offset-100\@super{margin-left:100%}.o-grid__cell--width-fixed\@super{-ms-flex:0 1 auto;flex:0 1 auto}}.o-image{display:block;max-width:100%;height:auto}.o-panel-container{position:relative}.o-panel{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch}.o-panel--nav-top{top:3.55em}.o-panel--nav-bottom{bottom:3.55em}.o-media{display:-ms-flexbox;display:flex}.o-media .c-heading{padding:0}.o-media__body,.o-media__image{-ms-flex:1;flex:1;padding-right:1em;padding-left:1em;padding-right:0;padding-left:0}.o-media__body--top,.o-media__image--top{-ms-flex-item-align:start;align-self:flex-start}.o-media__body--center,.o-media__image--center{-ms-flex-item-align:center;align-self:center}.o-media__body--bottom,.o-media__image--bottom{-ms-flex-item-align:end;align-self:flex-end}.o-media__image{-ms-flex:0 1 auto;flex:0 1 auto;width:3em}.o-media__body{margin-left:.5em}.o-fieldset,.o-fieldset.c-list{display:block;width:100%;margin:.5em 0;padding:0;border:0}.o-fieldset__legend{display:block;width:100%;padding:1em 0;cursor:pointer;padding:.25em 0}.o-form-element{position:relative;padding:1em 0}.o-form-element .c-label:first-child{padding:0 0 .5em}.o-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:80%;border:0 solid #96a8b2;border-radius:4px;background-color:#fff;overflow:hidden;z-index:5}.o-modal .c-card{background-color:transparent;box-shadow:none}.o-modal--ghost{background-color:transparent;color:#fff}.o-modal--ghost .c-heading{color:#fff}.o-modal--full{top:1em;left:1em;width:calc(100% - 2em);height:calc(100% - 2em);transform:none}.o-modal--full .c-card__body{position:absolute;top:2.5em;bottom:3.5em;width:100%;overflow-x:hidden;overflow-y:auto}.o-modal--full .c-card__footer{position:absolute;bottom:0;width:100%}.o-drawer{position:absolute;background-color:#fff;color:#111;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.o-drawer .c-card{background-color:transparent;box-shadow:none}.o-drawer .c-card--menu{display:block;margin:0;border-right:0;border-left:0;border-radius:0}.o-drawer--bottom,.o-drawer--top{left:0;width:80%;height:auto;margin-left:10%;transform:translate(0)}.o-drawer--bottom{top:100%;border-radius:4px 4px 0 0}.o-drawer--bottom.o-drawer--visible{transform:translateY(-99%)}.o-drawer--top{bottom:100%;border-radius:0 0 4px 4px}.o-drawer--top.o-drawer--visible{transform:translateY(99%)}.o-drawer--left,.o-drawer--right{top:0;width:260px;height:100%}.o-drawer--left .c-card__footer--block,.o-drawer--right .c-card__footer--block{position:absolute;bottom:0;width:100%}.o-drawer--left .c-card__footer--block .c-button,.o-drawer--right .c-card__footer--block .c-button{border-radius:0}.o-drawer--left{left:0;transform:translateX(-100%)}.o-drawer--left.o-drawer--visible{transform:translateX(-1%)}.o-drawer--right{left:100%;transform:translate(0)}.o-drawer--right.o-drawer--visible{transform:translateX(-99%)}.c-text{color:#111;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:400;line-height:1.55}.c-text--mono{font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace}.c-text--highlight{margin:-.125em;padding:.25em .25em .125em;background-color:#ffeb3b;color:#111}.c-text--quiet{color:#96a8b2}.c-text--loud{font-weight:700}.c-text--help[title]{border-bottom:1px dashed #96a8b2;cursor:help}.c-pre{margin:0}.c-code{margin:-.125em;padding:.25em .25em .125em;background-color:#e5eaec;color:#111;display:inline;font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;font-weight:400}.c-code--multiline{display:block;padding:.5em 1em;border-radius:4px;white-space:pre;overflow-x:auto}.c-kbd{margin:-.125em;padding:.25em .25em .125em;background-color:#96a8b2;color:#fff;display:inline;font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;font-weight:400;border-bottom:2px solid #7b929e;border-radius:4px}.c-blockquote{border-left:5px solid #96a8b2;display:block;margin:0;padding:1em 1.5em;font-family:Georgia,Cambria,Times New Roman,Times,serif}.c-blockquote--brand{border-left:5px solid #2c3e50}.c-blockquote--info{border-left:5px solid #2196f3}.c-blockquote--warning{border-left:5px solid #ff9800}.c-blockquote--success{border-left:5px solid #4caf50}.c-blockquote--error{border-left:5px solid #f44336}.c-blockquote__body{display:block;margin:0;padding:.5em 0;font-size:1.17em}.c-blockquote__footer{color:#96a8b2;font-style:italic}.c-blockquote__footer,.c-paragraph{display:block;margin:0;padding:.5em 0}.c-badge{border:1px solid #96a8b2;background-color:#96a8b2;color:#fff;display:inline-block;margin:0;padding:.25em .5em;border-radius:4px;font-size:.8em;font-weight:700;line-height:1.2}.c-badge.c-badge--ghost{border:1px solid #96a8b2;background-color:transparent;color:#96a8b2}.c-badge--rounded{border-radius:30em}.c-badge--brand{border:1px solid #2c3e50;background-color:#2c3e50;color:#fff}.c-badge--brand.c-badge--ghost{border:1px solid #2c3e50;background-color:transparent;color:#2c3e50}.c-badge--info{border:1px solid #2196f3;background-color:#2196f3;color:#fff}.c-badge--info.c-badge--ghost{border:1px solid #2196f3;background-color:transparent;color:#2196f3}.c-badge--warning{border:1px solid #ff9800;background-color:#ff9800;color:#fff}.c-badge--warning.c-badge--ghost{border:1px solid #ff9800;background-color:transparent;color:#ff9800}.c-badge--success{border:1px solid #4caf50;background-color:#4caf50;color:#fff}.c-badge--success.c-badge--ghost{border:1px solid #4caf50;background-color:transparent;color:#4caf50}.c-badge--error{border:1px solid #f44336;background-color:#f44336;color:#fff}.c-badge--error.c-badge--ghost{border:1px solid #f44336;background-color:transparent;color:#f44336}.c-heading,.c-heading__sub{margin:0;padding:1em 0 .5em;font-weight:400}.c-heading__sub{padding:0;font-size:.8em;opacity:.6}h1.c-heading{font-size:2em}h2.c-heading{font-size:1.5em}h3.c-heading{font-size:1.17em}h4.c-heading{font-size:1em}h5.c-heading{font-size:.83em}h6.c-heading{font-size:.67em}.c-address{display:block;margin:0;padding:.5em 0;font-style:normal}.c-address__heading{display:block;font-weight:700}.c-table{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;margin:0;padding:0;border:0;border-collapse:collapse;border-spacing:0}.c-table__caption{margin-left:0;padding:.5em 0;color:#96a8b2;font-size:.83em;text-align:left}.c-table__body,.c-table__caption,.c-table__head,.c-table__row{display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.c-table__body,.c-table__head,.c-table__row{-ms-flex-wrap:wrap;flex-wrap:wrap}.c-table--striped :not(.c-table__row--heading).c-table__row:nth-of-type(odd){background-color:#e5eaec;color:initial}.c-table__cell{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:.5em;text-align:left;overflow:auto}.c-table__row--heading .c-table__cell{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;border-bottom:1px solid #b0bec5;background-color:#cad4d8;color:initial;font-size:1em;font-weight:700}.c-table--striped .c-table__row--heading .c-table__cell{background-color:#fff;color:initial}.c-table--clickable :not(.c-table__row--heading).c-table__row:hover .c-table__cell,.c-table__row--clickable:hover .c-table__cell{background-color:initial;color:#0c7fda;cursor:pointer}.c-table__row--disabled{background-color:initial;color:#96a8b2;cursor:default}.c-table--clickable :not(.c-table__row--heading).c-table__row--disabled:hover .c-table__cell,.c-table__row--disabled:hover .c-table__cell{background-color:initial;color:#96a8b2;cursor:not-allowed}.c-table--condensed{font-size:.83em}.c-table--condensed .c-table__cell{padding:.25em}.c-card{padding:0;list-style:none;display:block;border-radius:4px;background-color:#fff;box-shadow:0 0 1px hsla(0,0%,7%,.6);overflow:hidden}.c-card>.o-image:not(:first-child){padding:1em 0 0}.c-card+.c-card{margin:.5em 0 0}.c-card__header{padding:.5em .5em 0}.c-card__header .c-heading{padding:0}.c-card__body,.c-card__footer,.c-card__item{padding:.5em}.c-card__item+.c-card__footer--block{padding:0}.c-card__footer--block{padding:.5em 0 0}.c-card__footer--block .c-input-group .c-button:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.c-card__footer--block .c-input-group .c-button:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.c-card__item:not(:last-child){border-bottom:1px solid rgba(202,212,216,.5)}.c-card--accordion label.c-card__item{display:block;position:relative;width:100%;padding-left:2em;cursor:pointer}.c-card--accordion label.c-card__item:before{position:absolute;left:.75em;content:"+"}.c-card--accordion>input,.c-card--accordion>input+.c-card__item+.c-card__item{display:none}.c-card--accordion>input:checked+.c-card__item+.c-card__item{display:block}.c-card--accordion>input:checked+.c-card__item:before{transform:rotate(45deg)}.c-card--menu{display:block;width:100%;max-height:280px;margin:.5em 0 0;z-index:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.c-card--grouped .c-card__item:not(:last-child){border-bottom:0}.c-card__divider{height:1px;background-color:#96a8b2;overflow:hidden}.c-card__item--divider{background-color:#96a8b2;color:#fff;font-weight:700}.c-card__item--brand{background-color:#2c3e50;color:#fff}.c-card__item--info{background-color:#2196f3;color:#fff}.c-card__item--warning{background-color:#ff9800;color:#fff}.c-card__item--success{background-color:#4caf50;color:#fff}.c-card__item--error{background-color:#f44336;color:#fff}.c-card__item--disabled{cursor:not-allowed;opacity:.6}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover{background-color:#e5eaec;cursor:pointer}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--brand,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--brand{background-color:#3c556e}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--info,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--info{background-color:#4dabf5}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--warning,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--warning{background-color:#ffab2e}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--success,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--success{background-color:#6abe6e}.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--error,.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover.c-card__item--error{background-color:#f66c62}.c-card--accordion>input:checked+.c-card__item,.c-card__item--active{background-color:rgba(202,212,216,.5);font-weight:700}.c-card--accordion>input:checked+.c-card__item.c-card__item--brand,.c-card__item--active.c-card__item--brand{background-color:#1c2732}.c-card--accordion>input:checked+.c-card__item.c-card__item--info,.c-card__item--active.c-card__item--info{background-color:#0c7fda}.c-card--accordion>input:checked+.c-card__item.c-card__item--warning,.c-card__item--active.c-card__item--warning{background-color:#d17d00}.c-card--accordion>input:checked+.c-card__item.c-card__item--success,.c-card__item--active.c-card__item--success{background-color:#3e8f41}.c-card--accordion>input:checked+.c-card__item.c-card__item--error,.c-card__item--active.c-card__item--error{background-color:#ef1d0d}.c-button{border:1px solid transparent;background-color:#96a8b2;color:#fff;display:inline;max-width:100%;margin:0;padding:.5em;border-radius:4px;outline:0;font-family:inherit;font-size:1em;line-height:normal;text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-button.c-button--active{background-color:#7b929e}.c-button:not(:disabled):hover{background-color:#b0bec5}.c-button:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button:not(:disabled):active{background-color:#7b929e}.c-button:disabled{cursor:not-allowed;opacity:.5}.c-button--close{border:1px solid transparent;color:inherit;position:absolute;right:.5em;padding:0;outline:0;font-size:1.4em;font-weight:700;line-height:1}.c-button--close,.c-button--close.c-button--active{background-color:transparent}.c-button--close:not(:disabled):hover{background-color:hsla(0,0%,9%,0)}.c-button--close:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--close:not(:disabled):active{background-color:transparent}.c-button--block{display:inline-block;width:100%}.c-button--rounded{border-radius:30em}.c-button--brand{border:1px solid transparent;background-color:#2c3e50;color:#fff}.c-button--brand.c-button--active{background-color:#1c2732}.c-button--brand:not(:disabled):hover{background-color:#3c556e}.c-button--brand:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--brand:not(:disabled):active{background-color:#1c2732}.c-button--info{border:1px solid transparent;background-color:#2196f3;color:#fff}.c-button--info.c-button--active{background-color:#0c7fda}.c-button--info:not(:disabled):hover{background-color:#4dabf5}.c-button--info:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--info:not(:disabled):active{background-color:#0c7fda}.c-button--warning{border:1px solid transparent;background-color:#ff9800;color:#fff}.c-button--warning.c-button--active{background-color:#d17d00}.c-button--warning:not(:disabled):hover{background-color:#ffab2e}.c-button--warning:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--warning:not(:disabled):active{background-color:#d17d00}.c-button--success{border:1px solid transparent;background-color:#4caf50;color:#fff}.c-button--success.c-button--active{background-color:#3e8f41}.c-button--success:not(:disabled):hover{background-color:#6abe6e}.c-button--success:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--success:not(:disabled):active{background-color:#3e8f41}.c-button--error{border:1px solid transparent;background-color:#f44336;color:#fff}.c-button--error.c-button--active{background-color:#ef1d0d}.c-button--error:not(:disabled):hover{background-color:#f66c62}.c-button--error:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--error:not(:disabled):active{background-color:#ef1d0d}.c-button--ghost{border:1px solid #96a8b2;background-color:transparent;color:#96a8b2}.c-button--ghost.c-button--active{border-color:#7b929e;background-color:#7b929e;color:#fff}.c-button--ghost:not(:disabled):hover{background-color:#96a8b2;color:#fff}.c-button--ghost:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost:not(:disabled):active{border-color:#7b929e;background-color:#7b929e;color:#fff}.c-button--ghost-brand{border:1px solid #2c3e50;background-color:transparent;color:#2c3e50}.c-button--ghost-brand.c-button--active{border-color:#1c2732;background-color:#1c2732;color:#fff}.c-button--ghost-brand:not(:disabled):hover{background-color:#2c3e50;color:#fff}.c-button--ghost-brand:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost-brand:not(:disabled):active{border-color:#1c2732;background-color:#1c2732;color:#fff}.c-button--ghost-info{border:1px solid #2196f3;background-color:transparent;color:#2196f3}.c-button--ghost-info.c-button--active{border-color:#0c7fda;background-color:#0c7fda;color:#fff}.c-button--ghost-info:not(:disabled):hover{background-color:#2196f3;color:#fff}.c-button--ghost-info:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost-info:not(:disabled):active{border-color:#0c7fda;background-color:#0c7fda;color:#fff}.c-button--ghost-warning{border:1px solid #ff9800;background-color:transparent;color:#ff9800}.c-button--ghost-warning.c-button--active{border-color:#d17d00;background-color:#d17d00;color:#fff}.c-button--ghost-warning:not(:disabled):hover{background-color:#ff9800;color:#fff}.c-button--ghost-warning:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost-warning:not(:disabled):active{border-color:#d17d00;background-color:#d17d00;color:#fff}.c-button--ghost-success{border:1px solid #4caf50;background-color:transparent;color:#4caf50}.c-button--ghost-success.c-button--active{border-color:#3e8f41;background-color:#3e8f41;color:#fff}.c-button--ghost-success:not(:disabled):hover{background-color:#4caf50;color:#fff}.c-button--ghost-success:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost-success:not(:disabled):active{border-color:#3e8f41;background-color:#3e8f41;color:#fff}.c-button--ghost-error{border:1px solid #f44336;background-color:transparent;color:#f44336}.c-button--ghost-error.c-button--active{border-color:#ef1d0d;background-color:#ef1d0d;color:#fff}.c-button--ghost-error:not(:disabled):hover{background-color:#f44336;color:#fff}.c-button--ghost-error:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-button--ghost-error:not(:disabled):active{border-color:#ef1d0d;background-color:#ef1d0d;color:#fff}.c-button__icon-left{padding-right:.5em}.c-button__icon-right{padding-left:.5em}.c-link{background-color:transparent;color:#0c7fda;text-decoration:none;cursor:pointer}.c-link:not(:disabled):visited{color:#0966af}.c-link:not(:disabled):active,.c-link:not(:disabled):hover{background-color:transparent;color:#2196f3}.c-link:hover{text-decoration:underline}.c-link--brand{background-color:transparent;color:#2c3e50}.c-link--brand:not(:disabled):visited{color:#1c2732}.c-link--brand:not(:disabled):active,.c-link--brand:not(:disabled):hover{background-color:transparent;color:#3c556e}.c-link--info{background-color:transparent;color:#2196f3}.c-link--info:not(:disabled):visited{color:#0c7fda}.c-link--info:not(:disabled):active,.c-link--info:not(:disabled):hover{background-color:transparent;color:#4dabf5}.c-link--warning{background-color:transparent;color:#ff9800}.c-link--warning:not(:disabled):visited{color:#d17d00}.c-link--warning:not(:disabled):active,.c-link--warning:not(:disabled):hover{background-color:transparent;color:#ffab2e}.c-link--success{background-color:transparent;color:#4caf50}.c-link--success:not(:disabled):visited{color:#3e8f41}.c-link--success:not(:disabled):active,.c-link--success:not(:disabled):hover{background-color:transparent;color:#6abe6e}.c-link--error{background-color:transparent;color:#f44336}.c-link--error:not(:disabled):visited{color:#ef1d0d}.c-link--error:not(:disabled):active,.c-link--error:not(:disabled):hover{background-color:transparent;color:#f66c62}.c-list{display:block;margin:0;list-style-position:outside}.c-list,.c-list .c-list{padding:0 0 0 1em}.c-list__item{padding:0}.c-list__item--unstyled{list-style:none}.c-list--ordered,.c-list--unstyled{padding:0;list-style:none}.c-list--ordered{counter-reset:a}.c-list--ordered .c-list__item:before{padding:0 .5em 0 0;content:counters(a,".") " ";counter-increment:a}.c-list--inline,.c-list--inline .c-list--inline{padding:0}.c-list--inline .c-list__item{display:inline-block;width:auto;padding-right:1em}.c-list--inline:not(.c-list--unstyled) .c-list__item:before{padding:0 .5em 0 0;content:"•"}.c-breadcrumbs{display:block;margin:0;padding:0;list-style:none}.c-breadcrumbs__crumb{display:inline-block;width:auto;padding:0}.c-breadcrumbs__crumb:not(:last-child):after{padding:0 .5em;color:#96a8b2;content:"/"}.c-tree{display:block;margin:0;padding:0;list-style:none}.c-tree .c-tree{padding:0 0 0 1em}.c-tree__item{padding:0}.c-tree__item:before{display:inline-block;padding:0 .5em 0 0;transform-origin:30% 50%;color:#cad4d8;content:"–"}.c-tree__item--expandable:before{color:#b0bec5;content:"\276F"}.c-tree__item--expanded:before{transform:rotate(90deg);color:#7b929e;content:"\276F"}.c-tabs{display:block}.c-tabs__headings{display:-ms-flexbox;display:flex;text-align:center;cursor:pointer}.c-tab-heading{-ms-flex:1;flex:1;margin:0;padding:1em;box-shadow:inset 0 -.2em 0 0 #e5eaec}.c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #96a8b2}.c-tabs--brand .c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #2c3e50}.c-tabs--info .c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #2196f3}.c-tabs--warning .c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #ff9800}.c-tabs--success .c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #4caf50}.c-tabs--error .c-tab-heading--active{box-shadow:inset 0 -.2em 0 0 #f44336}.c-tab-heading--disabled{background-color:initial;color:#96a8b2;cursor:not-allowed}.c-tabs__tab{display:none;padding:1em}.c-tabs__tab--active{display:block}.o-field{position:relative}.o-field .c-field--success~.c-icon{color:#4caf50}.o-field .c-field--error~.c-icon{color:#f44336}.o-field .c-field:disabled~.c-icon{color:#96a8b2}.o-field .c-icon{position:absolute;top:50%;transform:translateY(-50%);color:#96a8b2}.o-field--icon-right .c-field+.c-icon{right:.5em}.o-field--icon-right .c-field{padding-right:2em}.o-field--icon-left .c-icon:first-child{left:.5em}.o-field--icon-left .c-field{padding-left:2em}.c-fieldset,.c-fieldset.c-list{display:block;width:100%;margin:.5em 0;padding:0;border:0}.c-fieldset__legend{padding:1em 0;padding:.25em 0}.c-fieldset__legend,.c-label{display:block;width:100%;cursor:pointer}.c-label{padding:1em 0}.c-field{display:block;width:100%;margin:0;padding:.5em;border:1px solid #96a8b2;border-radius:4px;outline:0;background-color:#fff;font-family:inherit;font-size:1em;font-weight:400;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none}.c-field:focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}select.c-field{cursor:pointer}select.c-field:not([multiple]){padding-right:1em;background:url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 99% 50%}.c-field input{margin-right:.125em;outline:0;font-size:1em}.c-field--label{margin:.5em 0 0}.c-field--error{border-color:#f44336;color:#f44336}.c-field--success{border-color:#4caf50;color:inherit}.c-field--choice{border:0;border-radius:0;background-color:transparent}.c-field--disabled,.c-field:disabled,.c-fieldset--disabled .c-field,.c-fieldset:disabled .c-field{color:#96a8b2;cursor:not-allowed;border-color:#96a8b2;background-color:#e5eaec}.c-field--disabled.c-field--choice,.c-field:disabled.c-field--choice,.c-fieldset--disabled .c-field.c-field--choice,.c-fieldset:disabled .c-field.c-field--choice{background-color:transparent}.c-field input:disabled{color:#96a8b2;cursor:not-allowed}.c-input-group{display:-ms-flexbox;display:flex}.c-input-group .c-button{border-radius:0}.c-input-group .c-button:not(:first-child){border-left-width:0}.c-input-group .c-button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.c-input-group .c-button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.c-input-group .o-field{-ms-flex:1;flex:1}.c-input-group .o-field .c-field{border-radius:0}.c-input-group .o-field:not(:first-child) .c-field{border-left-width:0}.c-input-group .o-field:first-child .c-field{border-top-left-radius:4px;border-bottom-left-radius:4px}.c-input-group .o-field:last-child .c-field{border-top-right-radius:4px;border-bottom-right-radius:4px}.c-input-group--rounded .c-button:first-child{border-top-left-radius:30em;border-bottom-left-radius:30em}.c-input-group--rounded .c-button:last-child{border-top-right-radius:30em;border-bottom-right-radius:30em}.c-input-group--rounded .o-field:first-child .c-field{border-top-left-radius:30em;border-bottom-left-radius:30em}.c-input-group--rounded .o-field:last-child .c-field{border-top-right-radius:30em;border-bottom-right-radius:30em}.c-input-group--rounded-left .c-button:first-child,.c-input-group--rounded-left .o-field:first-child .c-field{border-top-left-radius:30em;border-bottom-left-radius:30em}.c-input-group--rounded-right .c-button:last-child,.c-input-group--rounded-right .o-field:last-child .c-field{border-top-right-radius:30em;border-bottom-right-radius:30em}.c-input-group--stacked{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.c-input-group--stacked .c-button:not(:first-child),.c-input-group--stacked .o-field:not(:first-child) .c-field{border-left-width:1px}.c-input-group--stacked .c-button,.c-input-group--stacked .o-field{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;margin-left:0}.c-input-group--stacked .c-button:not(:first-child){border-top:0}.c-input-group--stacked .c-button:not(:first-child):not(:last-child){border-radius:0}.c-input-group--stacked .c-button:first-child{border-radius:4px 4px 0 0}.c-input-group--stacked .c-button:last-child{border-radius:0 0 4px 4px}.c-input-group--stacked .o-field:not(:first-child) .c-field{border-top:0}.c-input-group--stacked .o-field:not(:first-child):not(:last-child) .c-field{border-radius:0}.c-input-group--stacked .o-field:first-child .c-field{border-radius:4px 4px 0 0}.c-input-group--stacked .o-field:last-child .c-field{border-radius:0 0 4px 4px}.c-hint{position:absolute;padding:0 .5em;transform:scale(.8);transform-origin:top left;color:#7b929e;font-size:1em;opacity:0;pointer-events:none}.c-field:focus~.c-hint,.c-hint--static,.c-label__field:focus~.c-hint{transform:scale(.9);opacity:1}.c-hint--success{color:#4caf50}.c-hint--error{color:#f44336}.c-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-toggle input:not(:checked)+.c-toggle__track{background-color:#e5eaec}.c-toggle input:not(:checked)+.c-toggle__track .c-toggle__handle{transform:translateZ(0)}.c-toggle input:disabled+.c-toggle__track,.c-toggle input:disabled+.c-toggle__track .c-toggle__handle{background-color:#e5eaec;cursor:not-allowed}.c-toggle--brand .c-toggle__track{background-color:#2c3e50}.c-toggle--info .c-toggle__track{background-color:#2196f3}.c-toggle--warning .c-toggle__track{background-color:#ff9800}.c-toggle--success .c-toggle__track{background-color:#4caf50}.c-toggle--error .c-toggle__track{background-color:#f44336}.c-toggle input{display:none}.c-toggle__track{-ms-flex:1;flex:1;padding-right:1em;padding-left:1em;-ms-flex:0 1 auto;flex:0 1 auto;background-color:#96a8b2;position:relative;width:1em;height:.5em;margin:0 .5em;border-radius:30em}.c-toggle__handle{position:absolute;top:-.25em;left:0;width:1em;height:1em;transform:translateX(100%);border-radius:30em;background-color:#fff;box-shadow:0 1px 4px -1px #111}.c-tags{position:relative;width:100%;text-align:left}.c-tags .c-card--menu{position:absolute;width:100%}.c-tags__container{padding-right:.25em}.c-tag,.c-tags__container{display:inline-block;max-width:70%}.c-tag{position:relative;margin:.125em;padding:.5em 1.5em .5em .5em}.c-tag__close{position:absolute;top:7px;right:5px;color:#e5eaec;font-weight:700}.c-tags__field-container{display:inline-block;position:absolute;width:30%;margin:.125em;cursor:pointer}.c-range{width:100%;padding:.5em 0;outline:0;-webkit-appearance:none}.c-range:not(:disabled)::-webkit-slider-runnable-track{background-color:#96a8b2}.c-range:not(:disabled)::-moz-range-track{background-color:#96a8b2}.c-range:not(:disabled)::-ms-track{background-color:#96a8b2}.c-range--brand:not(:disabled)::-webkit-slider-runnable-track{background-color:#2c3e50}.c-range--brand:not(:disabled)::-moz-range-track{background-color:#2c3e50}.c-range--brand:not(:disabled)::-ms-track{background-color:#2c3e50}.c-range--info:not(:disabled)::-webkit-slider-runnable-track{background-color:#2196f3}.c-range--info:not(:disabled)::-moz-range-track{background-color:#2196f3}.c-range--info:not(:disabled)::-ms-track{background-color:#2196f3}.c-range--warning:not(:disabled)::-webkit-slider-runnable-track{background-color:#ff9800}.c-range--warning:not(:disabled)::-moz-range-track{background-color:#ff9800}.c-range--warning:not(:disabled)::-ms-track{background-color:#ff9800}.c-range--success:not(:disabled)::-webkit-slider-runnable-track{background-color:#4caf50}.c-range--success:not(:disabled)::-moz-range-track{background-color:#4caf50}.c-range--success:not(:disabled)::-ms-track{background-color:#4caf50}.c-range--error:not(:disabled)::-webkit-slider-runnable-track{background-color:#f44336}.c-range--error:not(:disabled)::-moz-range-track{background-color:#f44336}.c-range--error:not(:disabled)::-ms-track{background-color:#f44336}.c-range::-webkit-slider-runnable-track{width:100%;height:10px;border:0;border-radius:30em;box-shadow:none;cursor:pointer}.c-range::-webkit-slider-thumb{width:20px;height:20px;margin:-5px 0 0;border:0;border-radius:30em;background-color:#fff;box-shadow:0 1px 4px -1px #111;cursor:pointer;-webkit-appearance:none}.c-range::-moz-range-track{width:100%;height:10px;border:0;border-radius:30em;box-shadow:none;cursor:pointer}.c-range::-moz-range-thumb{width:20px;height:20px;margin:-5px 0 0;border:0;border-radius:30em;background-color:#fff;box-shadow:0 1px 4px -1px #111;cursor:pointer}.c-range::-ms-track{width:100%;height:10px;border:0;border-radius:30em;box-shadow:none;cursor:pointer;border-color:transparent;background-color:transparent;color:transparent}.c-range::-ms-fill-lower,.c-range::-ms-fill-upper{border:0;border-radius:30em;background-color:#96a8b2;box-shadow:none}.c-range::-ms-thumb{width:20px;height:20px;margin:-5px 0 0;border:0;border-radius:30em;background-color:#fff;box-shadow:0 1px 4px -1px #111;cursor:pointer}.c-range:not(:disabled):active::-webkit-slider-thumb{transform:scale(1.4)}.c-range:not(:disabled):active::-moz-range-thumb{transform:scale(1.4)}.c-range:not(:disabled):active::-ms-thumb{transform:scale(1.4)}.c-range:focus::-webkit-slider-thumb{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-range:focus::-moz-range-thumb{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-range:focus::-ms-thumb{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-range:disabled::-webkit-slider-runnable-track,.c-range:disabled::-webkit-slider-thumb{background-color:#e5eaec;cursor:not-allowed}.c-range:disabled::-moz-range-thumb,.c-range:disabled::-moz-range-track{background-color:#e5eaec;cursor:not-allowed}.c-range:disabled::-ms-thumb,.c-range:disabled::-ms-track{background-color:#e5eaec;cursor:not-allowed}.c-pagination{display:block;width:100%;padding:1em;font-size:.83em;text-align:center}.c-pagination__controls{display:inline-block;text-align:center}.c-pagination__controls--backward{float:left;text-align:left}.c-pagination__controls--forward{float:right;text-align:right}.c-pagination__control,.c-pagination__page{border:1px solid transparent;background-color:#96a8b2;color:#fff;display:inline;max-width:100%;margin:0;padding:.5em;border-radius:4px;outline:0;font-family:inherit;font-size:1em;line-height:normal;text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #2c3e50;background-color:transparent;color:#2c3e50;min-width:2.4em;border-radius:30em}.c-pagination__control.c-button--active,.c-pagination__page.c-button--active{background-color:#7b929e}.c-pagination__control:not(:disabled):hover,.c-pagination__page:not(:disabled):hover{background-color:#b0bec5}.c-pagination__control:not(:disabled):active,.c-pagination__page:not(:disabled):active{background-color:#7b929e}.c-pagination__control:disabled,.c-pagination__page:disabled{cursor:not-allowed;opacity:.5}.c-pagination__control.c-button--active,.c-pagination__page.c-button--active{border-color:#1c2732;background-color:#1c2732;color:#fff}.c-pagination__control:not(:disabled):hover,.c-pagination__page:not(:disabled):hover{background-color:#2c3e50;color:#fff}.c-pagination__control:not(:disabled):focus,.c-pagination__page:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-pagination__control:not(:disabled):active,.c-pagination__page:not(:disabled):active{border-color:#1c2732;background-color:#1c2732;color:#fff}.c-pagination__page--current{background-color:#2c3e50;color:#fff}.c-pagination__ellipsis{padding:0 1em}.c-overlay{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,7%,.4);z-index:4}.c-overlay--fullpage{position:fixed}.c-overlay--transparent{background-color:transparent}.c-overlay--dismissable{cursor:pointer}.c-bubble{display:inline-block;position:relative;padding:1em;border-radius:4px;background-color:#111;color:#fff;text-align:center;white-space:nowrap}.c-bubble:after{display:block;position:absolute;width:0;height:0;border:10px solid transparent;content:""}.c-bubble--top:after{bottom:-20px;left:50%;transform:translateX(-50%);border-top-color:#111}.c-bubble--right:after{top:50%;left:-20px;transform:translateY(-50%);border-right-color:#111}.c-bubble--bottom:after{top:-20px;left:50%;transform:translateX(-50%);border-bottom-color:#111}.c-bubble--left:after{top:50%;right:-20px;transform:translateY(-50%);border-left-color:#111}.c-tooltip{position:relative;overflow:visible}.c-tooltip:after,.c-tooltip:before{visibility:hidden;z-index:3}.c-tooltip:before{position:absolute;border:.6em solid transparent;content:""}.c-tooltip:after{position:absolute;padding:.25em .5em;border:1px solid #111;border-radius:4px;background-color:#111;color:#fff;line-height:1.45;white-space:nowrap;content:attr(aria-label);visibility:hidden}.c-tooltip:hover:after,.c-tooltip:hover:before{visibility:visible}.c-tooltip--top:before{top:0;left:50%;transform:translate(-50%,-1em);border-top-color:#111}.c-tooltip--top:after{top:0;left:50%;transform:translate(-50%,-3em)}.c-tooltip--right:before{top:50%;left:100%;transform:translateY(-50%);border-right-color:#111}.c-tooltip--right:after{top:50%;left:100%;transform:translate(1em,-50%)}.c-tooltip--bottom:before{bottom:0;left:50%;transform:translate(-50%,1em);border-bottom-color:#111}.c-tooltip--bottom:after{bottom:0;left:50%;transform:translate(-50%,3em)}.c-tooltip--left:before{top:50%;right:100%;transform:translateY(-50%);border-left-color:#111}.c-tooltip--left:after{top:50%;right:100%;transform:translate(-1em,-50%)}.c-alerts{display:block;position:absolute;width:250px;max-height:100%;background-color:transparent;z-index:3;overflow-y:auto}.c-alerts--topleft{top:1em;left:1em}.c-alerts--topright{top:1em;right:1em}.c-alerts--bottomleft{bottom:0;left:1em}.c-alerts--bottomright{right:1em;bottom:0}.c-alert{background-color:#96a8b2;color:#fff;position:relative;margin:0 0 1em;padding:1em 3em 1em 1em;border-radius:4px}.c-alert--brand{background-color:#2c3e50;color:#fff}.c-alert--info{background-color:#2196f3;color:#fff}.c-alert--warning{background-color:#ff9800;color:#fff}.c-alert--success{background-color:#4caf50;color:#fff}.c-alert--error{background-color:#f44336;color:#fff}.c-calendar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;padding-right:0;padding-left:0;max-width:400px;padding:.25em;border:1px solid #96a8b2;border-radius:4px;background-color:#fff;text-align:center;z-index:2}.c-calendar__control,.c-calendar__date{background-color:#fff;color:#96a8b2;display:inline;-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%;margin:0;padding:1em .5em;border:1px solid transparent;border-radius:4px;outline:0;font-size:1em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-calendar__control.c-button--active,.c-calendar__date.c-button--active{background-color:#e8e8e8}.c-calendar__control:not(:disabled):hover,.c-calendar__date:not(:disabled):hover{background-color:#fff}.c-calendar__control:not(:disabled):focus,.c-calendar__date:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-calendar__control:not(:disabled):active,.c-calendar__date:not(:disabled):active{background-color:#e8e8e8}.c-calendar__header{-ms-flex:1;flex:1;-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.c-calendar__day,.c-calendar__header{padding-right:1em;padding-left:1em;padding-right:0;padding-left:0;padding:.5em 0}.c-calendar__day{-ms-flex:1;flex:1;-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%;font-weight:700}.c-calendar__date:hover{border:1px solid #96a8b2}.c-calendar__date--in-month{color:#111}.c-calendar__date--today{border-color:#cad4d8}.c-calendar__date--selected,.c-calendar__date--selected:hover{border:1px solid transparent;background-color:#2c3e50;color:#fff;border-color:#2c3e50}.c-calendar__date--selected.c-button--active,.c-calendar__date--selected:hover.c-button--active{background-color:#1c2732}.c-calendar__date--selected:hover:not(:disabled):hover,.c-calendar__date--selected:not(:disabled):hover{background-color:#3c556e}.c-calendar__date--selected:hover:not(:disabled):focus,.c-calendar__date--selected:not(:disabled):focus{border-color:#2196f3;box-shadow:inset 0 0 0 2px #4dabf5}.c-calendar__date--selected:hover:not(:disabled):active,.c-calendar__date--selected:not(:disabled):active{background-color:#1c2732}.c-nav{background-color:#111;color:#fff;width:100%;margin:0;padding:0;z-index:3}.c-nav__content,.c-nav__item{display:block;height:3.5em;padding:0 1em;color:inherit;line-height:3.5em;vertical-align:middle}.c-nav__content .o-image,.c-nav__item .o-image{height:100%}.c-nav__item{text-decoration:none;cursor:pointer}.c-nav__item:not(:disabled):hover{background-color:#7b929e;color:#fff}.c-nav__item:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item:not(:disabled):active{background-color:#647c88;color:#fff}.c-nav--inline .c-nav__content,.c-nav--inline .c-nav__item{display:inline-block}.c-nav--inline .c-nav__content--right,.c-nav--inline .c-nav__item--right{float:right}.c-nav--light{background-color:#f2f2ea;color:#3f2d26}.c-nav--top{top:0;bottom:auto}.c-nav--bottom,.c-nav--top{position:absolute;right:0;left:0}.c-nav--bottom{top:auto;bottom:0}.c-nav--left{right:auto;left:0}.c-nav--left,.c-nav--right{position:absolute;top:0;bottom:0}.c-nav--right{right:0;left:auto}.c-nav--fixed{position:fixed}.c-nav__item--active{background-color:#7b929e;color:#fff}.c-nav__item--brand:not(:disabled):hover{background-color:#2c3e50;color:#fff}.c-nav__item--brand:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item--brand:not(:disabled):active{background-color:#1c2732;color:#fff}.c-nav__item--brand.c-nav__item--active{background-color:#2c3e50;color:#fff}.c-nav__item--info:not(:disabled):hover{background-color:#2196f3;color:#fff}.c-nav__item--info:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item--info:not(:disabled):active{background-color:#0c7fda;color:#fff}.c-nav__item--info.c-nav__item--active{background-color:#2196f3;color:#fff}.c-nav__item--warning:not(:disabled):hover{background-color:#ff9800;color:#fff}.c-nav__item--warning:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item--warning:not(:disabled):active{background-color:#d17d00;color:#fff}.c-nav__item--warning.c-nav__item--active{background-color:#ff9800;color:#fff}.c-nav__item--success:not(:disabled):hover{background-color:#4caf50;color:#fff}.c-nav__item--success:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item--success:not(:disabled):active{background-color:#3e8f41;color:#fff}.c-nav__item--success.c-nav__item--active{background-color:#4caf50;color:#fff}.c-nav__item--error:not(:disabled):hover{background-color:#f44336;color:#fff}.c-nav__item--error:not(:disabled):focus{box-shadow:inset 0 0 0 2px #4dabf5}.c-nav__item--error:not(:disabled):active{background-color:#ef1d0d;color:#fff}.c-nav__item--error.c-nav__item--active{background-color:#f44336;color:#fff}.c-progress{display:block;border:0;border-radius:4px;background-color:#e5eaec;color:#fff;text-align:center;overflow:hidden}.c-progress--rounded{border-radius:30em}.c-progress__bar{display:block;height:100%;float:left;border-radius:0;background-color:#96a8b2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-progress__bar:after{color:transparent!important;content:"-"}.c-progress__bar--brand{background-color:#2c3e50}.c-progress__bar--info{background-color:#2196f3}.c-progress__bar--warning{background-color:#ff9800}.c-progress__bar--success{background-color:#4caf50}.c-progress__bar--error{background-color:#f44336}.c-avatar{display:inline-block;position:relative;width:3em;height:3em;margin:0;border-radius:30em;background-color:#2c3e50;color:#fff}.c-avatar[data-text]:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:attr(data-text)}.c-avatar__img{display:block;width:100%;height:100%;border-radius:30em;overflow:hidden}.c-avatar__img+.c-avatar__img{position:absolute;right:0;bottom:0;width:50%;height:50%}.u-centered{text-align:center}.u-center-block{position:relative}.u-absolute-center,.u-center-block__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.u-center-block__content--vertical{left:auto;transform:translateY(-50%)}.u-center-block__content--horizontal{top:auto;transform:translateX(-50%)}.u-no-overflow{overflow:hidden}.u-letter-box--super{padding-top:3em;padding-bottom:3em}.u-letter-box--xlarge{padding-top:2em;padding-bottom:2em}.u-letter-box--large{padding-top:1.5em;padding-bottom:1.5em}.u-letter-box--medium{padding-top:1em;padding-bottom:1em}.u-letter-box--small{padding-top:.5em;padding-bottom:.5em}.u-letter-box--xsmall{padding-top:.25em;padding-bottom:.25em}.u-letter-box--tiny{padding-top:.125em;padding-bottom:.125em}.u-letter-box--none{padding-top:0;padding-bottom:0}.u-pillar-box--super{padding-right:3em;padding-left:3em}.u-pillar-box--xlarge{padding-right:2em;padding-left:2em}.u-pillar-box--large{padding-right:1.5em;padding-left:1.5em}.u-pillar-box--medium{padding-right:1em;padding-left:1em}.u-pillar-box--small{padding-right:.5em;padding-left:.5em}.u-pillar-box--xsmall{padding-right:.25em;padding-left:.25em}.u-pillar-box--tiny{padding-right:.125em;padding-left:.125em}.u-pillar-box--none{padding-right:0;padding-left:0}.u-window-box--super{padding:3em}.u-window-box--xlarge{padding:2em}.u-window-box--large{padding:1.5em}.u-window-box--medium{padding:1em}.u-window-box--small{padding:.5em}.u-window-box--xsmall{padding:.25em}.u-window-box--tiny{padding:.125em}.u-window-box--none{padding:0}.u-high,.u-higher,.u-highest{border:0}.u-high{box-shadow:0 0 1px hsla(0,0%,7%,.6),0 5px 10px -3px hsla(0,0%,7%,.4)}.u-higher{box-shadow:0 0 1px hsla(0,0%,7%,.6),0 10px 25px -4px hsla(0,0%,7%,.4)}.u-highest{box-shadow:0 0 1px hsla(0,0%,7%,.6),0 20px 55px -8px hsla(0,0%,7%,.4)}.u-super{font-size:2em}.u-xlarge{font-size:1.5em}.u-large{font-size:1.17em}.u-medium{font-size:1em}.u-small{font-size:.83em}.u-xsmall{font-size:.67em}

data/vendor/blaze-css/demo/index.html

@@ -0,0 +1,2593 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="blaze.min.css">
+  <!--<link rel="stylesheet" href="themes/blaze.your-theme-name-here.min.css">-->
+  <link rel="stylesheet" href="blaze.animations.min.css">
+  <link rel="stylesheet" href="blaze.colors.min.css">
+
+  <title>Blaze :: Demo</title>
+  <style>
+    body {
+      padding: 0 0 50px 0;
+    }
+
+    .o-demo-container {
+      position: relative;
+      height: 550px;
+      margin-top: 1em;
+      overflow: hidden;
+    }
+
+    .o-demo-container--modal {
+      background-image: url(//placehold.it/1024x963/42A5F5/FFF);
+      background-size: cover;
+      background-position: center;
+    }
+
+    .o-grid--demo.o-grid {
+      border: 2px solid #ff69b4;
+    }
+
+    .o-grid--demo .o-grid__cell {
+      border: 2px solid #00bfff;
+      background-color: #b2f5b5;
+    }
+  </style>
+</head>
+<body class="c-text">
+<div class="o-container o-container--medium u-pillar-box--large">
+  <h1 class="c-heading u-centered">Blaze :: Demo</h1>
+  <h2 class="c-heading">Fluid Grid</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Widths</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-fixed@large" style="width: 450px">
+      <div class="o-grid-text">450px wide only when large screen</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Offsets</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-20">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-20 o-grid__cell--offset-60">
+      <div class="o-grid-text">second</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">No wrap</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-66">
+      <div class="o-grid-text">second</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Wrap</h2>
+  <div class="o-grid o-grid--wrap o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-66">
+      <div class="o-grid-text">second</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Grid in a grid</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid">
+        <div class="o-grid__cell">
+          <div class="o-grid-text">first</div>
+        </div>
+        <div class="o-grid__cell">
+          <div class="o-grid-text">second</div>
+        </div>
+      </div>
+      <div class="o-grid">
+        <div class="o-grid__cell">
+          <div class="o-grid-text">third</div>
+        </div>
+        <div class="o-grid__cell">
+          <div class="o-grid-text">fourth</div>
+        </div>
+      </div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">fifth</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Vertical alignment</h2>
+  <h3 class="c-heading">Per grid</h3>
+  <div class="o-grid o-grid--bottom o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">fourth
+        <br>fourth
+        <br>fourth
+        <br>fourth
+        <br>fourth
+        <br>
+      </div>
+    </div>
+    <div class="o-grid-text"></div>
+  </div>
+
+  <h3 class="c-heading">Per cell</h3>
+  <div class="o-grid o-grid--bottom o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--top">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--center">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">fourth
+        <br>fourth
+        <br>fourth
+        <br>fourth
+        <br>fourth
+        <br>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Fluid Snapping</h2>
+  <div class="o-grid o-grid--small-full o-grid--medium-fit o-grid--large-full o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">No gutter</h2>
+  <h3 class="c-heading">Per grid</h3>
+  <div class="o-grid o-grid--no-gutter o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h3 class="c-heading">per cell</h3>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--no-gutter">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Responsive</h2>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50@small">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@small">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@small">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50@medium">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@medium">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@medium">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50@large">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@large">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@large">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50@xlarge">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@xlarge">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@xlarge">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+  <div class="o-grid o-grid--demo">
+    <div class="o-grid__cell o-grid__cell--width-50@super">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@super">
+      <div class="o-grid-text">second</div>
+    </div>
+    <div class="o-grid__cell o-grid__cell--width-25@super">
+      <div class="o-grid-text">third</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Responsive Hide/Show</h2>
+  <div class="o-grid o-grid--demo">
+    <div
+      class="o-grid__cell o-grid__cell--visible@xsmall o-grid__cell--hidden@small o-grid__cell--visible@medium o-grid__cell--hidden@large o-grid__cell--visible@xlarge o-grid__cell--hidden@super">
+      <div class="o-grid-text">first</div>
+    </div>
+    <div
+      class="o-grid__cell o-grid__cell--hidden o-grid__cell--hidden@xsmall o-grid__cell--visible@small o-grid__cell--hidden@medium o-grid__cell--visible@large o-grid__cell--hidden@xlarge o-grid__cell--visible@super">
+      <div class="o-grid-text">second</div>
+    </div>
+  </div>
+</div>
+<div class="o-container o-container--large u-pillar-box--large">
+  <h2 class="c-heading">Typography</h2>
+
+  <h3 class="c-heading">Body text</h3>
+
+  <p class="c-paragraph">This is a paragraph <a class="c-link" href="#">with a link in it</a>. It has a bit of
+    margin bottom.</p>
+
+  <p class="c-paragraph">so that subsequent paragraphs don't look bunched up. Also <span
+    class="c-link">this isn't really a link</span>.</p>
+
+  <p class="c-paragraph">
+    If you ever need to <span class="c-text--highlight">highlight some text</span> wrap the highlight class
+    around it, and <span class="c-text--quiet">if you want to speak quietly use the <span
+    class="c-text--quiet">quite class</span></span>.
+    Don't you think <abbr title="Cascading StyleSheets" class="c-text--help">CSS</abbr> is awesome?!
+    <span class="c-text--loud">We think so!</span>
+  </p>
+
+  <address class="c-address">
+    <span class="c-address__heading">Addresses</span>
+    10010 The Street,<br>
+    Binary Town,<br>
+    Offandon City,<br>
+    <abbr title="Postcode">CPU01</abbr>
+  </address>
+
+  <blockquote class="c-blockquote">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+
+  <blockquote class="c-blockquote c-blockquote--brand">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+  <blockquote class="c-blockquote c-blockquote--info">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+  <blockquote class="c-blockquote c-blockquote--warning">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+  <blockquote class="c-blockquote c-blockquote--success">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+  <blockquote class="c-blockquote c-blockquote--error">
+    <p class="c-blockquote__body">
+      Energy is inversely equal to the number of children you have multiplied by how young they are!
+    </p>
+    <footer class="c-blockquote__footer">- Every parent everywhere</footer>
+  </blockquote>
+
+  <p class="c-paragraph">Need to write some code? You can <span
+    class="c-code">console.log('write it inline');</span>
+    or
+    if
+    you want:</p>
+
+  <div class="c-code c-code--multiline">(demo = () => {
+    alert('you can write code on multiple lines!')
+    })()
+  </div>
+
+  <p class="c-paragraph">To format your code press <span class="c-kbd">ctrl + alt + l</span></p>
+
+  <h2 class="c-heading">Breadcrumbs</h2>
+  <ol class="c-breadcrumbs">
+    <li class="c-breadcrumbs__crumb"><a class="c-link">Home</a></li>
+    <li class="c-breadcrumbs__crumb"><a class="c-link">Cars</a></li>
+    <li class="c-breadcrumbs__crumb"><a class="c-link">Electric</a></li>
+    <li class="c-breadcrumbs__crumb"><a class="c-link">Tesla</a></li>
+    <li class="c-breadcrumbs__crumb c-text--loud">P100d</li>
+  </ol>
+
+  <h2 class="c-heading">Lists</h2>
+
+  <h2 class="c-heading">Un-ordered</h2>
+
+  <ul class="c-list">
+    <li class="c-list__item">Lorem ipsum dolor sit amet</li>
+    <li class="c-list__item">Consectetur adipiscing elit</li>
+    <li class="c-list__item">Nulla volutpat aliquam velit
+      <ul class="c-list">
+        <li class="c-list__item">Phasellus iaculis neque</li>
+        <li class="c-list__item">Purus sodales ultricies</li>
+        <li class="c-list__item">Vestibulum laoreet porttitor sem</li>
+        <li class="c-list__item">Ac tristique libero volutpat at</li>
+      </ul>
+    </li>
+    <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
+  </ul>
+
+  <h2 class="c-heading">Ordered</h2>
+
+  <ol class="c-list c-list--ordered">
+    <li class="c-list__item">Lorem ipsum dolor sit amet</li>
+    <li class="c-list__item">Consectetur adipiscing elit</li>
+    <li class="c-list__item">Nulla volutpat aliquam velit
+      <ol class="c-list c-list--ordered">
+        <li class="c-list__item">Phasellus iaculis neque</li>
+        <li class="c-list__item">Purus sodales ultricies
+          <ol class="c-list c-list--ordered">
+            <li class="c-list__item">Lorem ipsum dolor sit amet</li>
+            <li class="c-list__item">Consectetur adipiscing elit</li>
+          </ol>
+        </li>
+        <li class="c-list__item">Vestibulum laoreet porttitor sem</li>
+        <li class="c-list__item">Ac tristique libero volutpat at</li>
+      </ol>
+    </li>
+    <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
+  </ol>
+
+  <h2 class="c-heading">Unstyled</h2>
+
+  <ul class="c-list c-list--unstyled">
+    <li class="c-list__item"><strong>I'm an unstyled list</strong></li>
+    <li class="c-list__item">Consectetur adipiscing elit</li>
+    <li class="c-list__item">Nulla volutpat aliquam velit
+      <ul class="c-list">
+        <li class="c-list__item">Phasellus iaculis neque</li>
+        <li class="c-list__item">Purus sodales ultricies</li>
+        <li class="c-list__item--unstyled"><strong>I'm an unstyled item</strong></li>
+        <li class="c-list__item">Ac tristique libero volutpat at</li>
+      </ul>
+    </li>
+    <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
+  </ul>
+
+  <h2 class="c-heading">Inline</h2>
+
+  <ul class="c-list c-list--inline">
+    <li class="c-list__item">Lorem ipsum dolor sit amet</li>
+    <li class="c-list__item">Consectetur adipiscing elit</li>
+    <li class="c-list__item">Nulla volutpat aliquam velit</li>
+  </ul>
+
+  <h1 class="c-heading">Super</h1>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h2 class="c-heading">xLarge</h2>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h3 class="c-heading">Large</h3>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h4 class="c-heading">Medium</h4>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h5 class="c-heading">Small</h5>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h6 class="c-heading">xSmall</h6>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
+
+  <h1 class="c-heading">
+    Page heading
+    <span class="c-heading__sub">Sub-header</span>
+
+    <div class="c-heading__sub">Sub-header</div>
+  </h1>
+
+  <h2 class="c-heading">Tables</h2>
+
+  <table class="c-table">
+    <caption class="c-table__caption">Basic table</caption>
+    <thead class="c-table__head">
+    <tr class="c-table__row c-table__row--heading">
+      <th class="c-table__cell">First name</th>
+      <th class="c-table__cell">Last name</th>
+      <th class="c-table__cell">Username</th>
+    </tr>
+    </thead>
+    <tbody class="c-table__body">
+    <tr class="c-table__row">
+      <td class="c-table__cell">Gregory</td>
+      <td class="c-table__cell">Pratt</td>
+      <td class="c-table__cell">@grumpywizards</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Jim</td>
+      <td class="c-table__cell">Krik</td>
+      <td class="c-table__cell">@captaink</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Mr.</td>
+      <td class="c-table__cell">Spock</td>
+      <td class="c-table__cell">@science101</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <h3 class="c-heading">Striped</h3>
+
+  <table class="c-table c-table--striped">
+    <caption class="c-table__caption">Striped rows</caption>
+    <thead class="c-table__head">
+    <tr class="c-table__row c-table__row--heading">
+      <th class="c-table__cell">First name</th>
+      <th class="c-table__cell">Last name</th>
+      <th class="c-table__cell">Username</th>
+    </tr>
+    </thead>
+    <tbody class="c-table__body">
+    <tr class="c-table__row">
+      <td class="c-table__cell">Gregory</td>
+      <td class="c-table__cell">Pratt</td>
+      <td class="c-table__cell">@grumpywizards</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Jim</td>
+      <td class="c-table__cell">Krik</td>
+      <td class="c-table__cell">@captaink</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Mr.</td>
+      <td class="c-table__cell">Spock</td>
+      <td class="c-table__cell">@science101</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <h3 class="c-heading">Clickable table</h3>
+
+  <table class="c-table c-table--clickable">
+    <caption class="c-table__caption">Clickable table, row inactive</caption>
+    <thead class="c-table__head">
+    <tr class="c-table__row c-table__row--heading">
+      <th class="c-table__cell">First name</th>
+      <th class="c-table__cell">Last name</th>
+      <th class="c-table__cell">Username</th>
+    </tr>
+    </thead>
+    <tbody class="c-table__body">
+    <tr class="c-table__row">
+      <td class="c-table__cell">Gregory</td>
+      <td class="c-table__cell">Pratt</td>
+      <td class="c-table__cell">@grumpywizards</td>
+    </tr>
+    <tr class="c-table__row c-table__row--inactive">
+      <td class="c-table__cell">Jim</td>
+      <td class="c-table__cell">Krik</td>
+      <td class="c-table__cell">@captaink</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Mr.</td>
+      <td class="c-table__cell">Spock</td>
+      <td class="c-table__cell">@science101</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <h3 class="c-heading">Clickable row</h3>
+
+  <table class="c-table">
+    <caption class="c-table__caption">Clickable row, inactive row</caption>
+    <thead class="c-table__head">
+    <tr class="c-table__row c-table__row--heading">
+      <th class="c-table__cell">First name</th>
+      <th class="c-table__cell">Last name</th>
+      <th class="c-table__cell">Username</th>
+    </tr>
+    </thead>
+    <tbody class="c-table__body">
+    <tr class="c-table__row">
+      <td class="c-table__cell">Gregory</td>
+      <td class="c-table__cell">Pratt</td>
+      <td class="c-table__cell">@grumpywizards</td>
+    </tr>
+    <tr class="c-table__row c-table__row--clickable">
+      <td class="c-table__cell">Jim</td>
+      <td class="c-table__cell">Krik</td>
+      <td class="c-table__cell">@captaink</td>
+    </tr>
+    <tr class="c-table__row c-table__row--inactive">
+      <td class="c-table__cell">Mr.</td>
+      <td class="c-table__cell">Spock</td>
+      <td class="c-table__cell">@science101</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <h3 class="c-heading">Condensed</h3>
+
+  <table class="c-table c-table--condensed">
+    <caption class="c-table__caption">Condensed</caption>
+    <thead class="c-table__head">
+    <tr class="c-table__row c-table__row--heading">
+      <th class="c-table__cell">First name</th>
+      <th class="c-table__cell">Last name</th>
+      <th class="c-table__cell">Username</th>
+    </tr>
+    </thead>
+    <tbody class="c-table__body">
+    <tr class="c-table__row">
+      <td class="c-table__cell">Gregory</td>
+      <td class="c-table__cell">Pratt</td>
+      <td class="c-table__cell">@grumpywizards</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Jim</td>
+      <td class="c-table__cell">Krik</td>
+      <td class="c-table__cell">@captaink</td>
+    </tr>
+    <tr class="c-table__row">
+      <td class="c-table__cell">Mr.</td>
+      <td class="c-table__cell">Spock</td>
+      <td class="c-table__cell">@science101</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <h3 class="c-heading">Using divs</h3>
+
+  <div class="c-table c-table--striped">
+    <div class="c-table__caption">divs instead of trs ths tds</div>
+    <div class="c-table__row c-table__row--heading">
+      <span class="c-table__cell">First name</span>
+      <span class="c-table__cell">Last name</span>
+      <span class="c-table__cell">Username</span>
+    </div>
+    <div class="c-table__row">
+      <span class="c-table__cell">Gregory</span>
+      <span class="c-table__cell">Pratt</span>
+      <span class="c-table__cell">@grumpywizards</span>
+    </div>
+    <div class="c-table__row">
+      <span class="c-table__cell">Jim</span>
+      <span class="c-table__cell">Krik</span>
+      <span class="c-table__cell">@captaink</span>
+    </div>
+    <div class="c-table__row">
+      <span class="c-table__cell">Mr.</span>
+      <span class="c-table__cell">Spock</span>
+      <span class="c-table__cell">@science101</span>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Images</h2>
+
+  <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF"
+       alt="random image">
+  <code class="c-code c-code--multiline">display: block;
+    max-width: 100%;
+    height: auto;</code>
+
+  <h2 class="c-heading">Cards</h2>
+
+  <div class="c-card">
+    <div class="c-card__item">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+  </div>
+
+  <div class="c-card">
+    <div class="c-card__item c-card__item--divider">Header</div>
+    <div class="c-card__item">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+    <div class="c-card__item c-card__item--divider">Footer</div>
+  </div>
+
+  <div class="c-card">
+    <div class="c-card__item c-card__item--info o-media">
+      <div class="o-media__image">
+        <img class="o-image" src="https://placehold.it/80"/>
+      </div>
+      <div class="o-media__body">
+        <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
+        <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat
+          corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora
+          ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="c-card">
+    <div class="c-card__item c-card__item--divider">Header</div>
+    <div class="c-card__item c-card__item--success">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+    <div class="c-card__item c-card__item--divider">Footer</div>
+  </div>
+
+  <div class="c-card">
+    <div class="c-card__item c-card__item--divider">Header</div>
+    <div class="c-card__item c-card__item--warning">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+    <div class="c-card__item c-card__item--divider">Footer</div>
+  </div>
+
+  <div class="c-card u-high">
+    <div class="c-card__item c-card__item--divider">High</div>
+    <div class="c-card__item">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+  </div>
+
+  <div class="c-card u-higher">
+    <div class="c-card__item c-card__item--divider">Higher</div>
+    <div class="c-card__item">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+  </div>
+
+  <div class="c-card u-highest">
+    <div class="c-card__item c-card__item--divider">Highest</div>
+    <div class="c-card__item">
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+
+      <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea
+        et.</p>
+    </div>
+  </div>
+
+  <div class="c-card u-highest">
+    <div class="c-card__item">Item 1</div>
+    <div class="c-card__item">Item 2</div>
+    <div class="c-card__item c-card__item--divider">Item divider</div>
+    <div class="c-card__item">Item 3</div>
+    <div class="c-card__item">Item 4</div>
+  </div>
+
+  <div class="c-card u-highest">
+    <div class="c-card__item">Item 1</div>
+    <div class="c-card__item">Item 2</div>
+    <div class="c-card__item c-card__item--divider c-card__item--error">Item divider</div>
+    <div class="c-card__item">Item 3</div>
+    <div class="c-card__item">Item 4</div>
+  </div>
+
+  <div class="c-card u-highest c-card--grouped">
+    <div class="c-card__item">Item 1</div>
+    <div class="c-card__item">Item 2</div>
+    <div class="c-card__divider"></div>
+    <div class="c-card__item">Item 3</div>
+    <div class="c-card__item">Item 4</div>
+    <div class="c-card__item">Item 5</div>
+    <div class="c-card__divider"></div>
+    <div class="c-card__item">Item 6</div>
+    <div class="c-card__group-divider"></div>
+    <div class="c-card__item">Item 7</div>
+    <div class="c-card__item">Item 8</div>
+  </div>
+
+  <div class="c-card u-highest">
+    <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <header class="c-card__header">
+      <h2 class="c-heading">
+        Heading
+        <div class="c-heading__sub">Sub-heading</div>
+      </h2>
+    </header>
+    <div class="c-card__body">
+      To make a contribution to the world by making tools for the mind that advance humankind.
+    </div>
+    <footer class="c-card__footer">
+      <div class="c-input-group">
+        <button class="c-button c-butt-brand--block c-button--ghost-brand">Buy</button>
+        <button class="c-button c-button--block c-button--ghost-brand">Buy</button>
+        <button class="c-button c-button--block c-button--ghost-brand">Buy</button>
+        <brand>
+    </footer>
+  </div>
+
+  <div class="c-card u-highest">
+    <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <header class="c-card__header">
+      <h2 class="c-heading">
+        Heading
+        <span class="c-heading__sub">Sub-heading</span>
+      </h2>
+    </header>
+    <div class="c-card__body">
+      To make a contribution to the world by making tools for the mind that advance humankind.
+    </div>
+    <footer class="c-card__footer c-card__footer--block">
+      <div class="c-input-group">
+        <button class="c-button c-button--block c-button--success">Save</button>
+        <button class="c-button c-button--block c-button--error">Cancel</button>
+      </div>
+    </footer>
+  </div>
+
+  <h2 class="c-heading">Menus</h2>
+
+  <ul class="c-card c-card--menu u-high a-menu a-menu--top">
+    <li class="c-card__item">Menu 1</li>
+    <li class="c-card__item">Menu 2</li>
+    <li class="c-card__item c-card__item--divider">Divider</li>
+    <li class="c-card__item">Menu 3</li>
+    <li class="c-card__item">Menu 4</li>
+    <li class="c-card__item c-card__item--disabled">Menu item disabled</li>
+    <li class="c-card__item c-card__item--active">Menu item active</li>
+    <li class="c-card__item">Menu 5</li>
+    <li class="c-card__item">Menu 6</li>
+    <li class="c-card__item">Menu 7</li>
+    <li class="c-card__item">Menu 8</li>
+    <li class="c-card__item">Menu 9</li>
+    <li class="c-card__item">Menu 10</li>
+  </ul>
+
+  <ul class="c-card c-card--menu u-high c-card--grouped a-menu a-menu--top">
+    <li class="c-card__item">Menu 1</li>
+    <li class="c-card__item">Menu 2</li>
+    <li class="c-card__item">Menu 3</li>
+    <li class="c-card__item">Menu 4</li>
+    <li class="c-card__divider"></li>
+    <li class="c-card__item c-card__item--disabled">Menu item disabled</li>
+    <li class="c-card__item c-card__item--active">Menu item active</li>
+    <li class="c-card__divider"></li>
+    <li class="c-card__item">Menu 5</li>
+    <li class="c-card__item">Menu 6</li>
+    <li class="c-card__item">Menu 7</li>
+    <li class="c-card__divider"></li>
+    <li class="c-card__item">Menu 8</li>
+    <li class="c-card__divider"></li>
+    <li class="c-card__item">Menu 9</li>
+    <li class="c-card__item">Menu 10</li>
+  </ul>
+
+  <ul class="c-card c-card--menu">
+    <li class="c-card__item c-card__item--brand">Menu 1</li>
+    <li class="c-card__item c-card__item--brand">Menu 2</li>
+    <li class="c-card__item c-card__item--divider">Divider</li>
+    <li class="c-card__item c-card__item--brand">Menu 3</li>
+    <li class="c-card__item c-card__item--brand">Menu 4</li>
+    <li class="c-card__item c-card__item--brand c-card__item--disabled">Menu item disabled</li>
+    <li class="c-card__item c-card__item--brand c-card__item--active">Menu item active</li>
+    <li class="c-card__item c-card__item--brand">Menu 5</li>
+    <li class="c-card__item c-card__item--brand">Menu 6</li>
+    <li class="c-card__item c-card__item--brand">Menu 7</li>
+    <li class="c-card__item c-card__item--brand">Menu 8</li>
+    <li class="c-card__item c-card__item--brand">Menu 9</li>
+    <li class="c-card__item c-card__item--brand">Menu 10</li>
+  </ul>
+
+  <h3 class="c-heading">Combo Menu</h3>
+
+  <div class="c-card c-card--menu u-high">
+    <label class="c-card__item c-field c-field--choice">
+      <input type="checkbox"> Item 1
+    </label>
+    <label class="c-card__item c-field c-field--choice">
+      <input type="checkbox"> Item 2
+    </label>
+    <div class="c-card__item c-card__item--divider">Divider</div>
+    <label class="c-card__item c-field c-field--choice">
+      <input type="checkbox"> Item 3
+    </label>
+    <label class="c-card__item c-field c-field--choice">
+      <input type="checkbox"> Item 4
+    </label>
+  </div>
+
+  <h2 class="c-heading">Accordion</h2>
+
+  <div class="c-card c-card--accordion u-high">
+    <input type="checkbox" id="accordion-1">
+    <label class="c-card__item" for="accordion-1">Item 1</label>
+    <div class="c-card__item">Pane 1</div>
+    <input type="checkbox" id="accordion-2">
+    <label class="c-card__item" for="accordion-2">Item 2</label>
+    <div class="c-card__item o-media">
+      <div class="o-media__image">
+        <img class="o-image" src="https://placehold.it/80"/>
+      </div>
+      <div class="o-media__body">
+        <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
+        <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam.</p>
+        <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam.</p>
+        <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam.</p>
+        <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam.</p>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Mega Card</h2>
+
+  <div class="c-card c-card--accordion u-highest">
+    <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <header class="c-card__header">
+      <h2 class="c-heading">
+        Heading
+        <div class="c-heading__sub">Sub-heading</div>
+      </h2>
+    </header>
+    <div class="c-card__body">
+      To make a contribution to the world by making tools for the mind that advance humankind.
+    </div>
+    <div class="c-card__item">Item 1</div>
+    <div class="c-card__item">Item 2</div>
+    <div class="c-card__item c-card__item--divider c-card__item--info">Item divider</div>
+    <div class="c-card__item">Item 3</div>
+    <div class="c-card__item">Item 4</div>
+    <input type="checkbox" id="mega-1">
+    <label class="c-card__item c-card__item--warning" for="mega-1">Expander 1</label>
+    <div class="c-card__item">Pane 2</div>
+    <input type="checkbox" id="mega-2">
+    <label class="c-card__item c-card__item--warning" for="mega-2">Expander 2</label>
+    <div class="c-card__item">Pane 2</div>
+    <footer class="c-card__footer c-card__footer--block">
+      <div class="c-input-group">
+        <button class="c-button c-button--block c-button--success">Save</button>
+        <button class="c-button c-button--block c-button--error">Cancel</button>
+      </div>
+    </footer>
+  </div>
+
+  <h2 class="c-heading">Buttons</h2>
+
+  <a class="c-button" href="#">Link</a>
+  <button class="c-button" type="button">Button</button>
+  <button class="c-button c-button--link" type="button">Link Button</button>
+  <button class="c-button" type="button"><i class="fa fa-fw fa-automobile c-button__icon-left"></i>Button</button>
+  <button class="c-button" type="button">Button<i class="fa fa-fw fa-shopping-cart c-button__icon-right"></i></button>
+  <input class="c-button" type="button" value="Input">
+  <input class="c-button" type="submit" value="Submit">
+  <button disabled class="c-button" type="button">Disabled button</button>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--info" type="button">This</button>
+			<button class="c-button c-button--warning" type="button">is a set</button>
+			<button class="c-button c-button" type="button">of buttons</button>
+			<button class="c-button c-button--success" type="button">in a</button>
+			<button class="c-button c-button--error" type="button">group</button>
+      <button class="c-button c-button--brand c-button--brand" type="button">now with brand</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--info" type="button">Button 1</button>
+			<button class="c-button c-button--info" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--warning" type="button">Button 1</button>
+			<button class="c-button c-button--warning" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active" type="button">Button 1</button>
+			<button class="c-button" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--success" type="button">Button 1</button>
+			<button class="c-button c-button--success" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--error" type="button">Button 1</button>
+			<button class="c-button c-button--error" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--brand" type="button">Button 1</button>
+			<button class="c-button c-button--brand" type="button">Button 2</button>
+      </span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--ghost-info" type="button">Button 1</button>
+			<button class="c-button c-button--ghost-info" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--ghost-warning" type="button">Button 1</button>
+			<button class="c-button c-button--ghost-warning" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--ghost c-button--active" type="button">Button 1</button>
+			<button class="c-button c-button--ghost" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--ghost-success" type="button">Button 1</button>
+			<button class="c-button c-button--ghost-success" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--ghost-error" type="button">Button 1</button>
+			<button class="c-button c-button--ghost-error" type="button">Button 2</button>
+      </span>
+  </div>
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--active c-button--ghost-brand" type="button">Button 1</button>
+			<button class="c-button c-button--ghost-brand" type="button">Button 2</button>
+      </span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-link c-link--info" type="button">This</button>
+			<button class="c-button c-link c-link--warning" type="button">is a set</button>
+			<button class="c-button c-link" type="button">of link buttons</button>
+			<button class="c-button c-link c-link--success" type="button">in an</button>
+			<button class="c-button c-link c-link--error" type="button">input group</button>
+      <button class="c-button c-link" type="button" disabled>disabled</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group c-input-group--rounded">
+			<button disabled class="c-button c-button--info" type="button">This</button>
+			<button disabled class="c-button c-button--warning" type="button">is a set</button>
+			<button disabled class="c-button c-button" type="button">of disabled buttons</button>
+			<button disabled class="c-button c-button--success" type="button">in a</button>
+			<button disabled class="c-button c-button--error" type="button">group</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group c-input-group--rounded">
+			<button class="c-button c-button--info" type="button">This</button>
+			<button class="c-button c-button--warning" type="button">is a set</button>
+			<button class="c-button c-button" type="button">of buttons</button>
+			<button class="c-button c-button--success" type="button">in a</button>
+			<button class="c-button c-button--error" type="button">group</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group">
+			<button class="c-button c-button--ghost" type="button">This</button>
+			<button class="c-button c-button--ghost" type="button">is a set</button>
+			<button class="c-button c-button--ghost" type="button">of buttons</button>
+			<button class="c-button c-button--ghost" type="button">in a</button>
+			<button class="c-button c-button--ghost" type="button">group</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group c-input-group--rounded">
+			<button class="c-button c-button--ghost-info" type="button">This</button>
+			<button class="c-button c-button--ghost-warning" type="button">is a set</button>
+			<button class="c-button c-button--ghost" type="button">of buttons</button>
+			<button class="c-button c-button--ghost-success" type="button">in a</button>
+			<button class="c-button c-button--ghost-error" type="button">group</button>
+		</span>
+  </div>
+
+  <div class="u-letter-box--small">
+		<span class="c-input-group c-input-group--rounded">
+			<button disabled class="c-button c-button--ghost-info" type="button">This</button>
+			<button disabled class="c-button c-button--ghost-warning" type="button">is a set</button>
+			<button disabled class="c-button c-button--ghost" type="button">of disabled buttons</button>
+			<button disabled class="c-button c-button--ghost-success" type="button">in a</button>
+			<button disabled class="c-button c-button--ghost-error" type="button">group</button>
+		</span>
+  </div>
+
+  <h3 class="c-heading">Button sizes</h3>
+
+  <button class="c-button u-xsmall" type="button">xsmall</button>
+  <button class="c-button u-small" type="button">small</button>
+  <button class="c-button u-medium" type="button">medium</button>
+  <button class="c-button u-large" type="button">large</button>
+  <button class="c-button u-xlarge" type="button">xlarge</button>
+  <button class="c-button u-super" type="button">super</button>
+
+  <h3 class="c-heading">Full width</h3>
+
+  <button class="c-button c-button--block u-xsmall" type="button">xsmall</button>
+  <button class="c-button c-button--block u-small" type="button">small</button>
+  <button class="c-button c-button--block u-medium" type="button">medium</button>
+  <button class="c-button c-button--block u-large" type="button">large</button>
+  <button class="c-button c-button--block u-xlarge" type="button">xlarge</button>
+  <button class="c-button c-button--block u-super" type="button">super</button>
+
+  <h3 class="c-heading">Colours</h3>
+
+  <button class="c-button" type="button">Default</button>
+  <button class="c-button c-button--brand" type="button">Brand</button>
+  <button class="c-button c-button--info" type="button">Info</button>
+  <button class="c-button c-button--warning" type="button">Warning</button>
+  <button class="c-button c-button--success" type="button">Success</button>
+  <button class="c-button c-button--error" type="button">Error</button>
+
+  <h3 class="c-heading">Ghosts</h3>
+
+  <button class="c-button c-button--ghost" type="button">Ghost</button>
+  <button class="c-button c-button--ghost-brand" type="button">Brand</button>
+  <button class="c-button c-button--ghost-info" type="button">Info</button>
+  <button class="c-button c-button--ghost-warning" type="button">Warning</button>
+  <button class="c-button c-button--ghost-success" type="button">Success</button>
+  <button class="c-button c-button--ghost-error" type="button">Error</button>
+
+  <h3 class="c-heading">Rounded (and Ghosted)</h3>
+
+  <button class="c-button c-button--rounded c-button--ghost-brand u-xsmall" type="button">xsmall</button>
+  <button class="c-button c-button--rounded c-button--ghost-info u-small" type="button">small</button>
+  <button class="c-button c-button--rounded c-button--ghost-warning u-medium" type="button">medium
+  </button>
+  <button class="c-button c-button--rounded c-button--ghost-success u-large" type="button">large</button>
+  <button class="c-button c-button--rounded c-button--ghost-error u-xlarge" type="button">xlarge</button>
+  <button class="c-button c-button--rounded c-button--ghost u-super" type="button">super</button>
+
+  <h2 class="c-heading">Inputs</h2>
+
+  <input class="c-field" placeholder="Textbox">
+  <input class="c-field c-field--error" placeholder="Error">
+  <input class="c-field c-field--success" placeholder="Success">
+  <input class="c-field c-field--success c-field--disabled" placeholder="Disabled" disabled>
+
+  <h3 class="c-heading">Input icons</h3>
+  <div class="o-field o-field--icon-left">
+    <i class="fa fa-fw fa-calendar c-icon"></i>
+    <input class="c-field" placeholder="Textbox">
+  </div>
+  <div class="o-field o-field--icon-left o-field--icon-right">
+    <i class="fa fa-fw fa-search c-icon"></i>
+    <input class="c-field c-field--error" placeholder="Error">
+    <i class="fa fa-fw fa-times c-icon"></i>
+  </div>
+  <div class="o-field o-field--icon-right">
+    <input class="c-field c-field--success" placeholder="Success">
+    <i class="fa fa-fw fa-check c-icon"></i>
+  </div>
+  <div class="o-field o-field--icon-left">
+    <i class="fa fa-fw fa-ban c-icon"></i>
+    <input class="c-field c-field--success c-field--disabled" placeholder="Disabled" disabled>
+  </div>
+
+  <h3 class="c-heading">Textarea</h3>
+
+  <textarea class="c-field" placeholder="Textarea"></textarea>
+  <textarea class="c-field c-field--error" placeholder="Error"></textarea>
+  <textarea class="c-field c-field--success" placeholder="Success"></textarea>
+  <textarea class="c-field c-field--disabled" placeholder="Disabled" disabled></textarea>
+
+  <h2 class="c-heading">Sizes</h2>
+
+  <input class="c-field" placeholder="Textbox">
+  <input class="c-field u-super" placeholder="super">
+  <input class="c-field u-xlarge" placeholder="xlarge">
+  <input class="c-field u-large" placeholder="large">
+  <input class="c-field u-medium" placeholder="medium">
+  <input class="c-field u-small" placeholder="small">
+  <input class="c-field u-xsmall" placeholder="xsmall">
+
+  <h3 class="c-heading">Select</h3>
+
+  <select class="c-field">
+    <option>First option</option>
+    <option>Second option</option>
+    <option>Third option</option>
+    <option>Fourth option</option>
+    <option>Fifth option</option>
+  </select>
+
+  <select class="c-field c-field--error">
+    <option>Wrong option</option>
+  </select>
+
+  <select class="c-field c-field--success">
+    <option>Correct option</option>
+  </select>
+
+  <select class="c-field" disabled>
+    <option>Disabled option</option>
+  </select>
+
+  <select multiple class="c-field">
+    <option>First option</option>
+    <option>Second option</option>
+    <option>Third option</option>
+    <option>Fourth option</option>
+    <option>Fifth option</option>
+    <option>Sixth option</option>
+    <option>Seventh option</option>
+    <option>Eighth option</option>
+    <option>Ninth option</option>
+    <option>Tenth option</option>
+  </select>
+
+  <select class="c-field u-super">
+    <option>super</option>
+  </select>
+
+  <select class="c-field u-xlarge">
+    <option>xlarge</option>
+  </select>
+
+  <select class="c-field u-large">
+    <option>large</option>
+  </select>
+
+  <select class="c-field u-medium">
+    <option>medium</option>
+  </select>
+
+  <select class="c-field u-small">
+    <option>small</option>
+  </select>
+
+  <select class="c-field u-xsmall">
+    <option>xsmall</option>
+  </select>
+
+  <h3 class="c-heading">Checkboxes</h3>
+
+  <label class="c-field c-field--choice">
+    <input type="checkbox"> Wrap your checkboxes in labels
+  </label>
+
+  <ul class="c-list c-list--unstyled">
+    <li><label class="c-field c-field--choice"><input type="checkbox"> Wrap your checkboxes in labels</label>
+    </li>
+    <li><label class="c-field c-field--choice c-field--disabled"><input type="checkbox" disabled> Wrap your
+      checkboxes in
+      labels</label></li>
+    <li><label class="c-field c-field--choice c-field--error"><input type="checkbox"> Wrap your checkboxes in
+      labels</label></li>
+    <li><label class="c-field c-field--choice c-field--success"><input type="checkbox"> Wrap your checkboxes in
+      labels</label></li>
+  </ul>
+
+  <h3 class="c-heading">Radios</h3>
+
+  <label class="c-field c-field--choice">
+    <input type="radio" name="optionsRadios">
+    Wrap your radios in labels too
+  </label>
+
+  <ul class="c-list c-list--unstyled">
+    <li class="c-list__item">
+      <label class="c-field c-field--choice">
+        <input type="radio" name="radios"> Wrap your radios in labels too
+      </label>
+    </li>
+    <li class="c-list__item">
+      <label class="c-field c-field--choice c-field--disabled">
+        <input type="radio" name="radios" disabled> Wrap your radios in labels too
+      </label>
+    </li>
+    <li class="c-list__item">
+      <label class="c-field c-field--choice c-field--error">
+        <input type="radio" name="radios"> Wrap your radios in labels too
+      </label>
+    </li>
+    <li class="c-list__item">
+      <label class="c-field c-field--choice c-field--success">
+        <input type="radio" name="radios"> Wrap your radios in labels too
+      </label>
+    </li>
+  </ul>
+
+  <h3 class="c-heading">Fieldsets and legends</h3>
+
+  <fieldset class="o-fieldset">
+    <legend class="o-fieldset__legend">A group of controls</legend>
+    <label class="c-field c-field--choice">
+      <input type="radio" name="optionsRadios">
+      Option zero
+    </label>
+    <label class="c-field c-field--choice c-field--success">
+      <input type="radio" name="optionsRadios">
+      Option one
+    </label>
+    <label class="c-field c-field--choice c-field--disabled">
+      <input type="radio" name="optionsRadios" disabled>
+      Option two
+    </label>
+    <label class="c-field c-field--choice c-field--error">
+      <input type="radio" name="optionsRadios">
+      Option three
+    </label>
+  </fieldset>
+
+  <fieldset class="o-fieldset" disabled>
+    <legend class="o-fieldset__legend">This fieldset is disabled</legend>
+    <label class="c-field c-field--choice">
+      <input type="checkbox">
+      Option zero
+    </label>
+    <label class="c-field c-field--choice c-field--success">
+      <input type="checkbox">
+      Option one
+    </label>
+    <label class="c-field c-field--choice">
+      <input type="checkbox" checked>
+      Option two
+    </label>
+    <label class="c-field c-field--choice c-field--error">
+      <input type="checkbox">
+      Option three
+    </label>
+  </fieldset>
+
+  <h3 class="c-heading">Input groups</h3>
+
+  <div class="o-form-element">
+    <label class="c-label" for="inputgroup1">Label one:</label>
+
+    <div class="c-input-group c-input-group--rounded">
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="inputgroup1">
+      </div>
+      <button class="c-button">Action</button>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <label class="c-label" for="inputgroup2">Label one:</label>
+
+    <div class="c-input-group">
+      <button class="c-button">Action</button>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="inputgroup2">
+      </div>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <label class="c-label" for="inputgroup3">Label one:</label>
+
+    <div class="c-input-group">
+      <button class="c-button c-button--warning">Action</button>
+      <button class="c-button c-button--success">Action</button>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="inputgroup3">
+      </div>
+      <button class="c-button c-button--error">Action</button>
+      <button class="c-button c-button--info">Action</button>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <label class="c-label" for="inputgroup4">Label one:</label>
+
+    <div class="c-input-group">
+      <button class="c-button c-button--ghost">Action</button>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="inputgroup4">
+      </div>
+      <button class="c-button c-button--ghost-info">Action</button>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <label class="c-label" for="inputgroup5">Label one:</label>
+
+    <div class="c-input-group c-input-group--rounded">
+      <button class="c-button c-button--ghost">Action</button>
+      <button class="c-button c-button--ghost">Action</button>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="inputgroup5">
+      </div>
+      <button class="c-button c-button--ghost-warning">Action</button>
+      <button class="c-button c-button--ghost-info">Action</button>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <label class="c-label" for="fieldgroup1">Enter your address:</label>
+
+    <div class="c-input-group c-input-group--stacked">
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox" id="fieldgroup1">
+      </div>
+      <div class="o-field">
+        <textarea class="c-field" placeholder="Textarea"></textarea>
+      </div>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox">
+      </div>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <div class="c-input-group">
+      <div class="o-field">
+        <input class="c-field">
+        <div class="c-hint">Hint 1</div>
+      </div>
+      <div class="o-field o-field--icon-left o-field--icon-right">
+        <i class="c-icon fa fa-search"></i>
+        <input class="c-field">
+        <i class="c-icon fa fa-times"></i>
+        <div class="c-hint">Hint 2</div>
+      </div>
+      <div class="o-field">
+        <input class="c-field">
+        <div class="c-hint">Hint 3</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <div class="c-input-group">
+      <div class="o-field">
+        <select class="c-field">
+          <option>Day</option>
+        </select>
+      </div>
+      <div class="o-field">
+        <select class="c-field">
+          <option>Month</option>
+        </select>
+      </div>
+      <div class="o-field">
+        <select class="c-field">
+          <option>Year</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-form-element">
+    <div class="c-input-group">
+      <div class="o-field">
+        <select class="c-field">
+          <option>Dropdown</option>
+        </select>
+      </div>
+      <div class="o-field">
+        <input class="c-field" placeholder="Textbox">
+      </div>
+      <button class="c-button c-button--info">Action</button>
+      <button class="c-button c-button--warning">Action</button>
+      <div class="o-field o-field--icon-right">
+        <input class="c-field c-field--success" placeholder="Textbox">
+        <i class="fa fa-fw fa-check c-icon"></i>
+        <div class="c-hint">Hint</div>
+      </div>
+      <button class="c-button c-button--ghost-info">Action</button>
+      <button class="c-button c-button--ghost-warning">Action</button>
+      <button class="c-button c-button--warning">Action</button>
+      <div class="o-field">
+        <select class="c-field c-field--error">
+          <option>Dropdown</option>
+        </select>
+      </div>
+      <button class="c-button c-button--error">Action</button>
+    </div>
+  </div>
+
+  <h3 class="c-heading">Labels, Fieldsets and Forms</h3>
+
+  <div class="o-form-element">
+    <label class="c-label" for="nickname">Nickname:</label>
+    <input id="nickname" placeholder="Nickname" class="c-field">
+  </div>
+  <label class="c-label o-form-element">
+    Surname:
+    <input class="c-field c-field--label" placeholder="These look better!">
+  </label>
+
+  <fieldset class="o-fieldset">
+    <legend class="o-fieldset__legend">And all together now!</legend>
+    <div class="o-form-element">
+      <label class="c-label" for="houseno">Address line 1:</label>
+      <input id="houseno" placeholder="House name or number" class="c-field">
+    </div>
+    <label class="c-label o-form-element">
+      Postcode:
+      <input class="c-field c-field--label" placeholder="e.g. AB12 3CD">
+    </label>
+    <label class="c-label c-field c-field--choice o-form-element">
+      <input type="checkbox">
+      Send me spam
+    </label>
+    <fieldset class="o-fieldset c-list c-list--inline c-list--unstyled">
+      <legend class="o-fieldset__legend">Account login:</legend>
+      <label class="c-label c-field c-field--choice c-list__item">
+        <input type="radio" name="account" checked>
+        New user
+      </label>
+      <label class="c-label c-field c-field--choice c-list__item">
+        <input type="radio" name="account">
+        Existing user
+      </label>
+    </fieldset>
+    <div class="o-form-element">
+      <label class="c-toggle a-toggle">
+        Activate lockdown?
+        <input type="checkbox" checked>
+        <div class="c-toggle__track">
+          <div class="c-toggle__handle"></div>
+        </div>
+      </label>
+    </div>
+  </fieldset>
+
+  <h3 class="c-heading">Input hints</h3>
+
+  <label class="c-label">
+    Hint:
+    <input class="c-field c-field--label">
+    <div class="c-hint">Hint</div>
+  </label>
+
+  <label class="c-label">
+    Animated Hint:
+    <div class="o-field o-field--icon-left o-field--icon-right">
+      <i class="fa fa-fw fa-calendar c-icon"></i>
+      <input class="c-field c-field--label c-field">
+      <i class="fa fa-fw fa-check c-icon"></i>
+      <div class="c-hint a-hint">Animated hint</div>
+    </div>
+  </label>
+
+  <label class="c-label">
+    Static Hint:
+    <input class="c-field c-field--label">
+    <div class="c-hint c-hint--static">Static hint</div>
+  </label>
+
+  <label class="c-label">
+    Success Hint:
+    <input class="c-field c-field--label">
+    <div class="c-hint c-hint--static c-hint--success">Success hint</div>
+  </label>
+
+  <label class="c-label">
+    Error Hint:
+    <div class="o-field o-field--icon-right">
+      <input class="c-field c-field--label c-field--error" placeholder="No label for this input">
+      <i class="fa fa-fw fa-times c-icon"></i>
+      <div class="c-hint c-hint--static c-hint--error">Error hint</div>
+    </div>
+  </label>
+
+  <h3 class="c-heading">Inline forms</h3>
+
+  <fieldset class="o-fieldset c-list c-list--inline c-list--unstyled">
+    <legend class="o-fieldset__legend">Instead of stacked, elements appear inline</legend>
+    <div class="o-form-element c-list__item">
+      <label class="c-label" for="houseno-inline">Address line 1:</label>
+      <input id="houseno-inline" placeholder="House name or number" class="c-field">
+    </div>
+    <label class="c-label o-form-element c-list__item">
+      Postcode:
+      <input class="c-field c-field--label" placeholder="e.g. AB12 3CD">
+    </label>
+    <label class="c-label c-field c-field--choice c-list__item">
+      <input type="checkbox">
+      Send me span
+    </label>
+    <fieldset class="o-fieldset c-list__item">
+      <legend class="o-fieldset__legend">Account login:</legend>
+      <div class="c-list c-list--inline c-list--unstyled">
+        <label class="c-label c-field c-field--choice c-list__item">
+          <input type="radio" name="account-inline" checked>
+          New user
+        </label>
+        <label class="c-label c-field c-field--choice c-list__item">
+          <input type="radio" name="account-inline">
+          Existing user
+        </label>
+
+        <div class="c-list__item">
+          <label class="c-toggle a-toggle">
+            Activate lockdown?
+            <input type="checkbox" checked>
+            <div class="c-toggle__track">
+              <div class="c-toggle__handle"></div>
+            </div>
+          </label>
+        </div>
+
+      </div>
+    </fieldset>
+  </fieldset>
+
+  <h3 class="c-heading">Floating labels</h3>
+
+  <div class="o-form-element">
+    <label class="c-label" for="none-floater">Address line 1</label>
+    <input id="none-floater" placeholder="House name or number" class="c-field">
+  </div>
+  <div class="o-form-element">
+    <label class="c-label">
+      Postcode
+      <input class="c-field c-field--label" placeholder="e.g. LS1 2AB">
+      <div class="c-hint">e.g. LS1 2AB</div>
+    </label>
+  </div>
+  <div class="o-form-element">
+    <label for="floater" class="c-label">Mobile Phone Number</label>
+    <input id="floater" class="c-field" placeholder="e.g 07654321000">
+    <div class="c-hint">e.g 07654321000</div>
+  </div>
+
+  <h2 class="c-heading">Toggles</h2>
+
+  <label class="c-toggle a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Activate lockdown?
+  </label>
+
+  <label class="c-toggle c-toggle--brand a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Brand
+  </label>
+
+  <label class="c-toggle c-toggle--info a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Info
+  </label>
+
+  <label class="c-toggle c-toggle--warning a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Warning
+  </label>
+
+  <label class="c-toggle c-toggle--success a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Success
+  </label>
+
+  <label class="c-toggle c-toggle--error a-toggle">
+    <input type="checkbox" checked>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Error
+  </label>
+
+  <label class="c-toggle c-toggle--info a-toggle">
+    <input type="checkbox" disabled>
+    <div class="c-toggle__track">
+      <div class="c-toggle__handle"></div>
+    </div>
+    Disabled
+  </label>
+
+  <h3 class="c-heading">Ranges</h3>
+
+  <label class="c-label" for="range">Set an amount of &pound; you earn:</label>
+  <input type="range" id="range" class="c-range a-range">
+  <input type="range" class="c-range c-range--brand a-range">
+  <input type="range" class="c-range c-range--info a-range">
+  <input type="range" class="c-range c-range--warning a-range">
+  <input type="range" class="c-range c-range--success a-range">
+  <input type="range" class="c-range c-range--error a-range">
+
+  <input type="range" class="c-range c-range--brand" disabled>
+
+  <h2 class="c-heading">Tabs</h2>
+
+  <div class="c-tabs a-tabs">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <div class="c-tabs c-tabs--brand">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <div class="c-tabs c-tabs--info">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <div class="c-tabs c-tabs--warning">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <div class="c-tabs c-tabs--success">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <div class="c-tabs c-tabs--error">
+    <div class="c-tabs__headings">
+      <div class="c-tab-heading c-tab-heading--active">One</div>
+      <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
+      <div class="c-tab-heading">Three</div>
+    </div>
+    <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
+    <div class="c-tabs__tab">This is tab two</div>
+  </div>
+
+  <h2 class="c-heading">Avatars</h2>
+  <div class="c-avatar c-avatar u-super">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-xlarge">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-large">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <div class="c-avatar">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-small">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-xsmall">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+  </div>
+  <br>
+  <div class="c-avatar c-avatar u-super">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-xlarge">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-large">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <div class="c-avatar">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-small">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <div class="c-avatar c-avatar u-xsmall">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/42A5F5/FFF">
+    <img class="c-avatar__img" src="http://placehold.it/1024x963/BADA55/FFF">
+  </div>
+  <br>
+  <div class="c-avatar c-avatar u-super" data-text="GP"></div>
+  <div class="c-avatar c-avatar u-xlarge" data-text="GP"></div>
+  <div class="c-avatar c-avatar u-large" data-text="GP"></div>
+  <div class="c-avatar c-avatar" data-text="GP"></div>
+  <div class="c-avatar c-avatar u-small" data-text="GP"></div>
+  <div class="c-avatar c-avatar u-xsmall" data-text="GP"></div>
+
+
+  <h2 class="c-heading">Tags</h2>
+
+  <div class="c-tags">
+		<span class="c-tags__container">
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag one
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag two
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag three
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag four
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag five
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag six
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag seven
+				<span class="c-tag__close">&times;</span>
+			</button>
+			<button type="button" class="c-button c-button--black c-tag">
+				Tag eight
+				<span class="c-tag__close">&times;</span>
+			</button>
+		</span>
+
+    <div class="c-tags__field-container">
+      <input class="c-field">
+      <ul class="c-card c-card--menu u-higher">
+        <li class="c-card__item">England</li>
+        <li class="c-card__item">Scotland</li>
+        <li class="c-card__item">Wales</li>
+      </ul>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Overlay</h2>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--black c-overlay--dismissable"></div>
+  </div>
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--white"></div>
+  </div>
+
+  <h2 class="c-heading">Modal</h2>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay"></div>
+    <div class="o-modal">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          This is the modal body
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--brand">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay"></div>
+    <div class="o-modal o-modal--full">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget neque mollis, sodales
+          nulla
+          ut,
+          porta
+          urna. Vivamus gravida placerat metus ac malesuada. Donec convallis dolor in ex tristique, luctus
+          tempus
+          dui
+          sollicitudin. Suspendisse enim urna, auctor ac viverra eget, venenatis non massa. Nulla magna
+          est,
+          ullamcorper
+          eget feugiat ac, condimentum id diam. Cras tempor felis sit amet facilisis sollicitudin. Ut
+          posuere
+          malesuada
+          feugiat. Morbi ex ex, pretium sit amet dolor eget, malesuada gravida est. Nullam id malesuada
+          massa,
+          ac
+          facilisis elit. Nullam ut metus sit amet nisi finibus mollis. Praesent augue felis, feugiat
+          placerat
+          aliquam ut,
+          ultrices sit amet dolor. Phasellus porta ligula nec sapien tempus commodo. Pellentesque
+          hendrerit
+          aliquet
+          ornare. Integer nec tempus quam, vitae bibendum lectus. Suspendisse vestibulum pulvinar neque at
+          scelerisque.
+          Suspendisse accumsan dolor vitae nulla commodo, volutpat commodo nunc bibendum.
+
+          Integer ut magna ac velit pharetra molestie. Nullam vestibulum est mattis, posuere augue id,
+          suscipit
+          nulla.
+          Praesent vestibulum sapien hendrerit, sodales elit et, eleifend est. Aliquam ornare iaculis
+          diam,
+          commodo
+          iaculis erat consectetur a. Quisque ut porta est. Mauris vulputate est eu auctor vestibulum.
+          Vestibulum
+          velit
+          libero, cursus vel viverra et, fringilla et est. Donec nibh ipsum, finibus eu urna sed,
+          ullamcorper
+          sollicitudin
+          velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+          Interdum
+          et
+          malesuada fames ac ante ipsum primis in faucibus. Nulla sit amet bibendum nunc, ut iaculis
+          tellus.
+          Aenean ornare
+          velit vel venenatis scelerisque. Ut ac elit enim. Nulla nec congue ex. Cras nulla ligula,
+          porttitor
+          non
+          pulvinar
+          fermentum, hendrerit sit amet neque.
+
+          Etiam pulvinar suscipit metus, at lobortis erat eleifend id. Suspendisse scelerisque sem et orci
+          rhoncus
+          posuere. Vivamus faucibus mi et feugiat elementum. Nulla tempor, ligula non ullamcorper
+          condimentum,
+          lorem lorem
+          sagittis tortor, at interdum tellus nunc elementum purus. Nulla tincidunt augue nibh. Ut et
+          augue a
+          ex
+          pretium
+          sodales. Pellentesque quam neque, tincidunt eu fringilla nec, volutpat eget risus.
+
+          Fusce sit amet arcu sodales, vestibulum quam vel, lacinia mauris. Mauris ut placerat libero, eu
+          gravida
+          lectus.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia felis vel nibh blandit, in
+          vestibulum nisl
+          congue. Integer ac dignissim nisi, id vehicula tellus. Class aptent taciti sociosqu ad litora
+          torquent
+          per
+          conubia nostra, per inceptos himenaeos. In posuere vitae metus in fermentum.
+
+          Quisque venenatis ut eros at posuere. Etiam pulvinar, ipsum eu interdum vestibulum, arcu urna
+          dapibus
+          lorem,
+          quis volutpat tortor enim sed leo. Donec dapibus lacinia purus. Nullam ac porttitor ligula.
+          Fusce
+          aliquet mauris
+          tortor, id euismod neque tempus vel. Fusce luctus ex et volutpat pretium. Nulla varius justo
+          quis
+          aliquam
+          accumsan.
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--brand">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--dismissable"></div>
+    <div class="o-modal o-modal--ghost o-container o-container--medium">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          Ghost modal...it hasn't got a body. Get it?!
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--ghost-warning">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay"></div>
+    <div class="o-modal">
+      <div class="c-card">
+        <header class="c-card__header">
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          Blocking modal, not dismissable
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--brand">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--dismissable"></div>
+    <div class="o-modal u-highest o-container o-container--medium">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          Same as cards, high, higher, highest classes for shadows
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--info">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--dismissable"></div>
+    <div class="o-modal u-highest o-container o-container--medium">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          Block foooter
+        </div>
+
+        <footer class="c-card__footer c-card__footer--block">
+          <div class="c-input-group">
+            <button class="c-button c-button--block c-button--success">Yes</button>
+            <button class="c-button c-button--block c-button--error">No</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Modal animated</h2>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay a-overlay"></div>
+    <div class="o-modal a-modal">
+      <div class="c-card">
+        <header class="c-card__header">
+          <button type="button" class="c-button c-button--close">&times;</button>
+          <h2 class="c-heading">Modal heading</h2>
+        </header>
+
+        <div class="c-card__body">
+          This is the modal body
+        </div>
+
+        <footer class="c-card__footer">
+          <button type="button" class="c-button c-button--info">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+
+  <h2 class="c-heading">Drawers</h2>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--dismissable a-overlay"></div>
+    <div class="o-drawer u-highest o-drawer--top o-drawer--visible a-drawer">
+      <div class="c-card">
+        <header class="c-card__header">
+          <h2 class="c-heading">
+            Heading
+            <div class="c-heading__sub">Sub-heading</div>
+          </h2>
+        </header>
+        <div class="c-card__body">
+          To make a contribution to the world by making tools for the mind that advance humankind.
+        </div>
+        <footer class="c-card__footer">
+          <div class="c-input-group">
+            <button class="c-button c-button--block c-button--ghost-info">Buy</button>
+            <button class="c-button c-button--block c-button--ghost-info">Buy</button>
+            <button class="c-button c-button--block c-button--ghost-info">Buy</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="o-demo-container o-demo-container--modal">
+    <div class="c-overlay c-overlay--dismissable a-overlay"></div>
+    <div class="o-drawer u-highest o-drawer--left o-drawer--visible a-drawer">
+      <div class="c-card">
+        <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF">
+        <header class="c-card__header">
+          <h2 class="c-heading">
+            Heading
+            <div class="c-heading__sub">Sub-heading</div>
+          </h2>
+        </header>
+        <div class="c-card__body">
+          To make a contribution to the world by making tools for the mind that advance humankind.
+        </div>
+        <footer class="c-card__footer c-card__footer--block">
+          <div class="c-input-group">
+            <button class="c-button c-button--block c-button--success">Yes</button>
+            <button class="c-button c-button--block c-button--error">No</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Bubbles</h2>
+
+  <div class="c-bubble c-bubble--visible c-bubble--right a-bubble a-bubble--right">This bubble is on the right
+  </div>
+  <div class="c-bubble c-bubble--visible c-bubble--top a-bubble a-bubble--top">This bubble is on the top</div>
+  <div class="c-bubble c-bubble--visible c-bubble--bottom a-bubble a-bubble--bottom">This bubble is on the bottom
+  </div>
+  <div class="c-bubble c-bubble--visible c-bubble--left a-bubble a-bubble--left">This bubble is on the left</div>
+
+  <h2 class="c-heading">Alert</h2>
+
+  <div class="c-alert a-alert">
+    <button class="c-button c-button--close">&times;</button>
+    Default
+  </div>
+  <div class="c-alert a-alert c-alert--brand">
+    <button class="c-button c-button--close">&times;</button>
+    Brand
+  </div>
+  <div class="c-alert a-alert c-alert--info">
+    <button class="c-button c-button--close">&times;</button>
+    Info
+  </div>
+  <div class="c-alert a-alert c-alert--warning">
+    <button class="c-button c-button--close">&times;</button>
+    Warning
+  </div>
+  <div class="c-alert a-alert c-alert--success">
+    <button class="c-button c-button--close">&times;</button>
+    Success
+  </div>
+  <div class="c-alert a-alert c-alert--error">
+    <button class="c-button c-button--close">&times;</button>
+    Error
+  </div>
+
+  <h2 class="c-heading">Alerts (formally Toasts)</h2>
+
+  <div class="o-demo-container">
+    <div class="c-alerts c-alerts--bottomright">
+      <div class="c-alert a-alert">Default</div>
+      <div class="c-alert a-alert c-alert--brand">Brand</div>
+      <div class="c-alert a-alert c-alert--info">Info</div>
+      <div class="c-alert a-alert c-alert--warning">Warning</div>
+      <div class="c-alert a-alert c-alert--success">Success</div>
+      <div class="c-alert a-alert c-alert--error">Error</div>
+    </div>
+  </div>
+
+  <h2 class="c-heading"><span class="c-badge">Badges</span></h2>
+
+  <p class="c-paragraph">This is a <span class="c-badge">badge</span> and this is a rounded <span
+    class="c-badge c-badge--rounded">badge</span></p>
+
+  <p class="c-paragraph">They're useful when you want to add additional info. Like a version number to a page,
+    such as
+    <span class="c-badge">v.1.0.0</span>
+  </p>
+
+  <span class="c-badge">Default</span>
+  <span class="c-badge c-badge--brand c-tooltip c-tooltip--top" aria-label="top tooltip">brand</span>
+  <span class="c-badge c-badge--info c-tooltip c-tooltip--top" aria-label="top tooltip">info</span>
+  <span class="c-badge c-badge--warning c-tooltip c-tooltip--right" aria-label="right tooltip">warning</span>
+  <span class="c-badge c-badge--success c-tooltip c-tooltip--bottom" aria-label="bottom tooltip">success</span>
+  <span class="c-badge c-badge--error c-tooltip c-tooltip--left" aria-label="left tooltip">error</span>
+
+  <span class="c-badge c-badge--rounded">Default</span>
+  <span class="c-badge c-badge--rounded c-badge--brand">brand</span>
+  <span class="c-badge c-badge--rounded c-badge--info">info</span>
+  <span class="c-badge c-badge--rounded c-badge--warning">warning</span>
+  <span class="c-badge c-badge--rounded c-badge--success">success</span>
+  <span class="c-badge c-badge--rounded c-badge--error">error</span>
+  <br>
+  <span class="c-badge c-badge--ghost">Default</span>
+  <span class="c-badge c-badge--ghost c-badge--brand c-tooltip c-tooltip--top"
+        aria-label="top tooltip">brand</span>
+  <span class="c-badge c-badge--ghost c-badge--info c-tooltip c-tooltip--top"
+        aria-label="top tooltip">info</span>
+  <span class="c-badge c-badge--ghost c-badge--warning c-tooltip c-tooltip--right"
+        aria-label="right tooltip">warning</span>
+  <span class="c-badge c-badge--ghost c-badge--success c-tooltip c-tooltip--bottom"
+        aria-label="bottom tooltip">success</span>
+  <span class="c-badge c-badge--ghost c-badge--error c-tooltip c-tooltip--left"
+        aria-label="left tooltip">error</span>
+
+  <span class="c-badge c-badge--ghost c-badge--rounded">Default</span>
+  <span class="c-badge c-badge--ghost c-badge--rounded c-badge--brand">brand</span>
+  <span class="c-badge c-badge--ghost c-badge--rounded c-badge--info">info</span>
+  <span class="c-badge c-badge--ghost c-badge--rounded c-badge--warning">warning</span>
+  <span class="c-badge c-badge--ghost c-badge--rounded c-badge--success">success</span>
+  <span class="c-badge c-badge--ghost c-badge--rounded c-badge--error">error</span>
+
+  <h2 class="c-heading">Calendar</h2>
+
+  <div class="c-calendar a-calendar u-highest">
+    <button class="c-calendar__control">&lsaquo;</button>
+    <div class="c-calendar__header">2016</div>
+    <button class="c-calendar__control">&rsaquo;</button>
+
+    <button class="c-calendar__control">&lsaquo;</button>
+    <div class="c-calendar__header">January</div>
+    <button class="c-calendar__control">&rsaquo;</button>
+
+    <div class="c-calendar__day">Sun</div>
+    <div class="c-calendar__day">Mon</div>
+    <div class="c-calendar__day">Tue</div>
+    <div class="c-calendar__day">Wed</div>
+    <div class="c-calendar__day">Thu</div>
+    <div class="c-calendar__day">Fri</div>
+    <div class="c-calendar__day">Sat</div>
+
+    <button class="c-calendar__date">27</button>
+    <button class="c-calendar__date">28</button>
+    <button class="c-calendar__date">29</button>
+    <button class="c-calendar__date">30</button>
+    <button class="c-calendar__date">31</button>
+    <button class="c-calendar__date c-calendar__date--in-month">01</button>
+    <button class="c-calendar__date c-calendar__date--in-month">02</button>
+    <button class="c-calendar__date c-calendar__date--in-month c-calendar__date--today">03</button>
+    <button class="c-calendar__date c-calendar__date--in-month">04</button>
+    <button class="c-calendar__date c-calendar__date--in-month">05</button>
+    <button class="c-calendar__date c-calendar__date--in-month">06</button>
+    <button class="c-calendar__date c-calendar__date--in-month">07</button>
+    <button class="c-calendar__date c-calendar__date--in-month">08</button>
+    <button class="c-calendar__date c-calendar__date--in-month">09</button>
+    <button class="c-calendar__date c-calendar__date--in-month">10</button>
+    <button class="c-calendar__date c-calendar__date--in-month">11</button>
+    <button class="c-calendar__date c-calendar__date--in-month">12</button>
+    <button class="c-calendar__date c-calendar__date--in-month">13</button>
+    <button class="c-calendar__date c-calendar__date--in-month c-calendar__date--selected">14</button>
+    <button class="c-calendar__date c-calendar__date--in-month">15</button>
+    <button class="c-calendar__date c-calendar__date--in-month">16</button>
+    <button class="c-calendar__date c-calendar__date--in-month">17</button>
+    <button class="c-calendar__date c-calendar__date--in-month">18</button>
+    <button class="c-calendar__date c-calendar__date--in-month">19</button>
+    <button class="c-calendar__date c-calendar__date--in-month">20</button>
+    <button class="c-calendar__date c-calendar__date--in-month">21</button>
+    <button class="c-calendar__date c-calendar__date--in-month">22</button>
+    <button class="c-calendar__date c-calendar__date--in-month">23</button>
+    <button class="c-calendar__date c-calendar__date--in-month">24</button>
+    <button class="c-calendar__date c-calendar__date--in-month">25</button>
+    <button class="c-calendar__date c-calendar__date--in-month">26</button>
+    <button class="c-calendar__date c-calendar__date--in-month">27</button>
+    <button class="c-calendar__date c-calendar__date--in-month">28</button>
+    <button class="c-calendar__date c-calendar__date--in-month">29</button>
+    <button class="c-calendar__date c-calendar__date--in-month">30</button>
+    <button class="c-calendar__date c-calendar__date--in-month">31</button>
+    <button class="c-calendar__date">01</button>
+    <button class="c-calendar__date">02</button>
+    <button class="c-calendar__date">03</button>
+    <button class="c-calendar__date">04</button>
+    <button class="c-calendar__date">05</button>
+
+    <button class="c-button c-button--block c-button--info">Today</button>
+  </div>
+
+  <h2 class="c-heading">Pagination</h2>
+
+  <div class="c-pagination">
+    <div class="c-pagination__controls c-pagination__controls--backward">
+      <button class="c-pagination__control">&laquo;</button>
+      <button class="c-pagination__control">&lsaquo;</button>
+    </div>
+    <div class="c-pagination__controls">
+      <span class="c-pagination__ellipsis">&hellip;</span>
+      <button class="c-pagination__page">4</button>
+      <button class="c-pagination__page c-pagination__page--current">5</button>
+      <button class="c-pagination__page">6</button>
+      <span class="c-pagination__ellipsis">&hellip;</span>
+    </div>
+    <div class="c-pagination__controls c-pagination__controls--forward">
+      <button class="c-pagination__control">&rsaquo;</button>
+      <button class="c-pagination__control">&raquo;</button>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Tree</h2>
+
+  <ul class="c-tree a-tree">
+    <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 1</span></li>
+    <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 2</span></li>
+    <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 3</span>
+      <ul class="c-tree">
+        <li class="c-tree__item">File 1</li>
+        <li class="c-tree__item">File 2</li>
+        </li>
+        <li class="c-tree__item">File 3</li>
+        <li class="c-tree__item">File 4</li>
+        <li class="c-tree__item">File 5</li>
+      </ul>
+    </li>
+    <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 4</span></li>
+    <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 5</span></li>
+    <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 6</span>
+      <ul class="c-tree">
+        <li class="c-tree__item c-text--quiet">(empty)</li>
+      </ul>
+    </li>
+  </ul>
+
+  <h2 class="c-heading">Progress bars</h2>
+  <div class="c-progress">
+    <div class="c-progress__bar" style="width: 15%;"></div>
+  </div>
+  <br>
+  <div class="c-progress c-progress--rounded">
+    <div class="c-progress__bar c-progress__bar--brand" style="width: 30%;"></div>
+  </div>
+  <br>
+  <div class="c-progress c-progress--rounded">
+    <div class="c-progress__bar c-progress__bar--info" style="width: 30%;"></div>
+  </div>
+  <br>
+  <div class="c-progress">
+    <div class="c-progress__bar c-progress__bar--warning" style="width: 45%;"></div>
+  </div>
+  <br>
+  <div class="c-progress">
+    <div class="c-progress__bar c-progress__bar--success" style="width: 60%;"></div>
+  </div>
+  <br>
+  <div class="c-progress">
+    <div class="c-progress__bar c-progress__bar--error" style="width: 85%;"></div>
+  </div>
+  <br>
+
+  <h3 class="c-heading">Stacked</h3>
+  <div class="c-progress">
+    <div class="c-progress__bar" style="width: 15%;"></div>
+    <div class="c-progress__bar c-progress__bar--brand" style="width: 25%;"></div>
+    <div class="c-progress__bar c-progress__bar--info" style="width: 10%;"></div>
+    <div class="c-progress__bar c-progress__bar--warning" style="width: 12%;"></div>
+    <div class="c-progress__bar c-progress__bar--success" style="width: 18%;"></div>
+    <div class="c-progress__bar c-progress__bar--error" style="width: 3%;"></div>
+  </div>
+  <br>
+
+  <h3 class="c-heading">Sizes</h3>
+  <div class="c-progress u-xsmall">
+    <div class="c-progress__bar" style="width: 15%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-small">
+    <div class="c-progress__bar c-progress__bar--brand" style="width: 30%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-small">
+    <div class="c-progress__bar c-progress__bar--info" style="width: 30%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-medium">
+    <div class="c-progress__bar c-progress__bar--warning" style="width: 45%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-large">
+    <div class="c-progress__bar c-progress__bar--success" style="width: 60%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-xlarge">
+    <div class="c-progress__bar c-progress__bar--error" style="width: 85%;"></div>
+  </div>
+  <br>
+  <div class="c-progress u-super">
+    <div class="c-progress__bar" style="width: 99%;"></div>
+  </div>
+  <br>
+
+  <h3 class="c-heading">Text</h3>
+  <div class="c-progress u-xsmall">
+    <div class="c-progress__bar" style="width: 15%;">15% .u-xsmall</div>
+  </div>
+  <br>
+  <div class="c-progress u-small">
+    <div class="c-progress__bar c-progress__bar--brand" style="width: 30%;">30% .u-small</div>
+  </div>
+  <br>
+  <div class="c-progress u-small">
+    <div class="c-progress__bar c-progress__bar--info" style="width: 30%;">30% .u-small</div>
+  </div>
+  <br>
+  <div class="c-progress u-medium">
+    <div class="c-progress__bar c-progress__bar--warning" style="width: 45%;">45% .u-medium</div>
+  </div>
+  <br>
+  <div class="c-progress u-large">
+    <div class="c-progress__bar c-progress__bar--success" style="width: 60%;">60% .u-large</div>
+  </div>
+  <br>
+  <div class="c-progress u-xlarge">
+    <div class="c-progress__bar c-progress__bar--error" style="width: 85%;">85% .u-xlarge</div>
+  </div>
+  <br>
+  <div class="c-progress u-super">
+    <div class="c-progress__bar" style="width: 99%;">99% .u-super</div>
+  </div>
+  <br>
+
+  <h2 class="c-heading">Nav</h2>
+  <div class="o-grid o-grid--no-gutter">
+    <div class="o-grid__cell o-grid__cell--width-50">
+      <nav class="c-nav c-nav--light a-nav a-nav--fast">
+        <span class="c-nav__content u-centered c-text--loud">MY APP</span>
+        <a href="#" class="c-nav__item"><i class="fa fa-fw fa-home"></i> Home</a>
+        <a href="#" class="c-nav__item c-nav__item--active"><i class="fa fa-fw fa-star"></i> News</a>
+        <a href="#" class="c-nav__item c-nav__item--right"><i class="fa fa-fw fa-life-ring"></i> Help</a>
+        <a href="#" class="c-nav__item c-nav__item--right c-nav__item--brand">Brand</a>
+        <a href="#" class="c-nav__item c-nav__item--right c-nav__item--info">Info</a>
+        <a href="#" class="c-nav__item c-nav__item--right c-nav__item--warning">Warning</a>
+        <a href="#" class="c-nav__item c-nav__item--right c-nav__item--success">Success</a>
+        <a href="#" class="c-nav__item c-nav__item--right c-nav__item--error">Error</a>
+      </nav>
+    </div>
+  </div>
+
+  <h2 class="c-heading">Nav + Panel</h2>
+  <div class="o-panel-container">
+    <nav class="c-nav c-nav--light c-nav--top c-nav--inline u-high a-nav a-nav--fast">
+      <span class="c-nav__content u-window-box--none">
+        <img class="o-image" src="http://placehold.it/1024x963/42A5F5/FFF">
+      </span>
+      <span class="c-nav__content c-nav__content--right u-centered c-text--loud">RIGHT</span>
+      <a href="#" class="c-nav__item"><i class="fa fa-fw fa-home"></i> Home</a>
+      <a href="#" class="c-nav__item c-nav__item--active"><i class="fa fa-fw fa-star"></i> News</a>
+      <a href="#" class="c-nav__item c-nav__item--right"><i class="fa fa-fw fa-life-ring"></i> Help</a>
+      <span class="c-nav__item c-nav__item--right">
+					<label class="c-toggle a-toggle">
+					Toggle it
+					<input type="checkbox" checked>
+					<div class="c-toggle__track">
+						<div class="c-toggle__handle"></div>
+					</div>
+				</label>
+				</span>
+    </nav>
+  </div>
+
+  <h2 class="c-heading">Nav + Panel</h2>
+  <div class="o-panel-container o-demo-container">
+    <nav class="c-nav c-nav--light c-nav--top c-nav--inline u-high a-nav a-nav--fast">
+      <span class="c-nav__content u-centered c-text--loud">LEFT</span>
+      <span class="c-nav__content c-nav__content--right u-centered c-text--loud">RIGHT</span>
+      <a href="#" class="c-nav__item"><i class="fa fa-fw fa-home"></i> Home</a>
+      <a href="#" class="c-nav__item c-nav__item--active"><i class="fa fa-fw fa-star"></i> News</a>
+      <a href="#" class="c-nav__item c-nav__item--right"><i class="fa fa-fw fa-life-ring"></i> Help</a>
+      <span class="c-nav__item c-nav__item--right">
+					<label class="c-toggle a-toggle">
+					Toggle it
+					<input type="checkbox" checked>
+					<div class="c-toggle__track">
+						<div class="c-toggle__handle"></div>
+					</div>
+				</label>
+				</span>
+    </nav>
+    <div class="o-panel o-panel--nav-top o-panel--nav-bottom">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget neque mollis, sodales nulla ut,
+      porta
+      urna. Vivamus gravida placerat metus ac malesuada. Donec convallis dolor in ex tristique, luctus tempus
+      dui
+      sollicitudin. Suspendisse enim urna, auctor ac viverra eget, venenatis non massa. Nulla magna est,
+      ullamcorper
+      eget feugiat ac, condimentum id diam. Cras tempor felis sit amet facilisis sollicitudin. Ut posuere
+      malesuada
+      feugiat. Morbi ex ex, pretium sit amet dolor eget, malesuada gravida est. Nullam id malesuada massa, ac
+      facilisis elit. Nullam ut metus sit amet nisi finibus mollis. Praesent augue felis, feugiat placerat
+      aliquam ut,
+      ultrices sit amet dolor. Phasellus porta ligula nec sapien tempus commodo. Pellentesque hendrerit
+      aliquet
+      ornare. Integer nec tempus quam, vitae bibendum lectus. Suspendisse vestibulum pulvinar neque at
+      scelerisque.
+      Suspendisse accumsan dolor vitae nulla commodo, volutpat commodo nunc bibendum.
+
+      Integer ut magna ac velit pharetra molestie. Nullam vestibulum est mattis, posuere augue id, suscipit
+      nulla.
+      Praesent vestibulum sapien hendrerit, sodales elit et, eleifend est. Aliquam ornare iaculis diam,
+      commodo
+      iaculis erat consectetur a. Quisque ut porta est. Mauris vulputate est eu auctor vestibulum. Vestibulum
+      velit
+      libero, cursus vel viverra et, fringilla et est. Donec nibh ipsum, finibus eu urna sed, ullamcorper
+      sollicitudin
+      velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum
+      et
+      malesuada fames ac ante ipsum primis in faucibus. Nulla sit amet bibendum nunc, ut iaculis tellus.
+      Aenean ornare
+      velit vel venenatis scelerisque. Ut ac elit enim. Nulla nec congue ex. Cras nulla ligula, porttitor non
+      pulvinar
+      fermentum, hendrerit sit amet neque.
+
+      Etiam pulvinar suscipit metus, at lobortis erat eleifend id. Suspendisse scelerisque sem et orci rhoncus
+      posuere. Vivamus faucibus mi et feugiat elementum. Nulla tempor, ligula non ullamcorper condimentum,
+      lorem lorem
+      sagittis tortor, at interdum tellus nunc elementum purus. Nulla tincidunt augue nibh. Ut et augue a ex
+      pretium
+      sodales. Pellentesque quam neque, tincidunt eu fringilla nec, volutpat eget risus.
+
+      Fusce sit amet arcu sodales, vestibulum quam vel, lacinia mauris. Mauris ut placerat libero, eu gravida
+      lectus.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia felis vel nibh blandit, in
+      vestibulum nisl
+      congue. Integer ac dignissim nisi, id vehicula tellus. Class aptent taciti sociosqu ad litora torquent
+      per
+      conubia nostra, per inceptos himenaeos. In posuere vitae metus in fermentum.
+
+      Quisque venenatis ut eros at posuere. Etiam pulvinar, ipsum eu interdum vestibulum, arcu urna dapibus
+      lorem,
+      quis volutpat tortor enim sed leo. Donec dapibus lacinia purus. Nullam ac porttitor ligula. Fusce
+      aliquet mauris
+      tortor, id euismod neque tempus vel. Fusce luctus ex et volutpat pretium. Nulla varius justo quis
+      aliquam
+      accumsan.
+    </div>
+    <nav class="c-nav c-nav--bottom c-nav--inline a-nav a-nav--fast">
+      <a href="#" class="c-nav__item c-nav__item--right">Exit <i class="fa fa-fw fa-sign-out"></i></a>
+    </nav>
+  </div>
+</div>
+
+</body>
+</html>