Move docs to bulma repo (#299)

* Add package files whitelist

* Add flex shrink

* Add flex shrink

* Add docs config

* Fix flex shrink

* Fix hero pages

* Add docs folder

diff --git a/.gitignore b/.gitignore
index d8a80c8fb33981f07c453bfbd9473b6862bf5e54..b9721477729f81d5ead31fb0e959ba4204485fbf 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,11 @@
-.sass-cache
+# Files
 .DS_Store
-node_modules
+.ruby-version
 npm-debug.log
+
+# Folders
 .idea/
+.sass-cache
+_gh_pages
+_site
+node_modules

diff --git a/CNAME b/CNAME
new file mode 100644 (file)
index 0000000..caa80a2
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+bulma.io

diff --git a/Gemfile b/Gemfile
new file mode 100644 (file)
index 0000000..719b61a
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+group :development, :test do
+  gem 'jekyll', '~> 3.1.2'
+end

diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644 (file)
index 0000000..7db926d
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,39 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    colorator (0.1)
+    ffi (1.9.10)
+    jekyll (3.1.3)
+      colorator (~> 0.1)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.4.0)
+      sass (~> 3.4)
+    jekyll-watch (1.3.1)
+      listen (~> 3.0)
+    kramdown (1.10.0)
+    liquid (3.0.6)
+    listen (3.1.1)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9.7)
+    mercenary (0.3.6)
+    rb-fsevent (0.9.7)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    rouge (1.10.1)
+    safe_yaml (1.0.4)
+    sass (3.4.21)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.1.2)
+
+BUNDLED WITH
+   1.11.2

diff --git a/_config.yml b/_config.yml
new file mode 100644 (file)
index 0000000..9841c33
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,21 @@
+# Meta
+
+title:         "Bulma: a modern CSS framework based on Flexbox"
+description:   "Bulma is a CSS framework based on Flexbox and built with Sass"
+
+# Build
+
+encoding:      UTF-8
+markdown:      kramdown
+permalink:     pretty
+source:        docs
+url:           "http://bulma.io"
+
+# Variables
+
+baseurl:       ""
+cssurl:        "/css/bulma-docs.css"
+documentation: "/documentation/overview/start/"
+download:      "https://github.com/jgthms/bulma/archive/0.1.2.zip"
+github:        "https://github.com/jgthms/bulma"
+version:       0.1.2

diff --git a/bower.json b/bower.json
index 76c5e50c8bca5da2c17f182f035795656d8aad39..929e43371e9e61c68df556d6725af53905e67372 100644 (file)
--- a/bower.json
+++ b/bower.json
@@ -20,6 +20,8 @@
     "node_modules",
     "bower_components",
     "test",
-    "tests"
+    "tests",
+    "docs",
+    "images"
   ]
 }

diff --git a/css/bulma.css b/css/bulma.css
index 924756563cdbc6994101b86041d41d2dabe1b8dc..ce3312eb4465e5d9fabcb8153271c9270d321b81 100644 (file)
--- a/css/bulma.css
+++ b/css/bulma.css
@@ -388,7 +388,6 @@ table th {
 
 .is-flex {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
@@ -396,7 +395,6 @@ table th {
 @media screen and (max-width: 768px) {
   .is-flex-mobile {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -405,7 +403,6 @@ table th {
 @media screen and (min-width: 769px) {
   .is-flex-tablet {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -414,7 +411,6 @@ table th {
 @media screen and (min-width: 769px) and (max-width: 979px) {
   .is-flex-tablet-only {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -423,7 +419,6 @@ table th {
 @media screen and (max-width: 979px) {
   .is-flex-touch {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -432,7 +427,6 @@ table th {
 @media screen and (min-width: 980px) {
   .is-flex-desktop {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -441,7 +435,6 @@ table th {
 @media screen and (min-width: 980px) and (max-width: 1179px) {
   .is-flex-desktop-only {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -450,7 +443,6 @@ table th {
 @media screen and (min-width: 1180px) {
   .is-flex-widescreen {
     display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: -ms-flexbox !important;
     display: flex !important;
   }
@@ -550,7 +542,6 @@ table th {
 
 .is-inline-flex {
   display: -webkit-inline-box;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
@@ -558,7 +549,6 @@ table th {
 @media screen and (max-width: 768px) {
   .is-inline-flex-mobile {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -567,7 +557,6 @@ table th {
 @media screen and (min-width: 769px) {
   .is-inline-flex-tablet {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -576,7 +565,6 @@ table th {
 @media screen and (min-width: 769px) and (max-width: 979px) {
   .is-inline-flex-tablet-only {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -585,7 +573,6 @@ table th {
 @media screen and (max-width: 979px) {
   .is-inline-flex-touch {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -594,7 +581,6 @@ table th {
 @media screen and (min-width: 980px) {
   .is-inline-flex-desktop {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -603,7 +589,6 @@ table th {
 @media screen and (min-width: 980px) and (max-width: 1179px) {
   .is-inline-flex-desktop-only {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -612,7 +597,6 @@ table th {
 @media screen and (min-width: 1180px) {
   .is-inline-flex-widescreen {
     display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
@@ -710,6 +694,10 @@ table th {
   margin: 0 !important;
 }
 
+.is-paddingless {
+  padding: 0 !important;
+}
+
 .box {
   background-color: #fff;
   border-radius: 5px;
@@ -730,7 +718,6 @@ a.box:active {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: white;
@@ -738,13 +725,11 @@ a.box:active {
   border-radius: 3px;
   color: #222324;
   display: -webkit-inline-box;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 24px;
@@ -753,7 +738,6 @@ a.box:active {
   position: relative;
   vertical-align: top;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding-left: 10px;
@@ -1235,7 +1219,6 @@ a.box:active {
 
 .button.is-fullwidth {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
@@ -1369,7 +1352,6 @@ a.box:active {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: white;
@@ -1377,13 +1359,11 @@ a.box:active {
   border-radius: 3px;
   color: #222324;
   display: -webkit-inline-box;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 24px;
@@ -1554,7 +1534,6 @@ a.box:active {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: white;
@@ -1562,13 +1541,11 @@ a.box:active {
   border-radius: 3px;
   color: #222324;
   display: -webkit-inline-box;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 24px;
@@ -1787,10 +1764,13 @@ a.box:active {
 
 @media screen and (min-width: 769px) {
   .control-label {
+    -ms-flex-preferred-size: 0;
+        flex-basis: 0;
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
     margin-right: 20px;
     padding-top: 7px;
     text-align: right;
@@ -1808,11 +1788,9 @@ a.box:active {
 
 .control.has-addons {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
@@ -1876,21 +1854,20 @@ a.box:active {
 .control.has-addons .is-expanded.textarea,
 .control.has-addons .select.is-expanded {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .control.has-addons.has-addons-centered {
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 .control.has-addons.has-addons-right {
   -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
@@ -1900,9 +1877,10 @@ a.box:active {
 .control.has-addons.has-addons-fullwidth .textarea,
 .control.has-addons.has-addons-fullwidth .select {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .control.has-icon > .fa {
@@ -2005,11 +1983,9 @@ a.box:active {
 
 .control.is-grouped {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
@@ -2021,21 +1997,20 @@ a.box:active {
 
 .control.is-grouped > .control.is-expanded {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .control.is-grouped.is-grouped-centered {
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 .control.is-grouped.is-grouped-right {
   -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
@@ -2043,19 +2018,20 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .control.is-horizontal {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
   .control.is-horizontal > .control {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    -ms-flex-preferred-size: 0;
+        flex-basis: 0;
     -webkit-box-flex: 5;
-    -webkit-flex-grow: 5;
         -ms-flex-positive: 5;
             flex-grow: 5;
+    -ms-flex-negative: 1;
+        flex-shrink: 1;
   }
 }
 
@@ -2866,20 +2842,17 @@ a.box:active {
 
 .tag {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: #f5f7fa;
   border-radius: 290486px;
   color: #69707a;
   display: -webkit-inline-box;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 12px;
   height: 24px;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   line-height: 16px;
@@ -2976,12 +2949,10 @@ a.box:active {
 
 .card-header {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   box-shadow: 0 1px 2px rgba(17, 17, 17, 0.1);
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   min-height: 40px;
@@ -2989,16 +2960,13 @@ a.box:active {
 
 .card-header-title {
   -webkit-box-align: start;
-  -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start;
   color: #222324;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
   font-weight: bold;
@@ -3007,16 +2975,13 @@ a.box:active {
 
 .card-header-icon {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   cursor: pointer;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 40px;
@@ -3038,30 +3003,24 @@ a.box:active {
 .card-footer {
   border-top: 1px solid #d3d6db;
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
 .card-footer-item {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding: 10px;
@@ -3093,29 +3052,24 @@ a.box:active {
 }
 
 .column {
-  -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-          flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+      flex-basis: 0;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  -webkit-flex-shrink: 1;
-      -ms-flex-negative: 1;
-          flex-shrink: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
   padding: 10px;
 }
 
 .columns.is-mobile > .column.is-narrow {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
 }
 
 .columns.is-mobile > .column.is-full {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 100%;
@@ -3123,7 +3077,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-three-quarters {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 75%;
@@ -3131,7 +3084,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-two-thirds {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 66.6666%;
@@ -3139,7 +3091,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-half {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 50%;
@@ -3147,7 +3098,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-one-third {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 33.3333%;
@@ -3155,7 +3105,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-one-quarter {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 25%;
@@ -3183,7 +3132,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-1 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 8.33333%;
@@ -3195,7 +3143,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-2 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 16.66667%;
@@ -3207,7 +3154,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-3 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 25%;
@@ -3219,7 +3165,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-4 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 33.33333%;
@@ -3231,7 +3176,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-5 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 41.66667%;
@@ -3243,7 +3187,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-6 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 50%;
@@ -3255,7 +3198,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-7 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 58.33333%;
@@ -3267,7 +3209,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-8 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 66.66667%;
@@ -3279,7 +3220,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-9 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 75%;
@@ -3291,7 +3231,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-10 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 83.33333%;
@@ -3303,7 +3242,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-11 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 91.66667%;
@@ -3315,7 +3253,6 @@ a.box:active {
 
 .columns.is-mobile > .column.is-12 {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   width: 100%;
@@ -3328,48 +3265,41 @@ a.box:active {
 @media screen and (max-width: 768px) {
   .column.is-narrow-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
   }
   .column.is-full-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
   }
   .column.is-three-quarters-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
   }
   .column.is-two-thirds-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.6666%;
   }
   .column.is-half-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
   }
   .column.is-one-third-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3391,7 +3321,6 @@ a.box:active {
   }
   .column.is-1-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 8.33333%;
@@ -3401,7 +3330,6 @@ a.box:active {
   }
   .column.is-2-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 16.66667%;
@@ -3411,7 +3339,6 @@ a.box:active {
   }
   .column.is-3-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3421,7 +3348,6 @@ a.box:active {
   }
   .column.is-4-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.33333%;
@@ -3431,7 +3357,6 @@ a.box:active {
   }
   .column.is-5-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 41.66667%;
@@ -3441,7 +3366,6 @@ a.box:active {
   }
   .column.is-6-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
@@ -3451,7 +3375,6 @@ a.box:active {
   }
   .column.is-7-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 58.33333%;
@@ -3461,7 +3384,6 @@ a.box:active {
   }
   .column.is-8-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.66667%;
@@ -3471,7 +3393,6 @@ a.box:active {
   }
   .column.is-9-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
@@ -3481,7 +3402,6 @@ a.box:active {
   }
   .column.is-10-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 83.33333%;
@@ -3491,7 +3411,6 @@ a.box:active {
   }
   .column.is-11-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 91.66667%;
@@ -3501,7 +3420,6 @@ a.box:active {
   }
   .column.is-12-mobile {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
@@ -3514,48 +3432,41 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .column.is-narrow, .column.is-narrow-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
   }
   .column.is-full, .column.is-full-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
   }
   .column.is-three-quarters, .column.is-three-quarters-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
   }
   .column.is-two-thirds, .column.is-two-thirds-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.6666%;
   }
   .column.is-half, .column.is-half-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
   }
   .column.is-one-third, .column.is-one-third-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter, .column.is-one-quarter-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3577,7 +3488,6 @@ a.box:active {
   }
   .column.is-1, .column.is-1-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 8.33333%;
@@ -3587,7 +3497,6 @@ a.box:active {
   }
   .column.is-2, .column.is-2-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 16.66667%;
@@ -3597,7 +3506,6 @@ a.box:active {
   }
   .column.is-3, .column.is-3-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3607,7 +3515,6 @@ a.box:active {
   }
   .column.is-4, .column.is-4-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.33333%;
@@ -3617,7 +3524,6 @@ a.box:active {
   }
   .column.is-5, .column.is-5-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 41.66667%;
@@ -3627,7 +3533,6 @@ a.box:active {
   }
   .column.is-6, .column.is-6-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
@@ -3637,7 +3542,6 @@ a.box:active {
   }
   .column.is-7, .column.is-7-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 58.33333%;
@@ -3647,7 +3551,6 @@ a.box:active {
   }
   .column.is-8, .column.is-8-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.66667%;
@@ -3657,7 +3560,6 @@ a.box:active {
   }
   .column.is-9, .column.is-9-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
@@ -3667,7 +3569,6 @@ a.box:active {
   }
   .column.is-10, .column.is-10-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 83.33333%;
@@ -3677,7 +3578,6 @@ a.box:active {
   }
   .column.is-11, .column.is-11-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 91.66667%;
@@ -3687,7 +3587,6 @@ a.box:active {
   }
   .column.is-12, .column.is-12-tablet {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
@@ -3700,48 +3599,41 @@ a.box:active {
 @media screen and (min-width: 980px) {
   .column.is-narrow-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
   }
   .column.is-full-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
   }
   .column.is-three-quarters-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
   }
   .column.is-two-thirds-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.6666%;
   }
   .column.is-half-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
   }
   .column.is-one-third-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3763,7 +3655,6 @@ a.box:active {
   }
   .column.is-1-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 8.33333%;
@@ -3773,7 +3664,6 @@ a.box:active {
   }
   .column.is-2-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 16.66667%;
@@ -3783,7 +3673,6 @@ a.box:active {
   }
   .column.is-3-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3793,7 +3682,6 @@ a.box:active {
   }
   .column.is-4-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.33333%;
@@ -3803,7 +3691,6 @@ a.box:active {
   }
   .column.is-5-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 41.66667%;
@@ -3813,7 +3700,6 @@ a.box:active {
   }
   .column.is-6-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
@@ -3823,7 +3709,6 @@ a.box:active {
   }
   .column.is-7-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 58.33333%;
@@ -3833,7 +3718,6 @@ a.box:active {
   }
   .column.is-8-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.66667%;
@@ -3843,7 +3727,6 @@ a.box:active {
   }
   .column.is-9-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
@@ -3853,7 +3736,6 @@ a.box:active {
   }
   .column.is-10-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 83.33333%;
@@ -3863,7 +3745,6 @@ a.box:active {
   }
   .column.is-11-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 91.66667%;
@@ -3873,7 +3754,6 @@ a.box:active {
   }
   .column.is-12-desktop {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
@@ -3886,48 +3766,41 @@ a.box:active {
 @media screen and (min-width: 1180px) {
   .column.is-narrow-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
   }
   .column.is-full-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
   }
   .column.is-three-quarters-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
   }
   .column.is-two-thirds-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.6666%;
   }
   .column.is-half-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
   }
   .column.is-one-third-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3949,7 +3822,6 @@ a.box:active {
   }
   .column.is-1-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 8.33333%;
@@ -3959,7 +3831,6 @@ a.box:active {
   }
   .column.is-2-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 16.66667%;
@@ -3969,7 +3840,6 @@ a.box:active {
   }
   .column.is-3-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
@@ -3979,7 +3849,6 @@ a.box:active {
   }
   .column.is-4-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.33333%;
@@ -3989,7 +3858,6 @@ a.box:active {
   }
   .column.is-5-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 41.66667%;
@@ -3999,7 +3867,6 @@ a.box:active {
   }
   .column.is-6-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
@@ -4009,7 +3876,6 @@ a.box:active {
   }
   .column.is-7-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 58.33333%;
@@ -4019,7 +3885,6 @@ a.box:active {
   }
   .column.is-8-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.66667%;
@@ -4029,7 +3894,6 @@ a.box:active {
   }
   .column.is-9-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
@@ -4039,7 +3903,6 @@ a.box:active {
   }
   .column.is-10-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 83.33333%;
@@ -4049,7 +3912,6 @@ a.box:active {
   }
   .column.is-11-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 91.66667%;
@@ -4059,7 +3921,6 @@ a.box:active {
   }
   .column.is-12-widescreen {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
@@ -4085,7 +3946,6 @@ a.box:active {
 
 .columns.is-centered {
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
@@ -4111,9 +3971,8 @@ a.box:active {
 
 @media screen and (min-width: 769px) {
   .columns.is-grid {
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
   }
   .columns.is-grid > .column {
     max-width: 33.3333%;
@@ -4127,20 +3986,17 @@ a.box:active {
 
 .columns.is-mobile {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
 .columns.is-multiline {
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 .columns.is-vcentered {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
               -ms-grid-row-align: center;
           align-items: center;
@@ -4149,7 +4005,6 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .columns:not(.is-desktop) {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
@@ -4158,7 +4013,6 @@ a.box:active {
 @media screen and (min-width: 980px) {
   .columns.is-desktop {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
@@ -4166,20 +4020,16 @@ a.box:active {
 
 .tile {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
               -ms-grid-row-align: stretch;
           align-items: stretch;
-  -webkit-flex-basis: auto;
-      -ms-flex-preferred-size: auto;
-          flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+      flex-basis: auto;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  -webkit-flex-shrink: 1;
-      -ms-flex-negative: 1;
-          flex-shrink: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
   min-height: -webkit-min-content;
   min-height: -moz-min-content;
   min-height: min-content;
@@ -4210,7 +4060,6 @@ a.box:active {
 .tile.is-vertical {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
 }
@@ -4222,90 +4071,77 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .tile:not(.is-child) {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
   .tile.is-1 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 8.33333%;
   }
   .tile.is-2 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 16.66667%;
   }
   .tile.is-3 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 25%;
   }
   .tile.is-4 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 33.33333%;
   }
   .tile.is-5 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 41.66667%;
   }
   .tile.is-6 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 50%;
   }
   .tile.is-7 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 58.33333%;
   }
   .tile.is-8 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 66.66667%;
   }
   .tile.is-9 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 75%;
   }
   .tile.is-10 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 83.33333%;
   }
   .tile.is-11 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 91.66667%;
   }
   .tile.is-12 {
     -webkit-box-flex: 0;
-    -webkit-flex: none;
         -ms-flex: none;
             flex: none;
     width: 100%;
@@ -4556,7 +4392,6 @@ a.box:active {
 .level-left .level-item.is-flexible,
 .level-right .level-item.is-flexible {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
@@ -4570,11 +4405,9 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .level-left {
     -webkit-box-align: center;
-    -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center;
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
@@ -4583,15 +4416,12 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .level-right {
     -webkit-box-align: center;
-    -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center;
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
@@ -4599,12 +4429,10 @@ a.box:active {
 
 .level {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
               -ms-grid-row-align: center;
           align-items: center;
   -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
@@ -4620,7 +4448,6 @@ a.box:active {
 
 .level.is-mobile {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
@@ -4631,7 +4458,6 @@ a.box:active {
 
 .level.is-mobile > .level-item:not(.is-narrow) {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
@@ -4639,13 +4465,11 @@ a.box:active {
 @media screen and (min-width: 769px) {
   .level {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
   .level > .level-item:not(.is-narrow) {
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
   }
@@ -4686,19 +4510,18 @@ a.box:active {
 
 .media-content {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
   text-align: left;
 }
 
 .media {
   -webkit-box-align: start;
-  -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   text-align: left;
@@ -4711,7 +4534,6 @@ a.box:active {
 .media .media {
   border-top: 1px solid rgba(211, 214, 219, 0.5);
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   padding-top: 10px;
@@ -4979,15 +4801,11 @@ a.box:active {
 }
 
 .modal-card {
-  background-color: #fff;
-  border-radius: 5px;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
   max-height: calc(100vh - 40px);
@@ -4997,19 +4815,15 @@ a.box:active {
 .modal-card-head,
 .modal-card-foot {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: #f5f7fa;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-shrink: 0;
-      -ms-flex-negative: 0;
-          flex-shrink: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   padding: 20px;
@@ -5018,19 +4832,24 @@ a.box:active {
 
 .modal-card-head {
   border-bottom: 1px solid #d3d6db;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 .modal-card-title {
   color: #222324;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   font-size: 24px;
   line-height: 1;
 }
 
 .modal-card-foot {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
   border-top: 1px solid #d3d6db;
 }
 
@@ -5039,10 +4858,12 @@ a.box:active {
 }
 
 .modal-card-body {
+  background-color: #fff;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
   overflow: auto;
   padding: 20px;
 }
@@ -5054,13 +4875,11 @@ a.box:active {
   right: 0;
   top: 0;
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
               -ms-grid-row-align: center;
           align-items: center;
   display: none;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   overflow: hidden;
@@ -5070,7 +4889,6 @@ a.box:active {
 
 .modal.is-active {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
@@ -5083,15 +4901,12 @@ a.box:active {
 
 .nav-item {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding: 10px;
@@ -5099,9 +4914,10 @@ a.box:active {
 
 .nav-item a {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .nav-item img {
@@ -5123,7 +4939,6 @@ a.box:active {
 @media screen and (max-width: 768px) {
   .nav-item {
     -webkit-box-pack: start;
-    -webkit-justify-content: flex-start;
         -ms-flex-pack: start;
             justify-content: flex-start;
   }
@@ -5192,22 +5007,19 @@ a.nav-item.is-tab.is-active {
 
 .nav-left {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-          flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+      flex-basis: 0;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   overflow: hidden;
@@ -5217,15 +5029,12 @@ a.nav-item.is-tab.is-active {
 
 .nav-center {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   margin-left: auto;
@@ -5235,22 +5044,19 @@ a.nav-item.is-tab.is-active {
 @media screen and (min-width: 769px) {
   .nav-right {
     -webkit-box-align: stretch;
-    -webkit-align-items: stretch;
         -ms-flex-align: stretch;
             align-items: stretch;
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-flex-basis: 0;
-        -ms-flex-preferred-size: 0;
-            flex-basis: 0;
+    -ms-flex-preferred-size: 0;
+        flex-basis: 0;
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
     -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
@@ -5258,12 +5064,10 @@ a.nav-item.is-tab.is-active {
 
 .nav {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   background-color: #fff;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   min-height: 50px;
@@ -5274,11 +5078,9 @@ a.nav-item.is-tab.is-active {
 
 .nav > .container {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   min-height: 50px;
@@ -5314,15 +5116,12 @@ a.nav-item.is-tab.is-active {
 
 .pagination {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   text-align: center;
@@ -5346,28 +5145,25 @@ a.nav-item.is-tab.is-active {
 
 .pagination ul {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 @media screen and (max-width: 768px) {
   .pagination {
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
   }
   .pagination > a {
     width: calc(50% - 5px);
@@ -5377,9 +5173,10 @@ a.nav-item.is-tab.is-active {
   }
   .pagination li {
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
   }
   .pagination ul {
     margin-top: 10px;
@@ -5389,7 +5186,6 @@ a.nav-item.is-tab.is-active {
 @media screen and (min-width: 769px) {
   .pagination > a:not(:first-child) {
     -webkit-box-ordinal-group: 2;
-    -webkit-order: 1;
         -ms-flex-order: 1;
             order: 1;
   }
@@ -5433,13 +5229,11 @@ a.nav-item.is-tab.is-active {
 
 .panel-tabs {
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   font-size: 11px;
   padding: 5px 10px 0;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
@@ -5485,15 +5279,12 @@ a.panel-block:hover {
 
 .tabs {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
   line-height: 24px;
@@ -5504,17 +5295,14 @@ a.panel-block:hover {
 
 .tabs a {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   border-bottom: 1px solid #d3d6db;
   color: #69707a;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   margin-bottom: -1px;
@@ -5538,20 +5326,18 @@ a.panel-block:hover {
 
 .tabs ul {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   border-bottom: 1px solid #d3d6db;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
@@ -5562,11 +5348,9 @@ a.panel-block:hover {
 
 .tabs ul.is-center {
   -webkit-box-flex: 0;
-  -webkit-flex: none;
       -ms-flex: none;
           flex: none;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding-left: 10px;
@@ -5575,7 +5359,6 @@ a.panel-block:hover {
 
 .tabs ul.is-right {
   -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding-left: 10px;
@@ -5591,14 +5374,12 @@ a.panel-block:hover {
 
 .tabs.is-centered ul {
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 .tabs.is-right ul {
   -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
@@ -5623,9 +5404,10 @@ a.panel-block:hover {
 
 .tabs.is-fullwidth li {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .tabs.is-toggle a {
@@ -5740,7 +5522,6 @@ a.panel-block:hover {
 @media screen and (max-width: 768px) {
   .hero-buttons .button {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
@@ -5752,11 +5533,9 @@ a.panel-block:hover {
 @media screen and (min-width: 769px) {
   .hero-buttons {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
-    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
   }
@@ -5767,20 +5546,20 @@ a.panel-block:hover {
 
 .hero-head,
 .hero-foot {
-  -webkit-flex-shrink: 0;
-      -ms-flex-negative: 0;
-          flex-shrink: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .hero-body {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   padding: 40px 20px;
 }
 
-@media screen and (min-width: 980px) {
+@media screen and (min-width: 1240px) {
   .hero-body {
     padding-left: 0;
     padding-right: 0;
@@ -5789,21 +5568,17 @@ a.panel-block:hover {
 
 .hero {
   -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   background-color: #fff;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
@@ -6656,20 +6431,19 @@ a.panel-block:hover {
 
 .hero.is-fullheight .hero-body {
   -webkit-box-align: center;
-  -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
 .hero.is-fullheight .hero-body > .container {
   -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .section {

diff --git a/css/bulma.css.map b/css/bulma.css.map
index e4f16f2e838bbafda7fb8af0eccb76f1ae8c642d..436ae45a74cd52f4ab63effe4d9f68aa1b098b57 100644 (file)
--- a/css/bulma.css.map
+++ b/css/bulma.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../sass/utilities/reset.sass","../sass/utilities/animations.sass","bulma.css","../sass/base/generic.sass","../sass/utilities/variables.sass","../sass/base/classes.sass","../sass/utilities/mixins.sass","../sass/base/helpers.sass","../sass/elements/box.sass","../sass/elements/button.sass","../sass/utilities/controls.sass","../sass/utilities/functions.sass","../sass/elements/content.sass","../sass/elements/form.sass","../sass/elements/image.sass","../sass/elements/notification.sass","../sass/elements/progress.sass","../sass/elements/table.sass","../sass/elements/title.sass","../sass/elements/other.sass","../sass/components/card.sass","../sass/components/grid.sass","../sass/components/highlight.sass","../sass/components/level.sass","../sass/components/media.sass","../sass/components/menu.sass","../sass/components/message.sass","../sass/components/modal.sass","../sass/components/nav.sass","../sass/components/pagination.sass","../sass/components/panel.sass","../sass/components/tabs.sass","../sass/layout/hero.sass","../sass/layout/section.sass","../sass/layout/footer.sass"],"names":[],"mappings":"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GF;C4ByGkB;;AA5D9B;EAiEQ,oFAAiC;EAAjC,4EAAiC;CAA2E;;A1B9ClH;E0BnBF;IAsEY,uB5B7GA;G4B6GkC;EAtE9C;IAwEY,wC5BrHA;G4BqHsC;EAxElD;IA2Ec,uB5BlHF;G4BkHoC;EA3EhD;IA8EY,2C5BrHA;G4BqH6C;C9Bi7JxD;;A8B//JD;EAiBM,0B5BzDgB;E4B0DhB,e5B7Da;C4ByH4C;;AA9E/D;EAoBQ,e5B/DW;C4BkEW;;AAvB9B;;EAuBU,eAAe;CAAG;;AAvB5B;EAyBQ,gC5BpEW;C4BuEgB;;AA5BnC;;EA4BU,e5BvES;C4BuEc;;AA5BjC;EA8BQ,6C5BzEW;C4ByEoC;;A1BXrD;E0BnBF;IAiCU,0B5BzEY;G4ByEiB;C9B+/JtC;;A8BhiKD;;EAoCQ,gC5B/EW;C4BkFgB;;AAvCnC;;;EAuCU,e5BlFS;C4BkFc;;AAvCjC;EA0CU,e5BrFS;E4BsFT,aAAa;CAEK;;AA7C5B;EA6CY,WAAW;CAAG;;AA7C1B;EAgDY,WAAW;CAAG;;AAhD1B;EAoDY,e5B/FO;C4BiGmC;;AAtDtD;EAsDc,wC5BnGF;C4BmGwC;;AAtDpD;EA0Dc,0B5BrGK;E4BsGL,sB5BtGK;E4BuGL,e5BpGQ;C4BoGQ;;AA5D9B;EAiEQ,uFAAiC;EAAjC,+EAAiC;CAA2E;;A1B9ClH;E0BnBF;IAsEY,0B5BjHO;G4BiH2B;EAtE9C;IAwEY,wC5BrHA;G4BqHsC;EAxElD;IA2Ec,0B5BtHK;G4BsH6B;EA3EhD;IA8EY,2C5BzHO;G4ByHsC;C9B2gKxD;;A8BzlKD;EAiBM,0B5B5Da;E4B6Db,e5B1DgB;C4BsHyC;;AA9E/D;EAoBQ,e5B5Dc;C4B+DQ;;AAvB9B;;EAuBU,eAAe;CAAG;;AAvB5B;EAyBQ,gC5BjEc;C4BoEa;;AA5BnC;;EA4BU,e5BpEY;C4BoEW;;AA5BjC;EA8BQ,6C5BtEc;C4BsEiC;;A1BXrD;E0BnBF;IAiCU,0B5B5ES;G4B4EoB;C9BylKtC;;A8B1nKD;;EAoCQ,gC5B5Ec;C4B+Ea;;AAvCnC;;;EAuCU,e5B/EY;C4B+EW;;AAvCjC;EA0CU,e5BlFY;E4BmFZ,aAAa;CAEK;;AA7C5B;E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","file":"bulma.css"}
\ No newline at end of file
+{"version":3,"sources":["../sass/utilities/reset.sass","../sass/utilities/animations.sass","bulma.css","../sass/base/generic.sass","../sass/utilities/variables.sass","../sass/base/classes.sass","../sass/utilities/mixins.sass","../sass/base/helpers.sass","../sass/elements/box.sass","../sass/elements/button.sass","../sass/utilities/controls.sass","../sass/utilities/functions.sass","../sass/elements/content.sass","../sass/elements/form.sass","../sass/elements/image.sass","../sass/elements/notification.sass","../sass/elements/progress.sass","../sass/elements/table.sass","../sass/elements/title.sass","../sass/elements/other.sass","../sass/components/card.sass","../sass/components/grid.sass","../sass/components/highlight.sass","../sass/components/level.sass","../sass/components/media.sass","../sass/components/menu.sass","../sass/components/message.sass","../sass/components/modal.sass","../sass/components/nav.sass","../sass/components/pagination.sass","../sass/components/panel.sass","../sass/components/tabs.sass","../sass/layout/hero.sass","../sass/layout/section.sass","../sass/layout/footer.sass"],"names":[],"mappings":"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AAtDtD;EAsDc,wC5BpGF;C4BoGwC;;AAtDpD;EA0Dc,wBrB3EG;EqB4EH,oBrB5EG;EqB6EH,e5BlGA;C4BkGgB;;AA5D9B;EAiEQ,yFAAiC;EAAjC,iFAAiC;CAA2E;;A1B/ClH;E0BlBF;IAsEY,wBrBvFK;GqBuF6B;EAtE9C;IAwEY,wC5BtHA;G4BsHsC;EAxElD;IA2Ec,wBrB5FG;GqB4F+B;EA3EhD;IA8EY,2CrB/FK;GqB+FwC;C9BizKxD;;A8B/3KD;EAiBM,0B5BtDS;E4BuDT,arBnCW;CqB+F8C;;AA9E/D;EAoBQ,arBrCS;CqBwCa;;AAvB9B;;EAuBU,eAAe;CAAG;;AAvB5B;EAyBQ,gCrB1CS;CqB6CkB;;AA5BnC;;EA4BU,arB7CO;CqB6CgB;;AA5BjC;EA8BQ,6CrB/CS;CqB+CsC;;A1BZrD;E0BlBF;IAiCU,0B5BtEK;G4BsEwB;C9B+3KtC;;A8Bh6KD;;EAoCQ,gCrBrDS;CqBwDkB;;AAvCnC;;;EAuCU,arBxDO;CqBwDgB;;AAvCjC;EA0CU,arB3DO;EqB4DP,aAAa;CAEK;;AA7C5B;EA6CY,WAAW;CAAG;;AA7C1B;EAgDY,WAAW;CAAG;;AAhD1B;EAoDY,arBrEK;CqBuEqC;;AAtDtD;EAsDc,wC5BpGF;C4BoGwC;;AAtDpD;EA0Dc,wBrB3EG;EqB4EH,oBrB5EG;EqB6EH,e5BjGC;C4BiGe;;AA5D9B;EAiEQ,yFAAiC;EAAjC,iFAAiC;CAA2E;;A1B/ClH;E0BlBF;IAsEY,wBrBvFK;GqBuF6B;EAtE9C;IAwEY,wC5BtHA;G4BsHsC;EAxElD;IA2Ec,wBrB5FG;GqB4F+B;EA3EhD;IA8EY,2CrB/FK;GqB+FwC;C9B24KxD;;A8Bz9KD;EAiBM,0B5BjDU;E4BkDV,6B5BhEM;C4B4HmD;;AA9E/D;EAoBQ,6B5BlEI;C4BqEkB;;AAvB9B;;EAuBU,eAAe;CAAG;;AAvB5B;EAyBQ,6B5BvEI;C4B0EuB;;AA5BnC;;EA4BU,6B5B1EE;C4B0EqB;;AA5BjC;EA8BQ,0C5B5EI;C4B4E2C;;A1BZrD;E0BlBF;IAiCU,0B5BjEM;G4BiEuB;C9By9KtC;;A8B1/KD;;EAoCQ,6B5BlFI;C4BqFuB;;AAvCnC;;;EAuCU,6B5BrFE;C4BqFqB;;AAvCjC;EA0CU,6B5BxFE;E4ByFF,aAAa;CAEK;;AA7C5B;EA6CY,WAAW;CAAG;;AA7C1B;EAgDY,WAAW;CAAG;;AAhD1B;EAoDY,6B5BlGA;C4BoG0C;;AAtDtD;EAsDc,wC5BpGF;C4BoGwC;;AAtDpD;EA0Dc,wC5BxGF;E4ByGE,oC5BzGF;E4B0GE,e5B5FE;C4B4Fc;;AA5D9B;EAiEQ,yFAAiC;EAAjC,iFAAiC;CAA2E;;A1B/ClH;E0BlBF;IAsEY,wC5BpHA;G4BoHkC;EAtE9C;IAwEY,wC5BtHA;G4BsHsC;EAxElD;IA2Ec,wC5BzHF;G4ByHoC;EA3EhD;IA8EY,wC5B5HA;G4B4H6C;C9Bq+KxD;;A8BnjLD;EAiBM,0B5BnDO;E4BoDP,arBnCW;CqB+F8C;;AA9E/D;EAoBQ,arBrCS;CqBwCa;;AAvB9B;;EAuBU,eAAe;CAAG;;AAvB5B;EAyBQ,gCrB1CS;CqB6CkB;;AA5BnC;;EA4BU,arB7CO;CqB6CgB;;AA5BjC;EA8BQ,6CrB/CS;CqB+CsC;;A1BZrD;E0BlBF;IAiCU,0B5BnEG;G4BmE0B;C9BmjLtC;;A8BplLD;;EAoCQ,gCrBrDS;CqBwDkB;;AAvCnC;;;EAuCU,arBxDO;CqBwDgB;;AAvCjC;EA0CU,arB3DO;EqB4DP,aAAa;CAEK;;AA7C5B;EA6CY,WAAW;CAAG;;AA7C1B;EAgDY,WAAW;CAAG;;AAhD1B;EAoDY,arBrEK;CqBuEqC;;AAtDtD;EAsDc,wC5BpGF;C4BoGwC;;AAtDpD;EA0Dc,wBrB3EG;EqB4EH,oBrB5EG;EqB6EH,e5B9FD;C4B8FiB;;AA5D9B;EAiEQ,yFAAiC;EAAjC,iFAAiC;CAA2E;;A1B/ClH;E0BlBF;IAsEY,wBrBvFK;GqBuF6B;EAtE9C;IAwEY,wC5BtHA;G4BsHsC;EAxElD;IA2Ec,wBrB5FG;GqB4F+B;EA3EhD;IA8EY,2CrB/FK;GqB+FwC;C9B+jLxD;;AIvnLC;E0BtBF;IAmFQ,sBAAsB;IACtB,mBAAmB;GAAG;C9BgkL7B;;AI9nLC;E0BtBF;IAwFQ,sBAAsB;IACtB,mBAAmB;GAAG;C9BkkL7B;;A8B3pLD;EA2FI,kBAAkB;CAMQ;;AAjG9B;EA6FM,0BAAoB;MAApB,uBAAoB;UAApB,oBAAoB;EACpB,qBAAc;EAAd,qBAAc;EAAd,cAAc;CAGQ;;AAjG5B;EAgGQ,oBAAa;MAAb,qBAAa;UAAb,aAAa;EACb,qBAAe;MAAf,eAAe;CAAG;;ACnJ1B;EACE,uB7BSU;E6BRV,mBAAmB;CAOY;;A3B2E/B;E2BpFF;IAOM,oBAAoB;GAAG;EAP7B;IASM,oBAAoB;GAAG;C/BguL5B;;AgCzuLD;EACE,0B9BQoB;E8BPpB,wBAAwB;CAUqB;;AAZ/C;EAMM,e9BAa;C8BMwB;;AAZ3C;EAQQ,e9BHa;C8BGS;;AAR9B;EAUQ,iC9BFY;C8BIqB;;AAZzC;EAYU,6B9BKS;C8BLoB","file":"bulma.css"}
\ No newline at end of file

diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644 (file)
index 0000000..54806f6
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+.sass-cache
+/_sass
+/bulma
+/css
+/styles/node_modules
+_config.local.yml
+_site
+bulma-website-local.sass
+npm-debug.log

diff --git a/docs/LICENSE b/docs/LICENSE
new file mode 100644 (file)
index 0000000..4290a29
--- /dev/null
+++ b/docs/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jeremy Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
new file mode 100644 (file)
index 0000000..454ddd5
--- /dev/null
+++ b/docs/_includes/blog-hero.html
@@ -0,0 +1,31 @@
+<section class="hero is-primary">
+  <div class="hero-head">
+    <div class="container">
+      {% include header.html %}
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title">
+            <a href="{{ site.baseurl }}/blog">Blog</a>
+          </h1>
+          <p class="subtitle">
+            Stay updated about new features, bug fixes, and releases
+          </p>
+          <a class="button is-primary is-inverted" href="{{ site.baseurl }}/atom.xml">
+            <span class="icon">
+              <i class="fa fa-rss"></i>
+            </span>
+            <span>Subscribe</span>
+          </a>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/_includes/carbon.html b/docs/_includes/carbon.html
new file mode 100644 (file)
index 0000000..e11acc0
--- /dev/null
+++ b/docs/_includes/carbon.html
@@ -0,0 +1,3 @@
+<div id="carbon" class="box">
+  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script>
+</div>

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
new file mode 100644 (file)
index 0000000..e40cbb3
--- /dev/null
+++ b/docs/_includes/footer.html
@@ -0,0 +1,134 @@
+<section id="newsletter" class="hero is-primary">
+  <div class="hero-body">
+    <div class="container">
+      <!-- Begin MailChimp Signup Form -->
+      <div id="mc_embed_signup" class="columns is-vcentered">
+        <div class="column is-one-third is-left">
+          <p class="title">Bulma <strong>Newsletter</strong></p>
+          <p class="subtitle">Get notified when v1 is ready!</p>
+        </div>
+
+        <div class="column">
+          <form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&amp;id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+            <div id="mc_embed_signup_scroll">
+              <div class="control is-grouped">
+                <div class="control has-icon is-expanded">
+                  <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
+                  <i class="fa fa-envelope"></i>
+                </div>
+                <div class="control">
+                  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
+                </div>
+              </div>
+              <div id="mce-responses">
+                <div class="notification is-danger response" id="mce-error-response" style="display:none"></div>
+                <div class="notification is-success response" id="mce-success-response" style="display:none"></div>
+              </div>
+              <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+              <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                <input type="text" name="b_b43b93fe633f0560b2a72a69c_52585e8803" tabindex="-1" value="">
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!--End mc_embed_signup-->
+    </div>
+  </div>
+</section>
+
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+      </p>
+      <div id="social">
+        <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="105px" height="20px"></iframe>
+        <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en">@jgthms</a>
+        <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">Tweet</a>
+      </div>
+      <p>
+        Want to learn how to <strong>create a website</strong>?
+        <br>
+        Read <a href="http://marksheet.io">MarkSheet: a free HTML &amp; CSS tutorial</a>.
+      </p>
+      <p>
+        Want to make a <strong>donation</strong>?
+      </p>
+      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+        <input type="hidden" name="cmd" value="_s-xclick">
+        <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
+        <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
+        <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
+      </form>
+    </div>
+  </div>
+</footer>
+
+{% if page.route == 'index' %}
+  <style type="text/css">
+    @media screen and (max-width: 979px) {
+      .title.is-2 .icon.is-large {
+        display: none;
+      }
+    }
+
+    .title.is-2 {
+      position: relative;
+    }
+
+    .title.is-2 a {
+      color: #222324;
+    }
+
+    .title.is-2 a:hover {
+      color: #1fc8db;
+    }
+
+    .title.is-2 .icon.is-large {
+      left: -72px;
+      position: absolute;
+      top: -1px;
+    }
+
+    .hero .title.is-2 a {
+      color: white;
+    }
+
+    .hero .title.is-2 a:hover {
+      color: white;
+    }
+  </style>
+{% endif %}
+
+<script async id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
+<script async type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+
+<script src="{{ site.baseurl }}/javascript/jquery-2.2.0.min.js"></script>
+<script src="{{ site.baseurl }}/javascript/clipboard.min.js"></script>
+<script src="{{ site.baseurl }}/javascript/bulma.js"></script>
+
+{% if page.route == 'index' %}
+  <script type="text/javascript" src="{{ site.baseurl }}/javascript/index.js"></script>
+{% endif %}
+
+<script type="text/javascript">
+  (function($) {
+    window.fnames = new Array();
+    window.ftypes = new Array();
+    fnames[0]='EMAIL';
+    ftypes[0]='email';
+  }(jQuery));
+  var $mcj = jQuery.noConflict(true);
+</script>
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-82634666-2', 'auto');
+  ga('send', 'pageview');
+</script>

diff --git a/docs/_includes/head.html b/docs/_includes/head.html
new file mode 100644 (file)
index 0000000..58c94eb
--- /dev/null
+++ b/docs/_includes/head.html
@@ -0,0 +1,35 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+  <link rel="stylesheet" href="{{ site.cssurl | prepend: site.baseurl }}">
+
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+
+  <link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/favicons/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/favicons/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/favicons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/favicons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/favicons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/favicons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/favicons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/favicons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/favicons/apple-touch-icon-180x180.png">
+  <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-32x32.png" sizes="32x32">
+  <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/android-chrome-192x192.png" sizes="192x192">
+  <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96">
+  <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16">
+  <link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json">
+  <link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db">
+  <link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
+  <meta name="msapplication-TileColor" content="#1fc8db">
+  <meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png">
+  <meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
+</head>

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
new file mode 100644 (file)
index 0000000..390423a
--- /dev/null
+++ b/docs/_includes/header.html
@@ -0,0 +1,88 @@
+<nav class="nav">
+  <div class="nav-left">
+    <a class="nav-item is-brand" href="{{ site.baseurl }}/">
+      {% if page.route == 'index' %}
+        <img src="{{ site.baseurl }}/images/bulma.png" alt="{{ site.title }}">
+      {% else %}
+        <img src="{{ site.baseurl }}/images/bulma-white.png" alt="{{ site.title }}">
+      {% endif %}
+    </a>
+  </div>
+
+  <div class="nav-center">
+    <a class="nav-item" href="{{ site.github }}">
+      <span class="icon">
+        <i class="fa fa-github"></i>
+      </span>
+    </a>
+    <a class="nav-item" href="https://twitter.com/jgthms">
+      <span class="icon">
+        <i class="fa fa-twitter"></i>
+      </span>
+    </a>
+  </div>
+
+  <span id="nav-toggle" class="nav-toggle">
+    <span></span>
+    <span></span>
+    <span></span>
+  </span>
+
+  <div id="nav-menu" class="nav-right nav-menu">
+    <a class="nav-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.baseurl }}/">
+      Home
+    </a>
+    <a class="is-hidden nav-item {% if page.route == 'templates' %}is-active{% endif %} {% if page.layout == 'templates' %}is-active{% endif %}" href="{{ site.baseurl }}/templates/">
+      <span>Templates</span>
+      <span class="tag is-small is-success">New!</span>
+    </a>
+    <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
+      Documentation
+    </a>
+    <a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.baseurl }}/blog/">
+      Blog
+    </a>
+
+    {% if page.route == 'index' %}
+      <span class="nav-item">
+        <a id="twitter"
+          class="button"
+          data-social-network="Twitter"
+          data-social-action="tweet"
+          data-social-target="{{ site.url }}"
+          target="_blank"
+          href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
+          <span class="icon">
+            <i class="fa fa-twitter"></i>
+          </span>
+          <span>Tweet</span>
+        </a>
+        <a class="button is-primary" href="{{ site.download }}">
+          <span class="icon">
+            <i class="fa fa-download"></i>
+          </span>
+          <span>Download</span>
+        </a>
+      </span>
+    {% else %}
+      <span class="nav-item">
+        <a class="button is-light is-outlined"
+        data-social-network="Twitter"
+        data-social-action="tweet"
+        data-social-target="http://bulma.io/"
+        href="https://twitter.com/intent/tweet?text={{ 'Bulma: a modern CSS framework based on Flebox' | urlencode }}&url=http://bulma.io/&via=jgthms">
+          <span class="icon">
+            <i class="fa fa-twitter"></i>
+          </span>
+          <span>Tweet</span>
+        </a>
+        <a class="button is-primary is-inverted" href="{{ site.download }}">
+          <span class="icon">
+            <i class="fa fa-download"></i>
+          </span>
+          <span>Download</span>
+        </a>
+      </span>
+    {% endif %}
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-components.html b/docs/_includes/subnav-components.html
new file mode 100644 (file)
index 0000000..63c2246
--- /dev/null
+++ b/docs/_includes/subnav-components.html
@@ -0,0 +1,36 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/card/">
+        Card
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/level/">
+        Level
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/media-object/">
+        Media object
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/menu/">
+        Menu
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'message' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/message/">
+        Message
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/modal/">
+        Modal
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/nav/">
+        Nav
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/pagination/">
+        Pagination
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'panel' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/panel/">
+        Panel
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'tabs' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/tabs/">
+        Tabs
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-elements.html b/docs/_includes/subnav-elements.html
new file mode 100644 (file)
index 0000000..21d173b
--- /dev/null
+++ b/docs/_includes/subnav-elements.html
@@ -0,0 +1,39 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/box/">
+        Box
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'button' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/button/">
+        Button
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/content/">
+        Content
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/form/">
+        Form
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/icon/">
+        Icon
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'image' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/image/">
+        Image
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'notification' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/notification/">
+        Notification
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'progress' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/progress/">
+        Progress
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'table' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/table/">
+        Table
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'tag' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/tag/">
+        Tag
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'title' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/title/">
+        Title
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-grid.html b/docs/_includes/subnav-grid.html
new file mode 100644 (file)
index 0000000..984c4c2
--- /dev/null
+++ b/docs/_includes/subnav-grid.html
@@ -0,0 +1,11 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/grid/columns/">
+        Columns
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/grid/tiles/">
+        Tiles
+      </a>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-layout.html b/docs/_includes/subnav-layout.html
new file mode 100644 (file)
index 0000000..d5a2b8a
--- /dev/null
+++ b/docs/_includes/subnav-layout.html
@@ -0,0 +1,18 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/container/">
+        Container
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/hero/">
+        Hero
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/section/">
+        Section
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/footer/">
+        Footer
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-modifiers.html b/docs/_includes/subnav-modifiers.html
new file mode 100644 (file)
index 0000000..77bc5b3
--- /dev/null
+++ b/docs/_includes/subnav-modifiers.html
@@ -0,0 +1,15 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/syntax/">
+        Syntax
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/helpers/">
+        Helpers
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/responsive-helpers/">
+        Responsive helpers
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html
new file mode 100644 (file)
index 0000000..a01b32f
--- /dev/null
+++ b/docs/_includes/subnav-overview.html
@@ -0,0 +1,18 @@
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/start/">
+        Start
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/">
+        Variables
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
+        Classes
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
+        Responsiveness
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
new file mode 100644 (file)
index 0000000..5e58659
--- /dev/null
+++ b/docs/_layouts/default.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
+    {{ content }}
+    {% include footer.html %}
+  </body>
+</html>

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
new file mode 100644 (file)
index 0000000..bef02d9
--- /dev/null
+++ b/docs/_layouts/documentation.html
@@ -0,0 +1,59 @@
+---
+layout: default
+route: documentation
+---
+
+<section class="hero is-primary">
+  <div class="hero-head">
+    <div class="container">
+      {% include header.html %}
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <p class="title">
+            Documentation
+          </p>
+          <p class="subtitle">
+            Everything you need to <strong>create a website</strong> with Bulma
+          </p>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="hero-foot">
+    <div class="container">
+      <nav class="tabs is-boxed">
+        <ul>
+          <li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
+            <a href="{{ site.documentation }}">Overview</a>
+          </li>
+          <li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
+            <a href="{{ site.baseurl }}/documentation/modifiers/syntax">Modifiers</a>
+          </li>
+          <li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
+            <a href="{{ site.baseurl }}/documentation/grid/columns">Grid</a>
+          </li>
+          <li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
+            <a href="{{ site.baseurl }}/documentation/elements/box/">Elements</a>
+          </li>
+          <li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
+            <a href="{{ site.baseurl }}/documentation/components/card/">Components</a>
+          </li>
+          <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
+            <a href="{{ site.baseurl }}/documentation/layout/container/">Layout</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</section>
+
+{{ content }}

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
new file mode 100644 (file)
index 0000000..5518920
--- /dev/null
+++ b/docs/_layouts/post.html
@@ -0,0 +1,25 @@
+---
+layout: default
+route: blog
+---
+
+{% include blog-hero.html %}
+
+<section class="section">
+  <div class="container">
+    <article class="article {{ page.category | downcase }}{% if page.recommended == true %} recommended{% endif %}">
+      <p class="subtitle">
+        <a href="{{ site.baseurl }}/blog">Back</a>
+      </p>
+      <p class="subtitle is-4">
+        {{ page.date | date_to_string }}
+      </p>
+      <h1 class="title is-2">
+        {{ page.title }}
+      </h1>
+      <div class="content is-medium">
+        {{ content }}
+      </div>
+    </article>
+  </div>
+</section>

diff --git a/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md
new file mode 100644 (file)
index 0000000..de77fe0
--- /dev/null
+++ b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: "Blog launched, new responsive columns, new helpers"
+---
+
+First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.
+
+### Columns on mobile too
+
+By default, columns are only activated on **tablet** and **desktop**. If you want to use columns on mobile _too_, add the `is-mobile` modifier on the `columns` container.
+
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column"></div>
+  <div class="column"></div>
+  <div class="column"></div>
+  <!-- etc. -->
+</div>
+{% endhighlight %}
+
+### Responsive columns
+
+You can now apply different **column size** for each **breakpoint**.
+
+For example, let's say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:
+
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+    <p class="notification is-info">
+      <code>is-half-mobile</code><br>
+      <code>is-one-third-tablet</code><br>
+      <code>is-one-quarter-desktop</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">1</p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">1</p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">1</p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">1</p>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
+  <!-- Other columns -->
+</div>
+{% endhighlight %}
+
+<div class="message is-info">
+  <div class="message-header">
+    Info
+  </div>
+  <div class="message-body">
+    If you use <strong>mobile</strong> modifiers on single <code>column</code> elements, make sure to use the <code>is-mobile</code> modifier on the <code>columns</code> container.
+  </div>
+</div>
+
+### Multiline columns
+
+By default, if you want to start a new **row**, you just need to close a `columns` container and open a new one.
+
+But you can also add the `is-multiline` **modifier** on the `columns` container, and use **column size** modifiers (like `is-half` or `is-3`) to define size on multiple rows within the _same_ container.
+
+<div class="columns is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <p class="notification is-info"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-half">
+    <p class="notification is-info"><code>is-half</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column">
+    <p class="notification is-info">Auto</p>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="columns is-multiline is-mobile">
+  <div class="column is-one-quarter"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column is-half"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column is-one-quarter"></div>
+  <div class="column"></div>
+</div>
+{% endhighlight %}
+
+### Helpers section
+
+While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/modifiers/helpers/)!

diff --git a/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
new file mode 100644 (file)
index 0000000..5e7a2a8
--- /dev/null
+++ b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
@@ -0,0 +1,11 @@
+---
+layout: post
+title: "Metro UI CSS grid with Bulma tiles"
+---
+
+Have you ever wanted to build a **Metro-UI-like grid in CSS**?  
+Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
+
+[![Metro UI grid tiles in CSS](/images/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/grid/tiles/)
+
+Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!

diff --git a/docs/atom.xml b/docs/atom.xml
new file mode 100644 (file)
index 0000000..6e4cd84
--- /dev/null
+++ b/docs/atom.xml
@@ -0,0 +1,33 @@
+---
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <channel>
+    <title>{{ site.name | xml_escape }}</title>
+    <description>{% if site.description %}{{ site.description | xml_escape }}{% endif %}</description>
+    <link>{{ site.url }}</link>
+    <id>{{ site.url }}</id>
+    <updated>{{ site.time | date_to_xmlschema }}</updated>
+    <author>
+      <name>{{ site.name }}</name>
+      <email>bbxdesign@gmail.com</email>
+    </author>
+    <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml" />
+    {% for post in site.posts limit:10 %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        {% if post.author.name %}
+          <dc:creator>{{ post.author.name | xml_escape }}</dc:creator>
+        {% endif %}
+        {% if post.introduction %}
+          <description>{{ post.introduction | xml_escape }}</description>
+        {% else %}
+          <description>{{ post.content | xml_escape }}</description>
+        {% endif %}
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ site.url }}{{ post.url }}</link>
+        <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
+      </item>
+    {% endfor %}
+  </channel>
+</rss>

diff --git a/docs/blog.html b/docs/blog.html
new file mode 100644 (file)
index 0000000..e822e8c
--- /dev/null
+++ b/docs/blog.html
@@ -0,0 +1,28 @@
+---
+layout: default
+route: blog
+---
+
+{% include blog-hero.html %}
+
+{% for post in site.posts %}
+  <section class="section">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-8">
+          <p class="subtitle4">
+            {{ post.date | date_to_string }}
+          </p>
+          <h2 class="title">
+            <a href="{{ post.url }}">
+              {{ post.title }}
+            </a>
+          </h2>
+          <div class="content">
+            {{ post.content }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endfor %}

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
new file mode 100644 (file)
index 0000000..444ac74
--- /dev/null
+++ b/docs/bulma-docs.sass
@@ -0,0 +1,273 @@
+@charset "utf-8"
+
+@import "../bulma.sass"
+
+// Override
+
+.button
+  +tablet
+    small
+      color: $text
+      left: 0
+      margin-top: 10px
+      position: absolute
+      top: 100%
+      width: 100%
+
+body.page-grid .column > .notification
+  padding-left: 0
+  padding-right: 0
+  text-align: center
+
++tablet
+  .header-item .button + .button
+    margin-left: 10px
+
+// Additional
+
+$carbon-space: 15px
+
+#carbon
+  max-width: 340px
+  min-height: 100px + ($carbon-space * 2)
+  min-width: 300px
+  padding: $carbon-space
+  +tablet
+    margin-left: auto
+    margin-right: auto
+    width: 340px
+
+#carbonads
+  text-align: left
+  a:hover
+    text-decoration: underline
+  span
+    display: block
+  .carbon-img
+    float: left
+    height: 100px
+    width: 130px
+    img
+      display: block
+  .carbon-text
+    display: block
+    color: $text-strong
+    margin-bottom: 5px
+    margin-left: 130px + $carbon-space
+  .carbon-poweredby
+    font-size: $size-small
+    margin-left: $carbon-space
+
+$github: #333333
+$twitter: #55acee
+
+#github
+  color: $github
+  border-color: $github
+  &:hover
+    background: $github
+    border-color: $github
+    color: $white
+
+#twitter
+  color: $twitter
+  border-color: $twitter
+  &:hover
+    background: $twitter
+    border-color: $twitter
+    color: $white
+
+#b
+  border-radius: 20px
+  box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+  display: inline-block
+  height: 240px
+  margin-bottom: 40px
+  vertical-align: top
+  width: 240px
+  +mobile
+    border-radius: 10px
+    height: 120px
+    width: 120px
+
+#npm
+  background: none
+  margin: -10px 0 20px
+  code
+    border-radius: $radius
+    color: $link
+    display: inline-block
+    font-size: 16px
+    padding: 16px 32px
+
+#grid
+  .notification
+    padding-left: 0
+    padding-right: 0
+
+#message
+  display: none
+
+#tweet
+  background: $white
+  border-radius: $radius-large
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  padding: 20px
+
+#mc_embed_signup
+  .control
+    margin-bottom: 0
+  .notification
+    margin-top: 10px
+
+#social
+  align-items: center
+  display: flex
+  height: 20px
+  margin-bottom: 1em
+  justify-content: center
+  a
+    display: inline-block
+    font-size: 11px
+    height: 20px
+    line-height: 20px
+  iframe:last-child
+    margin-left: 10px
+
+#images
+  tr
+    td:nth-child(2)
+      width: 320px
+
+.color
+  display: inline-block
+  float: left
+  height: 18px
+  margin-right: 5px
+  width: 18px
+
+.example,
+.structure
+  border: 1px solid $warning
+  border-top-right-radius: $radius
+  color: $warning-invert
+  padding: 15px 20px
+  position: relative
+  &:not(:first-child)
+    margin-top: 30px
+  &:not(:last-child)
+    margin-bottom: 20px
+  &:before
+    background: $warning
+    border-radius: $radius $radius 0 0
+    bottom: 100%
+    content: "Example"
+    display: inline-block
+    font-size: 7px
+    font-weight: bold
+    left: -1px
+    letter-spacing: 1px
+    padding: 3px 5px
+    position: absolute
+    text-transform: uppercase
+    vertical-align: top
+  +tablet
+    &.is-fullwidth
+      border-left: none
+      border-right: none
+      padding: 0
+
+.example
+  & + .highlight
+    border: 1px solid $warning
+    border-radius: 0 0 $radius $radius
+    border-top: none
+    margin-top: -20px
+    pre
+      max-height: 600px
+    &:not(:last-child)
+      margin-bottom: 40px
+
+$structure: $danger
+$structure-invert: $danger-invert
+
+.structure
+  border-color: $structure
+  border-radius: $radius
+  padding: 20px
+  &:before
+    background: $structure
+    color: $structure-invert
+    content: "Structure"
+
+.structure-item
+  position: relative
+  &:before
+    +overlay
+    background: rgba($black, 0.7)
+    background: $background
+    border: 1px solid $border
+    content: ""
+    display: block
+    z-index: 1
+  &:after
+    +overlay
+    align-items: center
+    content: attr(title)
+    display: flex
+    font-family: $family-monospace
+    font-size: 11px
+    justify-content: center
+    padding: 3px 5px
+    z-index: 2
+  &.is-structure-container
+    padding: 20px 10px 10px
+    &:after
+      align-items: flex-start
+      justify-content: flex-start
+      padding: 5px 10px
+
+.highlight
+  position: relative
+  .copy,
+  .expand
+    @extend .unselectable
+    background: $white
+    border: solid $border
+    border-width: 0 0 1px 1px
+    color: $text-light
+    outline: none
+    position: absolute
+    right: 0
+    top: 0
+    &:hover
+      border-color: $code
+      color: $code
+  .expand
+    border-right-width: 1px
+    right: 50px
+
++tablet
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
+    margin-left: 20px
+    margin-right: 20px
+    & + .highlight
+      margin-left: 20px
+      margin-right: 20px
+
+.section.is-fullwidth
+  padding: 0 !important
+  .example
+    border-left: none
+    border-radius: 0
+    border-right: none
+    padding: 0
+    & + .highlight
+      border-left: none
+      border-radius: 0
+      border-right: none
+
+#newsletter
+  .input
+    border-color: $white
+    box-shadow: none

diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html
new file mode 100644 (file)
index 0000000..ca65427
--- /dev/null
+++ b/docs/documentation/components/card.html
@@ -0,0 +1,134 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: card
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Card</h1>
+    <h2 class="subtitle">An all-around flexible and composable component</h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="card">
+          <div class="card-image">
+            <figure class="image is-4by3">
+              <img src="http://placehold.it/300x225" alt="">
+            </figure>
+          </div>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-32x32">
+                  <img src="http://placehold.it/64x64" alt="Image">
+                </figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-5">John Smith</p>
+                <p class="subtitle is-6">@johnsmith</p>
+              </div>
+            </div>
+
+            <div class="content">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+              <br>
+              <small>11:09 PM - 1 Jan 2016</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<div class="card">
+  <div class="card-image">
+    <figure class="image is-4by3">
+      <img src="http://placehold.it/300x225" alt="">
+    </figure>
+  </div>
+  <div class="card-content">
+    <div class="media">
+      <div class="media-left">
+        <figure class="image is-32x32">
+          <img src="http://placehold.it/64x64" alt="Image">
+        </figure>
+      </div>
+      <div class="media-content">
+        <p class="title is-5">John Smith</p>
+        <p class="subtitle is-6">@johnsmith</p>
+      </div>
+    </div>
+
+    <div class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
+      <a href="#">#css</a> <a href="#">#responsive</a>
+      <br>
+      <small>11:09 PM - 1 Jan 2016</small>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="card is-fullwidth">
+          <header class="card-header">
+            <p class="card-header-title">
+              Component
+            </p>
+            <a class="card-header-icon">
+              <i class="fa fa-angle-down"></i>
+            </a>
+          </header>
+          <div class="card-content">
+            <div class="content">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+              <br>
+              <small>11:09 PM - 1 Jan 2016</small>
+            </div>
+          </div>
+          <footer class="card-footer">
+            <a class="card-footer-item">Save</a>
+            <a class="card-footer-item">Edit</a>
+            <a class="card-footer-item">Delete</a>
+          </footer>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<div class="card is-fullwidth">
+  <header class="card-header">
+    <p class="card-header-title">
+      Component
+    </p>
+    <a class="card-header-icon">
+      <i class="fa fa-angle-down"></i>
+    </a>
+  </header>
+  <div class="card-content">
+    <div class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+      <br>
+      <small>11:09 PM - 1 Jan 2016</small>
+    </div>
+  </div>
+  <footer class="card-footer">
+    <a class="card-footer-item">Save</a>
+    <a class="card-footer-item">Edit</a>
+    <a class="card-footer-item">Delete</a>
+  </footer>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/components/level.html b/docs/documentation/components/level.html
new file mode 100644 (file)
index 0000000..500ae8e
--- /dev/null
+++ b/docs/documentation/components/level.html
@@ -0,0 +1,260 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: level
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Level</h1>
+    <h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The <strong>structure</strong> of a level is the following:</p>
+      <ul>
+        <li>
+          <code>level</code>: main container
+          <ul>
+            <li><code>level-left</code> for the left side</li>
+            <li>
+              <code>level-right</code> for the right side
+              <ul>
+                <li><code>level-item</code> for each individual element</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
+    </div>
+
+    <div class="structure">
+      <nav class="level structure-item is-structure-container" title="level">
+        <div class="level-left structure-item" title="level-left">
+          <div class="level-item">
+            <p class="subtitle is-5">
+              <strong>123</strong> posts
+            </p>
+          </div>
+          <div class="level-item">
+            <p class="control has-addons">
+              <input class="input" type="text" placeholder="Find a post">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
+        </div>
+        <div class="level-right structure-item" title="level-right">
+          <p class="level-item">
+            <strong>All</strong>
+          </p>
+          <p class="level-item">
+            <a>Published</a>
+          </p>
+          <p class="level-item">
+            <a>Drafts</a>
+          </p>
+          <p class="level-item">
+            <a>Deleted</a>
+          </p>
+          <p class="level-item">
+            <a class="button is-success">
+              New
+            </a>
+          </p>
+        </div>
+      </nav>
+    </div>
+
+    <div class="example">
+      <nav class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <p class="subtitle is-5">
+              <strong>123</strong> posts
+            </p>
+          </div>
+          <div class="level-item">
+            <p class="control has-addons">
+              <input class="input" type="text" placeholder="Find a post">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
+        </div>
+        <div class="level-right">
+          <p class="level-item">
+            <strong>All</strong>
+          </p>
+          <p class="level-item">
+            <a>Published</a>
+          </p>
+          <p class="level-item">
+            <a>Drafts</a>
+          </p>
+          <p class="level-item">
+            <a>Deleted</a>
+          </p>
+          <p class="level-item">
+            <a class="button is-success">
+              New
+            </a>
+          </p>
+        </div>
+      </nav>
+    </div>
+
+{% highlight html %}
+<!-- Main container -->
+<nav class="level">
+  <!-- Left side -->
+  <div class="level-left">
+    <div class="level-item">
+      <p class="subtitle is-5">
+        <strong>123</strong> posts
+      </p>
+    </div>
+    <div class="level-item">
+      <p class="control has-addons">
+        <input class="input" type="text" placeholder="Find a post">
+        <button class="button">
+          Search
+        </button>
+      </p>
+    </div>
+  </div>
+
+  <!-- Right side -->
+  <div class="level-right">
+    <p class="level-item"><strong>All</strong></p>
+    <p class="level-item"><a>Published</a></p>
+    <p class="level-item"><a>Drafts</a></p>
+    <p class="level-item"><a>Deleted</a></p>
+    <p class="level-item"><a class="button is-success">New</a></p>
+  </div>
+</nav>
+{% endhighlight %}
+
+    <hr>
+    <h3 class="title">Centered level</h3>
+
+    <div class="content">
+      If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
+    </div>
+
+    <div class="example">
+      <nav class="level">
+        <div class="level-item has-text-centered">
+          <p class="heading">Tweets</p>
+          <p class="title">3,456</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Following</p>
+          <p class="title">123</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Followers</p>
+          <p class="title">456K</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Likes</p>
+          <p class="title">789</p>
+        </div>
+      </nav>
+    </div>
+
+{% highlight html %}
+<nav class="level">
+  <div class="level-item has-text-centered">
+    <p class="heading">Tweets</p>
+    <p class="title">3,456</p>
+  </div>
+  <div class="level-item has-text-centered">
+    <p class="heading">Following</p>
+    <p class="title">123</p>
+  </div>
+  <div class="level-item has-text-centered">
+    <p class="heading">Followers</p>
+    <p class="title">456K</p>
+  </div>
+  <div class="level-item has-text-centered">
+    <p class="heading">Likes</p>
+    <p class="title">789</p>
+  </div>
+</nav>
+{% endhighlight %}
+
+    <div class="example">
+      <nav class="level">
+        <p class="level-item has-text-centered">
+          <a class="link is-info">Home</a>
+        </p>
+        <p class="level-item has-text-centered">
+          <a class="link is-info">Menu</a>
+        </p>
+        <p class="level-item has-text-centered">
+          <img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
+        </p>
+        <p class="level-item has-text-centered">
+          <a class="link is-info">Reservations</a>
+        </p>
+        <p class="level-item has-text-centered">
+          <a class="link is-info">Contact</a>
+        </p>
+      </nav>
+    </div>
+
+{% highlight html %}
+<nav class="level">
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Home</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Menu</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Reservations</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Contact</a>
+  </p>
+</nav>
+{% endhighlight %}
+
+    <hr>
+    <h3 class="title">Mobile level</h3>
+    <div class="content">
+      By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
+    </div>
+
+    <div class="example">
+      <nav class="level is-mobile">
+        <div class="level-item has-text-centered">
+          <p class="heading">Tweets</p>
+          <p class="title">3,456</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Following</p>
+          <p class="title">123</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Followers</p>
+          <p class="title">456K</p>
+        </div>
+        <div class="level-item has-text-centered">
+          <p class="heading">Likes</p>
+          <p class="title">789</p>
+        </div>
+      </nav>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html
new file mode 100644 (file)
index 0000000..8f034ef
--- /dev/null
+++ b/docs/documentation/components/media-object.html
@@ -0,0 +1,358 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: media-object
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Media Object</h1>
+    <h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
+    </div>
+
+    <div class="structure">
+      <article class="media">
+        <figure class="media-left structure-item" title="media-left">
+          <p class="image is-64x64">
+            <img src="http://placehold.it/128x128">
+          </p>
+        </figure>
+        <div class="media-content structure-item is-structure-right" title="media-content">
+          <div class="content">
+            <p>
+              <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+              <br>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+            </p>
+          </div>
+          <nav class="level">
+            <div class="level-left">
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-reply"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-heart"></i></span>
+              </a>
+            </div>
+          </nav>
+        </div>
+        <div class="media-right structure-item" title="media-right">
+          <button class="delete"></button>
+        </div>
+      </article>
+    </div>
+
+
+    <div class="example">
+      <article class="media">
+        <figure class="media-left">
+          <p class="image is-64x64">
+            <img src="http://placehold.it/128x128">
+          </p>
+        </figure>
+        <div class="media-content">
+          <div class="content">
+            <p>
+              <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+              <br>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+            </p>
+          </div>
+          <nav class="level">
+            <div class="level-left">
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-reply"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-heart"></i></span>
+              </a>
+            </div>
+          </nav>
+        </div>
+        <div class="media-right">
+          <button class="delete"></button>
+        </div>
+      </article>
+    </div>
+
+{% highlight html %}
+<article class="media">
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img src="http://placehold.it/128x128">
+    </p>
+  </figure>
+  <div class="media-content">
+    <div class="content">
+      <p>
+        <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+        <br>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+      </p>
+    </div>
+    <nav class="level">
+      <div class="level-left">
+        <a class="level-item">
+          <span class="icon is-small"><i class="fa fa-reply"></i></span>
+        </a>
+        <a class="level-item">
+          <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+        </a>
+        <a class="level-item">
+          <span class="icon is-small"><i class="fa fa-heart"></i></span>
+        </a>
+      </div>
+    </nav>
+  </div>
+  <div class="media-right">
+    <button class="delete"></button>
+  </div>
+</article>
+{% endhighlight %}
+
+    <div class="content">
+      <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
+    </div>
+
+    <div class="example">
+      <article class="media">
+        <figure class="media-left">
+          <p class="image is-64x64">
+            <img src="http://placehold.it/128x128">
+          </p>
+        </figure>
+        <div class="media-content">
+          <p class="control">
+            <textarea class="textarea" placeholder="Add a comment..."></textarea>
+          </p>
+          <nav class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <a class="button is-info">Post comment</a>
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">
+                <label class="checkbox">
+                  <input type="checkbox"> Press enter to submit
+                </label>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </article>
+    </div>
+
+{% highlight html %}
+<article class="media">
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img src="http://placehold.it/128x128">
+    </p>
+  </figure>
+  <div class="media-content">
+    <p class="control">
+      <textarea class="textarea" placeholder="Add a comment..."></textarea>
+    </p>
+    <nav class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <a class="button is-info">Post comment</a>
+        </div>
+      </div>
+      <div class="level-right">
+        <div class="level-item">
+          <label class="checkbox">
+            <input type="checkbox"> Press enter to submit
+          </label>
+        </div>
+      </div>
+    </nav>
+  </div>
+</article>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Nesting</h3>
+    <div class="content">
+      <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
+    </div>
+    <div class="example">
+      <article class="media">
+        <figure class="media-left">
+          <p class="image is-64x64">
+            <img src="http://placehold.it/128x128">
+          </p>
+        </figure>
+        <div class="media-content">
+          <div class="content">
+            <p>
+              <strong>Barbara Middleton</strong>
+              <br>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+              <br>
+              <small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
+            </p>
+          </div>
+
+          <article class="media">
+            <figure class="media-left">
+              <p class="image is-48x48">
+                <img src="http://placehold.it/96x96">
+              </p>
+            </figure>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>Sean Brown</strong>
+                  <br>
+                  Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
+                  <br>
+                  <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+                </p>
+              </div>
+
+              <article class="media">
+                Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
+              </article>
+
+              <article class="media">
+                Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
+              </article>
+            </div>
+          </article>
+
+          <article class="media">
+            <figure class="media-left">
+              <p class="image is-48x48">
+                <img src="http://placehold.it/96x96">
+              </p>
+            </figure>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>Kayli Eunice </strong>
+                  <br>
+                  Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
+                  <br>
+                  <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+                </p>
+              </div>
+            </div>
+          </article>
+        </div>
+      </article>
+      <article class="media">
+        <figure class="media-left">
+          <p class="image is-64x64">
+            <img src="http://placehold.it/128x128">
+          </p>
+        </figure>
+        <div class="media-content">
+          <p class="control">
+            <textarea class="textarea" placeholder="Add a comment..."></textarea>
+          </p>
+          <p class="control">
+            <button class="button">Post comment</button>
+          </p>
+        </div>
+      </article>
+    </div>
+{% highlight html %}
+<article class="media">
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img src="http://placehold.it/128x128">
+    </p>
+  </figure>
+  <div class="media-content">
+    <div class="content">
+      <p>
+        <strong>Barbara Middleton</strong>
+        <br>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+        <br>
+        <small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
+      </p>
+    </div>
+
+    <article class="media">
+      <figure class="media-left">
+        <p class="image is-48x48">
+          <img src="http://placehold.it/96x96">
+        </p>
+      </figure>
+      <div class="media-content">
+        <div class="content">
+          <p>
+            <strong>Sean Brown</strong>
+            <br>
+            Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
+            <br>
+            <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+          </p>
+        </div>
+
+        <article class="media">
+          Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
+        </article>
+
+        <article class="media">
+          Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
+        </article>
+      </div>
+    </article>
+
+    <article class="media">
+      <figure class="media-left">
+        <p class="image is-48x48">
+          <img src="http://placehold.it/96x96">
+        </p>
+      </figure>
+      <div class="media-content">
+        <div class="content">
+          <p>
+            <strong>Kayli Eunice </strong>
+            <br>
+            Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
+            <br>
+            <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+</article>
+<article class="media">
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img src="http://placehold.it/128x128">
+    </p>
+  </figure>
+  <div class="media-content">
+    <p class="control">
+      <textarea class="textarea" placeholder="Add a comment..."></textarea>
+    </p>
+    <p class="control">
+      <button class="button">Post comment</button>
+    </p>
+  </div>
+</article>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html
new file mode 100644 (file)
index 0000000..74a3aeb
--- /dev/null
+++ b/docs/documentation/components/menu.html
@@ -0,0 +1,91 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: menu
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Menu</h1>
+    <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-3">
+        <aside class="menu">
+          <p class="menu-label">
+            General
+          </p>
+          <ul class="menu-list">
+            <li><a href="#">Dashboard</a></li>
+            <li><a href="#">Customers</a></li>
+          </ul>
+          <p class="menu-label">
+            Administration
+          </p>
+          <ul class="menu-list">
+            <li><a href="#">Team Settings</a></li>
+            <li>
+              <a class="is-active" href="#">Manage Your Team</a>
+              <ul>
+                <li><a href="#">Members</a></li>
+                <li><a href="#">Plugins</a></li>
+                <li><a href="#">Add a member</a></li>
+              </ul>
+            </li>
+            <li><a href="#">Invitations</a></li>
+            <li><a href="#">Authentication</a></li>
+          </ul>
+          <p class="menu-label">
+            Transactions
+          </p>
+          <ul class="menu-list">
+            <li><a href="#">Payments</a></li>
+            <li><a href="#">Transfers</a></li>
+            <li><a href="#">Balance</a></li>
+          </ul>
+        </aside>
+      </div>
+      <div class="column">
+{% highlight html %}
+<aside class="menu">
+  <p class="menu-label">
+    General
+  </p>
+  <ul class="menu-list">
+    <li><a href="#">Dashboard</a></li>
+    <li><a href="#">Customers</a></li>
+  </ul>
+  <p class="menu-label">
+    Administration
+  </p>
+  <ul class="menu-list">
+    <li><a href="#">Team Settings</a></li>
+    <li>
+      <a class="is-active" href="#">Manage Your Team</a>
+      <ul>
+        <li><a href="#">Members</a></li>
+        <li><a href="#">Plugins</a></li>
+        <li><a href="#">Add a member</a></li>
+      </ul>
+    </li>
+    <li><a href="#">Invitations</a></li>
+    <li><a href="#">Authentication</a></li>
+  </ul>
+  <p class="menu-label">
+    Transactions
+  </p>
+  <ul class="menu-list">
+    <li><a href="#">Payments</a></li>
+    <li><a href="#">Transfers</a></li>
+    <li><a href="#">Balance</a></li>
+  </ul>
+</aside>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
new file mode 100644 (file)
index 0000000..3cc61f2
--- /dev/null
+++ b/docs/documentation/components/message.html
@@ -0,0 +1,247 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: message
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Messages</h1>
+    <h2 class="subtitle">
+      Colored <strong>message</strong> blocks, to emphasize part of your page
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-half">
+        <article class="message">
+          <div class="message-header">
+            Hello World
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-primary">
+          <div class="message-header">
+            Primary
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-info">
+          <div class="message-header">
+            Info
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-success">
+          <div class="message-header">
+            Success
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-warning">
+          <div class="message-header">
+            Warning
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-danger">
+          <div class="message-header">
+            Danger
+          </div>
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<article class="message">
+  <div class="message-header">
+    Hello World
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+
+<article class="message is-primary">
+  <div class="message-header">
+    Primary
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+
+<article class="message is-info">
+  <div class="message-header">
+    Info
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+
+<article class="message is-success">
+  <div class="message-header">
+    Success
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+
+<article class="message is-warning">
+  <div class="message-header">
+    Warning
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+
+<article class="message is-danger">
+  <div class="message-header">
+    Danger
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Pellentesque risus mi, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum felis venenatis efficitur.
+    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
+    arcu et sollicitudin porttitor, tortor urna tempor ligula,
+    id porttitor mi magna a neque. Donec dui urna, vehicula et
+    sem eget, facilisis sodales sem.
+  </div>
+</article>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="subtitle">Message body only</h3>
+
+    <div class="content">
+      <p>You can <strong>omit</strong> the message header:</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <article class="message">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-primary">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-info">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-success">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-warning">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+        <article class="message is-danger">
+          <div class="message-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+          </div>
+        </article>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<article class="message">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-primary">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-info">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-success">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-warning">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-danger">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html
new file mode 100644 (file)
index 0000000..995afe4
--- /dev/null
+++ b/docs/documentation/components/modal.html
@@ -0,0 +1,218 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: modal
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Modal</h1>
+    <h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The modal structure is very simple:</p>
+      <ul>
+        <li>
+          <code>modal</code>: the main container
+          <ul>
+            <li>
+              <code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
+            </li>
+            <li>
+              <code>modal-content</code>: a horizontally and verticaly centered container, with a maximum width of 640px, in which you can include <em>any</em> content
+            </li>
+            <li>
+              <code>modal-close</code>: a simple cross located in the top right corner
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        <a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
+      </p>
+    </div>
+
+{% highlight html %}
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-container">
+    <div class="modal-content">
+      <!-- Any other Bulma elements you want -->
+    </div>
+  </div>
+  <button class="modal-close"></button>
+</div>
+{% endhighlight %}
+
+    <div class="content">
+      <p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
+    </div>
+
+    <div class="message is-danger">
+      <div class="message-header">
+        No JavaScript
+      </div>
+      <div class="message-body">
+        Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Image modal</h3>
+
+    <div class="content">
+      <p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
+      <p>
+        <a class="button is-primary is-large modal-button" data-target="#modal-bis">Launch image modal</a>
+      </p>
+    </div>
+
+{% highlight html %}
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <p class="image is-4by3">
+      <img src="http://placehold.it/1280x960">
+    </p>
+  </div>
+  <button class="modal-close"></button>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Modal card</h3>
+
+    <div class="content">
+      <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
+      <p>
+        <a class="button is-primary is-large modal-button" data-target="#modal-ter">Launch modal card</a>
+      </p>
+    </div>
+
+{% highlight html %}
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete"></button>
+    </header>
+    <section class="modal-card-body">
+      <!-- Content ... -->
+    </section>
+    <footer class="modal-card-foot">
+      <a class="button is-primary">Save changes</a>
+      <a class="button">Cancel</a>
+    </footer>
+  </div>
+</div>
+{% endhighlight %}
+
+  </div>
+</section>
+
+<div id="modal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <div class="box">
+      <article class="media">
+        <div class="media-left">
+          <figure class="image is-64x64">
+            <img src="http://placehold.it/128x128" alt="Image">
+          </figure>
+        </div>
+        <div class="media-content">
+          <div class="content">
+            <p>
+              <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+              <br>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+            </p>
+          </div>
+          <nav class="level">
+            <div class="level-left">
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-reply"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+              </a>
+              <a class="level-item">
+                <span class="icon is-small"><i class="fa fa-heart"></i></span>
+              </a>
+            </div>
+          </nav>
+        </div>
+      </article>
+    </div>
+  </div>
+  <button class="modal-close"></button>
+</div>
+
+<div id="modal-bis" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <p class="image is-4by3">
+      <img src="http://placehold.it/1280x960">
+    </p>
+  </div>
+  <button class="modal-close"></button>
+</div>
+
+<div id="modal-ter" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <h1>Hello World</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+        <h2>Second level</h2>
+        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+        <h3>Third level</h3>
+        <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
+        <ol>
+          <li>Donec blandit a lorem id convallis.</li>
+          <li>Cras gravida arcu at diam gravida gravida.</li>
+          <li>Integer in volutpat libero.</li>
+          <li>Donec a diam tellus.</li>
+          <li>Aenean nec tortor orci.</li>
+          <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+          <li>Vivamus maximus ultricies pulvinar.</li>
+        </ol>
+        <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+        <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
+        <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
+        <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
+        <h4>Fourth level</h4>
+        <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
+        <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
+        <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
+        <h5>Fifth level</h5>
+        <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
+        <h6>Sixth level</h6>
+        <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
+        </ul>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <a class="button is-success">Save changes</a>
+      <a class="button">Cancel</a>
+    </footer>
+  </div>
+</div>

diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
new file mode 100644 (file)
index 0000000..e80c632
--- /dev/null
+++ b/docs/documentation/components/nav.html
@@ -0,0 +1,200 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: nav
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Nav</h1>
+    <h2 class="subtitle">
+      A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>nav</code> container can have <strong>3 parts</strong>:
+      </p>
+      <ul>
+        <li><code>nav-left</code></li>
+        <li><code>nav-center</code></li>
+        <li><code>nav-right</code></li>
+      </ul>
+      <p>
+        For responsiveness, <strong>2 additional</strong> classes are available:
+      </p>
+      <ul>
+        <li><code>nav-toggle</code> for the hamburger menu on mobile</li>
+        <li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
+      </ul>
+    </div>
+
+<div class="example">
+<nav class="nav">
+  <div class="nav-left">
+    <a class="nav-item is-brand" href="#">
+      <img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
+    </a>
+  </div>
+
+  <div class="nav-center">
+    <a class="nav-item" href="#">
+      <span class="icon">
+        <i class="fa fa-github"></i>
+      </span>
+    </a>
+    <a class="nav-item" href="#">
+      <span class="icon">
+        <i class="fa fa-twitter"></i>
+      </span>
+    </a>
+  </div>
+
+  <span class="nav-toggle">
+    <span></span>
+    <span></span>
+    <span></span>
+  </span>
+
+  <div class="nav-right nav-menu">
+    <a class="nav-item" href="#">
+      Home
+    </a>
+    <a class="nav-item" href="#">
+      Documentation
+    </a>
+    <a class="nav-item" href="#">
+      Blog
+    </a>
+
+    <span class="nav-item">
+      <a class="button" >
+        <span class="icon">
+          <i class="fa fa-twitter"></i>
+        </span>
+        <span>Tweet</span>
+      </a>
+      <a class="button is-primary" href="#">
+        <span class="icon">
+          <i class="fa fa-download"></i>
+        </span>
+        <span>Download</span>
+      </a>
+    </span>
+  </div>
+</nav>
+</div>
+
+{% highlight html %}
+<nav class="nav">
+  <div class="nav-left">
+    <a class="nav-item is-brand" href="#">
+      <img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
+    </a>
+  </div>
+
+  <div class="nav-center">
+    <a class="nav-item" href="#">
+      <span class="icon">
+        <i class="fa fa-github"></i>
+      </span>
+    </a>
+    <a class="nav-item" href="#">
+      <span class="icon">
+        <i class="fa fa-twitter"></i>
+      </span>
+    </a>
+  </div>
+
+  <span class="nav-toggle">
+    <span></span>
+    <span></span>
+    <span></span>
+  </span>
+
+  <div class="nav-right nav-menu">
+    <a class="nav-item" href="#">
+      Home
+    </a>
+    <a class="nav-item" href="#">
+      Documentation
+    </a>
+    <a class="nav-item" href="#">
+      Blog
+    </a>
+
+    <span class="nav-item">
+      <a class="button" >
+        <span class="icon">
+          <i class="fa fa-twitter"></i>
+        </span>
+        <span>Tweet</span>
+      </a>
+      <a class="button is-primary" href="#">
+        <span class="icon">
+          <i class="fa fa-download"></i>
+        </span>
+        <span>Download</span>
+      </a>
+    </span>
+  </div>
+</nav>
+
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Modifiers</h3>
+
+    <div class="content">
+      <ul>
+        <li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
+        <li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
+        <li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
+      </ul>
+    </div>
+  </div>
+
+<div class="example">
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab is-active">Card</a>
+      <a class="nav-item is-tab">Level</a>
+      <a class="nav-item is-tab">Media object</a>
+      <a class="nav-item is-tab">Menu</a>
+      <a class="nav-item is-tab">Message</a>
+      <a class="nav-item is-tab">Modal</a>
+      <a class="nav-item is-tab">Nav</a>
+      <a class="nav-item is-tab">Pagination</a>
+      <a class="nav-item is-tab">Panel</a>
+      <a class="nav-item is-tab">Tabs</a>
+    </div>
+  </div>
+</nav>
+</div>
+
+{% highlight html %}
+<nav class="nav has-shadow">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item is-tab is-active">Card</a>
+      <a class="nav-item is-tab">Level</a>
+      <a class="nav-item is-tab">Media object</a>
+      <a class="nav-item is-tab">Menu</a>
+      <a class="nav-item is-tab">Message</a>
+      <a class="nav-item is-tab">Modal</a>
+      <a class="nav-item is-tab">Nav</a>
+      <a class="nav-item is-tab">Pagination</a>
+      <a class="nav-item is-tab">Panel</a>
+      <a class="nav-item is-tab">Tabs</a>
+    </div>
+  </div>
+</nav>
+{% endhighlight %}
+
+</section>

diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html
new file mode 100644 (file)
index 0000000..0035f58
--- /dev/null
+++ b/docs/documentation/components/pagination.html
@@ -0,0 +1,75 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: pagination
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Pagination</h1>
+    <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
+
+    <hr>
+
+    <div class="example">
+      <nav class="pagination">
+        <a class="button">Previous</a>
+        <a class="button">Next page</a>
+        <ul>
+          <li>
+            <a class="button">1</a>
+          </li>
+          <li>
+            <span>...</span>
+          </li>
+          <li>
+            <a class="button">45</a>
+          </li>
+          <li>
+            <a class="button is-primary">46</a>
+          </li>
+          <li>
+            <a class="button">47</a>
+          </li>
+          <li>
+            <span>...</span>
+          </li>
+          <li>
+            <a class="button">86</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+{% highlight html %}
+<nav class="pagination">
+  <a class="button">Previous</a>
+  <a class="button">Next page</a>
+  <ul>
+    <li>
+      <a class="button">1</a>
+    </li>
+    <li>
+      <span>...</span>
+    </li>
+    <li>
+      <a class="button">45</a>
+    </li>
+    <li>
+      <a class="button is-primary">46</a>
+    </li>
+    <li>
+      <a class="button">47</a>
+    </li>
+    <li>
+      <span>...</span>
+    </li>
+    <li>
+      <a class="button">86</a>
+    </li>
+  </ul>
+</nav>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html
new file mode 100644 (file)
index 0000000..ef3c1b3
--- /dev/null
+++ b/docs/documentation/components/panel.html
@@ -0,0 +1,116 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: panel
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Panel</h1>
+    <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-4">
+        <nav class="panel">
+          <p class="panel-heading">
+            Repositories
+          </p>
+          <p class="panel-tabs">
+            <a class="is-active" href="#">All</a>
+            <a href="#">Public</a>
+            <a href="#">Private</a>
+            <a href="#">Sources</a>
+            <a href="#">Forks</a>
+          </p>
+          <a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
+          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</a>
+          <label class="panel-block">
+            <input type="checkbox">
+            Remember me
+          </label>
+          <div class="panel-block">
+            <button class="button is-primary is-outlined is-fullwidth">
+              Reset all filters
+            </button>
+          </div>
+        </nav>
+      </div>
+      <div class="column">
+{% highlight html %}
+<nav class="panel">
+  <p class="panel-heading">
+    Repositories
+  </p>
+  <p class="panel-tabs">
+    <a class="is-active" href="#">All</a>
+    <a href="#">Public</a>
+    <a href="#">Private</a>
+    <a href="#">Sources</a>
+    <a href="#">Forks</a>
+  </p>
+  <a class="panel-block is-active" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-book"></i>
+    </span>
+    bulma-website
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-book"></i>
+    </span>
+    bulma
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-book"></i>
+    </span>
+    marksheet
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-code-fork"></i>
+    </span>
+    daniellowtw/infBoard
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-book"></i>
+    </span>
+    jgthms.github.io
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-code-fork"></i>
+    </span>
+    mojs
+  </a>
+  <a class="panel-block" href="#">
+    <span class="panel-icon">
+      <i class="fa fa-book"></i>
+    </span>
+    grumpy-cat
+  </a>
+  <label class="panel-checkbox">
+    <input type="checkbox">
+    Remember me
+  </label>
+  <div class="panel-block">
+    <button class="button is-primary is-outlined is-fullwidth">
+      Reset all filters
+    </button>
+  </div>
+</nav>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
new file mode 100644 (file)
index 0000000..0faebad
--- /dev/null
+++ b/docs/documentation/components/tabs.html
@@ -0,0 +1,730 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: tabs
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tabs</h1>
+    <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
+
+    <hr>
+
+    <div class="content">
+      <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
+        The <strong>default</strong> tabs style has a single border at the bottom.</p>
+    </div>
+
+<div class="example">
+  <div class="tabs">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+{% highlight html %}
+<div class="tabs">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Alignment</h3>
+
+    <div class="content">
+      <p>
+        To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
+      </p>
+    </div>
+
+<div class="example">
+  <div class="tabs is-centered">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+{% highlight html %}
+<div class="tabs is-centered">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-right">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-right">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <div class="content">
+      <p>
+        To have several lists aligned differently, use one of <strong>3 modifiers</strong> on the <code>ul</code>:
+      </p>
+      <ul>
+        <li><code>is-left</code></li>
+        <li><code>is-center</code></li>
+        <li><code>is-right</code></li>
+      </ul>
+    </div>
+
+<div class="example">
+  <div class="tabs">
+    <ul class="is-left">
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+    <ul class="is-center">
+      <li><a>Previous</a></li>
+      <li><a>Up</a></li>
+      <li><a>Next</a></li>
+    </ul>
+    <ul class="is-right">
+      <li><a>Search</a></li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs">
+  <ul class="is-left">
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+  <ul class="is-center">
+    <li><a>Previous</a></li>
+    <li><a>Up</a></li>
+    <li><a>Next</a></li>
+  </ul>
+  <ul class="is-right">
+    <li><a>Search</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Icons</h3>
+
+    <div class="content">
+      <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
+    </div>
+
+<div class="example">
+  <div class="tabs is-centered">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-centered">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="content">
+      <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+    </div>
+
+<div class="example">
+  <div class="tabs is-small">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-small">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-medium">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-medium">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-large">
+    <ul>
+      <li class="is-active"><a>Pictures</a></li>
+      <li><a>Music</a></li>
+      <li><a>Videos</a></li>
+      <li><a>Documents</a></li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-large">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Styles</h3>
+    <div class="content">
+      If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
+    </div>
+
+<div class="example">
+  <div class="tabs is-boxed">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-boxed">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <p class="content">
+      If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
+    </p>
+
+<div class="example">
+  <div class="tabs is-toggle">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-toggle">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        Music
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        Videos
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        Documents
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <p class="content">
+      If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
+    </p>
+    <div class="example">
+      <div class="tabs is-fullwidth">
+        <ul>
+          <li>
+            <a>
+              <span class="icon"><i class="fa fa-angle-left"></i></span>
+              <span>Left</span>
+            </a>
+          </li>
+          <li>
+            <a>
+              <span class="icon"><i class="fa fa-angle-up"></i></span>
+              <span>Up</span>
+            </a>
+          </li>
+          <li>
+            <a>
+              <span>Right</span>
+              <span class="icon"><i class="fa fa-angle-right"></i></span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+{% highlight html %}
+<div class="tabs is-fullwidth">
+  <ul>
+    <li>
+      <a>
+        <span class="icon"><i class="fa fa-angle-left"></i></span>
+        <span>Left</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon"><i class="fa fa-angle-up"></i></span>
+        <span>Up</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span>Right</span>
+        <span class="icon"><i class="fa fa-angle-right"></i></span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Combining</h3>
+    <div class="content">
+      <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
+    </div>
+
+<div class="example">
+  <div class="tabs is-centered is-boxed">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-centered is-boxed">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-toggle is-fullwidth">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-toggle is-fullwidth">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-centered is-boxed is-medium">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon is-small"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-centered is-boxed is-medium">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+<div class="example">
+  <div class="tabs is-toggle is-fullwidth is-large">
+    <ul>
+      <li class="is-active">
+        <a>
+          <span class="icon"><i class="fa fa-image"></i></span>
+          <span>Pictures</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon"><i class="fa fa-music"></i></span>
+          <span>Music</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon"><i class="fa fa-film"></i></span>
+          <span>Videos</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class="icon"><i class="fa fa-file-text-o"></i></span>
+          <span>Documents</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="tabs is-toggle is-fullwidth is-large">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
new file mode 100644 (file)
index 0000000..392e7ca
--- /dev/null
+++ b/docs/documentation/elements/box.html
@@ -0,0 +1,99 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: box
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Box</h1>
+    <h2 class="subtitle">
+      A white <strong>box</strong> to contain other elements
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-4">
+        <div class="content">
+          <p>
+            The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
+            <br>
+            For example, you can include a media object:
+          </p>
+        </div>
+      </div>
+
+      <div class="column is-8">
+        <div class="box">
+          <article class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="http://placehold.it/128x128" alt="Image">
+              </figure>
+            </div>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+                  <br>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+                </p>
+              </div>
+              <nav class="level">
+                <div class="level-left">
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                  </a>
+                </div>
+              </nav>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="box">
+  <article class="media">
+    <div class="media-left">
+      <figure class="image is-64x64">
+        <img src="http://placehold.it/128x128" alt="Image">
+      </figure>
+    </div>
+    <div class="media-content">
+      <div class="content">
+        <p>
+          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+          <br>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+        </p>
+      </div>
+      <nav class="level">
+        <div class="level-left">
+          <a class="level-item">
+            <span class="icon is-small"><i class="fa fa-reply"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fa fa-heart"></i></span>
+          </a>
+        </div>
+      </nav>
+    </div>
+  </article>
+</div>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
new file mode 100644 (file)
index 0000000..5d4d45c
--- /dev/null
+++ b/docs/documentation/elements/button.html
@@ -0,0 +1,377 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: button
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Buttons</h1>
+    <h2 class="subtitle">
+      The classic <strong>button</strong>, in different colors, sizes, and states
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column">
+        <div class="block">
+          <a class="button">Button</a>
+          <a class="button is-white">White</a>
+          <a class="button is-light">Light</a>
+          <a class="button is-dark">Dark</a>
+          <a class="button is-black">Black</a>
+          <a class="button is-link">Link</a>
+        </div>
+        <div class="block">
+          <a class="button is-primary">Primary</a>
+          <a class="button is-info">Info</a>
+          <a class="button is-success">Success</a>
+          <a class="button is-warning">Warning</a>
+          <a class="button is-danger">Danger</a>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button">Button</a>
+<a class="button is-primary">Primary</a>
+<a class="button is-info">Info</a>
+<a class="button is-success">Success</a>
+<a class="button is-warning">Warning</a>
+<a class="button is-danger">Danger</a>
+<a class="button is-link">Link</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-small">Small</a>
+        <a class="button">Normal</a>
+        <a class="button is-medium">Medium</a>
+        <a class="button is-large">Large</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-small">Small</a>
+<a class="button">Normal</a>
+<a class="button is-medium">Medium</a>
+<a class="button is-large">Large</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Styles</h3>
+    <h4 class="subtitle">Outlined</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-outlined">Outlined</a>
+        <a class="button is-primary is-outlined">Outlined</a>
+        <a class="button is-info is-outlined">Outlined</a>
+        <a class="button is-success is-outlined">Outlined</a>
+        <a class="button is-danger is-outlined">Outlined</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-outlined">Outlined</a>
+<a class="button is-primary is-outlined">Outlined</a>
+<a class="button is-info is-outlined">Outlined</a>
+<a class="button is-success is-outlined">Outlined</a>
+<a class="button is-danger is-outlined">Outlined</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
+
+    <div class="columns">
+      <div class="column">
+        <div class="notification is-primary">
+          <a class="button is-primary is-inverted">Inverted</a>
+          <a class="button is-info is-inverted">Inverted</a>
+          <a class="button is-success is-inverted">Inverted</a>
+          <a class="button is-danger is-inverted">Inverted</a>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-primary is-inverted">Inverted</a>
+<a class="button is-info is-inverted">Inverted</a>
+<a class="button is-success is-inverted">Inverted</a>
+<a class="button is-danger is-inverted">Inverted</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">States</h3>
+    <h4 class="subtitle">Loading</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-loading">Loading</a>
+        <a class="button is-primary is-loading">Loading</a>
+        <a class="button is-info is-loading">Loading</a>
+        <a class="button is-success is-loading">Loading</a>
+        <a class="button is-warning is-loading">Loading</a>
+        <a class="button is-danger is-loading">Loading</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-loading">Loading</a>
+<a class="button is-primary is-loading">Loading</a>
+<a class="button is-info is-loading">Loading</a>
+<a class="button is-success is-loading">Loading</a>
+<a class="button is-warning is-loading">Loading</a>
+<a class="button is-danger is-loading">Loading</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Active</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-active">Active</a>
+        <a class="button is-primary is-active">Active</a>
+        <a class="button is-info is-active">Active</a>
+        <a class="button is-success is-active">Active</a>
+        <a class="button is-warning is-active">Active</a>
+        <a class="button is-danger is-active">Active</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-active">Active</a>
+<a class="button is-primary is-active">Active</a>
+<a class="button is-info is-active">Active</a>
+<a class="button is-success is-active">Active</a>
+<a class="button is-warning is-active">Active</a>
+<a class="button is-danger is-active">Active</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Disabled</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-disabled">Disabled</a>
+        <a class="button is-primary is-disabled">Disabled</a>
+        <a class="button is-info is-disabled">Disabled</a>
+        <a class="button is-success is-disabled">Disabled</a>
+        <a class="button is-warning is-disabled">Disabled</a>
+        <a class="button is-danger is-disabled">Disabled</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-disabled">Disabled</a>
+<a class="button is-primary is-disabled">Disabled</a>
+<a class="button is-info is-disabled">Disabled</a>
+<a class="button is-success is-disabled">Disabled</a>
+<a class="button is-warning is-disabled">Disabled</a>
+<a class="button is-danger is-disabled">Disabled</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">With Font Awesome icons</h4>
+
+    <div class="columns">
+      <div class="column">
+        <p class="control">
+          <a class="button">
+            <span class="icon">
+              <i class="fa fa-github"></i>
+            </span>
+            <span>GitHub</span>
+          </a>
+          <a class="button is-primary">
+            <span class="icon">
+              <i class="fa fa-twitter"></i>
+            </span>
+            <span>Twitter</span>
+          </a>
+          <a class="button is-success">
+            <span class="icon is-small">
+              <i class="fa fa-check"></i>
+            </span>
+            <span>Save</span>
+          </a>
+          <a class="button is-danger is-outlined">
+            <span>Delete</span>
+            <span class="icon is-small">
+              <i class="fa fa-times"></i>
+            </span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-small">
+            <span class="icon is-small">
+              <i class="fa fa-github"></i>
+            </span>
+            <span>GitHub</span>
+          </a>
+          <a class="button">
+            <span class="icon">
+              <i class="fa fa-github"></i>
+            </span>
+            <span>GitHub</span>
+          </a>
+          <a class="button is-medium">
+            <span class="icon">
+              <i class="fa fa-github"></i>
+            </span>
+            <span>GitHub</span>
+          </a>
+          <a class="button is-large">
+            <span class="icon is-medium">
+              <i class="fa fa-github"></i>
+            </span>
+            <span>GitHub</span>
+          </a>
+        </p>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button">
+  <span class="icon">
+    <i class="fa fa-github"></i>
+  </span>
+  <span>GitHub</span>
+</a>
+<a class="button is-primary">
+  <span class="icon">
+    <i class="fa fa-twitter"></i>
+  </span>
+  <span>Twitter</span>
+</a>
+<a class="button is-success">
+  <span class="icon">
+    <i class="fa fa-check"></i>
+  </span>
+  <span>Save</span>
+</a>
+<a class="button is-danger">
+  <span>Delete</span>
+  <span class="icon">
+    <i class="fa fa-times"></i>
+  </span>
+</a>
+<a class="button is-danger is-outlined">
+  <span class="icon">
+    <i class="fa fa-times"></i>
+  </span>
+  <span>Delete</span>
+</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Button group</h3>
+    <div class="content">
+      <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+    </div>
+    <div class="example">
+      <div class="control is-grouped">
+        <p class="control">
+          <a class="button is-primary">
+            Save changes
+          </a>
+        </p>
+        <p class="control">
+          <a class="button">
+            Cancel
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-danger">
+            Delete post
+          </a>
+        </p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="control is-grouped">
+  <p class="control">
+    <a class="button is-primary">
+      Save changes
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Cancel
+    </a>
+  </p>
+  <p class="control">
+    <a class="button is-danger">
+      Delete post
+    </a>
+  </p>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Button addons</h3>
+    <div class="content">
+      <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
+    </div>
+    <div class="example">
+      <p class="control has-addons">
+        <a class="button">
+          <span class="icon is-small">
+            <i class="fa fa-align-left"></i>
+          </span>
+          <span>Left</span>
+        </a>
+        <a class="button">
+          <span class="icon is-small">
+            <i class="fa fa-align-center"></i>
+          </span>
+          <span>Center</span>
+        </a>
+        <a class="button">
+          <span class="icon is-small">
+            <i class="fa fa-align-right"></i>
+          </span>
+          <span>Right</span>
+        </a>
+      </p>
+    </div>
+{% highlight html %}
+<p class="control has-addons">
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-left"></i>
+    </span>
+    <span>Left</span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-center"></i>
+    </span>
+    <span>Center</span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-right"></i>
+    </span>
+    <span>Right</span>
+  </a>
+</p>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
new file mode 100644 (file)
index 0000000..aefa873
--- /dev/null
+++ b/docs/documentation/elements/content.html
@@ -0,0 +1,144 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: content
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Content</h1>
+    <h2 class="subtitle">
+      A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
+      <ul>
+        <li><code>&lt;p&gt;</code> paragraphs</li>
+        <li><code>&lt;ul&gt; &lt;ol&gt; &lt;dl&gt;</code> lists</li>
+        <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
+        <li><code>&lt;blockquotes&gt;</code> quotes</li>
+        <li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
+        <li><code>&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;td&gt;</code> tables</li>
+      </ul>
+      <p>This <code>content</code> class can be used in <em>any</em>, whenever you just want to write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
+    </div>
+
+    <div class="example">
+      <div class="content">
+        <h1>Hello World</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+        <h2>Second level</h2>
+        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+        <h3>Third level</h3>
+        <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
+        <ol>
+          <li>Donec blandit a lorem id convallis.</li>
+          <li>Cras gravida arcu at diam gravida gravida.</li>
+          <li>Integer in volutpat libero.</li>
+          <li>Donec a diam tellus.</li>
+          <li>Aenean nec tortor orci.</li>
+          <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+          <li>Vivamus maximus ultricies pulvinar.</li>
+        </ol>
+        <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+        <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
+        <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
+        <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
+        <h4>Fourth level</h4>
+        <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
+        <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
+        <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
+        <h5>Fifth level</h5>
+        <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
+        <h6>Sixth level</h6>
+        <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
+        </ul>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="content">
+  <h1>Hello World</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+  <h2>Second level</h2>
+  <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+  <ul>
+    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+    <li>Ut non enim metus.</li>
+  </ul>
+  <h3>Third level</h3>
+  <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
+  <ol>
+    <li>Donec blandit a lorem id convallis.</li>
+    <li>Cras gravida arcu at diam gravida gravida.</li>
+    <li>Integer in volutpat libero.</li>
+    <li>Donec a diam tellus.</li>
+    <li>Aenean nec tortor orci.</li>
+    <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+    <li>Vivamus maximus ultricies pulvinar.</li>
+  </ol>
+  <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+  <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
+  <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
+  <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
+  <h4>Fourth level</h4>
+  <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
+  <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
+  <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
+  <h5>Fifth level</h5>
+  <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
+  <h6>Sixth level</h6>
+  <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
+  </ul>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="content">
+      <p>You can use the <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
+    </div>
+    <div class="example">
+      <div class="content is-medium">
+        <h1>Hello World</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+        <h2>Second level</h2>
+        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+      </div>
+    </div>
+    <div class="example">
+      <div class="content is-large">
+        <h1>Hello World</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+        <h2>Second level</h2>
+        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
new file mode 100644 (file)
index 0000000..5773df4
--- /dev/null
+++ b/docs/documentation/elements/form.html
@@ -0,0 +1,684 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: form
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Form controls</h1>
+    <h2 class="subtitle">
+      All generic <strong>form controls</strong>, designed for consistency
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The following form controls <strong>classes</strong> are supported:</p>
+      <ul>
+        <li><code>.label</code></li>
+        <li><code>.input</code></li>
+        <li><code>.textarea</code></li>
+        <li><code>.select</code></li>
+        <li><code>.checkbox</code></li>
+        <li><code>.radio</code></li>
+        <li><code>.button</code></li>
+        <li><code>.help</code></li>
+      </ul>
+      <p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <label class="label">Name</label>
+        <p class="control">
+          <input class="input" type="text" placeholder="Text input">
+        </p>
+        <label class="label">Username</label>
+        <p class="control has-icon has-icon-right">
+          <input class="input is-success" type="text" placeholder="Text input" value="bulma">
+          <i class="fa fa-check"></i>
+          <span class="help is-success">This username is available</span>
+        </p>
+        <label class="label">Email</label>
+        <p class="control has-icon has-icon-right">
+          <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
+          <i class="fa fa-warning"></i>
+          <span class="help is-danger">This email is invalid</span>
+        </p>
+        <label class="label">Subject</label>
+        <p class="control">
+          <span class="select">
+            <select>
+              <option>Select dropdown</option>
+              <option>With options</option>
+            </select>
+          </span>
+        </p>
+        <label class="label">Message</label>
+        <p class="control">
+          <textarea class="textarea" placeholder="Textarea"></textarea>
+        </p>
+        <p class="control">
+          <label class="checkbox">
+            <input type="checkbox">
+            Remember me
+          </label>
+        </p>
+        <p class="control">
+          <label class="radio">
+            <input type="radio" name="question">
+            Yes
+          </label>
+          <label class="radio">
+            <input type="radio" name="question">
+            No
+          </label>
+        </p>
+        <p class="control">
+          <button class="button is-primary">Submit</button>
+          <button class="button is-link">Cancel</button>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<label class="label">Name</label>
+<p class="control">
+  <input class="input" type="text" placeholder="Text input">
+</p>
+<label class="label">Username</label>
+<p class="control has-icon has-icon-right">
+  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
+  <i class="fa fa-check"></i>
+  <span class="help is-success">This username is available</span>
+</p>
+<label class="label">Email</label>
+<p class="control has-icon has-icon-right">
+  <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
+  <i class="fa fa-warning"></i>
+  <span class="help is-danger">This email is invalid</span>
+</p>
+<label class="label">Subject</label>
+<p class="control">
+  <span class="select">
+    <select>
+      <option>Select dropdown</option>
+      <option>With options</option>
+    </select>
+  </span>
+</p>
+<label class="label">Message</label>
+<p class="control">
+  <textarea class="textarea" placeholder="Textarea"></textarea>
+</p>
+<p class="control">
+  <label class="checkbox">
+    <input type="checkbox">
+    Remember me
+  </label>
+</p>
+<p class="control">
+  <label class="radio">
+    <input type="radio" name="question">
+    Yes
+  </label>
+  <label class="radio">
+    <input type="radio" name="question">
+    No
+  </label>
+</p>
+<p class="control">
+  <button class="button is-primary">Submit</button>
+  <button class="button is-link">Cancel</button>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Colors</h3>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input is-primary" type="text" placeholder="Primary input">
+        </p>
+        <p class="control">
+          <input class="input is-info" type="text" placeholder="Info input">
+        </p>
+        <p class="control">
+          <input class="input is-success" type="text" placeholder="Success input">
+        </p>
+        <p class="control">
+          <input class="input is-warning" type="text" placeholder="Warning input">
+        </p>
+        <p class="control">
+          <input class="input is-danger" type="text" placeholder="Danger input">
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input is-primary" type="text" placeholder="Primary input">
+</p>
+<p class="control">
+  <input class="input is-info" type="text" placeholder="Info input">
+</p>
+<p class="control">
+  <input class="input is-success" type="text" placeholder="Success input">
+</p>
+<p class="control">
+  <input class="input is-warning" type="text" placeholder="Warning input">
+</p>
+<p class="control">
+  <input class="input is-danger" type="text" placeholder="Danger input">
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input is-small" type="text" placeholder="Small input">
+        </p>
+        <p class="control">
+          <input class="input" type="text" placeholder="Normal input">
+        </p>
+        <p class="control">
+          <input class="input is-medium" type="text" placeholder="Medium input">
+        </p>
+        <p class="control">
+          <input class="input is-large" type="text" placeholder="Large input">
+        </p>
+        <p class="control">
+          <span class="select is-small">
+            <select>
+              <option>Select dropdown</option>
+              <option>With options</option>
+            </select>
+          </span>
+        </p>
+        <p class="control">
+          <span class="select">
+            <select>
+              <option>Select dropdown</option>
+              <option>With options</option>
+            </select>
+          </span>
+        </p>
+        <p class="control">
+          <span class="select is-medium">
+            <select>
+              <option>Select dropdown</option>
+              <option>With options</option>
+            </select>
+          </span>
+        </p>
+        <p class="control">
+          <span class="select is-large">
+            <select>
+              <option>Select dropdown</option>
+              <option>With options</option>
+            </select>
+          </span>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input is-small" type="text" placeholder="Small input">
+</p>
+<p class="control">
+  <input class="input" type="text" placeholder="Normal input">
+</p>
+<p class="control">
+  <input class="input is-medium" type="text" placeholder="Medium input">
+</p>
+<p class="control">
+  <input class="input is-large" type="text" placeholder="Large input">
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">States</h3>
+    <h4 class="subtitle">Loading</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control is-loading">
+          <input class="input" type="text" placeholder="Loading input">
+        </p>
+        <p class="control is-loading">
+          <textarea class="textarea" placeholder="Loading textarea"></textarea>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control is-loading">
+  <input class="input" type="text" placeholder="Loading input">
+</p>
+<p class="control is-loading">
+  <textarea class="textarea" placeholder="Loading textarea"></textarea>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Disabled</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input" type="text" placeholder="Disabled input" disabled>
+        </p>
+        <p class="control">
+          <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
+        </p>
+        <p class="control">
+          <label class="checkbox is-disabled">
+            <input type="checkbox" disabled>
+            Remember me
+          </label>
+        </p>
+        <p class="control">
+          <label class="radio is-disabled">
+            <input type="radio" name="question" disabled>
+            Yes
+          </label>
+          <label class="radio is-disabled">
+            <input type="radio" name="question" disabled>
+            No
+          </label>
+        </p>
+        <p class="control">
+          <button class="button is-primary" disabled>Submit</button>
+          <button class="button" disabled>Cancel</button>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input" type="text" placeholder="Disabled input" disabled>
+</p>
+<p class="control">
+  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
+</p>
+<p class="control">
+  <label class="checkbox is-disabled">
+    <input type="checkbox" disabled>
+    Remember me
+  </label>
+</p>
+<p class="control">
+  <label class="radio is-disabled">
+    <input type="radio" name="question" disabled>
+    Yes
+  </label>
+  <label class="radio is-disabled">
+    <input type="radio" name="question" disabled>
+    No
+  </label>
+</p>
+<p class="control">
+  <button class="button is-primary" disabled>Submit</button>
+  <button class="button" disabled>Cancel</button>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">With Font Awesome icons</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control has-icon">
+          <input class="input" type="email" placeholder="Email">
+          <i class="fa fa-envelope"></i>
+        </p>
+        <p class="control has-icon">
+          <input class="input" type="password" placeholder="Password">
+          <i class="fa fa-lock"></i>
+        </p>
+        <p class="control">
+          <button class="button is-success">
+            Login
+          </button>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control has-icon">
+  <input class="input" type="email" placeholder="Email">
+  <i class="fa fa-envelope"></i>
+</p>
+<p class="control has-icon">
+  <input class="input" type="password" placeholder="Password">
+  <i class="fa fa-lock"></i>
+</p>
+<p class="control">
+  <button class="button is-success">
+    Login
+  </button>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control has-icon">
+          <input class="input is-small" type="email" placeholder="Email">
+          <i class="fa fa-envelope"></i>
+        </p>
+        <p class="control has-icon">
+          <input class="input" type="email" placeholder="Email">
+          <i class="fa fa-envelope"></i>
+        </p>
+        <p class="control has-icon">
+          <input class="input is-medium" type="email" placeholder="Email">
+          <i class="fa fa-envelope"></i>
+        </p>
+        <p class="control has-icon">
+          <input class="input is-large" type="email" placeholder="Email">
+          <i class="fa fa-envelope"></i>
+        </p>
+        <p class="control has-icon has-icon-right">
+          <input class="input is-small" type="email" placeholder="Email">
+          <i class="fa fa-check"></i>
+        </p>
+        <p class="control has-icon has-icon-right">
+          <input class="input" type="email" placeholder="Email">
+          <i class="fa fa-check"></i>
+        </p>
+        <p class="control has-icon has-icon-right">
+          <input class="input is-medium" type="email" placeholder="Email">
+          <i class="fa fa-check"></i>
+        </p>
+        <p class="control has-icon has-icon-right">
+          <input class="input is-large" type="email" placeholder="Email">
+          <i class="fa fa-check"></i>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control has-icon">
+  <input class="input is-small" type="email" placeholder="Email">
+  <i class="fa fa-envelope"></i>
+</p>
+<p class="control has-icon">
+  <input class="input" type="email" placeholder="Email">
+  <i class="fa fa-envelope"></i>
+</p>
+<p class="control has-icon">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <i class="fa fa-envelope"></i>
+</p>
+<p class="control has-icon">
+  <input class="input is-large" type="email" placeholder="Email">
+  <i class="fa fa-envelope"></i>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input is-small" type="email" placeholder="Email">
+  <i class="fa fa-check"></i>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input" type="email" placeholder="Email">
+  <i class="fa fa-check"></i>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <i class="fa fa-check"></i>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input is-large" type="email" placeholder="Email">
+  <i class="fa fa-check"></i>
+</p>
+
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Form addons</h3>
+    <div class="content">
+      <p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
+    </div>
+    <div class="example">
+      <p class="control has-addons">
+        <input class="input" type="text" placeholder="Find a repository">
+        <a class="button is-info">
+          Search
+        </a>
+      </p>
+    </div>
+{% highlight html %}
+<p class="control has-addons">
+  <input class="input" type="text" placeholder="Find a repository">
+  <a class="button is-info">
+    Search
+  </a>
+</p>
+{% endhighlight %}
+    <div class="content">
+      <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
+      <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaing space (in this case, the input):</p>
+    </div>
+    <div class="example">
+<p class="control has-addons">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input is-expanded" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+    </div>
+{% highlight html %}
+<p class="control has-addons">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input is-expanded" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+{% endhighlight %}
+    <div class="content">
+      <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
+    </div>
+<div class="example">
+<p class="control has-addons has-addons-centered">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+</div>
+{% highlight html %}
+<p class="control has-addons has-addons-centered">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+{% endhighlight %}
+<div class="example">
+<p class="control has-addons has-addons-right">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+</div>
+{% highlight html %}
+<p class="control has-addons has-addons-right">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input" type="text" placeholder="Amount of money">
+  <a class="button is-success">
+    Transfer
+  </a>
+</p>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Form group</h3>
+    <div class="content">
+      <p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+    </div>
+    <div class="example">
+<div class="control is-grouped">
+  <p class="control is-expanded">
+    <input class="input" type="text" placeholder="Find a repository">
+  </p>
+  <p class="control">
+    <a class="button is-info">
+      Search
+    </a>
+  </p>
+</div>
+    </div>
+{% highlight html %}
+<div class="control is-grouped">
+  <p class="control is-expanded">
+    <input class="input" type="text" placeholder="Find a repository">
+  </p>
+  <p class="control">
+    <a class="button is-info">
+      Search
+    </a>
+  </p>
+</div>
+{% endhighlight %}
+    <div class="content">
+      <p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Horizontal form</h3>
+    <div class="content">
+      <p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>control</code> container, in which you include:</p>
+      <ul>
+        <li>
+          <code>control-label</code> for the side label
+        </li>
+        <li>
+          <code>control</code> for the input/select/textarea container
+        </li>
+      </ul>
+      <p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
+    </div>
+    <div class="control is-horizontal">
+      <div class="control-label">
+        <label class="label">From</label>
+      </div>
+      <div class="control is-grouped">
+        <p class="control is-expanded">
+          <input class="input" type="text" placeholder="Name">
+        </p>
+        <p class="control is-expanded">
+          <input class="input" type="email" placeholder="Email">
+        </p>
+      </div>
+    </div>
+    <div class="control is-horizontal">
+      <div class="control-label">
+        <label class="label">Subject</label>
+      </div>
+      <div class="control">
+        <div class="select is-fullwidth">
+          <select>
+            <option>General enquiry</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="control is-horizontal">
+      <div class="control-label">
+        <label class="label">Question</label>
+      </div>
+      <div class="control">
+        <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
+      </div>
+    </div>
+{% highlight html %}
+<div class="control is-horizontal">
+  <div class="control-label">
+    <label class="label">From</label>
+  </div>
+  <div class="control is-grouped">
+    <p class="control is-expanded">
+      <input class="input" type="text" placeholder="Name">
+    </p>
+    <p class="control is-expanded">
+      <input class="input" type="email" placeholder="Email">
+    </p>
+  </div>
+</div>
+<div class="control is-horizontal">
+  <div class="control-label">
+    <label class="label">Subject</label>
+  </div>
+  <div class="control">
+    <div class="select is-fullwidth">
+      <select>
+        <option>General enquiry</option>
+      </select>
+    </div>
+  </div>
+</div>
+<div class="control is-horizontal">
+  <div class="control-label">
+    <label class="label">Question</label>
+  </div>
+  <div class="control">
+    <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
+  </div>
+</div>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
new file mode 100644 (file)
index 0000000..2f3c422
--- /dev/null
+++ b/docs/documentation/elements/icon.html
@@ -0,0 +1,83 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: icon
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Icons</h1>
+    <h2 class="subtitle">
+      Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
+    </div>
+
+    <div class="example">
+      <span class="icon">
+        <i class="fa fa-home"></i>
+      </span>
+    </div>
+
+{% highlight html %}
+<span class="icon">
+  <i class="fa fa-home"></i>
+</span>
+{% endhighlight %}
+
+    <div class="content">
+      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+
+    <div class="content">
+      <p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
+      <p>The Bulma <code>icon</code> container is always slightly bigger than the font-size used:</p>
+    </div>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th colspan="2">Class</th>
+          <th>Font-size</th>
+          <th>Container size</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>icon is-small</code></td>
+          <td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
+          <td>14px</td>
+          <td>16x16px</td>
+        </tr>
+        <tr>
+          <td><code>icon</code></td>
+          <td><span class="icon"><i class="fa fa-home"></i></span></td>
+          <td>21px</td>
+          <td>24x24px</td>
+        </tr>
+        <tr>
+          <td><code>icon is-medium</code></td>
+          <td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
+          <td>28px</td>
+          <td>32x32px</td>
+        </tr>
+        <tr>
+          <td><code>icon is-large</code></td>
+          <td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
+          <td>42px</td>
+          <td>48x48px</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
new file mode 100644 (file)
index 0000000..3b7b444
--- /dev/null
+++ b/docs/documentation/elements/image.html
@@ -0,0 +1,146 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: image
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Images</h1>
+    <h2 class="subtitle">
+      A container for <strong>responsive images</strong>
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
+    </div>
+
+    <div class="example">
+      <figure class="image is-128x128">
+        <img src="http://placehold.it/128x128">
+      </figure>
+    </div>
+
+{% highlight html %}
+<figure class="image is-128x128">
+  <img src="http://placehold.it/128x128">
+</figure>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Fixed square images</h3>
+    <div class="content">
+      <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
+    </div>
+
+    <table class="table is-bordered">
+      <tbody>
+        <tr>
+          <td><code>image is-16x16</code></td>
+          <td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
+          <td>16x16px</td>
+        </tr>
+        <tr>
+          <td><code>image is-24x24</code></td>
+          <td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
+          <td>24x24px</td>
+        </tr>
+        <tr>
+          <td><code>image is-32x32</code></td>
+          <td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
+          <td>32x32px</td>
+        </tr>
+        <tr>
+          <td><code>image is-48x48</code></td>
+          <td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
+          <td>48x48px</td>
+        </tr>
+        <tr>
+          <td><code>image is-64x64</code></td>
+          <td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
+          <td>64x64px</td>
+        </tr>
+        <tr>
+          <td><code>image is-96x96</code></td>
+          <td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
+          <td>96x96px</td>
+        </tr>
+        <tr>
+          <td><code>image is-128x128</code></td>
+          <td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
+          <td>128x128px</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4 class="title is-4">Retina images</h4>
+
+    <div class="content">
+      <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
+    </div>
+
+    <div class="example">
+      <figure class="image is-128x128">
+        <img src="http://placehold.it/256x256">
+      </figure>
+    </div>
+
+{% highlight html %}
+<figure class="image is-128x128">
+  <img src="http://placehold.it/256x256">
+</figure>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Responsive images with ratios</h3>
+
+    <div class="content">
+      <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifers</strong>:</p>
+    </div>
+
+    <table id="images" class="table is-bordered">
+      <tbody>
+        <tr>
+          <td><code>image is-square</code></td>
+          <td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
+          <td>Square (or 1by1)</td>
+        </tr>
+        <tr>
+          <td><code>image is-1by1</code></td>
+          <td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
+          <td>1 by 1</td>
+        </tr>
+        <tr>
+          <td><code>image is-4by3</code></td>
+          <td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
+          <td>4 by 3</td>
+        </tr>
+        <tr>
+          <td><code>image is-3by2</code></td>
+          <td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
+          <td>3 by 2</td>
+        </tr>
+        <tr>
+          <td><code>image is-16by9</code></td>
+          <td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
+          <td>16 by 9</td>
+        </tr>
+        <tr>
+          <td><code>image is-2by1</code></td>
+          <td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
+          <td>2 by 1</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="content">
+      <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
new file mode 100644 (file)
index 0000000..494f8d9
--- /dev/null
+++ b/docs/documentation/elements/notification.html
@@ -0,0 +1,92 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: notification
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Notifications</h1>
+    <h2 class="subtitle">
+      Bold <strong>notification</strong> blocks, to alert your users of something
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column">
+        <div class="notification">
+          <button class="delete"></button>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+        <div class="notification is-primary">
+          <button class="delete"></button>
+          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+        <div class="notification is-info">
+          <button class="delete"></button>
+          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+        <div class="notification is-success">
+          <button class="delete"></button>
+          Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+        <div class="notification is-warning">
+          <button class="delete"></button>
+          Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+        <div class="notification is-danger">
+          <button class="delete"></button>
+          Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<div class="notification">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+
+<div class="notification is-primary">
+  <button class="delete"></button>
+  Primar lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+
+<div class="notification is-info">
+  <button class="delete"></button>
+  Info lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+
+<div class="notification is-success">
+  <button class="delete"></button>
+  Success lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+
+<div class="notification is-warning">
+  <button class="delete"></button>
+  Warning lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+
+<div class="notification is-danger">
+  <button class="delete"></button>
+  Danger lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor sit amet,
+  consectetur adipiscing elit
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
new file mode 100644 (file)
index 0000000..2b66f02
--- /dev/null
+++ b/docs/documentation/elements/progress.html
@@ -0,0 +1,52 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: progress
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Progress bars</h1>
+    <h2 class="subtitle">
+      Native HTML <strong>progress</strong> bars
+    </h2>
+
+    <hr>
+
+    <div class="example">
+      <progress class="progress" value="15" max="100">15%</progress>
+      <progress class="progress is-primary" value="30" max="100">30%</progress>
+      <progress class="progress is-info" value="45" max="100">45%</progress>
+      <progress class="progress is-success" value="60" max="100">60%</progress>
+      <progress class="progress is-warning" value="75" max="100">75%</progress>
+      <progress class="progress is-danger" value="90" max="100">90%</progress>
+    </div>
+{% highlight html %}
+<progress class="progress" value="15" max="100">15%</progress>
+<progress class="progress is-primary" value="30" max="100">30%</progress>
+<progress class="progress is-info" value="45" max="100">45%</progress>
+<progress class="progress is-success" value="60" max="100">60%</progress>
+<progress class="progress is-warning" value="75" max="100">75%</progress>
+<progress class="progress is-danger" value="90" max="100">90%</progress>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="example">
+      <progress class="progress is-small" value="15" max="100">15%</progress>
+      <progress class="progress" value="30" max="100">30%</progress>
+      <progress class="progress is-medium" value="45" max="100">45%</progress>
+      <progress class="progress is-large" value="60" max="100">60%</progress>
+    </div>
+{% highlight html %}
+<progress class="progress is-small" value="15" max="100">15%</progress>
+<progress class="progress" value="30" max="100">30%</progress>
+<progress class="progress is-medium" value="45" max="100">45%</progress>
+<progress class="progress is-large" value="60" max="100">60%</progress>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
new file mode 100644 (file)
index 0000000..b00b4aa
--- /dev/null
+++ b/docs/documentation/elements/table.html
@@ -0,0 +1,350 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: table
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tables</h1>
+    <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
+
+    <hr>
+
+    <div class="example">
+      <table class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>Open source projects</th>
+            <th>Year started</th>
+            <th colspan="3">Links</th>
+          </tr>
+        </thead>
+        <tfoot>
+          <tr>
+            <th></th>
+            <th>Open source projects</th>
+            <th>Year started</th>
+            <th colspan="3">Links</th>
+          </tr>
+        </tfoot>
+        <tbody>
+          <tr>
+            <td class="is-icon">
+              <i class="fa fa-android"></i>
+            </td>
+            <td>
+              <a href="#">Android</a>
+            </td>
+            <td>
+              2003
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-github"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-twitter"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-globe"></i>
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td class="is-icon">
+              <i class="fa fa-firefox"></i>
+            </td>
+            <td>
+              <a href="#">Firefox</a>
+            </td>
+            <td>
+              2003
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-github"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-twitter"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-globe"></i>
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td class="is-icon">
+              <i class="fa fa-linux"></i>
+            </td>
+            <td>
+              <a href="#">Linux</a>
+            </td>
+            <td>
+              2003
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-github"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-twitter"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-globe"></i>
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td class="is-icon">
+              <i class="fa fa-wordpress"></i>
+            </td>
+            <td>
+              <a href="#">WordPress</a>
+            </td>
+            <td>
+              2003
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-github"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-twitter"></i>
+              </a>
+            </td>
+            <td class="is-icon">
+              <a href="#">
+                <i class="fa fa-globe"></i>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+{% highlight html %}
+<table class="table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Instrument</th>
+      <th></th>
+      <th></th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th>Name</th>
+      <th>Instrument</th>
+      <th></th>
+      <th></th>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Misty Abbott</td>
+      <td>Bass Guitar</td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-twitter"></i>
+        </a>
+      </td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-instagram"></i>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td>John Smith</td>
+      <td>Rhythm Guitar</td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-twitter"></i>
+        </a>
+      </td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-instagram"></i>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td>Robert Mikels</td>
+      <td>Lead Guitar</td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-twitter"></i>
+        </a>
+      </td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-instagram"></i>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td>Karyn Holmberg</td>
+      <td>Drums</td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-twitter"></i>
+        </a>
+      </td>
+      <td class="is-icon">
+        <a href="#">
+          <i class="fa fa-instagram"></i>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Modifiers</h3>
+
+    <div class="columns">
+      <div class="column">
+        <p>Add <strong>borders</strong> to all the cells.</p>
+      </div>
+      <div class="column">
+        <code>table is-bordered</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-bordered">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p>Add <strong>stripes</strong> to the table.</p>
+      </div>
+      <div class="column">
+        <code>table is-striped</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-striped">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+            <tr>
+              <td>Five</td>
+              <td>Six</td>
+            </tr>
+            <tr>
+              <td>Seven</td>
+              <td>Eight</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p>Make the cells <strong>narrower</strong>.</p>
+      </div>
+      <div class="column">
+        <code>table is-narrow</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-narrow">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+            <tr>
+              <td>Five</td>
+              <td>Six</td>
+            </tr>
+            <tr>
+              <td>Seven</td>
+              <td>Eight</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p>You can <strong>combine</strong> all three modifiers.</p>
+      </div>
+      <div class="column">
+        <code>table is-bordered is-striped is-narrow</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-bordered is-striped is-narrow">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+            <tr>
+              <td>Five</td>
+              <td>Six</td>
+            </tr>
+            <tr>
+              <td>Seven</td>
+              <td>Eight</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
new file mode 100644 (file)
index 0000000..cf0c533
--- /dev/null
+++ b/docs/documentation/elements/tag.html
@@ -0,0 +1,159 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: tag
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tags</h1>
+    <h2 class="subtitle">
+      Small <strong>tag labels</strong> to insert anywhere
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-4">
+        By default, a <strong>tag</strong> is a 24px high label.
+      </div>
+      <div class="column is-2">
+        <span class="tag">
+          Tag label
+        </span>
+      </div>
+      <div class="column is-6">
+{% highlight html %}
+<span class="tag">
+  Tag label
+</span>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-4">
+        There are <strong>6 different colors</strong> available.
+      </div>
+      <div class="column is-2">
+        <p class="control">
+          <span class="tag is-dark">
+            Dark
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-primary">
+            Primary
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-info">
+            Info
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-success">
+            Success
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-warning">
+            Warning
+          </span>
+        </p>
+        <span class="tag is-danger">
+          Danger
+        </span>
+      </div>
+      <div class="column is-6">
+{% highlight html %}
+<span class="tag is-dark">Dark</span>
+<span class="tag is-primary">Primary</span>
+<span class="tag is-info">Info</span>
+<span class="tag is-success">Success</span>
+<span class="tag is-warning">Warning</span>
+<span class="tag is-danger">Danger</span>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-4">
+        And <strong>3 additional</strong> sizes.
+      </div>
+      <div class="column is-2">
+        <p class="control">
+          <span class="tag is-dark is-small">
+            Small
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-primary is-medium">
+            Medium
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-info is-large">
+            Large
+          </span>
+        </p>
+      </div>
+      <div class="column is-6">
+{% highlight html %}
+<span class="tag is-primary is-medium">Medium</span>
+<span class="tag is-info is-large">Large</span>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-4">
+        You can also append a <strong>delete button</strong>.
+      </div>
+      <div class="column is-2">
+        <p class="control">
+          <span class="tag is-info is-small">
+            Foo
+            <button class="delete"></button>
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-success">
+            Bar
+            <button class="delete"></button>
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-warning is-medium">
+            Hello
+            <button class="delete"></button>
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-danger is-large">
+            World
+            <button class="delete"></button>
+          </span>
+        </p>
+      </div>
+      <div class="column is-6">
+{% highlight html %}
+<span class="tag is-success">
+  Foo
+  <button class="delete"></button>
+</span>
+<span class="tag is-warning is-medium">
+  Bar
+  <button class="delete"></button>
+</span>
+<span class="tag is-danger is-large">
+  Foo bar
+  <button class="delete"></button>
+</span>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
new file mode 100644 (file)
index 0000000..18dbd3f
--- /dev/null
+++ b/docs/documentation/elements/title.html
@@ -0,0 +1,112 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: title
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Titles</h1>
+    <h2 class="subtitle">
+      Simple <strong>headings</strong> to add depth to your page
+    </h2>
+    <hr>
+    <div class="columns">
+      <div class="column">
+        <p>There are <strong>2 types</strong> of heading:</p>
+      </div>
+      <div class="column">
+        <p class="title">Title</p>
+        <p class="subtitle">Subtitle</p>
+      </div>
+      <div class="column">
+{% highlight html %}
+<h1 class="title">Title</h1>
+<h2 class="subtitle">Subtitle</h2>
+{% endhighlight %}
+      </div>
+    </div>
+    <hr>
+    <div class="columns">
+      <div class="column">
+        <p>There are <strong>6 sizes</strong> available:</p>
+      </div>
+      <div class="column">
+        <p class="title is-1">Title 1</p>
+        <p class="title is-2">Title 2</p>
+        <p class="title is-3">Title 3 (default size)</p>
+        <p class="title is-4">Title 4</p>
+        <p class="title is-5">Title 5</p>
+        <p class="title is-6">Title 6</p>
+      </div>
+      <div class="column">
+{% highlight html %}
+<h1 class="title is-1">Title 1</h1>
+<h2 class="title is-2">Title 2</h2>
+<h3 class="title is-3">Title 3</h3>
+<h4 class="title is-4">Title 4</h4>
+<h5 class="title is-5">Title 5</h5>
+<h6 class="title is-6">Title 6</h6>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column"></div>
+      <div class="column">
+        <p class="subtitle is-1">Subtitle 1</p>
+        <p class="subtitle is-2">Subtitle 2</p>
+        <p class="subtitle is-3">Subtitle 3</p>
+        <p class="subtitle is-4">Subtitle 4</p>
+        <p class="subtitle is-5">Subtitle 5 (default size)</p>
+        <p class="subtitle is-6">Subtitle 6</p>
+      </div>
+      <div class="column">
+{% highlight html %}
+<h1 class="subtitle is-1">Subtitle 1</h1>
+<h2 class="subtitle is-2">Subtitle 2</h2>
+<h3 class="subtitle is-3">Subtitle 3</h3>
+<h4 class="subtitle is-4">Subtitle 4</h4>
+<h5 class="subtitle is-5">Subtitle 5</h5>
+<h6 class="subtitle is-6">Subtitle 6</h6>
+{% endhighlight %}
+      </div>
+    </div>
+    <hr>
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
+          <p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="block">
+          <p class="title is-1">Title 1</p>
+          <p class="subtitle is-3">Subtitle 3</p>
+        </div>
+        <div class="block">
+          <p class="title is-2">Title 2</p>
+          <p class="subtitle is-4">Subtitle 4</p>
+        </div>
+        <div class="block">
+          <p class="title is-3">Title 3</p>
+          <p class="subtitle is-5">Subtitle 5</p>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<p class="title is-1">Title 1</p>
+<p class="subtitle is-3">Subtitle 3</p>
+
+<p class="title is-2">Title 2</p>
+<p class="subtitle is-4">Subtitle 4</p>
+
+<p class="title is-3">Title 3</p>
+<p class="subtitle is-5">Subtitle 5</p>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/grid.html b/docs/documentation/grid.html
new file mode 100644 (file)
index 0000000..1847c63
--- /dev/null
+++ b/docs/documentation/grid.html
@@ -0,0 +1,749 @@
+---
+layout: documentation
+doc-tab: grid
+---
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Grid</h1>
+    <h2 class="subtitle">A simple way to build columns</h2>
+    <hr>
+    <div class="content">
+      <p>To build a <strong>grid</strong>, just:</p>
+      <ol>
+        <li>Add a <code>columns</code> container</li>
+        <li>Add as many <code>column</code> elements as you want</li>
+      </ol>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p class="notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Fourth column</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="content">
+      <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
+      <ul>
+        <li>
+          <code>is-three-quarters</code>
+        </li>
+        <li>
+          <code>is-two-thirds</code>
+        </li>
+        <li>
+          <code>is-half</code>
+        </li>
+        <li>
+          <code>is-one-third</code>
+        </li>
+        <li>
+          <code>is-one-quarter</code>
+        </li>
+      </ul>
+      <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
+    </div>
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <p class="notification is-info">
+          <code class="html">is-three-quarters</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-two-thirds">
+        <p class="notification is-info">
+          <code class="html">is-two-thirds</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="notification is-info">
+          <code class="html">is-half</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-one-third">
+        <p class="notification is-info">
+          <code class="html">is-one-third</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <p class="notification is-info">
+          <code class="html">is-one-quarter</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Auto</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns">
+  <div class="column is-three-quarters">
+    <p class="notification is-info">
+      <code class="html">is-three-quarters</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-two-thirds">
+    <p class="notification is-info">
+      <code class="html">is-two-thirds</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-half">
+    <p class="notification is-info">
+      <code class="html">is-half</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p class="notification is-info">
+      <code class="html">is-one-third</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-quarter">
+    <p class="notification is-info">
+      <code class="html">is-one-quarter</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">Auto</p>
+  </div>
+</div>
+{% endhighlight %}
+
+
+    <h4 class="title is-4">12 columns</h4>
+    <div class="content">
+      <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
+      <ul>
+        <li><code>is-2</code></li>
+        <li><code>is-3</code></li>
+        <li><code>is-4</code></li>
+        <li><code>is-5</code></li>
+        <li><code>is-6</code></li>
+        <li><code>is-7</code></li>
+        <li><code>is-8</code></li>
+        <li><code>is-9</code></li>
+        <li><code>is-10</code></li>
+        <li><code>is-11</code></li>
+      </ul>
+    </div>
+    <div class="message is-danger">
+      <p class="message-header">Naming</p>
+      <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-2">
+        <p class="notification is-info"><code>is-2</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-3">
+        <p class="notification is-info"><code>is-3</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-4">
+        <p class="notification is-info"><code>is-4</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-5">
+        <p class="notification is-info"><code>is-5</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-6">
+        <p class="notification is-info"><code>is-6</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-7">
+        <p class="notification is-info"><code>is-7</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-8">
+        <p class="notification is-info"><code>is-8</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-9">
+        <p class="notification is-info"><code>is-9</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-10">
+        <p class="notification is-info"><code>is-10</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-11">
+        <p class="notification is-info"><code>is-11</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Offset</h3>
+    <div class="content">
+      <p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-half is-offset-one-quarter">
+        <p class="notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-offset-one-quarter</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-4 is-offset-8">
+        <p class="notification is-info">
+          <code class="html">is-4</code><br>
+          <code class="html">is-offset-8</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-11 is-offset-1">
+        <p class="notification is-info">
+          <code class="html">is-11</code><br>
+          <code class="html">is-offset-1</code>
+        </p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column is-half is-offset-one-quarter"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-4 is-offset-8"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-11 is-offset-1"></div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Responsiveness</h3>
+    <div class="content">
+      <p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
+      <p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-mobile">
+      <div class="column">
+        <p class="notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">4</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endhighlight %}
+    <div class="message is-info">
+      <p class="message-header">Resize</p>
+      <p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
+    </div>
+    <div class="content">
+      <p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-desktop">
+      <div class="column">
+        <p class="notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">4</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-desktop">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endhighlight %}
+
+    <h4 class="title is-4">Different sizes per breakpoint</h4>
+    <div class="content">
+      <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
+    </div>
+    <div class="columns is-mobile">
+      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+        <p class="notification is-info">
+          <code>is-half-mobile</code><br>
+          <code>is-one-third-tablet</code><br>
+          <code>is-one-quarter-desktop</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">1</p>
+      </div>
+    </div>
+    <div class="message is-info">
+      <p class="message-header">Resize</p>
+      <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
+    </div>
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+    <code>is-half-mobile</code><br>
+    <code>is-one-third-tablet</code><br>
+    <code>is-one-quarter-desktop</code>
+  </div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Multiline</h3>
+    <div class="content">
+      <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
+    </div>
+    <div class="columns is-multiline is-mobile">
+      <div class="column is-one-quarter">
+        <p class="notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-info">Auto</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endhighlight %}
+    <hr>
+
+    <h3 class="title">Gapless</h3>
+    <div class="content">
+      <p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-gapless">
+      <div class="column">
+        <p class="notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Fourth column</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-gapless">
+  <div class="column">First column</div>
+  <div class="column">Second column</div>
+  <div class="column">Third column</div>
+  <div class="column">Fourth column</div>
+</div>
+{% endhighlight %}
+    <div class="content">
+      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+    </div>
+    <div class="columns is-multiline is-mobile is-gapless">
+      <div class="column is-one-quarter">
+        <p class="notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-info">Auto</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-gapless is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endhighlight %}
+
+  </div>
+</section>

diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
new file mode 100644 (file)
index 0000000..9009a6c
--- /dev/null
+++ b/docs/documentation/grid/columns.html
@@ -0,0 +1,801 @@
+---
+layout: documentation
+doc-tab: grid
+doc-subtab: columns
+---
+
+{% include subnav-grid.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Columns</h1>
+    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <hr>
+    <div class="content">
+      <p>To build a <strong>grid</strong>, just:</p>
+      <ol>
+        <li>Add a <code>columns</code> container</li>
+        <li>Add as many <code>column</code> elements as you want</li>
+      </ol>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p class="notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Fourth column</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Sizes</h3>
+    <div class="content">
+      <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
+      <ul>
+        <li>
+          <code>is-three-quarters</code>
+        </li>
+        <li>
+          <code>is-two-thirds</code>
+        </li>
+        <li>
+          <code>is-half</code>
+        </li>
+        <li>
+          <code>is-one-third</code>
+        </li>
+        <li>
+          <code>is-one-quarter</code>
+        </li>
+      </ul>
+      <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
+    </div>
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <p class="notification is-info">
+          <code class="html">is-three-quarters</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-two-thirds">
+        <p class="notification is-info">
+          <code class="html">is-two-thirds</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="notification is-info">
+          <code class="html">is-half</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-one-third">
+        <p class="notification is-info">
+          <code class="html">is-one-third</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Auto</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <p class="notification is-info">
+          <code class="html">is-one-quarter</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Auto</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns">
+  <div class="column is-three-quarters">
+    <p class="notification is-info">
+      <code class="html">is-three-quarters</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-two-thirds">
+    <p class="notification is-info">
+      <code class="html">is-two-thirds</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-half">
+    <p class="notification is-info">
+      <code class="html">is-half</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-danger">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p class="notification is-info">
+      <code class="html">is-one-third</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">Auto</p>
+  </div>
+  <div class="column">
+    <p class="notification is-warning">Auto</p>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-quarter">
+    <p class="notification is-info">
+      <code class="html">is-one-quarter</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="notification is-success">Auto</p>
+  </div>
+</div>
+{% endhighlight %}
+
+    <h4 class="title is-4">12 columns</h4>
+    <div class="content">
+      <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
+      <ul>
+        <li><code>is-2</code></li>
+        <li><code>is-3</code></li>
+        <li><code>is-4</code></li>
+        <li><code>is-5</code></li>
+        <li><code>is-6</code></li>
+        <li><code>is-7</code></li>
+        <li><code>is-8</code></li>
+        <li><code>is-9</code></li>
+        <li><code>is-10</code></li>
+        <li><code>is-11</code></li>
+      </ul>
+    </div>
+    <div class="message is-danger">
+      <p class="message-header">Naming</p>
+      <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-2">
+        <p class="notification is-info"><code>is-2</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-3">
+        <p class="notification is-info"><code>is-3</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-4">
+        <p class="notification is-info"><code>is-4</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-5">
+        <p class="notification is-info"><code>is-5</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-6">
+        <p class="notification is-info"><code>is-6</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-7">
+        <p class="notification is-info"><code>is-7</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-8">
+        <p class="notification is-info"><code>is-8</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-9">
+        <p class="notification is-info"><code>is-9</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-10">
+        <p class="notification is-info"><code>is-10</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-11">
+        <p class="notification is-info"><code>is-11</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Offset</h3>
+    <div class="content">
+      <p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-half is-offset-one-quarter">
+        <p class="notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-offset-one-quarter</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-4 is-offset-8">
+        <p class="notification is-info">
+          <code class="html">is-4</code><br>
+          <code class="html">is-offset-8</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-11 is-offset-1">
+        <p class="notification is-info">
+          <code class="html">is-11</code><br>
+          <code class="html">is-offset-1</code>
+        </p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column is-half is-offset-one-quarter"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-4 is-offset-8"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-11 is-offset-1"></div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Responsiveness</h3>
+    <div class="content">
+      <p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
+      <p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-mobile">
+      <div class="column">
+        <p class="notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">4</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endhighlight %}
+    <div class="message is-info">
+      <p class="message-header">Resize</p>
+      <p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
+    </div>
+    <div class="content">
+      <p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-desktop">
+      <div class="column">
+        <p class="notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">4</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-desktop">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endhighlight %}
+
+    <h4 class="title is-4">Different sizes per breakpoint</h4>
+    <div class="content">
+      <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
+    </div>
+    <div class="columns is-mobile">
+      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+        <p class="notification is-info">
+          <code>is-half-mobile</code><br>
+          <code>is-one-third-tablet</code><br>
+          <code>is-one-quarter-desktop</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">1</p>
+      </div>
+    </div>
+    <div class="message is-info">
+      <p class="message-header">Resize</p>
+      <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
+    </div>
+{% highlight html %}
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+    <code>is-half-mobile</code><br>
+    <code>is-one-third-tablet</code><br>
+    <code>is-one-quarter-desktop</code>
+  </div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Multiline</h3>
+    <div class="content">
+      <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
+    </div>
+    <div class="columns is-multiline is-mobile">
+      <div class="column is-one-quarter">
+        <p class="notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-info">Auto</p>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="columns is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endhighlight %}
+    <hr>
+
+    <h3 class="title">Gapless</h3>
+    <div class="content">
+      <p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
+    </div>
+    <div class="columns is-gapless">
+      <div class="column">
+        <p class="notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="notification is-danger">Fourth column</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-gapless">
+  <div class="column">First column</div>
+  <div class="column">Second column</div>
+  <div class="column">Third column</div>
+  <div class="column">Fourth column</div>
+</div>
+{% endhighlight %}
+    <div class="content">
+      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+    </div>
+    <div class="columns is-multiline is-mobile is-gapless">
+      <div class="column is-one-quarter">
+        <p class="notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="notification is-info">Auto</p>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns is-gapless is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Narrow column</h3>
+    <div class="content">
+      <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
+    </div>
+    <div class="columns">
+      <div class="column is-narrow">
+        <div class="box" style="width: 200px;">
+          <p class="title is-5">Narrow column</p>
+          <p class="subtitle">This column is only 200px wide.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <p class="title is-5">Flexible column</p>
+          <p class="subtitle">This column will take up the remaining space available.</p>
+        </div>
+      </div>
+    </div>
+{% highlight html %}
+<div class="columns">
+  <div class="column is-narrow">
+    <div class="box" style="width: 200px;">
+      <p class="title is-5">Narrow column</p>
+      <p class="subtitle">This column is only 200px wide.</p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="box">
+      <p class="title is-5">Flexible column</p>
+      <p class="subtitle">This column will take up the remaining space available.</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+    <div class="content">
+      <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+      <ul>
+        <li>
+          <code>is-narrow-mobile</code>
+        </li>
+        <li>
+          <code>is-narrow-tablet</code>
+        </li>
+        <li>
+          <code>is-narrow-desktop</code>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/grid/tiles.html b/docs/documentation/grid/tiles.html
new file mode 100644 (file)
index 0000000..8599550
--- /dev/null
+++ b/docs/documentation/grid/tiles.html
@@ -0,0 +1,896 @@
+---
+layout: documentation
+doc-tab: grid
+doc-subtab: tiles
+---
+
+{% include subnav-grid.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tiles</h1>
+    <h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>To build intricate 2-dimensional, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
+    </div>
+
+{% highlight html %}
+<div class="tile">
+  <!-- The magical tile element! -->
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Example</h3>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child notification is-primary">
+              <p class="title">Vertical...</p>
+              <p class="subtitle">Top tile</p>
+            </article>
+            <article class="tile is-child notification is-warning">
+              <p class="title">...tiles</p>
+              <p class="subtitle">Bottom tile</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child notification is-info">
+              <p class="title">Middle tile</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child notification is-danger">
+            <p class="title">Wide tile</p>
+            <p class="subtitle">Aligned with the right tile</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-success">
+          <div class="content">
+            <p class="title">Tall tile</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child notification is-primary">
+          <p class="title">Vertical...</p>
+          <p class="subtitle">Top tile</p>
+        </article>
+        <article class="tile is-child notification is-warning">
+          <p class="title">...tiles</p>
+          <p class="subtitle">Bottom tile</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-info">
+          <p class="title">Middle tile</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="http://placehold.it/640x480">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child notification is-danger">
+        <p class="title">Wide tile</p>
+        <p class="subtitle">Aligned with the right tile</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child notification is-success">
+      <div class="content">
+        <p class="title">Tall tile</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Modifiers</h3>
+
+    <div class="content">
+      <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
+      <ul>
+        <li>
+          <strong>3 contextual</strong> modifiers
+          <ul>
+            <li><code>is-ancestor</code></li>
+            <li><code>is-parent</code></li>
+            <li><code>is-child</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>1 directional</strong> modifier
+          <ul>
+            <li><code>is-vertical</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>12 horizontal size</strong> modifiers
+          <ul>
+            <li>from <code>is-1</code></li>
+            <li>to <code>is-12</code></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <h3 class="title">How it works: Nesting</h3>
+    <div class="content">
+      <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <!-- All other tile elemnts -->
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>
+          You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
+          <br>
+          For example, <code>is-4</code> will take up 1/3 of the horizontal space:
+        </p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4">
+    <!-- 1/3 -->
+  </div>
+  <div class="tile">
+    <!-- This tile will take the rest: 2/3 -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical">
+    <div class="tile">
+      <!-- Top tile -->
+    </div>
+    <div class="tile">
+      <!-- Bottom tile -->
+    </div>
+  </div>
+  <div class="tile">
+    <!-- This tile will take up the whole vertical space -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="content">
+          <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
+          <ul>
+            <li>add <em>any</em> class you want, like <code>box</code></li>
+            <li>add the <code>is-child</code> modifier on the tile</li>
+            <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
+          </ul>
+        </div>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-4 is-vertical is-parent">
+        <div class="tile is-child box">
+          <p class="title">One</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+        <div class="tile is-child box">
+          <p class="title">Two</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <div class="tile is-child box">
+          <p class="title">Three</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+      <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+      <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Nesting requirements</h3>
+
+    <article class="message is-danger">
+      <div class="message-header">
+        3 levels deep at least...
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+└───tile is-parent
+    |
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <article class="message is-success">
+      <div class="message-header">
+        ...but more levels if you want!
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You can however nest tiles more deeply than that, and mix it up!</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+├───tile is-vertical is-8
+|   |
+|   ├───tile
+|   |   |
+|   |   ├───tile is-parent is-vertical
+|   |   |   ├───tile is-child
+|   |   |   └───tile is-child
+|   |   |
+|   |   └───tile is-parent
+|   |       └───tile is-child
+|   |
+|   └───tile is-parent
+|       └───tile is-child
+|
+└───tile is-parent
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <!-- Put any content you want -->
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <!-- Put any content you want -->
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">3 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Hello World</p>
+          <p class="subtitle">What is up?</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Foo</p>
+          <p class="subtitle">Bar</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Third column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Side column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-8">
+        <article class="tile is-child box">
+          <p class="title">Main column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Hello World</p>
+      <p class="subtitle">What is up?</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Foo</p>
+      <p class="subtitle">Bar</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Third column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Top box</p>
+        </article>
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Bottom box</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Middle box</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="http://placehold.it/640x480">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <p class="title">Wide column</p>
+        <p class="subtitle">Aligned with the right column</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Tall column</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Side column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-8">
+    <article class="tile is-child box">
+      <p class="title">Main column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">4 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">One</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Two</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Three</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Four</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-9">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Five</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-8 is-vertical">
+            <div class="tile">
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Six</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Seven</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+            </div>
+            <div class="tile is-parent">
+              <article class="tile is-child box">
+                <p class="title">Eight</p>
+                <p class="subtitle">Subtitle</p>
+              </article>
+            </div>
+          </div>
+        </div>
+        <div class="tile">
+          <div class="tile is-8 is-parent">
+            <article class="tile is-child box">
+              <p class="title">Nine</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Ten</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Eleven</p>
+            <p class="subtitle">Subtitle</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Twelve</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-6">
+        <article class="tile is-child box">
+          <p class="title">Thirteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Fourteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">One</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Two</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Three</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Four</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-9">
+    <div class="tile">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Five</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-8 is-vertical">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Six</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Seven</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Eight</p>
+            <p class="subtitle">Subtitle</p>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-8 is-parent">
+        <article class="tile is-child box">
+          <p class="title">Nine</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Ten</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Eleven</p>
+        <p class="subtitle">Subtitle</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Twelve</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-6">
+    <article class="tile is-child box">
+      <p class="title">Thirteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Fourteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
new file mode 100644 (file)
index 0000000..f3c71f8
--- /dev/null
+++ b/docs/documentation/layout/container.html
@@ -0,0 +1,70 @@
+---
+layout: documentation
+doc-tab: layout
+doc-subtab: container
+---
+
+{% include subnav-layout.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Container</h1>
+    <h2 class="subtitle">
+      A simple <strong>container</strong> to center your content horizontally
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
+      <ul>
+        <li><code>.header</code></li>
+        <li><code>.hero</code></li>
+        <li><code>.section</code></li>
+        <li><code>.footer</code></li>
+      </ul>
+      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
+      <p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+    </div>
+  </div>
+
+  <div class="example">
+    <div class="container">
+      <div class="notification">
+        This container is <strong>centered</strong> on desktop.
+      </div>
+    </div>
+  </div>
+
+{% highlight html %}
+<div class="container">
+  <div class="notification">
+    This container is <strong>centered</strong> on desktop.
+  </div>
+</div>
+{% endhighlight %}
+
+  <div class="container">
+    <hr>
+    <h3 class="title">Fluid container</h3>
+    <div class="content">
+      <p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
+    </div>
+  </div>
+
+  <div class="example is-fullwidth">
+    <div class="container is-fluid">
+      <div class="notification">
+        This container is <strong>fluid</strong>: it will have a 20px gap on either side.
+      </div>
+    </div>
+  </div>
+
+{% highlight html %}
+<div class="container is-fluid">
+  <div class="notification">
+    This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
+  </div>
+</div>
+{% endhighlight %}
+</section>

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
new file mode 100644 (file)
index 0000000..18a9550
--- /dev/null
+++ b/docs/documentation/layout/footer.html
@@ -0,0 +1,54 @@
+---
+layout: documentation
+doc-tab: layout
+doc-subtab: footer
+---
+
+{% include subnav-layout.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Footer</h1>
+    <h2 class="subtitle">
+      A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons...
+    </h2>
+
+<div class="example">
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
+      </p>
+      <p>
+        <a class="icon" href="https://github.com/jgthms/bulma">
+          <i class="fa fa-github"></i>
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+</div>
+
+{% highlight html %}
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
+      </p>
+      <p>
+        <a class="icon" href="https://github.com/jgthms/bulma">
+          <i class="fa fa-github"></i>
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
new file mode 100644 (file)
index 0000000..b83e597
--- /dev/null
+++ b/docs/documentation/layout/hero.html
@@ -0,0 +1,870 @@
+---
+layout: documentation
+doc-tab: layout
+doc-subtab: hero
+---
+
+{% include subnav-layout.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Hero</h1>
+    <h2 class="subtitle">
+      An imposing <strong>hero banner</strong> to showcase something
+    </h2>
+  </div>
+</section>
+
+<section class="section is-fullwidth">
+  <div class="example">
+    <section class="hero">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Hero title
+          </p>
+          <p class="subtitle">
+            Hero subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Hero title
+      </h1>
+      <h2 class="subtitle">
+        Hero subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+</section>
+
+<section class="section">
+  <div class="container">
+    <h3 class="title">Colors</h3>
+    <h4 class="subtitle">
+      As with buttons, you can choose one of the <strong>7 different colors</strong>
+    </h4>
+  </div>
+</section>
+
+<section class="section is-fullwidth">
+  <div class="example">
+    <section class="hero is-primary">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Primary title
+          </p>
+          <p class="subtitle">
+            Primary subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-primary">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Primary title
+      </h1>
+      <h2 class="subtitle">
+        Primary subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+
+  <div class="example">
+    <section class="hero is-info">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Info title
+          </p>
+          <p class="subtitle">
+            Info subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="example">
+    <section class="hero is-success">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Success title
+          </p>
+          <p class="subtitle">
+            Success subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="example">
+    <section class="hero is-warning">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Warning title
+          </p>
+          <p class="subtitle">
+            Warning subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="example">
+    <section class="hero is-danger">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Danger title
+          </p>
+          <p class="subtitle">
+            Danger subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="example">
+    <section class="hero is-light">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Light title
+          </p>
+          <p class="subtitle">
+            Light subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="example">
+    <section class="hero is-dark">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Dark title
+          </p>
+          <p class="subtitle">
+            Dark subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container">
+    <h3 class="title">
+      Gradients
+      <span class="tag is-warning">Experimental</span>
+    </h3>
+    <h4 class="subtitle">
+      By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
+    </h4>
+  </div>
+</section>
+
+<section class="section is-fullwidth">
+  <div class="example">
+    <section class="hero is-medium is-primary is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Primary bold title
+          </p>
+          <p class="subtitle">
+            Primary bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+{% highlight html %}
+<section class="hero is-medium is-primary is-bold">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Primary bold title
+      </h1>
+      <h2 class="subtitle">
+        Primary bold subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+  <div class="example">
+    <section class="hero is-medium is-info is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Info bold title
+          </p>
+          <p class="subtitle">
+            Info bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="example">
+    <section class="hero is-medium is-success is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Success bold title
+          </p>
+          <p class="subtitle">
+            Success bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="example">
+    <section class="hero is-medium is-warning is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Warning bold title
+          </p>
+          <p class="subtitle">
+            Warning bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="example">
+    <section class="hero is-medium is-danger is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Danger bold title
+          </p>
+          <p class="subtitle">
+            Danger bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="example">
+    <section class="hero is-medium is-light is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Light bold title
+          </p>
+          <p class="subtitle">
+            Light bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="example">
+    <section class="hero is-medium is-dark is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Dark bold title
+          </p>
+          <p class="subtitle">
+            Dark bold subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container">
+    <h3 class="title">Sizes</h3>
+    <h4 class="subtitle">
+      You can have even more imposing banners by using one of <strong>3 different sizes</strong>
+    </h4>
+  </div>
+</section>
+
+<section class="section is-fullwidth">
+  <div class="example">
+    <section class="hero is-primary is-medium">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Medium title
+          </p>
+          <p class="subtitle">
+            Medium subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-primary is-medium">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Medium title
+      </h1>
+      <h2 class="subtitle">
+        Medium subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+
+  <div class="example">
+    <section class="hero is-info is-large">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Large title
+          </p>
+          <p class="subtitle">
+            Large subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-info is-large">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Large title
+      </h1>
+      <h2 class="subtitle">
+        Large subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+
+  <div class="example is-fullwidth">
+    <section class="hero is-success is-fullheight">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Full Height title
+          </p>
+          <p class="subtitle">
+            Full Height subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-success is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Full Height title
+      </h1>
+      <h2 class="subtitle">
+        Full Height subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+</section>
+
+<section class="section">
+  <div class="container">
+    <h3 class="title">Full height hero</h3>
+    <h4 class="subtitle">And vertically centered</h4>
+    <div class="content">
+      <p>You can split the hero in <strong>3 vertical parts</strong>:</p>
+      <ul>
+        <li>
+          <code>hero</code>
+          <ul>
+            <li><code>hero-head</code> (always at the top)</li>
+            <li><code>hero-body</code> (always vertically centered)</li>
+            <li><code>hero-foot</code> (always at the bottom)</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+
+<section class="section is-fullwidth">
+  <div class="example">
+    <section class="hero is-primary is-medium">
+      <div class="hero-head">
+        <header class="nav">
+          <div class="container">
+            <div class="nav-left">
+              <a class="nav-item">
+                <img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
+              </a>
+            </div>
+            <span class="nav-toggle">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <div class="nav-right nav-menu">
+              <a class="nav-item is-active">
+                Home
+              </a>
+              <a class="nav-item">
+                Examples
+              </a>
+              <a class="nav-item">
+                Documentation
+              </a>
+              <span class="nav-item">
+                <a class="button is-primary is-inverted">
+                  <span class="icon">
+                    <i class="fa fa-github"></i>
+                  </span>
+                  <span>Download</span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </header>
+      </div>
+
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <p class="title">
+            Title
+          </p>
+          <p class="subtitle">
+            Subtitle
+          </p>
+        </div>
+      </div>
+
+      <div class="hero-foot">
+        <nav class="tabs">
+          <div class="container">
+            <ul>
+              <li class="is-active">
+                <a>Overview</a>
+              </li>
+              <li>
+                <a>Modifiers</a>
+              </li>
+              <li>
+                <a>Grid</a>
+              </li>
+              <li>
+                <a>Elements</a>
+              </li>
+              <li>
+                <a>Components</a>
+              </li>
+              <li>
+                <a>Layout</a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-primary is-medium">
+  <!-- Hero header: will stick at the top -->
+  <div class="hero-head">
+    <header class="nav">
+      <div class="container">
+        <div class="nav-left">
+          <a class="nav-item">
+            <img src="images/bulma-white.png" alt="Logo">
+          </a>
+        </div>
+        <span class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <div class="nav-right nav-menu">
+          <a class="nav-item is-active">
+            Home
+          </a>
+          <a class="nav-item">
+            Examples
+          </a>
+          <a class="nav-item">
+            Documentation
+          </a>
+          <span class="nav-item">
+            <a class="button is-primary is-inverted">
+              <span class="icon">
+                <i class="fa fa-github"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </header>
+  </div>
+
+  <!-- Hero content: will be in the middle -->
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">
+        Title
+      </h1>
+      <h2 class="subtitle">
+        Subtitle
+      </h2>
+    </div>
+  </div>
+
+  <!-- Hero footer: will stick at the bottom -->
+  <div class="hero-foot">
+    <nav class="tabs">
+      <div class="container">
+        <ul>
+          <li class="is-active"><a>Overview</a></li>
+          <li><a>Modifiers</a></li>
+          <li><a>Grid</a></li>
+          <li><a>Elements</a></li>
+          <li><a>Components</a></li>
+          <li><a>Layout</a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</section>
+{% endhighlight %}
+
+  <div class="example">
+    <section class="hero is-info is-large">
+      <div class="hero-head">
+        <header class="nav">
+          <div class="container">
+            <div class="nav-left">
+              <a class="nav-item">
+                <img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
+              </a>
+            </div>
+            <span class="nav-toggle">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <div class="nav-right nav-menu">
+              <a class="nav-item is-active">
+                Home
+              </a>
+              <a class="nav-item">
+                Examples
+              </a>
+              <a class="nav-item">
+                Documentation
+              </a>
+              <span class="nav-item">
+                <a class="button is-info is-inverted">
+                  <span class="icon">
+                    <i class="fa fa-github"></i>
+                  </span>
+                  <span>Download</span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </header>
+      </div>
+
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <p class="title">
+            Title
+          </p>
+          <p class="subtitle">
+            Subtitle
+          </p>
+        </div>
+      </div>
+
+      <div class="hero-foot">
+        <nav class="tabs is-boxed is-fullwidth">
+          <div class="container">
+            <ul>
+              <li class="is-active">
+                <a>Overview</a>
+              </li>
+              <li>
+                <a>Modifiers</a>
+              </li>
+              <li>
+                <a>Grid</a>
+              </li>
+              <li>
+                <a>Elements</a>
+              </li>
+              <li>
+                <a>Components</a>
+              </li>
+              <li>
+                <a>Layout</a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-info is-large">
+  <!-- Hero header: will stick at the top -->
+  <div class="hero-head">
+    <header class="nav">
+      <div class="container">
+        <div class="nav-left">
+          <a class="nav-item">
+            <img src="images/bulma-white.png" alt="Logo">
+          </a>
+        </div>
+        <span class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <div class="nav-right nav-menu">
+          <a class="nav-item is-active">
+            Home
+          </a>
+          <a class="nav-item">
+            Examples
+          </a>
+          <a class="nav-item">
+            Documentation
+          </a>
+          <span class="nav-item">
+            <a class="button is-info is-inverted">
+              <span class="icon">
+                <i class="fa fa-github"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </header>
+  </div>
+
+  <!-- Hero content: will be in the middle -->
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">
+        Title
+      </h1>
+      <h2 class="subtitle">
+        Subtitle
+      </h2>
+    </div>
+  </div>
+
+  <!-- Hero footer: will stick at the bottom -->
+  <div class="hero-foot">
+    <nav class="tabs is-boxed is-fullwidth">
+      <div class="container">
+        <ul>
+          <li class="is-active"><a>Overview</a></li>
+          <li><a>Modifiers</a></li>
+          <li><a>Grid</a></li>
+          <li><a>Elements</a></li>
+          <li><a>Components</a></li>
+          <li><a>Layout</a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</section>
+{% endhighlight %}
+
+  <div class="example is-fullwidth">
+    <section class="hero is-success is-fullheight">
+      <div class="hero-head">
+        <header class="nav">
+          <div class="container">
+            <div class="nav-left">
+              <a class="nav-item">
+                <img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
+              </a>
+            </div>
+            <span class="nav-toggle">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <div class="nav-right nav-menu">
+              <a class="nav-item is-active">
+                Home
+              </a>
+              <a class="nav-item">
+                Examples
+              </a>
+              <a class="nav-item">
+                Documentation
+              </a>
+              <span class="nav-item">
+                <a class="button is-success is-inverted">
+                  <span class="icon">
+                    <i class="fa fa-github"></i>
+                  </span>
+                  <span>Download</span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </header>
+      </div>
+
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <p class="title">
+            Title
+          </p>
+          <p class="subtitle">
+            Subtitle
+          </p>
+        </div>
+      </div>
+
+      <div class="hero-foot">
+        <nav class="tabs is-boxed is-fullwidth">
+          <div class="container">
+            <ul>
+              <li class="is-active">
+                <a>Overview</a>
+              </li>
+              <li>
+                <a>Modifiers</a>
+              </li>
+              <li>
+                <a>Grid</a>
+              </li>
+              <li>
+                <a>Elements</a>
+              </li>
+              <li>
+                <a>Components</a>
+              </li>
+              <li>
+                <a>Layout</a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-success is-fullheight">
+  <!-- Hero header: will stick at the top -->
+  <div class="hero-head">
+    <header class="nav">
+      <div class="container">
+        <div class="nav-left">
+          <a class="nav-item">
+            <img src="images/bulma-white.png" alt="Logo">
+          </a>
+        </div>
+        <span class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <div class="nav-right nav-menu">
+          <a class="nav-item is-active">
+            Home
+          </a>
+          <a class="nav-item">
+            Examples
+          </a>
+          <a class="nav-item">
+            Documentation
+          </a>
+          <span class="nav-item">
+            <a class="button is-success is-inverted">
+              <span class="icon">
+                <i class="fa fa-github"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </header>
+  </div>
+
+  <!-- Hero content: will be in the middle -->
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">
+        Title
+      </h1>
+      <h2 class="subtitle">
+        Subtitle
+      </h2>
+    </div>
+  </div>
+
+  <!-- Hero footer: will stick at the bottom -->
+  <div class="hero-foot">
+    <nav class="tabs is-boxed is-fullwidth">
+      <div class="container">
+        <ul>
+          <li class="is-active"><a>Overview</a></li>
+          <li><a>Modifiers</a></li>
+          <li><a>Grid</a></li>
+          <li><a>Elements</a></li>
+          <li><a>Components</a></li>
+          <li><a>Layout</a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</section>
+{% endhighlight %}
+</section>

diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
new file mode 100644 (file)
index 0000000..85044dc
--- /dev/null
+++ b/docs/documentation/layout/section.html
@@ -0,0 +1,42 @@
+---
+layout: documentation
+doc-tab: layout
+doc-subtab: section
+---
+
+{% include subnav-layout.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Section</h1>
+    <h2 class="subtitle">
+      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
+    </div>
+
+{% highlight html %}
+<body>
+  <section class="section">
+    <div class="container">
+      <div class="heading">
+        <h1 class="title">Section</h1>
+        <h2 class="subtitle">
+          A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
+        </h2>
+      </div>
+    </div>
+  </section>
+</body>
+{% endhighlight %}
+
+    <div class="content">
+      <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
+    </div>
+
+  </div>
+</section>

diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html
new file mode 100644 (file)
index 0000000..089ea93
--- /dev/null
+++ b/docs/documentation/modifiers/helpers.html
@@ -0,0 +1,72 @@
+---
+layout: documentation
+doc-tab: modifiers
+doc-subtab: helpers
+---
+
+{% include subnav-modifiers.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Helpers</h1>
+    <h2 class="subtitle">You can apply <strong>responsive helper classes</strong> to almost any element, in order to alter its style based upon the browser's width.</h2>
+    <hr>
+    <table class="table is-bordered">
+      <tbody>
+        <tr>
+          <th rowspan="3">Float</th>
+          <td><code>is-clearfix</code></td>
+          <td>Fixes an element's floating children</td>
+        </tr>
+        <tr>
+          <td><code>is-pulled-left</code></td>
+          <td>Moves an element to the left</td>
+        </tr>
+        <tr>
+          <td><code>is-pulled-right</code></td>
+          <td>Moves an element to the right</td>
+        </tr>
+        <tr>
+          <th>Overlay</th>
+          <td><code>is-overlay</code></td>
+          <td>Completely covers the first positioned parent</td>
+        </tr>
+        <tr>
+          <th>Size</th>
+          <td><code>is-fullwidth</code></td>
+          <td>Takes up the whole width (100%)</td>
+        </tr>
+        <tr>
+          <th rowspan="3">Text</th>
+          <td><code>has-text-centered</code></td>
+          <td>Centers the text</td>
+        </tr>
+        <tr>
+          <td><code>has-text-left</code></td>
+          <td>Text is left-aligned</td>
+        </tr>
+        <tr>
+          <td><code>has-text-right</code></td>
+          <td>Text is right-aligned</td>
+        </tr>
+        <tr>
+          <th rowspan="4">Other</th>
+          <td><code>is-disabled</code></td>
+          <td>Removes any <strong>click</strong> event</td>
+        </tr>
+        <tr>
+          <td><code>is-marginless</code></td>
+          <td>Removes any <strong>margin</strong></td>
+        </tr>
+        <tr>
+          <td><code>is-paddingless</code></td>
+          <td>Removes any <strong>padding</strong></td>
+        </tr>
+        <tr>
+          <td><code>is-unselectable</code></td>
+          <td>Prevents the text from being <strong>selectable</strong></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>

diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html
new file mode 100644 (file)
index 0000000..e04333a
--- /dev/null
+++ b/docs/documentation/modifiers/responsive-helpers.html
@@ -0,0 +1,343 @@
+---
+layout: documentation
+doc-tab: modifiers
+doc-subtab: responsive-helpers
+---
+
+{% include subnav-modifiers.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Responsive helpers</h1>
+    <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
+
+    <hr>
+
+    <h3 class="title">Show</h3>
+
+    <div class="content">
+      <p>
+        You can use one of the following <code>display</code> classes:
+      </p>
+      <ul>
+        <li><code>block</code></li>
+        <li><code>flex</code></li>
+        <li><code>inline</code></li>
+        <li><code>inline-block</code></li>
+        <li><code>inline-flex</code></li>
+      </ul>
+      <p>For example, here's what the <code>is-flex</code> helper works:</p>
+    </div>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Mobile<br>
+            Up to <code>768px</code>
+          </th>
+          <th>
+            Tablet<br>
+            Between <code>769px</code> and <code>979px</code>
+          </th>
+          <th>
+            Desktop<br>
+            Between <code>980px</code> and <code>1179px</code>
+          </th>
+          <th>
+            Widescreen<br>
+            Above <code>1180px</code>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-mobile</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-tablet-only</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-desktop-only</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-widescreen</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+        </tr>
+        <tr>
+          <th colspan="4">
+            <p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
+          </th>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-touch</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-tablet</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-flex-desktop</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">unchanged</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">flex</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="content">
+      <p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
+
+    <hr>
+
+    <h3 class="title">Hide</h3>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Mobile<br>
+            Up to <code>768px</code>
+          </th>
+          <th>
+            Tablet<br>
+            Between <code>769px</code> and <code>979px</code>
+          </th>
+          <th>
+            Desktop<br>
+            Between <code>980px</code> and <code>1179px</code>
+          </th>
+          <th>
+            Widescreen<br>
+            Above <code>1180px</code>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-mobile</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-tablet-only</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-desktop-only</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-widescreen</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+        </tr>
+        <tr>
+          <th colspan="4">
+            <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
+          </th>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-touch</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-tablet</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <code>is-hidden-desktop</code>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">visible</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">hidden</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>

diff --git a/docs/documentation/modifiers/syntax.html b/docs/documentation/modifiers/syntax.html
new file mode 100644 (file)
index 0000000..8539ddc
--- /dev/null
+++ b/docs/documentation/modifiers/syntax.html
@@ -0,0 +1,179 @@
+---
+layout: documentation
+doc-tab: modifiers
+doc-subtab: syntax
+---
+
+{% include subnav-modifiers.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Modifiers syntax</h1>
+    <h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
+    <br>
+    They all start with <code>is-</code> or <code>has-</code>.</h2>
+    <hr>
+    <div class="columns">
+      <div class="column">
+        <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
+      </div>
+      <div class="column">
+        <p>
+          <a class="button">Button</a>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<a class="button">
+  Button
+</a>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
+      </div>
+      <div class="column">
+        <p>
+          <a class="button is-primary">Button</a>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<a class="button is-primary">
+  Button
+</a>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>You can use one of the <strong>5 main colors</strong>:</p>
+          <ul>
+            <li><code>is-primary</code></li>
+            <li><code>is-info</code></li>
+            <li><code>is-success</code></li>
+            <li><code>is-warning</code></li>
+            <li><code>is-danger</code></li>
+          </ul>
+        </div>
+      </div>
+      <div class="column">
+        <p class="control">
+          <a class="button is-primary">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-info">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-success">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-warning">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-danger">Button</a>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<a class="button is-primary">
+  Button
+</a>
+<a class="button is-info">
+  Button
+</a>
+<a class="button is-success">
+  Button
+</a>
+<a class="button is-warning">
+  Button
+</a>
+<a class="button is-danger">
+  Button
+</a>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>You can also alter the <strong>size</strong>:</p>
+          <ul>
+            <li><code>is-small</code></li>
+            <li><code>is-medium</code></li>
+            <li><code>is-large</code></li>
+          </ul>
+        </div>
+      </div>
+      <div class="column">
+        <p class="control">
+          <a class="button is-small">Button</a>
+        </p>
+        <p class="control">
+          <a class="button">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-medium">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-large">Button</a>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <a class="button is-small">Button</a>
+</p>
+<p class="control">
+  <a class="button">Button</a>
+</p>
+<p class="control">
+  <a class="button is-medium">Button</a>
+</p>
+<p class="control">
+  <a class="button is-large">Button</a>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
+          <ul>
+            <li><code>is-outlined</code></li>
+            <li><code>is-loading</code></li>
+            <li><code>is-disabled</code></li>
+          </ul>
+        </div>
+      </div>
+      <div class="column">
+        <p class="control">
+          <a class="button is-primary is-outlined">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-primary is-loading">Button</a>
+        </p>
+        <p class="control">
+          <a class="button is-primary is-disabled">Button</a>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<a class="button is-primary is-outlined">
+  Button
+</a>
+<a class="button is-primary is-loading">
+  Button
+</a>
+<a class="button is-primary is-disabled">
+  Button
+</a>
+{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/navbar.html b/docs/documentation/navbar.html
new file mode 100644 (file)
index 0000000..7572f54
--- /dev/null
+++ b/docs/documentation/navbar.html
@@ -0,0 +1,257 @@
+---
+layout: documentation
+doc-tab: navbar
+---
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Navbar</h1>
+    <h2 class="subtitle">A multi-purpose <strong>horizontal navbar</strong>, which can contain almost any other element</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The <strong>structure</strong> of a navbar is the following:</p>
+      <ul>
+        <li>
+          <code>navbar</code>: main container
+          <ul>
+            <li><code>navbar-left</code> for the left side</li>
+            <li>
+              <code>navbar-right</code> for the right side
+              <ul>
+                <li><code>navbar-item</code> for each individual element</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p>In a <code>navbar-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>navbar</code>, they will always be <strong>vertically aligned</strong>.</p>
+    </div>
+
+    <div class="structure">
+      <nav class="navbar structure-item is-structure-container" title="navbar">
+        <div class="navbar-left structure-item" title="navbar-left">
+          <div class="navbar-item">
+            <p class="subtitle is-5">
+              <strong>123</strong> posts
+            </p>
+          </div>
+          <div class="navbar-item">
+            <p class="control has-addons">
+              <input class="input" type="text" placeholder="Find a post">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
+        </div>
+        <div class="navbar-right structure-item" title="navbar-right">
+          <p class="navbar-item">
+            <strong>All</strong>
+          </p>
+          <p class="navbar-item">
+            <a>Published</a>
+          </p>
+          <p class="navbar-item">
+            <a>Drafts</a>
+          </p>
+          <p class="navbar-item">
+            <a>Deleted</a>
+          </p>
+          <p class="navbar-item">
+            <a class="button is-success">
+              New
+            </a>
+          </p>
+        </div>
+      </nav>
+    </div>
+
+    <div class="example">
+      <nav class="navbar">
+        <div class="navbar-left">
+          <div class="navbar-item">
+            <p class="subtitle is-5">
+              <strong>123</strong> posts
+            </p>
+          </div>
+          <div class="navbar-item">
+            <p class="control has-addons">
+              <input class="input" type="text" placeholder="Find a post">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
+        </div>
+        <div class="navbar-right">
+          <p class="navbar-item">
+            <strong>All</strong>
+          </p>
+          <p class="navbar-item">
+            <a>Published</a>
+          </p>
+          <p class="navbar-item">
+            <a>Drafts</a>
+          </p>
+          <p class="navbar-item">
+            <a>Deleted</a>
+          </p>
+          <p class="navbar-item">
+            <a class="button is-success">
+              New
+            </a>
+          </p>
+        </div>
+      </nav>
+    </div>
+
+{% highlight html %}
+<!-- Main container -->
+<nav class="navbar">
+  <!-- Left side -->
+  <div class="navbar-left">
+    <div class="navbar-item">
+      <p class="subtitle is-5">
+        <strong>123</strong> posts
+      </p>
+    </div>
+    <div class="navbar-item">
+      <p class="control has-addons">
+        <input class="input" type="text" placeholder="Find a post">
+        <button class="button">
+          Search
+        </button>
+      </p>
+    </div>
+  </div>
+
+  <!-- Right side -->
+  <div class="navbar-right">
+    <p class="navbar-item"><strong>All</strong></p>
+    <p class="navbar-item"><a>Published</a></p>
+    <p class="navbar-item"><a>Drafts</a></p>
+    <p class="navbar-item"><a>Deleted</a></p>
+    <p class="navbar-item"><a class="button is-success">New</a></p>
+  </div>
+</nav>
+{% endhighlight %}
+
+    <hr>
+    <h3 class="title">Centered navbar</h3>
+
+    <div class="content">
+      If you want a <strong>centered navbar</strong>, you can use as many <code>navbar-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>navbar</code> container.
+    </div>
+
+    <div class="example">
+      <nav class="navbar">
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Tweets</p>
+          <p class="title">3,456</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Following</p>
+          <p class="title">123</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Followers</p>
+          <p class="title">456K</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Likes</p>
+          <p class="title">789</p>
+        </div>
+      </nav>
+    </div>
+
+{% highlight html %}
+<nav class="navbar">
+  <div class="navbar-item has-text-centered">
+    <p class="heading">Tweets</p>
+    <p class="title">3,456</p>
+  </div>
+  <div class="navbar-item has-text-centered">
+    <p class="heading">Following</p>
+    <p class="title">123</p>
+  </div>
+  <div class="navbar-item has-text-centered">
+    <p class="heading">Followers</p>
+    <p class="title">456K</p>
+  </div>
+  <div class="navbar-item has-text-centered">
+    <p class="heading">Likes</p>
+    <p class="title">789</p>
+  </div>
+</nav>
+{% endhighlight %}
+
+    <div class="example">
+      <nav class="navbar">
+        <p class="navbar-item has-text-centered">
+          <a class="link is-info">Home</a>
+        </p>
+        <p class="navbar-item has-text-centered">
+          <a class="link is-info">Menu</a>
+        </p>
+        <p class="navbar-item has-text-centered">
+          <img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
+        </p>
+        <p class="navbar-item has-text-centered">
+          <a class="link is-info">Reservations</a>
+        </p>
+        <p class="navbar-item has-text-centered">
+          <a class="link is-info">Contact</a>
+        </p>
+      </nav>
+    </div>
+
+{% highlight html %}
+<nav class="navbar">
+  <p class="navbar-item has-text-centered">
+    <a class="link is-info">Home</a>
+  </p>
+  <p class="navbar-item has-text-centered">
+    <a class="link is-info">Menu</a>
+  </p>
+  <p class="navbar-item has-text-centered">
+    <img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
+  </p>
+  <p class="navbar-item has-text-centered">
+    <a class="link is-info">Reservations</a>
+  </p>
+  <p class="navbar-item has-text-centered">
+    <a class="link is-info">Contact</a>
+  </p>
+</nav>
+{% endhighlight %}
+
+    <hr>
+    <h3 class="title">Mobile navbar</h3>
+    <div class="content">
+      By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>navbar</code> container.
+    </div>
+
+    <div class="example">
+      <nav class="navbar is-mobile">
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Tweets</p>
+          <p class="title">3,456</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Following</p>
+          <p class="title">123</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Followers</p>
+          <p class="title">456K</p>
+        </div>
+        <div class="navbar-item has-text-centered">
+          <p class="heading">Likes</p>
+          <p class="title">789</p>
+        </div>
+      </nav>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/overview/classes.html b/docs/documentation/overview/classes.html
new file mode 100644 (file)
index 0000000..d178a7d
--- /dev/null
+++ b/docs/documentation/overview/classes.html
@@ -0,0 +1,37 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: classes
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Classes</h1>
+    <h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
+        <br>
+        <a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms/bulma/blob/master/css/bulma.css</a></p>
+      <p>
+        Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code>&lt;input type="text"&gt;</code> elements you want to style.
+      </p>
+      <p>
+        Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
+      </p>
+      <ul>
+        <li>
+          <a href="https://github.com/jgthms/bulma/blob/master/bulma/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
+        </li>
+        <li>
+          the <a href="{{ site.baseurl }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
new file mode 100644 (file)
index 0000000..4bad19e
--- /dev/null
+++ b/docs/documentation/overview/responsiveness.html
@@ -0,0 +1,161 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: responsiveness
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Responsiveness</h1>
+    <h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
+
+    <hr>
+
+    <h3 class="title">Breakpoints</h3>
+    <div class="content">
+      <p>Bulma has 4 breakpoints:</p>
+      <ul>
+        <li><code>mobile</code>: up to <code>768px</code></li>
+        <li><code>tablet</code>: from <code>769px</code></li>
+        <li><code>desktop</code>: from <code>980px</code></li>
+        <li><code>widescreen</code>: from <code>1180px</code></li>
+      </ul>
+      <p>Bulma uses 7 responsive mixins:</p>
+      <ul>
+        <li>
+          <code>=mobile</code><br>
+          until <code>768px</code>
+        </li>
+        <li>
+          <code>=tablet</code><br>
+          from <code>769px</code>
+        </li>
+        <li>
+          <code>=tablet-only</code><br>
+          from <code>769px</code> and until <code>979px</code>
+        </li>
+        <li>
+          <code>=touch</code><br>
+          until <code>979px</code>
+        </li>
+        <li>
+          <code>=desktop</code><br>
+          from <code>980px</code>
+        </li>
+        <li>
+          <code>=desktop-only</code><br>
+          from <code>980px</code> and until <code>1179px</code>
+        </li>
+        <li>
+          <code>=widescreen</code><br>
+          from <code>1180px</code>
+        </li>
+      </ul>
+      <p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
+    </div>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th>
+            Mobile<br>
+            Up to <code>768px</code>
+          </th>
+          <th>
+            Tablet<br>
+            Between <code>769px</code> and <code>979px</code>
+          </th>
+          <th>
+            Desktop<br>
+            Between <code>980px</code> and <code>1179px</code>
+          </th>
+          <th>
+            Widescreen<br>
+            <code>1180px</code> and above
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="is-narrow">
+            <p class="notification is-success">mobile</p>
+          </td>
+          <td class="is-narrow" colspan="3">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <p class="notification">-</p>
+          </td>
+          <td class="is-narrow" colspan="3">
+            <p class="notification is-success">tablet</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow" colspan="2">
+            <p class="notification">-</p>
+          </td>
+          <td class="is-narrow" colspan="3">
+            <p class="notification is-success">desktop</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow" colspan="3">
+            <p class="notification">-</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">widescreen</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow">
+            <p class="notification">-</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">tablet-only</p>
+          </td>
+          <td class="is-narrow" colspan="2">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow" colspan="2">
+            <p class="notification">-</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification is-success">desktop-only</p>
+          </td>
+          <td class="is-narrow">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="is-narrow" colspan="2">
+            <p class="notification is-success">touch</p>
+          </td>
+          <td class="is-narrow" colspan="2">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>
+
+    <h3 class="title">Vertical by default</h3>
+    <div class="content">
+      <p>
+        Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
+      </p>
+      <ul>
+        <li><code>columns</code> are stacked vertically</li>
+        <li>the <code>level</code> component will show its children stacked vertically</li>
+        <li>the <code>nav</code> menu will be hidden</li>
+      </ul>
+      <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
new file mode 100644 (file)
index 0000000..03b994b
--- /dev/null
+++ b/docs/documentation/overview/start.html
@@ -0,0 +1,135 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: start
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title"><strong>3</strong> ways to start</h1>
+    <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
+
+    <hr>
+
+    <article class="media is-large">
+      <div class="media-number">1</div>
+      <div class="media-content">
+        <p class="title is-5">
+          Use <strong>NPM</strong> <em>(recommended)</em>:
+        </p>
+{% highlight bash %}
+npm install bulma
+{% endhighlight %}
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-number">2</div>
+      <div class="media-content">
+        <p class="title is-5">
+          Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
+          <br>
+          <a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
+        </p>
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-number">3</div>
+      <div class="media-content">
+        <p class="title is-5">
+          Download from the <strong>repository</strong>
+          <br>
+          <a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
+        </p>
+      </div>
+    </article>
+
+    <hr>
+
+    <div class="message is-info">
+      <div class="message-header">
+        Font Awesome icons
+      </div>
+      <div class="message-body">
+        <p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
+{% highlight html %}
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">Customizing with Sass</h3>
+
+    <div class="content">
+      <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
+    </div>
+
+    <article class="media is-large">
+      <div class="media-number">1</div>
+      <div class="media-content">
+        <p class="title is-5">
+          <strong>Download</strong> the source files:
+        </p>
+{% highlight bash %}
+npm install bulma
+{% endhighlight %}
+        <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-number">2</div>
+      <div class="media-content">
+        <p class="title is-5">
+          <strong>Set</strong> your variables:<br>
+{% highlight sass %}
+// Override initial variables here
+// You can add new ones or update existing ones:
+
+$blue: #72d0eb // Update blue
+$pink: #ffb3b3 // Add pink
+$family-serif: "Georgia", serif // Add a serif family
+
+// Override generated variables here
+// For example, by default, the $danger color is $red and the font is sans-serif
+// You can change these values:
+
+$danger: $orange // Use the existing orange
+$family-primary: $family-serif // Use the new serif family
+{% endhighlight %}
+        </p>
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-number">3</div>
+      <div class="media-content">
+        <p class="title is-5">
+          <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
+{% highlight sass %}
+// Override variables here
+// You can add new ones or update existing ones:
+
+$blue: #72d0eb // Update blue
+$pink: #ffb3b3 // Add pink
+$family-serif: "Georgia", serif // Add a serif family
+
+// Override generated variables here
+// For example, by default, the $danger color is $red and the font is sans-serif
+// You can change these values:
+
+$danger: $orange // Use the existing orange
+$family-primary: $family-serif // Use the new serif family
+
+@import "bulma"
+{% endhighlight %}
+        </p>
+      </div>
+    </article>
+  </div>
+</section>

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
new file mode 100644 (file)
index 0000000..414ccde
--- /dev/null
+++ b/docs/documentation/overview/variables.html
@@ -0,0 +1,314 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: variables
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Variables</h1>
+    <h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Bulma has 1 variable file divided into <strong>4</strong> sections:</p>
+      <ul>
+        <li>
+          <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
+          <ul>
+            <li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
+            <li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
+            <li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
+            <li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>Primary colors</strong> derived from the initial variables:
+          <ul>
+            <li><code>$primary: $turquoise</code></li>
+            <li><code>$info: $blue</code></li>
+            <li><code>$success: $green</code></li>
+            <li><code>$warning: $yellow</code></li>
+            <li><code>$danger: $red</code></li>
+            <li><code>$dark: $grey-darker</code></li>
+            <li><code>$text: $grey-dark</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
+          <ul>
+            <li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
+            <li><code>$link: $primary</code>: the links use the primary color</li>
+            <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
+          </ul>
+        </li>
+        <li>
+          <strong>Lists and maps</strong> which are collections so already defined variables:
+          <ul>
+            <li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
+            <li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
+      </p>
+    </div>
+
+    <hr>
+
+<table class="table is-bordered is-striped">
+<tr><th colspan="2">1. Initial variables</th></tr>
+
+<tr><th colspan="2">Colors</th></tr>
+
+<tr>
+  <td><code>$black</code></td>
+  <td>
+  <span class="color" style="background-color: #111;"></span>
+  #111
+  </td>
+</tr>
+<tr>
+  <td><code>$grey-darker</code></td>
+  <td>
+  <span class="color" style="background-color: #222324;"></span>
+  #222324
+  </td>
+</tr>
+<tr>
+  <td><code>$grey-dark</code></td>
+  <td>
+  <span class="color" style="background-color: #69707a;"></span>
+  #69707a
+  </td>
+</tr>
+<tr>
+  <td><code>$grey</code></td>
+  <td>
+  <span class="color" style="background-color: #aeb1b5;"></span>
+  #aeb1b5
+  </td>
+</tr>
+<tr>
+  <td><code>$grey-light</code></td>
+  <td>
+  <span class="color" style="background-color: #d3d6db;"></span>
+  #d3d6db
+  </td>
+</tr>
+<tr>
+  <td><code>$grey-lighter</code></td>
+  <td>
+  <span class="color" style="background-color: #f5f7fa;"></span>
+  #f5f7fa
+  </td>
+</tr>
+<tr>
+  <td><code>$white</code></td>
+  <td>
+  <span class="color" style="background-color: #fff;"></span>
+  #fff
+  </td>
+</tr>
+<tr>
+  <td><code>$blue</code></td>
+  <td>
+  <span class="color" style="background-color: #42afe3;"></span>
+  #42afe3
+  </td>
+</tr>
+<tr>
+  <td><code>$green</code></td>
+  <td>
+  <span class="color" style="background-color: #97cd76;"></span>
+  #97cd76
+  </td>
+</tr>
+<tr>
+  <td><code>$orange</code></td>
+  <td>
+  <span class="color" style="background-color: #f68b39;"></span>
+  #f68b39
+  </td>
+</tr>
+<tr>
+  <td><code>$purple</code></td>
+  <td>
+  <span class="color" style="background-color: #847bb9;"></span>
+  #847bb9
+  </td>
+</tr>
+<tr>
+  <td><code>$red</code></td>
+  <td>
+  <span class="color" style="background-color: #ed6c63;"></span>
+  #ed6c63
+  </td>
+</tr>
+<tr>
+  <td><code>$turquoise</code></td>
+  <td>
+  <span class="color" style="background-color: #1fc8db;"></span>
+  #1fc8db
+  </td>
+</tr>
+<tr>
+  <td><code>$yellow</code></td>
+  <td>
+  <span class="color" style="background-color: #fce473;"></span>
+  #fce473
+  </td>
+</tr>
+
+<tr><th colspan="2">Typography</th></tr>
+
+<tr><td><code>$family-sans-serif</code></td><td>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td></tr>
+<tr><td><code>$family-monospace</code></td><td>"Source Code Pro", "Monaco", "Inconsolata", monospace</td></tr>
+
+<tr><td><code>$size-1</code></td><td>48px</td></tr>
+<tr><td><code>$size-2</code></td><td>40px</td></tr>
+<tr><td><code>$size-3</code></td><td>28px</td></tr>
+<tr><td><code>$size-4</code></td><td>24px</td></tr>
+<tr><td><code>$size-5</code></td><td>18px</td></tr>
+<tr><td><code>$size-6</code></td><td>14px</td></tr>
+
+<tr><td><code>$size-7</code></td><td>11px</td></tr>
+
+<tr><td><code>$weight-normal</code></td><td>400</td></tr>
+<tr><td><code>$weight-bold</code></td><td>700</td></tr>
+<tr><td><code>$weight-title-normal</code></td><td>300</td></tr>
+<tr><td><code>$weight-title-bold</code></td><td>500</td></tr>
+
+<tr><th colspan="2">Breakpoints</th></tr>
+
+<tr><td><code>$tablet</code></td><td>769px</td></tr>
+<tr><td><code>$desktop</code></td><td>980px</td></tr>
+<tr><td><code>$widescreen</code></td><td>1180px</td></tr>
+
+<tr><th colspan="2">Dimensions</th></tr>
+
+<tr><td><code>$column-gap</code></td><td>20px</td></tr>
+
+<tr><td><code>$nav-height</code></td><td>50px</td></tr>
+
+<tr><th colspan="2">Miscellaneous</th></tr>
+
+<tr><td><code>$easing</code></td><td>ease-out</td></tr>
+<tr><td><code>$radius</code></td><td>3px</td></tr>
+<tr><td><code>$speed</code></td><td>86ms</td></tr>
+
+<tr><th colspan="2">2. Primary colors</th></tr>
+
+<tr><td><code>$primary</code></td><td>$turquoise</td></tr>
+
+<tr><td><code>$info</code></td><td>$blue</td></tr>
+<tr><td><code>$success</code></td><td>$green</td></tr>
+<tr><td><code>$warning</code></td><td>$yellow</td></tr>
+<tr><td><code>$danger</code></td><td>$red</td></tr>
+
+<tr><td><code>$light</code></td><td>$grey-lighter</td></tr>
+<tr><td><code>$dark</code></td><td>$grey-dark</td></tr>
+
+<tr><td><code>$text</code></td><td>$grey-dark</td></tr>
+
+<tr><th colspan="2">3. Generated variables</th></tr>
+
+<tr><th colspan="2">Invert colors</th></tr>
+
+<tr><td><code>$primary-invert</code></td><td>findColorInvert($primary)</td></tr>
+
+<tr><td><code>$info-invert</code></td><td>findColorInvert($info)</td></tr>
+<tr><td><code>$success-invert</code></td><td>findColorInvert($success)</td></tr>
+<tr><td><code>$warning-invert</code></td><td>findColorInvert($warning)</td></tr>
+<tr><td><code>$danger-invert</code></td><td>findColorInvert($danger)</td></tr>
+
+<tr><td><code>$light-invert</code></td><td>$dark</td></tr>
+<tr><td><code>$dark-invert</code></td><td>$light</td></tr>
+
+<tr><th colspan="2">General colors</th></tr>
+
+<tr><td><code>$body-background</code></td><td>$grey-lighter</td></tr>
+
+<tr><td><code>$background</code></td><td>$grey-lighter</td></tr>
+
+<tr><td><code>$border</code></td><td>$grey-light</td></tr>
+<tr><td><code>$border-hover</code></td><td>$grey</td></tr>
+
+<tr><th colspan="2">Text colors</th></tr>
+
+<tr><td><code>$text-invert</code></td><td>findColorInvert($text)</td></tr>
+<tr><td><code>$text-light</code></td><td>$grey</td></tr>
+<tr><td><code>$text-strong</code></td><td>$grey-darker</td></tr>
+
+<tr><th colspan="2">Code colors</th></tr>
+
+<tr><td><code>$code</code></td><td>$red</td></tr>
+<tr><td><code>$code-background</code></td><td>$background</td></tr>
+
+<tr><td><code>$pre</code></td><td>$text</td></tr>
+<tr><td><code>$pre-background</code></td><td>$background</td></tr>
+
+<tr><th colspan="2">Link colors</th></tr>
+
+<tr><td><code>$link</code></td><td>$primary</td></tr>
+<tr><td><code>$link-invert</code></td><td>$primary-invert</td></tr>
+<tr><td><code>$link-visited</code></td><td>$purple</td></tr>
+
+<tr><td><code>$link-hover</code></td><td>$grey-darker</td></tr>
+<tr><td><code>$link-hover-background</code></td><td>$grey-lighter</td></tr>
+<tr><td><code>$link-hover-border</code></td><td>$grey-darker</td></tr>
+
+<tr><td><code>$link-active</code></td><td>$grey-darker</td></tr>
+<tr><td><code>$link-active-border</code></td><td>$grey-darker</td></tr>
+
+<tr><th colspan="2">Control colors</th></tr>
+
+<tr><td><code>$control</code></td><td>$text-strong</td></tr>
+<tr><td><code>$control-background</code></td><td>$text-invert</td></tr>
+<tr><td><code>$control-border</code></td><td>$border</td></tr>
+
+<tr><td><code>$control-hover</code></td><td>$link-hover</td></tr>
+<tr><td><code>$control-hover-border</code></td><td>$border-hover</td></tr>
+
+<tr><td><code>$control-active</code></td><td>$link</td></tr>
+<tr><td><code>$control-active-background</code></td><td>$link</td></tr>
+<tr><td><code>$control-active-background-invert</code></td><td>$link-invert</td></tr>
+<tr><td><code>$control-active-border</code></td><td>$link</td></tr>
+
+<tr><th colspan="2">Typography</th></tr>
+
+<tr><td><code>$family-primary</code></td><td>$family-sans-serif</td></tr>
+<tr><td><code>$family-code</code></td><td>$family-monospace</td></tr>
+
+<tr><td><code>$size-small</code></td><td>$size-7</td></tr>
+<tr><td><code>$size-normal</code></td><td>$size-6</td></tr>
+<tr><td><code>$size-medium</code></td><td>$size-5</td></tr>
+<tr><td><code>$size-large</code></td><td>$size-3</td></tr>
+<tr><td><code>$size-huge</code></td><td>$size-1</td></tr>
+
+<tr><th colspan="2">4. Lists and maps</th></tr>
+
+<tr>
+  <td><code>$colors</code>
+  <td>
+  (white: ($white, $black),<br>
+  black: ($black, $white),<br>
+  light: ($light, $light-invert),<br>
+  dark: ($dark, $dark-invert),<br>
+  primary: ($primary, $primary-invert),<br>
+  info: ($info, $info-invert),<br>
+  success: ($success, $success-invert),<br>
+  warning: ($warning, $warning-invert),<br>
+  danger: ($danger, $danger-invert))
+  </td>
+</tr>
+
+<tr><td><code>$sizes</code></td><td>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</td></tr>
+</table>
+
+  </div>
+</section>

diff --git a/docs/favicons/android-chrome-144x144.png b/docs/favicons/android-chrome-144x144.png
new file mode 100644 (file)
index 0000000..150ff0d
Binary files /dev/null and b/docs/favicons/android-chrome-144x144.png differ

diff --git a/docs/favicons/android-chrome-192x192.png b/docs/favicons/android-chrome-192x192.png
new file mode 100644 (file)
index 0000000..8f648dd
Binary files /dev/null and b/docs/favicons/android-chrome-192x192.png differ

diff --git a/docs/favicons/android-chrome-36x36.png b/docs/favicons/android-chrome-36x36.png
new file mode 100644 (file)
index 0000000..07aa91c
Binary files /dev/null and b/docs/favicons/android-chrome-36x36.png differ

diff --git a/docs/favicons/android-chrome-48x48.png b/docs/favicons/android-chrome-48x48.png
new file mode 100644 (file)
index 0000000..e070b59
Binary files /dev/null and b/docs/favicons/android-chrome-48x48.png differ

diff --git a/docs/favicons/android-chrome-72x72.png b/docs/favicons/android-chrome-72x72.png
new file mode 100644 (file)
index 0000000..9f1e201
Binary files /dev/null and b/docs/favicons/android-chrome-72x72.png differ

diff --git a/docs/favicons/android-chrome-96x96.png b/docs/favicons/android-chrome-96x96.png
new file mode 100644 (file)
index 0000000..951f52d
Binary files /dev/null and b/docs/favicons/android-chrome-96x96.png differ

diff --git a/docs/favicons/apple-touch-icon-114x114.png b/docs/favicons/apple-touch-icon-114x114.png
new file mode 100644 (file)
index 0000000..3445307
Binary files /dev/null and b/docs/favicons/apple-touch-icon-114x114.png differ

diff --git a/docs/favicons/apple-touch-icon-120x120.png b/docs/favicons/apple-touch-icon-120x120.png
new file mode 100644 (file)
index 0000000..105f39c
Binary files /dev/null and b/docs/favicons/apple-touch-icon-120x120.png differ

diff --git a/docs/favicons/apple-touch-icon-144x144.png b/docs/favicons/apple-touch-icon-144x144.png
new file mode 100644 (file)
index 0000000..7955312
Binary files /dev/null and b/docs/favicons/apple-touch-icon-144x144.png differ

diff --git a/docs/favicons/apple-touch-icon-152x152.png b/docs/favicons/apple-touch-icon-152x152.png
new file mode 100644 (file)
index 0000000..a84857d
Binary files /dev/null and b/docs/favicons/apple-touch-icon-152x152.png differ

diff --git a/docs/favicons/apple-touch-icon-180x180.png b/docs/favicons/apple-touch-icon-180x180.png
new file mode 100644 (file)
index 0000000..70cf935
Binary files /dev/null and b/docs/favicons/apple-touch-icon-180x180.png differ

diff --git a/docs/favicons/apple-touch-icon-57x57.png b/docs/favicons/apple-touch-icon-57x57.png
new file mode 100644 (file)
index 0000000..d03eab9
Binary files /dev/null and b/docs/favicons/apple-touch-icon-57x57.png differ

diff --git a/docs/favicons/apple-touch-icon-60x60.png b/docs/favicons/apple-touch-icon-60x60.png
new file mode 100644 (file)
index 0000000..5e9fa10
Binary files /dev/null and b/docs/favicons/apple-touch-icon-60x60.png differ

diff --git a/docs/favicons/apple-touch-icon-72x72.png b/docs/favicons/apple-touch-icon-72x72.png
new file mode 100644 (file)
index 0000000..639c1a4
Binary files /dev/null and b/docs/favicons/apple-touch-icon-72x72.png differ

diff --git a/docs/favicons/apple-touch-icon-76x76.png b/docs/favicons/apple-touch-icon-76x76.png
new file mode 100644 (file)
index 0000000..e1eca90
Binary files /dev/null and b/docs/favicons/apple-touch-icon-76x76.png differ

diff --git a/docs/favicons/apple-touch-icon-precomposed.png b/docs/favicons/apple-touch-icon-precomposed.png
new file mode 100644 (file)
index 0000000..d360c30
Binary files /dev/null and b/docs/favicons/apple-touch-icon-precomposed.png differ

diff --git a/docs/favicons/apple-touch-icon.png b/docs/favicons/apple-touch-icon.png
new file mode 100644 (file)
index 0000000..70cf935
Binary files /dev/null and b/docs/favicons/apple-touch-icon.png differ

diff --git a/docs/favicons/browserconfig.xml b/docs/favicons/browserconfig.xml
new file mode 100644 (file)
index 0000000..628928f
--- /dev/null
+++ b/docs/favicons/browserconfig.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<browserconfig>\r
+  <msapplication>\r
+    <tile>\r
+      <square70x70logo src="/favicons/mstile-70x70.png"/>\r
+      <square150x150logo src="/favicons/mstile-150x150.png"/>\r
+      <square310x310logo src="/favicons/mstile-310x310.png"/>\r
+      <wide310x150logo src="/favicons/mstile-310x150.png"/>\r
+      <TileColor>#1fc8db</TileColor>\r
+    </tile>\r
+  </msapplication>\r
+</browserconfig>\r

diff --git a/docs/favicons/favicon-16x16.png b/docs/favicons/favicon-16x16.png
new file mode 100644 (file)
index 0000000..e4a08d7
Binary files /dev/null and b/docs/favicons/favicon-16x16.png differ

diff --git a/docs/favicons/favicon-32x32.png b/docs/favicons/favicon-32x32.png
new file mode 100644 (file)
index 0000000..1e2f03f
Binary files /dev/null and b/docs/favicons/favicon-32x32.png differ

diff --git a/docs/favicons/favicon-96x96.png b/docs/favicons/favicon-96x96.png
new file mode 100644 (file)
index 0000000..a408d1a
Binary files /dev/null and b/docs/favicons/favicon-96x96.png differ

diff --git a/docs/favicons/favicon.ico b/docs/favicons/favicon.ico
new file mode 100644 (file)
index 0000000..9c63d85
Binary files /dev/null and b/docs/favicons/favicon.ico differ

diff --git a/docs/favicons/manifest.json b/docs/favicons/manifest.json
new file mode 100644 (file)
index 0000000..f9302c8
--- /dev/null
+++ b/docs/favicons/manifest.json
@@ -0,0 +1,41 @@
+{
+       "name": "Bulma",
+       "icons": [
+               {
+                       "src": "\/favicons\/android-chrome-36x36.png",
+                       "sizes": "36x36",
+                       "type": "image\/png",
+                       "density": 0.75
+               },
+               {
+                       "src": "\/favicons\/android-chrome-48x48.png",
+                       "sizes": "48x48",
+                       "type": "image\/png",
+                       "density": 1
+               },
+               {
+                       "src": "\/favicons\/android-chrome-72x72.png",
+                       "sizes": "72x72",
+                       "type": "image\/png",
+                       "density": 1.5
+               },
+               {
+                       "src": "\/favicons\/android-chrome-96x96.png",
+                       "sizes": "96x96",
+                       "type": "image\/png",
+                       "density": 2
+               },
+               {
+                       "src": "\/favicons\/android-chrome-144x144.png",
+                       "sizes": "144x144",
+                       "type": "image\/png",
+                       "density": 3
+               },
+               {
+                       "src": "\/favicons\/android-chrome-192x192.png",
+                       "sizes": "192x192",
+                       "type": "image\/png",
+                       "density": 4
+               }
+       ]
+}

diff --git a/docs/favicons/mstile-144x144.png b/docs/favicons/mstile-144x144.png
new file mode 100644 (file)
index 0000000..ab480ba
Binary files /dev/null and b/docs/favicons/mstile-144x144.png differ

diff --git a/docs/favicons/mstile-150x150.png b/docs/favicons/mstile-150x150.png
new file mode 100644 (file)
index 0000000..0e1dcf5
Binary files /dev/null and b/docs/favicons/mstile-150x150.png differ

diff --git a/docs/favicons/mstile-310x150.png b/docs/favicons/mstile-310x150.png
new file mode 100644 (file)
index 0000000..96af1bc
Binary files /dev/null and b/docs/favicons/mstile-310x150.png differ

diff --git a/docs/favicons/mstile-310x310.png b/docs/favicons/mstile-310x310.png
new file mode 100644 (file)
index 0000000..84a4c56
Binary files /dev/null and b/docs/favicons/mstile-310x310.png differ

diff --git a/docs/favicons/mstile-70x70.png b/docs/favicons/mstile-70x70.png
new file mode 100644 (file)
index 0000000..fba1a1c
Binary files /dev/null and b/docs/favicons/mstile-70x70.png differ

diff --git a/docs/favicons/safari-pinned-tab.svg b/docs/favicons/safari-pinned-tab.svg
new file mode 100644 (file)
index 0000000..674b653
--- /dev/null
+++ b/docs/favicons/safari-pinned-tab.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="320.000000pt" height="320.000000pt" viewBox="0 0 320.000000 320.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,320.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1105 2807 c-214 -215 -394 -397 -398 -404 -5 -8 -17 -74 -27 -146
+-11 -73 -22 -148 -24 -167 -3 -19 -26 -179 -51 -355 -57 -403 -54 -385 -60
+-415 -2 -14 -6 -41 -9 -60 -11 -84 -27 -198 -32 -227 -5 -31 12 -49 496 -533
+l500 -500 600 400 600 400 -395 395 c-217 217 -395 399 -395 405 0 6 133 143
+295 305 l295 295 -500 500 c-275 275 -501 500 -503 499 -1 0 -177 -177 -392
+-392z"/>
+</g>
+</svg>

diff --git a/docs/images/arc-de-triomphe.png b/docs/images/arc-de-triomphe.png
new file mode 100644 (file)
index 0000000..409c17f
Binary files /dev/null and b/docs/images/arc-de-triomphe.png differ

diff --git a/docs/images/b.png b/docs/images/b.png
new file mode 100644 (file)
index 0000000..63ec03b
Binary files /dev/null and b/docs/images/b.png differ

diff --git a/docs/images/bulma-white.png b/docs/images/bulma-white.png
new file mode 100644 (file)
index 0000000..c39d615
Binary files /dev/null and b/docs/images/bulma-white.png differ

diff --git a/docs/images/bulma.png b/docs/images/bulma.png
new file mode 100644 (file)
index 0000000..c3bc05b
Binary files /dev/null and b/docs/images/bulma.png differ

diff --git a/docs/images/metro-ui-css-grid-tiles.png b/docs/images/metro-ui-css-grid-tiles.png
new file mode 100644 (file)
index 0000000..1c3baf0
Binary files /dev/null and b/docs/images/metro-ui-css-grid-tiles.png differ

diff --git a/docs/images/sparrow/app-store-badge.svg b/docs/images/sparrow/app-store-badge.svg
new file mode 100644 (file)
index 0000000..ac111e5
--- /dev/null
+++ b/docs/images/sparrow/app-store-badge.svg
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"\r
+        x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">\r
+<g>\r
+       <path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468\r
+               C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>\r
+       <path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725\r
+               c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>\r
+       <g>\r
+               <g>\r
+                       <path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528\r
+                               c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196\r
+                               c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036\r
+                               c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623\r
+                               C33.507,24.924,30.161,23.647,30.128,19.784z"/>\r
+                       <path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944\r
+                               c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>\r
+               </g>\r
+       </g>\r
+       <g>\r
+               <path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z\r
+                        M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475\r
+                       H49.755z"/>\r
+               <path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264\r
+                       c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04\r
+                       c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666\r
+                       c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523\r
+                       c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768\r
+                       s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>\r
+               <path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264\r
+                       c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04\r
+                       c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666\r
+                       c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523\r
+                       c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768\r
+                       c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>\r
+               <path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165\r
+                       c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544\r
+                       c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029\r
+                       c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048\r
+                       c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553\r
+                       c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027\r
+                       c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>\r
+               <path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619\r
+                       c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4\r
+                       v-1.757l2.094-0.632v2.389h2.35V23.508z"/>\r
+               <path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461\r
+                       c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422\r
+                       c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696\r
+                       c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148\r
+                       c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148\r
+                       c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>\r
+               <path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85\r
+                       c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059\r
+                       c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>\r
+               <path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173\r
+                       c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593\r
+                       c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613\r
+                       c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z\r
+                        M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869\r
+                       c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>\r
+       </g>\r
+       <g>\r
+               <g>\r
+                       <path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824\r
+                               c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747\r
+                               C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611\r
+                               c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669\r
+                               S47.945,10.892,47.945,10.038z"/>\r
+                       <path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718\r
+                               c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698\r
+                               c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119\r
+                               c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138\r
+                               c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574\r
+                               C53.725,11.882,53.822,11.506,53.822,11.071z"/>\r
+                       <path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019\r
+                               c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513\r
+                               h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029\r
+                               c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>\r
+                       <path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343\r
+                               c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029\r
+                               c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427\r
+                               c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>\r
+                       <path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>\r
+                       <path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718\r
+                               c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698\r
+                               c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119\r
+                               c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138\r
+                               c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574\r
+                               C76.074,11.882,76.17,11.506,76.17,11.071z"/>\r
+                       <path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65\r
+                               c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319\r
+                               c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688\r
+                               c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z\r
+                                M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184\r
+                               c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>\r
+                       <path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864\r
+                               c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66\r
+                               c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786\r
+                               c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257\r
+                               c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135\r
+                               c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>\r
+                       <path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718\r
+                               c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698\r
+                               c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119\r
+                               c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138\r
+                               c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574\r
+                               C96.064,11.882,96.162,11.506,96.162,11.071z"/>\r
+                       <path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343\r
+                               s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029\r
+                               c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427\r
+                               c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>\r
+                       <path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049\r
+                               l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504\r
+                               h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>\r
+                       <path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735\r
+                               c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775\r
+                               c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>\r
+                       <path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067\r
+                               c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291\r
+                               c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775\r
+                               c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z\r
+                                M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427\r
+                               c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>\r
+               </g>\r
+       </g>\r
+</g>\r
+</svg>\r

diff --git a/docs/images/sparrow/business-insider.png b/docs/images/sparrow/business-insider.png
new file mode 100644 (file)
index 0000000..a126c7b
Binary files /dev/null and b/docs/images/sparrow/business-insider.png differ

diff --git a/docs/images/sparrow/google-play-badge.png b/docs/images/sparrow/google-play-badge.png
new file mode 100644 (file)
index 0000000..0c317c0
Binary files /dev/null and b/docs/images/sparrow/google-play-badge.png differ

diff --git a/docs/images/sparrow/iphone-perspective.png b/docs/images/sparrow/iphone-perspective.png
new file mode 100644 (file)
index 0000000..a4f9846
Binary files /dev/null and b/docs/images/sparrow/iphone-perspective.png differ

diff --git a/docs/images/sparrow/iphone.png b/docs/images/sparrow/iphone.png
new file mode 100644 (file)
index 0000000..bf4ebb0
Binary files /dev/null and b/docs/images/sparrow/iphone.png differ

diff --git a/docs/images/sparrow/logo-grayscale.png b/docs/images/sparrow/logo-grayscale.png
new file mode 100644 (file)
index 0000000..f59ae63
Binary files /dev/null and b/docs/images/sparrow/logo-grayscale.png differ

diff --git a/docs/images/sparrow/logo.png b/docs/images/sparrow/logo.png
new file mode 100644 (file)
index 0000000..9afdee6
Binary files /dev/null and b/docs/images/sparrow/logo.png differ

diff --git a/docs/images/sparrow/techcrunch.png b/docs/images/sparrow/techcrunch.png
new file mode 100644 (file)
index 0000000..fbcf0de
Binary files /dev/null and b/docs/images/sparrow/techcrunch.png differ

diff --git a/docs/images/sparrow/venture-beat.png b/docs/images/sparrow/venture-beat.png
new file mode 100644 (file)
index 0000000..29f2b16
Binary files /dev/null and b/docs/images/sparrow/venture-beat.png differ

diff --git a/docs/images/sparrow/wired.png b/docs/images/sparrow/wired.png
new file mode 100644 (file)
index 0000000..6b621bd
Binary files /dev/null and b/docs/images/sparrow/wired.png differ

diff --git a/docs/index.html b/docs/index.html
new file mode 100644 (file)
index 0000000..adb8529
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,612 @@
+---
+layout: default
+route: index
+---
+
+<section class="hero is-medium has-text-centered">
+  <div class="hero-head">
+    <div class="container">
+      {% include header.html %}
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container">
+      <p id="b">
+        <img src="{{ site.baseurl }}/images/b.png" alt="{{ site.title }}">
+      </p>
+      <h1 class="title">
+        Bulma
+      </h1>
+      <h2 class="subtitle">
+        A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
+      </h2>
+      <pre id="npm"><code>npm install bulma</code></pre>
+      <div class="block">
+        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
+        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+      </div>
+      {% include carbon.html %}
+      <p class="hero-buttons">
+        <a class="button is-primary is-large" href="{{ site.download }}">
+          <span class="icon">
+            <i class="fa fa-download"></i>
+          </span>
+          <span>Download</span>
+          <small>v{{ site.version }}</small>
+        </a>
+        <a class="button is-large" href="{{ site.documentation }}">
+          View docs
+        </a>
+      </p>
+    </div>
+  </div>
+</section>
+
+<section class="hero is-primary">
+  <div class="hero-body">
+    <div class="container">
+      <nav class="columns">
+        <div class="column has-text-centered">
+          <span class="icon is-large" style="margin-right: -15px;">
+            <i class="fa fa-mobile"></i>
+          </span>
+          <span class="icon is-large">
+            <i class="fa fa-tablet"></i>
+          </span>
+          <span class="icon is-large" style="margin-right: 10px;">
+            <i class="fa fa-desktop"></i>
+          </span>
+          <p class="title is-4"><strong>Responsive</strong> design</p>
+        </div>
+        <div class="column has-text-centered">
+          <span class="icon is-large">
+            <i class="fa fa-css3"></i>
+          </span>
+          <p class="title is-4">Built with <strong>Flexbox</strong></p>
+        </div>
+        <div class="column has-text-centered">
+          <span class="icon is-large">
+            <i class="fa fa-github"></i>
+          </span>
+          <p class="title is-4">Open source on <strong><a href="{{ site.github }}">GitHub</a></strong></p>
+        </div>
+      </nav>
+    </div>
+  </div>
+</section>
+
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <a href="{{ site.baseurl }}/documentation/grid/columns">
+        <span class="icon is-large">
+          <i class="fa fa-pause"></i>
+        </span>
+        Simple <strong>columns</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
+    <div id="grid" class="columns">
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">1</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-info has-text-centered">
+          <p class="title">2</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-success has-text-centered">
+          <p class="title">3</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-warning has-text-centered">
+          <p class="title">4</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-danger has-text-centered">
+          <p class="title">5</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">6</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-info has-text-centered">
+          <p class="title">7</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-success has-text-centered">
+          <p class="title">8</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-warning has-text-centered">
+          <p class="title">9</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-danger has-text-centered">
+          <p class="title">10</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">11</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-info has-text-centered">
+          <p class="title">12</p>
+        </div>
+      </div>
+    </div>
+    <p class="control has-addons has-addons-centered">
+      <a id="add" class="button is-unselectable">Add column</a>
+      <a id="remove" class="button is-unselectable">Remove column</a>
+    </p>
+    <div id="message" class="message is-info">
+      <p class="message-header">Info</p>
+      <p class="message-body">While it's possible to add as many columns as you want, it is recommend to stick with <strong>12 columns</strong>.<br>
+      If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
+    </div>
+    <div id="markup">
+{% highlight html %}
+<div class="columns">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+  <div class="column">5</div>
+</div>
+{% endhighlight %}
+    </div>
+  </div>
+</section>
+
+<hr class="is-marginless">
+
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <a href="{{ site.baseurl }}/documentation/grid/tiles">
+        <span class="icon is-large">
+          <i class="fa fa-th-large"></i>
+        </span>
+        Magic <strong>tiles</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">A single element for a Metro UI CSS grid</h4>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child notification is-primary">
+              <p class="title">Vertical...</p>
+              <p class="subtitle">Top tile</p>
+            </article>
+            <article class="tile is-child notification is-warning">
+              <p class="title">...tiles</p>
+              <p class="subtitle">Bottom tile</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child notification is-info">
+              <p class="title">Middle tile</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child notification is-danger">
+            <p class="title">Wide tile</p>
+            <p class="subtitle">Aligned with the right tile</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-success">
+          <div class="content">
+            <p class="title">Tall tile</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child">
+        <!-- Any content you want here -->
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child">
+      <!-- Any content you want here -->
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+  </div>
+</section>
+
+<hr class="is-marginless">
+
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <a href="{{ site.baseurl }}/documentation/components/level/">
+        <span class="icon is-large">
+          <i class="fa fa-arrows-h"></i>
+        </span>
+        Flexible <strong>horizontal level</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
+    <nav class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <p class="title is-4">
+            <strong>123</strong> posts
+          </p>
+        </div>
+        <p class="level-item">
+          <a class="button is-success">
+            New
+          </a>
+        </p>
+        <div class="level-item">
+          <p class="control has-addons">
+            <input class="input" type="text" placeholder="Filter">
+            <button class="button">
+              Search
+            </button>
+          </p>
+        </div>
+      </div>
+      <div class="level-right">
+        <div class="level-item">
+          Show:
+        </div>
+        <p class="level-item">
+          <strong>All</strong>
+        </p>
+        <p class="level-item">
+          <a href="#">Published</a>
+        </p>
+        <p class="level-item">
+          <a href="#">Drafts</a>
+        </p>
+        <div class="level-item">
+          Sort:
+        </div>
+        <div class="level-item">
+          <span class="select">
+            <select>
+              <option>Date created</option>
+            </select>
+          </span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</section>
+
+<hr class="is-marginless">
+
+<section class="section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <h3 class="title is-2">
+          <a href="{{ site.baseurl }}/documentation/components/media-object/">
+            <span class="icon is-large">
+              <i class="fa fa-cubes"></i>
+            </span>
+            Versatile <strong>media object</strong>
+          </a>
+        </h3>
+        <h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
+      </div>
+
+      <div class="column">
+        <div class="box">
+          <article class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="http://placehold.it/128x128" alt="Image">
+              </figure>
+            </div>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+                  <br>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+                </p>
+              </div>
+              <nav class="level">
+                <div class="level-left">
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                  </a>
+                </div>
+              </nav>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="hero is-fullheight is-primary">
+  <div class="hero-head">
+    <div class="container">
+      <div class="tabs is-centered">
+        <ul>
+          <li><a>This is always at the top</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h3 class="title is-2">
+        <span class="icon is-large">
+          <i class="fa fa-arrows-v"></i>
+        </span>
+        <a href="{{ site.baseurl }}/documentation/layout/hero/">
+          Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
+    </div>
+  </div>
+
+  <div class="hero-foot">
+    <div class="container">
+      <div class="tabs is-centered">
+        <ul>
+          <li><a>And this at the bottom</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <h3 class="title is-2">
+          <a href="{{ site.baseurl }}/documentation/modifiers/syntax/">
+            <span class="icon is-large">
+              <i class="fa fa-cogs"></i>
+            </span>
+            Compose your element with <strong>modifier</strong> classes
+          </a>
+        </h3>
+        <h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
+      </div>
+      <div class="column">
+        <div class="block">
+          <p class="control">
+            <code>button</code>
+          </p>
+          <a class="button">Button</a>
+        </div>
+        <div class="block">
+          <p class="control">
+            <code>button is-primary</code>
+          </p>
+          <a class="button is-primary">Button</a>
+        </div>
+        <div class="block">
+          <p class="control">
+            <code>button is-primary is-large</code>
+          </p>
+          <a class="button is-primary is-large">Button</a>
+        </div>
+        <div class="block">
+          <p class="control">
+            <code>button is-primary is-large is-loading</code>
+          </p>
+          <a class="button is-primary is-large is-loading">Button</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="is-marginless">
+
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <a href="{{ site.baseurl }}/documentation/elements/box/">
+        <span class="icon is-large">
+          <i class="fa fa-asterisk"></i>
+        </span>
+        And all the usual <strong>elements</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="card">
+          <div class="card-image">
+            <figure class="image is-4by3">
+              <img src="http://placehold.it/300x225" alt="">
+            </figure>
+          </div>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-32x32">
+                  <img src="http://placehold.it/64x64" alt="Image">
+                </figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-5">Card</p>
+                <p class="subtitle is-6">Subtitle</p>
+              </div>
+            </div>
+
+            <div class="content">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+              <br>
+              <small>11:09 PM - 1 Jan 2016</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <p class="title">Title</p>
+        <p class="subtitle">Subtitle</p>
+        <div class="control is-grouped">
+          <p class="control">
+            <span class="select">
+              <select>
+                <option>Dropdown</option>
+              </select>
+            </span>
+          </p>
+          <p class="control is-expanded">
+            <input class="input" type="text" placeholder="Text input">
+          </p>
+        </div>
+        <p class="control">
+          <label class="checkbox">
+            <input type="checkbox">
+            Checkbox
+          </label>
+        </p>
+        <p class="control">
+          <label class="radio">
+            <input type="radio" name="question">
+            Radio
+          </label>
+          <label class="radio">
+            <input type="radio" name="question">
+            Buttons
+          </label>
+        </p>
+        <p class="control">
+          <button class="button is-primary">Button</button>
+        </p>
+        <div class="tabs is-boxed">
+          <ul>
+            <li class="is-active">
+              <a>
+                <span class="icon is-small"><i class="fa fa-inbox"></i></span>
+                <span>Inbox</span>
+              </a>
+            </li>
+            <li>
+              <a>
+                <span class="icon is-small"><i class="fa fa-user"></i></span>
+                <span>Profile</span>
+              </a>
+            </li>
+            <li>
+              <a>
+                <span class="icon is-small"><i class="fa fa-comments-o"></i></span>
+                <span>Comments</span>
+              </a>
+            </li>
+            <li>
+              <a>
+                <span class="icon is-small"><i class="fa fa-cog"></i></span>
+                <span>Settings</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <p class="block">
+          <span class="tag is-dark">Tag<button class="delete"></button></span>
+          <span class="tag is-info">Two<button class="delete"></button></span>
+          <span class="tag is-danger">Three<button class="delete"></button></span>
+        </p>
+        <div class="message is-warning">
+          <div class="message-header">
+            Hello world
+          </div>
+          <div class="message-body">
+            Message
+          </div>
+        </div>
+        <div class="notification is-success">
+          <button class="delete"></button>
+          Success!
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="is-marginless">
+
+<section class="section is-medium">
+  <div class="container">
+    <p class="title has-text-centered">Get started</p>
+    <div class="hero-buttons">
+      <a class="button is-info is-large" href="{{ site.documentation }}">
+        <span class="icon">
+          <i class="fa fa-book"></i>
+        </span>
+        <span>Check the <strong>Docs</strong></span>
+      </a>
+      <a class="button is-black is-large" href="{{ site.github }}">
+        <span class="icon">
+          <i class="fa fa-github"></i>
+        </span>
+        <span>Contribute</span>
+      </a>
+    </div>
+  </div>
+</section>

diff --git a/docs/javascript/Chart.js b/docs/javascript/Chart.js
new file mode 100644 (file)
index 0000000..e1215f9
--- /dev/null
+++ b/docs/javascript/Chart.js
@@ -0,0 +1,9214 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+
+},{}],2:[function(require,module,exports){
+/* MIT license */
+
+module.exports = {
+  rgb2hsl: rgb2hsl,
+  rgb2hsv: rgb2hsv,
+  rgb2hwb: rgb2hwb,
+  rgb2cmyk: rgb2cmyk,
+  rgb2keyword: rgb2keyword,
+  rgb2xyz: rgb2xyz,
+  rgb2lab: rgb2lab,
+  rgb2lch: rgb2lch,
+
+  hsl2rgb: hsl2rgb,
+  hsl2hsv: hsl2hsv,
+  hsl2hwb: hsl2hwb,
+  hsl2cmyk: hsl2cmyk,
+  hsl2keyword: hsl2keyword,
+
+  hsv2rgb: hsv2rgb,
+  hsv2hsl: hsv2hsl,
+  hsv2hwb: hsv2hwb,
+  hsv2cmyk: hsv2cmyk,
+  hsv2keyword: hsv2keyword,
+
+  hwb2rgb: hwb2rgb,
+  hwb2hsl: hwb2hsl,
+  hwb2hsv: hwb2hsv,
+  hwb2cmyk: hwb2cmyk,
+  hwb2keyword: hwb2keyword,
+
+  cmyk2rgb: cmyk2rgb,
+  cmyk2hsl: cmyk2hsl,
+  cmyk2hsv: cmyk2hsv,
+  cmyk2hwb: cmyk2hwb,
+  cmyk2keyword: cmyk2keyword,
+
+  keyword2rgb: keyword2rgb,
+  keyword2hsl: keyword2hsl,
+  keyword2hsv: keyword2hsv,
+  keyword2hwb: keyword2hwb,
+  keyword2cmyk: keyword2cmyk,
+  keyword2lab: keyword2lab,
+  keyword2xyz: keyword2xyz,
+
+  xyz2rgb: xyz2rgb,
+  xyz2lab: xyz2lab,
+  xyz2lch: xyz2lch,
+
+  lab2xyz: lab2xyz,
+  lab2rgb: lab2rgb,
+  lab2lch: lab2lch,
+
+  lch2lab: lch2lab,
+  lch2xyz: lch2xyz,
+  lch2rgb: lch2rgb
+}
+
+
+function rgb2hsl(rgb) {
+  var r = rgb[0]/255,
+      g = rgb[1]/255,
+      b = rgb[2]/255,
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      delta = max - min,
+      h, s, l;
+
+  if (max == min)
+    h = 0;
+  else if (r == max)
+    h = (g - b) / delta;
+  else if (g == max)
+    h = 2 + (b - r) / delta;
+  else if (b == max)
+    h = 4 + (r - g)/ delta;
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0)
+    h += 360;
+
+  l = (min + max) / 2;
+
+  if (max == min)
+    s = 0;
+  else if (l <= 0.5)
+    s = delta / (max + min);
+  else
+    s = delta / (2 - max - min);
+
+  return [h, s * 100, l * 100];
+}
+
+function rgb2hsv(rgb) {
+  var r = rgb[0],
+      g = rgb[1],
+      b = rgb[2],
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      delta = max - min,
+      h, s, v;
+
+  if (max == 0)
+    s = 0;
+  else
+    s = (delta/max * 1000)/10;
+
+  if (max == min)
+    h = 0;
+  else if (r == max)
+    h = (g - b) / delta;
+  else if (g == max)
+    h = 2 + (b - r) / delta;
+  else if (b == max)
+    h = 4 + (r - g) / delta;
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0)
+    h += 360;
+
+  v = ((max / 255) * 1000) / 10;
+
+  return [h, s, v];
+}
+
+function rgb2hwb(rgb) {
+  var r = rgb[0],
+      g = rgb[1],
+      b = rgb[2],
+      h = rgb2hsl(rgb)[0],
+      w = 1/255 * Math.min(r, Math.min(g, b)),
+      b = 1 - 1/255 * Math.max(r, Math.max(g, b));
+
+  return [h, w * 100, b * 100];
+}
+
+function rgb2cmyk(rgb) {
+  var r = rgb[0] / 255,
+      g = rgb[1] / 255,
+      b = rgb[2] / 255,
+      c, m, y, k;
+
+  k = Math.min(1 - r, 1 - g, 1 - b);
+  c = (1 - r - k) / (1 - k) || 0;
+  m = (1 - g - k) / (1 - k) || 0;
+  y = (1 - b - k) / (1 - k) || 0;
+  return [c * 100, m * 100, y * 100, k * 100];
+}
+
+function rgb2keyword(rgb) {
+  return reverseKeywords[JSON.stringify(rgb)];
+}
+
+function rgb2xyz(rgb) {
+  var r = rgb[0] / 255,
+      g = rgb[1] / 255,
+      b = rgb[2] / 255;
+
+  // assume sRGB
+  r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
+  g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
+  b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
+
+  var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
+  var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
+  var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
+
+  return [x * 100, y *100, z * 100];
+}
+
+function rgb2lab(rgb) {
+  var xyz = rgb2xyz(rgb),
+        x = xyz[0],
+        y = xyz[1],
+        z = xyz[2],
+        l, a, b;
+
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
+
+  l = (116 * y) - 16;
+  a = 500 * (x - y);
+  b = 200 * (y - z);
+
+  return [l, a, b];
+}
+
+function rgb2lch(args) {
+  return lab2lch(rgb2lab(args));
+}
+
+function hsl2rgb(hsl) {
+  var h = hsl[0] / 360,
+      s = hsl[1] / 100,
+      l = hsl[2] / 100,
+      t1, t2, t3, rgb, val;
+
+  if (s == 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5)
+    t2 = l * (1 + s);
+  else
+    t2 = l + s - l * s;
+  t1 = 2 * l - t2;
+
+  rgb = [0, 0, 0];
+  for (var i = 0; i < 3; i++) {
+    t3 = h + 1 / 3 * - (i - 1);
+    t3 < 0 && t3++;
+    t3 > 1 && t3--;
+
+    if (6 * t3 < 1)
+      val = t1 + (t2 - t1) * 6 * t3;
+    else if (2 * t3 < 1)
+      val = t2;
+    else if (3 * t3 < 2)
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    else
+      val = t1;
+
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+function hsl2hsv(hsl) {
+  var h = hsl[0],
+      s = hsl[1] / 100,
+      l = hsl[2] / 100,
+      sv, v;
+
+  if(l === 0) {
+      // no need to do calc on black
+      // also avoids divide by 0 error
+      return [0, 0, 0];
+  }
+
+  l *= 2;
+  s *= (l <= 1) ? l : 2 - l;
+  v = (l + s) / 2;
+  sv = (2 * s) / (l + s);
+  return [h, sv * 100, v * 100];
+}
+
+function hsl2hwb(args) {
+  return rgb2hwb(hsl2rgb(args));
+}
+
+function hsl2cmyk(args) {
+  return rgb2cmyk(hsl2rgb(args));
+}
+
+function hsl2keyword(args) {
+  return rgb2keyword(hsl2rgb(args));
+}
+
+
+function hsv2rgb(hsv) {
+  var h = hsv[0] / 60,
+      s = hsv[1] / 100,
+      v = hsv[2] / 100,
+      hi = Math.floor(h) % 6;
+
+  var f = h - Math.floor(h),
+      p = 255 * v * (1 - s),
+      q = 255 * v * (1 - (s * f)),
+      t = 255 * v * (1 - (s * (1 - f))),
+      v = 255 * v;
+
+  switch(hi) {
+    case 0:
+      return [v, t, p];
+    case 1:
+      return [q, v, p];
+    case 2:
+      return [p, v, t];
+    case 3:
+      return [p, q, v];
+    case 4:
+      return [t, p, v];
+    case 5:
+      return [v, p, q];
+  }
+}
+
+function hsv2hsl(hsv) {
+  var h = hsv[0],
+      s = hsv[1] / 100,
+      v = hsv[2] / 100,
+      sl, l;
+
+  l = (2 - s) * v;
+  sl = s * v;
+  sl /= (l <= 1) ? l : 2 - l;
+  sl = sl || 0;
+  l /= 2;
+  return [h, sl * 100, l * 100];
+}
+
+function hsv2hwb(args) {
+  return rgb2hwb(hsv2rgb(args))
+}
+
+function hsv2cmyk(args) {
+  return rgb2cmyk(hsv2rgb(args));
+}
+
+function hsv2keyword(args) {
+  return rgb2keyword(hsv2rgb(args));
+}
+
+// http://dev.w3.org/csswg/css-color/#hwb-to-rgb
+function hwb2rgb(hwb) {
+  var h = hwb[0] / 360,
+      wh = hwb[1] / 100,
+      bl = hwb[2] / 100,
+      ratio = wh + bl,
+      i, v, f, n;
+
+  // wh + bl cant be > 1
+  if (ratio > 1) {
+    wh /= ratio;
+    bl /= ratio;
+  }
+
+  i = Math.floor(6 * h);
+  v = 1 - bl;
+  f = 6 * h - i;
+  if ((i & 0x01) != 0) {
+    f = 1 - f;
+  }
+  n = wh + f * (v - wh);  // linear interpolation
+
+  switch (i) {
+    default:
+    case 6:
+    case 0: r = v; g = n; b = wh; break;
+    case 1: r = n; g = v; b = wh; break;
+    case 2: r = wh; g = v; b = n; break;
+    case 3: r = wh; g = n; b = v; break;
+    case 4: r = n; g = wh; b = v; break;
+    case 5: r = v; g = wh; b = n; break;
+  }
+
+  return [r * 255, g * 255, b * 255];
+}
+
+function hwb2hsl(args) {
+  return rgb2hsl(hwb2rgb(args));
+}
+
+function hwb2hsv(args) {
+  return rgb2hsv(hwb2rgb(args));
+}
+
+function hwb2cmyk(args) {
+  return rgb2cmyk(hwb2rgb(args));
+}
+
+function hwb2keyword(args) {
+  return rgb2keyword(hwb2rgb(args));
+}
+
+function cmyk2rgb(cmyk) {
+  var c = cmyk[0] / 100,
+      m = cmyk[1] / 100,
+      y = cmyk[2] / 100,
+      k = cmyk[3] / 100,
+      r, g, b;
+
+  r = 1 - Math.min(1, c * (1 - k) + k);
+  g = 1 - Math.min(1, m * (1 - k) + k);
+  b = 1 - Math.min(1, y * (1 - k) + k);
+  return [r * 255, g * 255, b * 255];
+}
+
+function cmyk2hsl(args) {
+  return rgb2hsl(cmyk2rgb(args));
+}
+
+function cmyk2hsv(args) {
+  return rgb2hsv(cmyk2rgb(args));
+}
+
+function cmyk2hwb(args) {
+  return rgb2hwb(cmyk2rgb(args));
+}
+
+function cmyk2keyword(args) {
+  return rgb2keyword(cmyk2rgb(args));
+}
+
+
+function xyz2rgb(xyz) {
+  var x = xyz[0] / 100,
+      y = xyz[1] / 100,
+      z = xyz[2] / 100,
+      r, g, b;
+
+  r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
+  g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
+  b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
+
+  // assume sRGB
+  r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
+    : r = (r * 12.92);
+
+  g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
+    : g = (g * 12.92);
+
+  b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
+    : b = (b * 12.92);
+
+  r = Math.min(Math.max(0, r), 1);
+  g = Math.min(Math.max(0, g), 1);
+  b = Math.min(Math.max(0, b), 1);
+
+  return [r * 255, g * 255, b * 255];
+}
+
+function xyz2lab(xyz) {
+  var x = xyz[0],
+      y = xyz[1],
+      z = xyz[2],
+      l, a, b;
+
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
+
+  l = (116 * y) - 16;
+  a = 500 * (x - y);
+  b = 200 * (y - z);
+
+  return [l, a, b];
+}
+
+function xyz2lch(args) {
+  return lab2lch(xyz2lab(args));
+}
+
+function lab2xyz(lab) {
+  var l = lab[0],
+      a = lab[1],
+      b = lab[2],
+      x, y, z, y2;
+
+  if (l <= 8) {
+    y = (l * 100) / 903.3;
+    y2 = (7.787 * (y / 100)) + (16 / 116);
+  } else {
+    y = 100 * Math.pow((l + 16) / 116, 3);
+    y2 = Math.pow(y / 100, 1/3);
+  }
+
+  x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
+
+  z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
+
+  return [x, y, z];
+}
+
+function lab2lch(lab) {
+  var l = lab[0],
+      a = lab[1],
+      b = lab[2],
+      hr, h, c;
+
+  hr = Math.atan2(b, a);
+  h = hr * 360 / 2 / Math.PI;
+  if (h < 0) {
+    h += 360;
+  }
+  c = Math.sqrt(a * a + b * b);
+  return [l, c, h];
+}
+
+function lab2rgb(args) {
+  return xyz2rgb(lab2xyz(args));
+}
+
+function lch2lab(lch) {
+  var l = lch[0],
+      c = lch[1],
+      h = lch[2],
+      a, b, hr;
+
+  hr = h / 360 * 2 * Math.PI;
+  a = c * Math.cos(hr);
+  b = c * Math.sin(hr);
+  return [l, a, b];
+}
+
+function lch2xyz(args) {
+  return lab2xyz(lch2lab(args));
+}
+
+function lch2rgb(args) {
+  return lab2rgb(lch2lab(args));
+}
+
+function keyword2rgb(keyword) {
+  return cssKeywords[keyword];
+}
+
+function keyword2hsl(args) {
+  return rgb2hsl(keyword2rgb(args));
+}
+
+function keyword2hsv(args) {
+  return rgb2hsv(keyword2rgb(args));
+}
+
+function keyword2hwb(args) {
+  return rgb2hwb(keyword2rgb(args));
+}
+
+function keyword2cmyk(args) {
+  return rgb2cmyk(keyword2rgb(args));
+}
+
+function keyword2lab(args) {
+  return rgb2lab(keyword2rgb(args));
+}
+
+function keyword2xyz(args) {
+  return rgb2xyz(keyword2rgb(args));
+}
+
+var cssKeywords = {
+  aliceblue:  [240,248,255],
+  antiquewhite: [250,235,215],
+  aqua: [0,255,255],
+  aquamarine: [127,255,212],
+  azure:  [240,255,255],
+  beige:  [245,245,220],
+  bisque: [255,228,196],
+  black:  [0,0,0],
+  blanchedalmond: [255,235,205],
+  blue: [0,0,255],
+  blueviolet: [138,43,226],
+  brown:  [165,42,42],
+  burlywood:  [222,184,135],
+  cadetblue:  [95,158,160],
+  chartreuse: [127,255,0],
+  chocolate:  [210,105,30],
+  coral:  [255,127,80],
+  cornflowerblue: [100,149,237],
+  cornsilk: [255,248,220],
+  crimson:  [220,20,60],
+  cyan: [0,255,255],
+  darkblue: [0,0,139],
+  darkcyan: [0,139,139],
+  darkgoldenrod:  [184,134,11],
+  darkgray: [169,169,169],
+  darkgreen:  [0,100,0],
+  darkgrey: [169,169,169],
+  darkkhaki:  [189,183,107],
+  darkmagenta:  [139,0,139],
+  darkolivegreen: [85,107,47],
+  darkorange: [255,140,0],
+  darkorchid: [153,50,204],
+  darkred:  [139,0,0],
+  darksalmon: [233,150,122],
+  darkseagreen: [143,188,143],
+  darkslateblue:  [72,61,139],
+  darkslategray:  [47,79,79],
+  darkslategrey:  [47,79,79],
+  darkturquoise:  [0,206,209],
+  darkviolet: [148,0,211],
+  deeppink: [255,20,147],
+  deepskyblue:  [0,191,255],
+  dimgray:  [105,105,105],
+  dimgrey:  [105,105,105],
+  dodgerblue: [30,144,255],
+  firebrick:  [178,34,34],
+  floralwhite:  [255,250,240],
+  forestgreen:  [34,139,34],
+  fuchsia:  [255,0,255],
+  gainsboro:  [220,220,220],
+  ghostwhite: [248,248,255],
+  gold: [255,215,0],
+  goldenrod:  [218,165,32],
+  gray: [128,128,128],
+  green:  [0,128,0],
+  greenyellow:  [173,255,47],
+  grey: [128,128,128],
+  honeydew: [240,255,240],
+  hotpink:  [255,105,180],
+  indianred:  [205,92,92],
+  indigo: [75,0,130],
+  ivory:  [255,255,240],
+  khaki:  [240,230,140],
+  lavender: [230,230,250],
+  lavenderblush:  [255,240,245],
+  lawngreen:  [124,252,0],
+  lemonchiffon: [255,250,205],
+  lightblue:  [173,216,230],
+  lightcoral: [240,128,128],
+  lightcyan:  [224,255,255],
+  lightgoldenrodyellow: [250,250,210],
+  lightgray:  [211,211,211],
+  lightgreen: [144,238,144],
+  lightgrey:  [211,211,211],
+  lightpink:  [255,182,193],
+  lightsalmon:  [255,160,122],
+  lightseagreen:  [32,178,170],
+  lightskyblue: [135,206,250],
+  lightslategray: [119,136,153],
+  lightslategrey: [119,136,153],
+  lightsteelblue: [176,196,222],
+  lightyellow:  [255,255,224],
+  lime: [0,255,0],
+  limegreen:  [50,205,50],
+  linen:  [250,240,230],
+  magenta:  [255,0,255],
+  maroon: [128,0,0],
+  mediumaquamarine: [102,205,170],
+  mediumblue: [0,0,205],
+  mediumorchid: [186,85,211],
+  mediumpurple: [147,112,219],
+  mediumseagreen: [60,179,113],
+  mediumslateblue:  [123,104,238],
+  mediumspringgreen:  [0,250,154],
+  mediumturquoise:  [72,209,204],
+  mediumvioletred:  [199,21,133],
+  midnightblue: [25,25,112],
+  mintcream:  [245,255,250],
+  mistyrose:  [255,228,225],
+  moccasin: [255,228,181],
+  navajowhite:  [255,222,173],
+  navy: [0,0,128],
+  oldlace:  [253,245,230],
+  olive:  [128,128,0],
+  olivedrab:  [107,142,35],
+  orange: [255,165,0],
+  orangered:  [255,69,0],
+  orchid: [218,112,214],
+  palegoldenrod:  [238,232,170],
+  palegreen:  [152,251,152],
+  paleturquoise:  [175,238,238],
+  palevioletred:  [219,112,147],
+  papayawhip: [255,239,213],
+  peachpuff:  [255,218,185],
+  peru: [205,133,63],
+  pink: [255,192,203],
+  plum: [221,160,221],
+  powderblue: [176,224,230],
+  purple: [128,0,128],
+  rebeccapurple: [102, 51, 153],
+  red:  [255,0,0],
+  rosybrown:  [188,143,143],
+  royalblue:  [65,105,225],
+  saddlebrown:  [139,69,19],
+  salmon: [250,128,114],
+  sandybrown: [244,164,96],
+  seagreen: [46,139,87],
+  seashell: [255,245,238],
+  sienna: [160,82,45],
+  silver: [192,192,192],
+  skyblue:  [135,206,235],
+  slateblue:  [106,90,205],
+  slategray:  [112,128,144],
+  slategrey:  [112,128,144],
+  snow: [255,250,250],
+  springgreen:  [0,255,127],
+  steelblue:  [70,130,180],
+  tan:  [210,180,140],
+  teal: [0,128,128],
+  thistle:  [216,191,216],
+  tomato: [255,99,71],
+  turquoise:  [64,224,208],
+  violet: [238,130,238],
+  wheat:  [245,222,179],
+  white:  [255,255,255],
+  whitesmoke: [245,245,245],
+  yellow: [255,255,0],
+  yellowgreen:  [154,205,50]
+};
+
+var reverseKeywords = {};
+for (var key in cssKeywords) {
+  reverseKeywords[JSON.stringify(cssKeywords[key])] = key;
+}
+
+},{}],3:[function(require,module,exports){
+var conversions = require("./conversions");
+
+var convert = function() {
+   return new Converter();
+}
+
+for (var func in conversions) {
+  // export Raw versions
+  convert[func + "Raw"] =  (function(func) {
+    // accept array or plain args
+    return function(arg) {
+      if (typeof arg == "number")
+        arg = Array.prototype.slice.call(arguments);
+      return conversions[func](arg);
+    }
+  })(func);
+
+  var pair = /(\w+)2(\w+)/.exec(func),
+      from = pair[1],
+      to = pair[2];
+
+  // export rgb2hsl and ["rgb"]["hsl"]
+  convert[from] = convert[from] || {};
+
+  convert[from][to] = convert[func] = (function(func) { 
+    return function(arg) {
+      if (typeof arg == "number")
+        arg = Array.prototype.slice.call(arguments);
+      
+      var val = conversions[func](arg);
+      if (typeof val == "string" || val === undefined)
+        return val; // keyword
+
+      for (var i = 0; i < val.length; i++)
+        val[i] = Math.round(val[i]);
+      return val;
+    }
+  })(func);
+}
+
+
+/* Converter does lazy conversion and caching */
+var Converter = function() {
+   this.convs = {};
+};
+
+/* Either get the values for a space or
+  set the values for a space, depending on args */
+Converter.prototype.routeSpace = function(space, args) {
+   var values = args[0];
+   if (values === undefined) {
+      // color.rgb()
+      return this.getValues(space);
+   }
+   // color.rgb(10, 10, 10)
+   if (typeof values == "number") {
+      values = Array.prototype.slice.call(args);        
+   }
+
+   return this.setValues(space, values);
+};
+  
+/* Set the values for a space, invalidating cache */
+Converter.prototype.setValues = function(space, values) {
+   this.space = space;
+   this.convs = {};
+   this.convs[space] = values;
+   return this;
+};
+
+/* Get the values for a space. If there's already
+  a conversion for the space, fetch it, otherwise
+  compute it */
+Converter.prototype.getValues = function(space) {
+   var vals = this.convs[space];
+   if (!vals) {
+      var fspace = this.space,
+          from = this.convs[fspace];
+      vals = convert[fspace][space](from);
+
+      this.convs[space] = vals;
+   }
+  return vals;
+};
+
+["rgb", "hsl", "hsv", "cmyk", "keyword"].forEach(function(space) {
+   Converter.prototype[space] = function(vals) {
+      return this.routeSpace(space, arguments);
+   }
+});
+
+module.exports = convert;
+},{"./conversions":2}],4:[function(require,module,exports){
+/* MIT license */
+var colorNames = require('color-name');
+
+module.exports = {
+   getRgba: getRgba,
+   getHsla: getHsla,
+   getRgb: getRgb,
+   getHsl: getHsl,
+   getHwb: getHwb,
+   getAlpha: getAlpha,
+
+   hexString: hexString,
+   rgbString: rgbString,
+   rgbaString: rgbaString,
+   percentString: percentString,
+   percentaString: percentaString,
+   hslString: hslString,
+   hslaString: hslaString,
+   hwbString: hwbString,
+   keyword: keyword
+}
+
+function getRgba(string) {
+   if (!string) {
+      return;
+   }
+   var abbr =  /^#([a-fA-F0-9]{3})$/,
+       hex =  /^#([a-fA-F0-9]{6})$/,
+       rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,
+       per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,
+       keyword = /(\w+)/;
+
+   var rgb = [0, 0, 0],
+       a = 1,
+       match = string.match(abbr);
+   if (match) {
+      match = match[1];
+      for (var i = 0; i < rgb.length; i++) {
+         rgb[i] = parseInt(match[i] + match[i], 16);
+      }
+   }
+   else if (match = string.match(hex)) {
+      match = match[1];
+      for (var i = 0; i < rgb.length; i++) {
+         rgb[i] = parseInt(match.slice(i * 2, i * 2 + 2), 16);
+      }
+   }
+   else if (match = string.match(rgba)) {
+      for (var i = 0; i < rgb.length; i++) {
+         rgb[i] = parseInt(match[i + 1]);
+      }
+      a = parseFloat(match[4]);
+   }
+   else if (match = string.match(per)) {
+      for (var i = 0; i < rgb.length; i++) {
+         rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
+      }
+      a = parseFloat(match[4]);
+   }
+   else if (match = string.match(keyword)) {
+      if (match[1] == "transparent") {
+         return [0, 0, 0, 0];
+      }
+      rgb = colorNames[match[1]];
+      if (!rgb) {
+         return;
+      }
+   }
+
+   for (var i = 0; i < rgb.length; i++) {
+      rgb[i] = scale(rgb[i], 0, 255);
+   }
+   if (!a && a != 0) {
+      a = 1;
+   }
+   else {
+      a = scale(a, 0, 1);
+   }
+   rgb[3] = a;
+   return rgb;
+}
+
+function getHsla(string) {
+   if (!string) {
+      return;
+   }
+   var hsl = /^hsla?\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
+   var match = string.match(hsl);
+   if (match) {
+      var alpha = parseFloat(match[4]);
+      var h = scale(parseInt(match[1]), 0, 360),
+          s = scale(parseFloat(match[2]), 0, 100),
+          l = scale(parseFloat(match[3]), 0, 100),
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, s, l, a];
+   }
+}
+
+function getHwb(string) {
+   if (!string) {
+      return;
+   }
+   var hwb = /^hwb\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
+   var match = string.match(hwb);
+   if (match) {
+    var alpha = parseFloat(match[4]);
+      var h = scale(parseInt(match[1]), 0, 360),
+          w = scale(parseFloat(match[2]), 0, 100),
+          b = scale(parseFloat(match[3]), 0, 100),
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, w, b, a];
+   }
+}
+
+function getRgb(string) {
+   var rgba = getRgba(string);
+   return rgba && rgba.slice(0, 3);
+}
+
+function getHsl(string) {
+  var hsla = getHsla(string);
+  return hsla && hsla.slice(0, 3);
+}
+
+function getAlpha(string) {
+   var vals = getRgba(string);
+   if (vals) {
+      return vals[3];
+   }
+   else if (vals = getHsla(string)) {
+      return vals[3];
+   }
+   else if (vals = getHwb(string)) {
+      return vals[3];
+   }
+}
+
+// generators
+function hexString(rgb) {
+   return "#" + hexDouble(rgb[0]) + hexDouble(rgb[1])
+              + hexDouble(rgb[2]);
+}
+
+function rgbString(rgba, alpha) {
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
+      return rgbaString(rgba, alpha);
+   }
+   return "rgb(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ")";
+}
+
+function rgbaString(rgba, alpha) {
+   if (alpha === undefined) {
+      alpha = (rgba[3] !== undefined ? rgba[3] : 1);
+   }
+   return "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2]
+           + ", " + alpha + ")";
+}
+
+function percentString(rgba, alpha) {
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
+      return percentaString(rgba, alpha);
+   }
+   var r = Math.round(rgba[0]/255 * 100),
+       g = Math.round(rgba[1]/255 * 100),
+       b = Math.round(rgba[2]/255 * 100);
+
+   return "rgb(" + r + "%, " + g + "%, " + b + "%)";
+}
+
+function percentaString(rgba, alpha) {
+   var r = Math.round(rgba[0]/255 * 100),
+       g = Math.round(rgba[1]/255 * 100),
+       b = Math.round(rgba[2]/255 * 100);
+   return "rgba(" + r + "%, " + g + "%, " + b + "%, " + (alpha || rgba[3] || 1) + ")";
+}
+
+function hslString(hsla, alpha) {
+   if (alpha < 1 || (hsla[3] && hsla[3] < 1)) {
+      return hslaString(hsla, alpha);
+   }
+   return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
+}
+
+function hslaString(hsla, alpha) {
+   if (alpha === undefined) {
+      alpha = (hsla[3] !== undefined ? hsla[3] : 1);
+   }
+   return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, "
+           + alpha + ")";
+}
+
+// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
+// (hwb have alpha optional & 1 is default value)
+function hwbString(hwb, alpha) {
+   if (alpha === undefined) {
+      alpha = (hwb[3] !== undefined ? hwb[3] : 1);
+   }
+   return "hwb(" + hwb[0] + ", " + hwb[1] + "%, " + hwb[2] + "%"
+           + (alpha !== undefined && alpha !== 1 ? ", " + alpha : "") + ")";
+}
+
+function keyword(rgb) {
+  return reverseNames[rgb.slice(0, 3)];
+}
+
+// helpers
+function scale(num, min, max) {
+   return Math.min(Math.max(min, num), max);
+}
+
+function hexDouble(num) {
+  var str = num.toString(16).toUpperCase();
+  return (str.length < 2) ? "0" + str : str;
+}
+
+
+//create a list of reverse color names
+var reverseNames = {};
+for (var name in colorNames) {
+   reverseNames[colorNames[name]] = name;
+}
+
+},{"color-name":5}],5:[function(require,module,exports){
+module.exports = {\r
+       "aliceblue": [240, 248, 255],\r
+       "antiquewhite": [250, 235, 215],\r
+       "aqua": [0, 255, 255],\r
+       "aquamarine": [127, 255, 212],\r
+       "azure": [240, 255, 255],\r
+       "beige": [245, 245, 220],\r
+       "bisque": [255, 228, 196],\r
+       "black": [0, 0, 0],\r
+       "blanchedalmond": [255, 235, 205],\r
+       "blue": [0, 0, 255],\r
+       "blueviolet": [138, 43, 226],\r
+       "brown": [165, 42, 42],\r
+       "burlywood": [222, 184, 135],\r
+       "cadetblue": [95, 158, 160],\r
+       "chartreuse": [127, 255, 0],\r
+       "chocolate": [210, 105, 30],\r
+       "coral": [255, 127, 80],\r
+       "cornflowerblue": [100, 149, 237],\r
+       "cornsilk": [255, 248, 220],\r
+       "crimson": [220, 20, 60],\r
+       "cyan": [0, 255, 255],\r
+       "darkblue": [0, 0, 139],\r
+       "darkcyan": [0, 139, 139],\r
+       "darkgoldenrod": [184, 134, 11],\r
+       "darkgray": [169, 169, 169],\r
+       "darkgreen": [0, 100, 0],\r
+       "darkgrey": [169, 169, 169],\r
+       "darkkhaki": [189, 183, 107],\r
+       "darkmagenta": [139, 0, 139],\r
+       "darkolivegreen": [85, 107, 47],\r
+       "darkorange": [255, 140, 0],\r
+       "darkorchid": [153, 50, 204],\r
+       "darkred": [139, 0, 0],\r
+       "darksalmon": [233, 150, 122],\r
+       "darkseagreen": [143, 188, 143],\r
+       "darkslateblue": [72, 61, 139],\r
+       "darkslategray": [47, 79, 79],\r
+       "darkslategrey": [47, 79, 79],\r
+       "darkturquoise": [0, 206, 209],\r
+       "darkviolet": [148, 0, 211],\r
+       "deeppink": [255, 20, 147],\r
+       "deepskyblue": [0, 191, 255],\r
+       "dimgray": [105, 105, 105],\r
+       "dimgrey": [105, 105, 105],\r
+       "dodgerblue": [30, 144, 255],\r
+       "firebrick": [178, 34, 34],\r
+       "floralwhite": [255, 250, 240],\r
+       "forestgreen": [34, 139, 34],\r
+       "fuchsia": [255, 0, 255],\r
+       "gainsboro": [220, 220, 220],\r
+       "ghostwhite": [248, 248, 255],\r
+       "gold": [255, 215, 0],\r
+       "goldenrod": [218, 165, 32],\r
+       "gray": [128, 128, 128],\r
+       "green": [0, 128, 0],\r
+       "greenyellow": [173, 255, 47],\r
+       "grey": [128, 128, 128],\r
+       "honeydew": [240, 255, 240],\r
+       "hotpink": [255, 105, 180],\r
+       "indianred": [205, 92, 92],\r
+       "indigo": [75, 0, 130],\r
+       "ivory": [255, 255, 240],\r
+       "khaki": [240, 230, 140],\r
+       "lavender": [230, 230, 250],\r
+       "lavenderblush": [255, 240, 245],\r
+       "lawngreen": [124, 252, 0],\r
+       "lemonchiffon": [255, 250, 205],\r
+       "lightblue": [173, 216, 230],\r
+       "lightcoral": [240, 128, 128],\r
+       "lightcyan": [224, 255, 255],\r
+       "lightgoldenrodyellow": [250, 250, 210],\r
+       "lightgray": [211, 211, 211],\r
+       "lightgreen": [144, 238, 144],\r
+       "lightgrey": [211, 211, 211],\r
+       "lightpink": [255, 182, 193],\r
+       "lightsalmon": [255, 160, 122],\r
+       "lightseagreen": [32, 178, 170],\r
+       "lightskyblue": [135, 206, 250],\r
+       "lightslategray": [119, 136, 153],\r
+       "lightslategrey": [119, 136, 153],\r
+       "lightsteelblue": [176, 196, 222],\r
+       "lightyellow": [255, 255, 224],\r
+       "lime": [0, 255, 0],\r
+       "limegreen": [50, 205, 50],\r
+       "linen": [250, 240, 230],\r
+       "magenta": [255, 0, 255],\r
+       "maroon": [128, 0, 0],\r
+       "mediumaquamarine": [102, 205, 170],\r
+       "mediumblue": [0, 0, 205],\r
+       "mediumorchid": [186, 85, 211],\r
+       "mediumpurple": [147, 112, 219],\r
+       "mediumseagreen": [60, 179, 113],\r
+       "mediumslateblue": [123, 104, 238],\r
+       "mediumspringgreen": [0, 250, 154],\r
+       "mediumturquoise": [72, 209, 204],\r
+       "mediumvioletred": [199, 21, 133],\r
+       "midnightblue": [25, 25, 112],\r
+       "mintcream": [245, 255, 250],\r
+       "mistyrose": [255, 228, 225],\r
+       "moccasin": [255, 228, 181],\r
+       "navajowhite": [255, 222, 173],\r
+       "navy": [0, 0, 128],\r
+       "oldlace": [253, 245, 230],\r
+       "olive": [128, 128, 0],\r
+       "olivedrab": [107, 142, 35],\r
+       "orange": [255, 165, 0],\r
+       "orangered": [255, 69, 0],\r
+       "orchid": [218, 112, 214],\r
+       "palegoldenrod": [238, 232, 170],\r
+       "palegreen": [152, 251, 152],\r
+       "paleturquoise": [175, 238, 238],\r
+       "palevioletred": [219, 112, 147],\r
+       "papayawhip": [255, 239, 213],\r
+       "peachpuff": [255, 218, 185],\r
+       "peru": [205, 133, 63],\r
+       "pink": [255, 192, 203],\r
+       "plum": [221, 160, 221],\r
+       "powderblue": [176, 224, 230],\r
+       "purple": [128, 0, 128],\r
+       "rebeccapurple": [102, 51, 153],\r
+       "red": [255, 0, 0],\r
+       "rosybrown": [188, 143, 143],\r
+       "royalblue": [65, 105, 225],\r
+       "saddlebrown": [139, 69, 19],\r
+       "salmon": [250, 128, 114],\r
+       "sandybrown": [244, 164, 96],\r
+       "seagreen": [46, 139, 87],\r
+       "seashell": [255, 245, 238],\r
+       "sienna": [160, 82, 45],\r
+       "silver": [192, 192, 192],\r
+       "skyblue": [135, 206, 235],\r
+       "slateblue": [106, 90, 205],\r
+       "slategray": [112, 128, 144],\r
+       "slategrey": [112, 128, 144],\r
+       "snow": [255, 250, 250],\r
+       "springgreen": [0, 255, 127],\r
+       "steelblue": [70, 130, 180],\r
+       "tan": [210, 180, 140],\r
+       "teal": [0, 128, 128],\r
+       "thistle": [216, 191, 216],\r
+       "tomato": [255, 99, 71],\r
+       "turquoise": [64, 224, 208],\r
+       "violet": [238, 130, 238],\r
+       "wheat": [245, 222, 179],\r
+       "white": [255, 255, 255],\r
+       "whitesmoke": [245, 245, 245],\r
+       "yellow": [255, 255, 0],\r
+       "yellowgreen": [154, 205, 50]\r
+};
+},{}],6:[function(require,module,exports){
+/* MIT license */
+
+var convert = require("color-convert"),
+  string = require("color-string");
+
+var Color = function(obj) {
+  if (obj instanceof Color) return obj;
+  if (!(this instanceof Color)) return new Color(obj);
+
+  this.values = {
+    rgb: [0, 0, 0],
+    hsl: [0, 0, 0],
+    hsv: [0, 0, 0],
+    hwb: [0, 0, 0],
+    cmyk: [0, 0, 0, 0],
+    alpha: 1
+  }
+
+  // parse Color() argument
+  if (typeof obj == "string") {
+    var vals = string.getRgba(obj);
+    if (vals) {
+      this.setValues("rgb", vals);
+    } else if (vals = string.getHsla(obj)) {
+      this.setValues("hsl", vals);
+    } else if (vals = string.getHwb(obj)) {
+      this.setValues("hwb", vals);
+    } else {
+      throw new Error("Unable to parse color from string \"" + obj + "\"");
+    }
+  } else if (typeof obj == "object") {
+    var vals = obj;
+    if (vals["r"] !== undefined || vals["red"] !== undefined) {
+      this.setValues("rgb", vals)
+    } else if (vals["l"] !== undefined || vals["lightness"] !== undefined) {
+      this.setValues("hsl", vals)
+    } else if (vals["v"] !== undefined || vals["value"] !== undefined) {
+      this.setValues("hsv", vals)
+    } else if (vals["w"] !== undefined || vals["whiteness"] !== undefined) {
+      this.setValues("hwb", vals)
+    } else if (vals["c"] !== undefined || vals["cyan"] !== undefined) {
+      this.setValues("cmyk", vals)
+    } else {
+      throw new Error("Unable to parse color from object " + JSON.stringify(obj));
+    }
+  }
+}
+
+Color.prototype = {
+  rgb: function(vals) {
+    return this.setSpace("rgb", arguments);
+  },
+  hsl: function(vals) {
+    return this.setSpace("hsl", arguments);
+  },
+  hsv: function(vals) {
+    return this.setSpace("hsv", arguments);
+  },
+  hwb: function(vals) {
+    return this.setSpace("hwb", arguments);
+  },
+  cmyk: function(vals) {
+    return this.setSpace("cmyk", arguments);
+  },
+
+  rgbArray: function() {
+    return this.values.rgb;
+  },
+  hslArray: function() {
+    return this.values.hsl;
+  },
+  hsvArray: function() {
+    return this.values.hsv;
+  },
+  hwbArray: function() {
+    if (this.values.alpha !== 1) {
+      return this.values.hwb.concat([this.values.alpha])
+    }
+    return this.values.hwb;
+  },
+  cmykArray: function() {
+    return this.values.cmyk;
+  },
+  rgbaArray: function() {
+    var rgb = this.values.rgb;
+    return rgb.concat([this.values.alpha]);
+  },
+  hslaArray: function() {
+    var hsl = this.values.hsl;
+    return hsl.concat([this.values.alpha]);
+  },
+  alpha: function(val) {
+    if (val === undefined) {
+      return this.values.alpha;
+    }
+    this.setValues("alpha", val);
+    return this;
+  },
+
+  red: function(val) {
+    return this.setChannel("rgb", 0, val);
+  },
+  green: function(val) {
+    return this.setChannel("rgb", 1, val);
+  },
+  blue: function(val) {
+    return this.setChannel("rgb", 2, val);
+  },
+  hue: function(val) {
+    return this.setChannel("hsl", 0, val);
+  },
+  saturation: function(val) {
+    return this.setChannel("hsl", 1, val);
+  },
+  lightness: function(val) {
+    return this.setChannel("hsl", 2, val);
+  },
+  saturationv: function(val) {
+    return this.setChannel("hsv", 1, val);
+  },
+  whiteness: function(val) {
+    return this.setChannel("hwb", 1, val);
+  },
+  blackness: function(val) {
+    return this.setChannel("hwb", 2, val);
+  },
+  value: function(val) {
+    return this.setChannel("hsv", 2, val);
+  },
+  cyan: function(val) {
+    return this.setChannel("cmyk", 0, val);
+  },
+  magenta: function(val) {
+    return this.setChannel("cmyk", 1, val);
+  },
+  yellow: function(val) {
+    return this.setChannel("cmyk", 2, val);
+  },
+  black: function(val) {
+    return this.setChannel("cmyk", 3, val);
+  },
+
+  hexString: function() {
+    return string.hexString(this.values.rgb);
+  },
+  rgbString: function() {
+    return string.rgbString(this.values.rgb, this.values.alpha);
+  },
+  rgbaString: function() {
+    return string.rgbaString(this.values.rgb, this.values.alpha);
+  },
+  percentString: function() {
+    return string.percentString(this.values.rgb, this.values.alpha);
+  },
+  hslString: function() {
+    return string.hslString(this.values.hsl, this.values.alpha);
+  },
+  hslaString: function() {
+    return string.hslaString(this.values.hsl, this.values.alpha);
+  },
+  hwbString: function() {
+    return string.hwbString(this.values.hwb, this.values.alpha);
+  },
+  keyword: function() {
+    return string.keyword(this.values.rgb, this.values.alpha);
+  },
+
+  rgbNumber: function() {
+    return (this.values.rgb[0] << 16) | (this.values.rgb[1] << 8) | this.values.rgb[2];
+  },
+
+  luminosity: function() {
+    // http://www.w3.org/TR/WCAG20/#relativeluminancedef
+    var rgb = this.values.rgb;
+    var lum = [];
+    for (var i = 0; i < rgb.length; i++) {
+      var chan = rgb[i] / 255;
+      lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4)
+    }
+    return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+  },
+
+  contrast: function(color2) {
+    // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
+    var lum1 = this.luminosity();
+    var lum2 = color2.luminosity();
+    if (lum1 > lum2) {
+      return (lum1 + 0.05) / (lum2 + 0.05)
+    };
+    return (lum2 + 0.05) / (lum1 + 0.05);
+  },
+
+  level: function(color2) {
+    var contrastRatio = this.contrast(color2);
+    return (contrastRatio >= 7.1) ? 'AAA' : (contrastRatio >= 4.5) ? 'AA' : '';
+  },
+
+  dark: function() {
+    // YIQ equation from http://24ways.org/2010/calculating-color-contrast
+    var rgb = this.values.rgb,
+      yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    return yiq < 128;
+  },
+
+  light: function() {
+    return !this.dark();
+  },
+
+  negate: function() {
+    var rgb = []
+    for (var i = 0; i < 3; i++) {
+      rgb[i] = 255 - this.values.rgb[i];
+    }
+    this.setValues("rgb", rgb);
+    return this;
+  },
+
+  lighten: function(ratio) {
+    this.values.hsl[2] += this.values.hsl[2] * ratio;
+    this.setValues("hsl", this.values.hsl);
+    return this;
+  },
+
+  darken: function(ratio) {
+    this.values.hsl[2] -= this.values.hsl[2] * ratio;
+    this.setValues("hsl", this.values.hsl);
+    return this;
+  },
+
+  saturate: function(ratio) {
+    this.values.hsl[1] += this.values.hsl[1] * ratio;
+    this.setValues("hsl", this.values.hsl);
+    return this;
+  },
+
+  desaturate: function(ratio) {
+    this.values.hsl[1] -= this.values.hsl[1] * ratio;
+    this.setValues("hsl", this.values.hsl);
+    return this;
+  },
+
+  whiten: function(ratio) {
+    this.values.hwb[1] += this.values.hwb[1] * ratio;
+    this.setValues("hwb", this.values.hwb);
+    return this;
+  },
+
+  blacken: function(ratio) {
+    this.values.hwb[2] += this.values.hwb[2] * ratio;
+    this.setValues("hwb", this.values.hwb);
+    return this;
+  },
+
+  greyscale: function() {
+    var rgb = this.values.rgb;
+    // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
+    var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
+    this.setValues("rgb", [val, val, val]);
+    return this;
+  },
+
+  clearer: function(ratio) {
+    this.setValues("alpha", this.values.alpha - (this.values.alpha * ratio));
+    return this;
+  },
+
+  opaquer: function(ratio) {
+    this.setValues("alpha", this.values.alpha + (this.values.alpha * ratio));
+    return this;
+  },
+
+  rotate: function(degrees) {
+    var hue = this.values.hsl[0];
+    hue = (hue + degrees) % 360;
+    hue = hue < 0 ? 360 + hue : hue;
+    this.values.hsl[0] = hue;
+    this.setValues("hsl", this.values.hsl);
+    return this;
+  },
+
+  mix: function(color2, weight) {
+    weight = 1 - (weight == null ? 0.5 : weight);
+
+    // algorithm from Sass's mix(). Ratio of first color in mix is
+    // determined by the alphas of both colors and the weight
+    var t1 = weight * 2 - 1,
+      d = this.alpha() - color2.alpha();
+
+    var weight1 = (((t1 * d == -1) ? t1 : (t1 + d) / (1 + t1 * d)) + 1) / 2;
+    var weight2 = 1 - weight1;
+
+    var rgb = this.rgbArray();
+    var rgb2 = color2.rgbArray();
+
+    for (var i = 0; i < rgb.length; i++) {
+      rgb[i] = rgb[i] * weight1 + rgb2[i] * weight2;
+    }
+    this.setValues("rgb", rgb);
+
+    var alpha = this.alpha() * weight + color2.alpha() * (1 - weight);
+    this.setValues("alpha", alpha);
+
+    return this;
+  },
+
+  toJSON: function() {
+    return this.rgb();
+  },
+
+  clone: function() {
+    return new Color(this.rgb());
+  }
+}
+
+
+Color.prototype.getValues = function(space) {
+  var vals = {};
+  for (var i = 0; i < space.length; i++) {
+    vals[space.charAt(i)] = this.values[space][i];
+  }
+  if (this.values.alpha != 1) {
+    vals["a"] = this.values.alpha;
+  }
+  // {r: 255, g: 255, b: 255, a: 0.4}
+  return vals;
+}
+
+Color.prototype.setValues = function(space, vals) {
+  var spaces = {
+    "rgb": ["red", "green", "blue"],
+    "hsl": ["hue", "saturation", "lightness"],
+    "hsv": ["hue", "saturation", "value"],
+    "hwb": ["hue", "whiteness", "blackness"],
+    "cmyk": ["cyan", "magenta", "yellow", "black"]
+  };
+
+  var maxes = {
+    "rgb": [255, 255, 255],
+    "hsl": [360, 100, 100],
+    "hsv": [360, 100, 100],
+    "hwb": [360, 100, 100],
+    "cmyk": [100, 100, 100, 100]
+  };
+
+  var alpha = 1;
+  if (space == "alpha") {
+    alpha = vals;
+  } else if (vals.length) {
+    // [10, 10, 10]
+    this.values[space] = vals.slice(0, space.length);
+    alpha = vals[space.length];
+  } else if (vals[space.charAt(0)] !== undefined) {
+    // {r: 10, g: 10, b: 10}
+    for (var i = 0; i < space.length; i++) {
+      this.values[space][i] = vals[space.charAt(i)];
+    }
+    alpha = vals.a;
+  } else if (vals[spaces[space][0]] !== undefined) {
+    // {red: 10, green: 10, blue: 10}
+    var chans = spaces[space];
+    for (var i = 0; i < space.length; i++) {
+      this.values[space][i] = vals[chans[i]];
+    }
+    alpha = vals.alpha;
+  }
+  this.values.alpha = Math.max(0, Math.min(1, (alpha !== undefined ? alpha : this.values.alpha)));
+  if (space == "alpha") {
+    return;
+  }
+
+  // cap values of the space prior converting all values
+  for (var i = 0; i < space.length; i++) {
+    var capped = Math.max(0, Math.min(maxes[space][i], this.values[space][i]));
+    this.values[space][i] = Math.round(capped);
+  }
+
+  // convert to all the other color spaces
+  for (var sname in spaces) {
+    if (sname != space) {
+      this.values[sname] = convert[space][sname](this.values[space])
+    }
+
+    // cap values
+    for (var i = 0; i < sname.length; i++) {
+      var capped = Math.max(0, Math.min(maxes[sname][i], this.values[sname][i]));
+      this.values[sname][i] = Math.round(capped);
+    }
+  }
+  return true;
+}
+
+Color.prototype.setSpace = function(space, args) {
+  var vals = args[0];
+  if (vals === undefined) {
+    // color.rgb()
+    return this.getValues(space);
+  }
+  // color.rgb(10, 10, 10)
+  if (typeof vals == "number") {
+    vals = Array.prototype.slice.call(args);
+  }
+  this.setValues(space, vals);
+  return this;
+}
+
+Color.prototype.setChannel = function(space, index, val) {
+  if (val === undefined) {
+    // color.red()
+    return this.values[space][index];
+  }
+  // color.red(100)
+  this.values[space][index] = val;
+  this.setValues(space, this.values[space]);
+  return this;
+}
+
+window.Color = module.exports = Color
+
+},{"color-convert":3,"color-string":4}],7:[function(require,module,exports){
+/*!
+ * Chart.js
+ * http://chartjs.org/
+ * Version: 2.0.2
+ *
+ * Copyright 2015 Nick Downie
+ * Released under the MIT license
+ * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
+ */
+
+
+var Chart = require('./core/core.js')();
+
+require('./core/core.helpers')(Chart);
+require('./core/core.element')(Chart);
+require('./core/core.animation')(Chart);
+require('./core/core.controller')(Chart);
+require('./core/core.datasetController')(Chart);
+require('./core/core.layoutService')(Chart);
+require('./core/core.legend')(Chart);
+require('./core/core.scale')(Chart);
+require('./core/core.scaleService')(Chart);
+require('./core/core.title')(Chart);
+require('./core/core.tooltip')(Chart);
+
+require('./controllers/controller.bar')(Chart);
+require('./controllers/controller.bubble')(Chart);
+require('./controllers/controller.doughnut')(Chart);
+require('./controllers/controller.line')(Chart);
+require('./controllers/controller.polarArea')(Chart);
+require('./controllers/controller.radar')(Chart);
+
+require('./scales/scale.category')(Chart);
+require('./scales/scale.linear')(Chart);
+require('./scales/scale.logarithmic')(Chart);
+require('./scales/scale.radialLinear')(Chart);
+require('./scales/scale.time')(Chart);
+
+require('./elements/element.arc')(Chart);
+require('./elements/element.line')(Chart);
+require('./elements/element.point')(Chart);
+require('./elements/element.rectangle')(Chart);
+
+require('./charts/Chart.Bar')(Chart);
+require('./charts/Chart.Bubble')(Chart);
+require('./charts/Chart.Doughnut')(Chart);
+require('./charts/Chart.Line')(Chart);
+require('./charts/Chart.PolarArea')(Chart);
+require('./charts/Chart.Radar')(Chart);
+require('./charts/Chart.Scatter')(Chart);
+
+window.Chart = module.exports = Chart;
+
+},{"./charts/Chart.Bar":8,"./charts/Chart.Bubble":9,"./charts/Chart.Doughnut":10,"./charts/Chart.Line":11,"./charts/Chart.PolarArea":12,"./charts/Chart.Radar":13,"./charts/Chart.Scatter":14,"./controllers/controller.bar":15,"./controllers/controller.bubble":16,"./controllers/controller.doughnut":17,"./controllers/controller.line":18,"./controllers/controller.polarArea":19,"./controllers/controller.radar":20,"./core/core.animation":21,"./core/core.controller":22,"./core/core.datasetController":23,"./core/core.element":24,"./core/core.helpers":25,"./core/core.js":26,"./core/core.layoutService":27,"./core/core.legend":28,"./core/core.scale":29,"./core/core.scaleService":30,"./core/core.title":31,"./core/core.tooltip":32,"./elements/element.arc":33,"./elements/element.line":34,"./elements/element.point":35,"./elements/element.rectangle":36,"./scales/scale.category":37,"./scales/scale.linear":38,"./scales/scale.logarithmic":39,"./scales/scale.radialLinear":40,"./scales/scale.time":41}],8:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       Chart.Bar = function(context, config) {
+               config.type = 'bar';
+
+               return new Chart(context, config);
+       };
+
+};
+},{}],9:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       Chart.Bubble = function(context, config) {
+               config.type = 'bubble';
+               return new Chart(context, config);
+       };
+
+};
+},{}],10:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       Chart.Doughnut = function(context, config) {
+               config.type = 'doughnut';
+
+               return new Chart(context, config);
+       };
+
+};
+},{}],11:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       Chart.Line = function(context, config) {
+               config.type = 'line';
+
+               return new Chart(context, config);
+       };
+
+};
+},{}],12:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       Chart.PolarArea = function(context, config) {
+               config.type = 'polarArea';
+
+               return new Chart(context, config);
+       };
+
+};
+},{}],13:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       var defaultConfig = {
+               aspectRatio: 1
+       };
+
+       Chart.Radar = function(context, config) {
+               config.options = helpers.configMerge(defaultConfig, config.options);
+               config.type = 'radar';
+
+               return new Chart(context, config);
+       };
+
+};
+
+},{}],14:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var defaultConfig = {
+               hover: {
+                       mode: 'single'
+               },
+
+               scales: {
+                       xAxes: [{
+                               type: "linear", // scatter should not use a category axis
+                               position: "bottom",
+                               id: "x-axis-1" // need an ID so datasets can reference the scale
+                       }],
+                       yAxes: [{
+                               type: "linear",
+                               position: "left",
+                               id: "y-axis-1"
+                       }]
+               },
+
+               tooltips: {
+                       callbacks: {
+                               title: function(tooltipItems, data) {
+                                       // Title doesn't make sense for scatter since we format the data as a point
+                                       return '';
+                               },
+                               label: function(tooltipItem, data) {
+                                       return '(' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
+                               }
+                       }
+               }
+       };
+
+       // Register the default config for this type
+       Chart.defaults.scatter = defaultConfig;
+
+       // Scatter charts use line controllers
+       Chart.controllers.scatter = Chart.controllers.line;
+
+       Chart.Scatter = function(context, config) {
+               config.type = 'scatter';
+               return new Chart(context, config);
+       };
+
+};
+},{}],15:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.bar = {
+               hover: {
+                       mode: "label"
+               },
+
+               scales: {
+                       xAxes: [{
+                               type: "category",
+
+                               // Specific to Bar Controller
+                               categoryPercentage: 0.8,
+                               barPercentage: 0.9,
+
+                               // grid line settings
+                               gridLines: {
+                                       offsetGridLines: true
+                               }
+                       }],
+                       yAxes: [{
+                               type: "linear"
+                       }]
+               }
+       };
+
+       Chart.controllers.bar = Chart.DatasetController.extend({
+               initialize: function(chart, datasetIndex) {
+                       Chart.DatasetController.prototype.initialize.call(this, chart, datasetIndex);
+
+                       // Use this to indicate that this is a bar dataset.
+                       this.getDataset().bar = true;
+               },
+               // Get the number of datasets that display bars. We use this to correctly calculate the bar width
+               getBarCount: function getBarCount() {
+                       var barCount = 0;
+                       helpers.each(this.chart.data.datasets, function(dataset) {
+                               if (helpers.isDatasetVisible(dataset) && dataset.bar) {
+                                       ++barCount;
+                               }
+                       });
+                       return barCount;
+               },
+
+               addElements: function() {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Rectangle({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var rectangle = new Chart.elements.Rectangle({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       var numBars = this.getBarCount();
+
+                       this.updateElement(rectangle, index, true, numBars);
+                       this.getDataset().metaData.splice(index, 0, rectangle);
+               },
+
+               update: function update(reset) {
+                       var numBars = this.getBarCount();
+
+                       helpers.each(this.getDataset().metaData, function(rectangle, index) {
+                               this.updateElement(rectangle, index, reset, numBars);
+                       }, this);
+               },
+
+               updateElement: function updateElement(rectangle, index, reset, numBars) {
+
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+
+                       var yScalePoint;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               // all less than 0. use the top
+                               yScalePoint = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               yScalePoint = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               yScalePoint = yScale.getPixelForValue(0);
+                       }
+
+                       helpers.extend(rectangle, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _xScale: xScale,
+                               _yScale: yScale,
+                               _datasetIndex: this.index,
+                               _index: index,
+
+
+                               // Desired view properties
+                               _model: {
+                                       x: this.calculateBarX(index, this.index),
+                                       y: reset ? yScalePoint : this.calculateBarY(index, this.index),
+
+                                       // Tooltip
+                                       label: this.chart.data.labels[index],
+                                       datasetLabel: this.getDataset().label,
+
+                                       // Appearance
+                                       base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
+                                       width: this.calculateBarWidth(numBars),
+                                       backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
+                                       borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
+                                       borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
+                                       borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
+                               }
+                       });
+                       rectangle.pivot();
+               },
+
+               calculateBarBase: function(datasetIndex, index) {
+
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+
+                       var base = 0;
+
+                       if (yScale.options.stacked) {
+
+                               var value = this.chart.data.datasets[datasetIndex].data[index];
+
+                               if (value < 0) {
+                                       for (var i = 0; i < datasetIndex; i++) {
+                                               var negDS = this.chart.data.datasets[i];
+                                               if (helpers.isDatasetVisible(negDS) && negDS.yAxisID === yScale.id && negDS.bar) {
+                                                       base += negDS.data[index] < 0 ? negDS.data[index] : 0;
+                                               }
+                                       }
+                               } else {
+                                       for (var j = 0; j < datasetIndex; j++) {
+                                               var posDS = this.chart.data.datasets[j];
+                                               if (helpers.isDatasetVisible(posDS) && posDS.yAxisID === yScale.id && posDS.bar) {
+                                                       base += posDS.data[index] > 0 ? posDS.data[index] : 0;
+                                               }
+                                       }
+                               }
+
+                               return yScale.getPixelForValue(base);
+                       }
+
+                       base = yScale.getPixelForValue(yScale.min);
+
+                       if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) {
+                               base = yScale.getPixelForValue(0, 0);
+                               //base += yScale.options.gridLines.lineWidth;
+                       } else if (yScale.min < 0 && yScale.max < 0) {
+                               // All values are negative. Use the top as the base
+                               base = yScale.getPixelForValue(yScale.max);
+                       }
+
+                       return base;
+
+               },
+
+               getRuler: function() {
+
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var datasetCount = this.getBarCount();
+
+                       var tickWidth = (function() {
+                               var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0);
+                               for (var i = 2; i < this.getDataset().data.length; i++) {
+                                       min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min);
+                               }
+                               return min;
+                       }).call(this);
+                       var categoryWidth = tickWidth * xScale.options.categoryPercentage;
+                       var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
+                       var fullBarWidth = categoryWidth / datasetCount;
+                       var barWidth = fullBarWidth * xScale.options.barPercentage;
+                       var barSpacing = fullBarWidth - (fullBarWidth * xScale.options.barPercentage);
+
+                       return {
+                               datasetCount: datasetCount,
+                               tickWidth: tickWidth,
+                               categoryWidth: categoryWidth,
+                               categorySpacing: categorySpacing,
+                               fullBarWidth: fullBarWidth,
+                               barWidth: barWidth,
+                               barSpacing: barSpacing
+                       };
+               },
+
+               calculateBarWidth: function() {
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var ruler = this.getRuler();
+                       return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth;
+               },
+
+               // Get bar index from the given dataset index accounting for the fact that not all bars are visible
+               getBarIndex: function(datasetIndex) {
+                       var barIndex = 0;
+
+                       for (var j = 0; j < datasetIndex; ++j) {
+                               if (helpers.isDatasetVisible(this.chart.data.datasets[j]) && this.chart.data.datasets[j].bar) {
+                                       ++barIndex;
+                               }
+                       }
+
+                       return barIndex;
+               },
+
+               calculateBarX: function(index, datasetIndex) {
+
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var barIndex = this.getBarIndex(datasetIndex);
+
+                       var ruler = this.getRuler();
+                       var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
+                       leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0;
+
+                       if (xScale.options.stacked) {
+                               return leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
+                       }
+
+                       return leftTick +
+                               (ruler.barWidth / 2) +
+                               ruler.categorySpacing +
+                               (ruler.barWidth * barIndex) +
+                               (ruler.barSpacing / 2) +
+                               (ruler.barSpacing * barIndex);
+               },
+
+               calculateBarY: function(index, datasetIndex) {
+
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+
+                       var value = this.getDataset().data[index];
+
+                       if (yScale.options.stacked) {
+
+                               var sumPos = 0,
+                                       sumNeg = 0;
+
+                               for (var i = 0; i < datasetIndex; i++) {
+                                       var ds = this.chart.data.datasets[i];
+                                       if (helpers.isDatasetVisible(ds) && ds.bar && ds.yAxisID === yScale.id) {
+                                               if (ds.data[index] < 0) {
+                                                       sumNeg += ds.data[index] || 0;
+                                               } else {
+                                                       sumPos += ds.data[index] || 0;
+                                               }
+                                       }
+                               }
+
+                               if (value < 0) {
+                                       return yScale.getPixelForValue(sumNeg + value);
+                               } else {
+                                       return yScale.getPixelForValue(sumPos + value);
+                               }
+
+                               return yScale.getPixelForValue(value);
+                       }
+
+                       return yScale.getPixelForValue(value);
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+                       helpers.each(this.getDataset().metaData, function(rectangle, index) {
+                               var d = this.getDataset().data[index];
+                               if (d !== null && d !== undefined && !isNaN(d)) {
+                                       rectangle.transition(easingDecimal).draw();
+                               }
+                       }, this);
+               },
+
+               setHoverStyle: function(rectangle) {
+                       var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+                       var index = rectangle._index;
+
+                       rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth);
+               },
+
+               removeHoverStyle: function(rectangle) {
+                       var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+                       var index = rectangle._index;
+
+                       rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor);
+                       rectangle._model.borderColor = rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor);
+                       rectangle._model.borderWidth = rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth);
+               }
+
+       });
+};
+
+},{}],16:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.bubble = {
+               hover: {
+                       mode: "single"
+               },
+
+               scales: {
+                       xAxes: [{
+                               type: "linear", // bubble should probably use a linear scale by default
+                               position: "bottom",
+                               id: "x-axis-0" // need an ID so datasets can reference the scale
+                       }],
+                       yAxes: [{
+                               type: "linear",
+                               position: "left",
+                               id: "y-axis-0"
+                       }]
+               },
+
+               tooltips: {
+                       callbacks: {
+                               title: function(tooltipItems, data) {
+                                       // Title doesn't make sense for scatter since we format the data as a point
+                                       return '';
+                               },
+                               label: function(tooltipItem, data) {
+                                       var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
+                                       var dataPoint = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                                       return datasetLabel + ': (' + dataPoint.x + ', ' + dataPoint.y + ', ' + dataPoint.r + ')';
+                               }
+                       }
+               }
+       };
+
+
+       Chart.controllers.bubble = Chart.DatasetController.extend({
+               addElements: function() {
+
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var point = new Chart.elements.Point({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       // Reset the point
+                       this.updateElement(point, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, point);
+               },
+
+               update: function update(reset) {
+                       var points = this.getDataset().metaData;
+
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var scaleBase;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               scaleBase = yScale.getPixelForValue(0);
+                       }
+
+                       // Update Points
+                       helpers.each(points, function(point, index) {
+                               this.updateElement(point, index, reset);
+                       }, this);
+
+               },
+
+               updateElement: function(point, index, reset) {
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var scaleBase;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               scaleBase = yScale.getPixelForValue(0);
+                       }
+
+                       helpers.extend(point, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _xScale: xScale,
+                               _yScale: yScale,
+                               _datasetIndex: this.index,
+                               _index: index,
+
+                               // Desired view properties
+                               _model: {
+                                       x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+                                       y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index),
+                                       // Appearance
+                                       radius: reset ? 0 : point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[index]),
+                                       backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor),
+                                       borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor),
+                                       borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth),
+
+                                       // Tooltip
+                                       hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+                               }
+                       });
+
+                       point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+
+                       point.pivot();
+               },
+
+               getRadius: function(value) {
+                       return value.r || this.chart.options.elements.point.radius;
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+
+                       // Transition and Draw the Points
+                       helpers.each(this.getDataset().metaData, function(point, index) {
+                               point.transition(easingDecimal);
+                               point.draw();
+                       });
+
+               },
+
+               setHoverStyle: function(point) {
+                       // Point
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]);
+                       point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth);
+               },
+
+               removeHoverStyle: function(point) {
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[point._index]);
+                       point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor);
+                       point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor);
+                       point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth);
+               }
+       });
+};
+},{}],17:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.doughnut = {
+               animation: {
+                       //Boolean - Whether we animate the rotation of the Doughnut
+                       animateRotate: true,
+                       //Boolean - Whether we animate scaling the Doughnut from the centre
+                       animateScale: false
+               },
+               aspectRatio: 1,
+               hover: {
+                       mode: 'single'
+               },
+               legendCallback: function(chart) {
+                       var text = [];
+                       text.push('<ul class="' + chart.id + '-legend">');
+
+                       if (chart.data.datasets.length) {
+                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+                                       if (chart.data.labels[i]) {
+                                               text.push(chart.data.labels[i]);
+                                       }
+                                       text.push('</span></li>');
+                               }
+                       }
+
+                       text.push('</ul>');
+                       return text.join("");
+               },
+               legend: {
+                       labels: {
+                               generateLabels: function(data) {
+                                       if (data.labels.length && data.datasets.length) {
+                                               return data.labels.map(function(label, i) {
+                                                       return {
+                                                               text: label,
+                                                               fillStyle: data.datasets[0].backgroundColor[i],
+                                                               hidden: isNaN(data.datasets[0].data[i]),
+
+                                                               // Extra data used for toggling the correct item
+                                                               index: i
+                                                       };
+                                               });
+                                       } else {
+                                               return [];
+                                       }
+                               }
+                       },
+                       onClick: function(e, legendItem) {
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       dataset.metaHiddenData = dataset.metaHiddenData || [];
+                                       var idx = legendItem.index;
+
+                                       if (!isNaN(dataset.data[idx])) {
+                                               dataset.metaHiddenData[idx] = dataset.data[idx];
+                                               dataset.data[idx] = NaN;
+                                       } else if (!isNaN(dataset.metaHiddenData[idx])) {
+                                               dataset.data[idx] = dataset.metaHiddenData[idx];
+                                       }
+                               });
+
+                               this.chart.update();
+                       }
+               },
+
+               //The percentage of the chart that we cut out of the middle.
+               cutoutPercentage: 50,
+
+               //The rotation of the chart, where the first data arc begins.
+               rotation: Math.PI * -0.5,
+
+               //The total circumference of the chart.
+               circumference: Math.PI * 2.0,
+
+               // Need to override these to give a nice default
+               tooltips: {
+                       callbacks: {
+                               title: function() {
+                                       return '';
+                               },
+                               label: function(tooltipItem, data) {
+                                       return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                               }
+                       }
+               }
+       };
+
+       Chart.defaults.pie = helpers.clone(Chart.defaults.doughnut);
+       helpers.extend(Chart.defaults.pie, {
+               cutoutPercentage: 0
+       });
+
+
+       Chart.controllers.doughnut = Chart.controllers.pie = Chart.DatasetController.extend({
+               linkScales: function() {
+                       // no scales for doughnut
+               },
+
+               addElements: function() {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Arc({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index, colorForNewElement) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var arc = new Chart.elements.Arc({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       if (colorForNewElement && helpers.isArray(this.getDataset().backgroundColor)) {
+                               this.getDataset().backgroundColor.splice(index, 0, colorForNewElement);
+                       }
+
+                       // Reset the point
+                       this.updateElement(arc, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, arc);
+               },
+
+               getVisibleDatasetCount: function getVisibleDatasetCount() {
+                       return helpers.where(this.chart.data.datasets, function(ds) {
+                               return helpers.isDatasetVisible(ds);
+                       }).length;
+               },
+
+               // Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
+               getRingIndex: function getRingIndex(datasetIndex) {
+                       var ringIndex = 0;
+
+                       for (var j = 0; j < datasetIndex; ++j) {
+                               if (helpers.isDatasetVisible(this.chart.data.datasets[j])) {
+                                       ++ringIndex;
+                               }
+                       }
+
+                       return ringIndex;
+               },
+
+               update: function update(reset) {
+                       var availableWidth = this.chart.chartArea.right - this.chart.chartArea.left - this.chart.options.elements.arc.borderWidth;
+                       var availableHeight = this.chart.chartArea.bottom - this.chart.chartArea.top - this.chart.options.elements.arc.borderWidth;
+                       var minSize = Math.min(availableWidth, availableHeight);
+                       var offset = {x: 0, y: 0};
+
+                       // If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc
+                       if (this.chart.options.circumference && this.chart.options.circumference < Math.PI * 2.0) {
+                               var startAngle = this.chart.options.rotation % (Math.PI * 2.0);
+                               startAngle += Math.PI * 2.0 * (startAngle >= Math.PI ? -1 : startAngle < -Math.PI ? 1 : 0);
+                               var endAngle = startAngle + this.chart.options.circumference;
+                               var start = {x: Math.cos(startAngle), y: Math.sin(startAngle)};
+                               var end = {x: Math.cos(endAngle), y: Math.sin(endAngle)};
+                               var contains0 = (startAngle <= 0 && 0 <= endAngle) || (startAngle <= Math.PI * 2.0 && Math.PI * 2.0 <= endAngle);
+                               var contains90 = (startAngle <= Math.PI * 0.5 && Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 2.5 && Math.PI * 2.5 <= endAngle);
+                               var contains180 = (startAngle <= -Math.PI && -Math.PI <= endAngle) || (startAngle <= Math.PI && Math.PI <= endAngle);
+                               var contains270 = (startAngle <= -Math.PI * 0.5 && -Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 1.5 && Math.PI * 1.5 <= endAngle);
+                               var cutout = this.chart.options.cutoutPercentage / 100.0;
+                               var min = {x: contains180 ? -1 : Math.min(start.x * (start.x < 0 ? 1 : cutout), end.x * (end.x < 0 ? 1 : cutout)), y: contains270 ? -1 : Math.min(start.y * (start.y < 0 ? 1 : cutout), end.y * (end.y < 0 ? 1 : cutout))};
+                               var max = {x: contains0 ? 1 : Math.max(start.x * (start.x > 0 ? 1 : cutout), end.x * (end.x > 0 ? 1 : cutout)), y: contains90 ? 1 : Math.max(start.y * (start.y > 0 ? 1 : cutout), end.y * (end.y > 0 ? 1 : cutout))};
+                               var size = {width: (max.x - min.x) * 0.5, height: (max.y - min.y) * 0.5};
+                               minSize = Math.min(availableWidth / size.width, availableHeight / size.height);
+                               offset = {x: (max.x + min.x) * -0.5, y: (max.y + min.y) * -0.5};
+                       }
+
+                       this.chart.outerRadius = Math.max(minSize / 2, 0);
+                       this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
+                       this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.getVisibleDatasetCount();
+                       this.chart.offsetX = offset.x * this.chart.outerRadius;
+                       this.chart.offsetY = offset.y * this.chart.outerRadius;
+
+                       this.getDataset().total = 0;
+                       helpers.each(this.getDataset().data, function(value) {
+                               if (!isNaN(value)) {
+                                       this.getDataset().total += Math.abs(value);
+                               }
+                       }, this);
+
+                       this.outerRadius = this.chart.outerRadius - (this.chart.radiusLength * this.getRingIndex(this.index));
+                       this.innerRadius = this.outerRadius - this.chart.radiusLength;
+
+                       helpers.each(this.getDataset().metaData, function(arc, index) {
+                               this.updateElement(arc, index, reset);
+                       }, this);
+               },
+               updateElement: function(arc, index, reset) {
+                       var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
+                       var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
+                       var startAngle = this.chart.options.rotation || (Math.PI * -0.5); // non reset case handled later
+                       var endAngle = this.chart.options.rotation || (Math.PI * -0.5); // non reset case handled later
+                       var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]) * ((this.chart.options.circumference || (2.0 * Math.PI)) / (2.0 * Math.PI));
+                       var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
+                       var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
+
+                       helpers.extend(arc, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+
+                               // Desired view properties
+                               _model: {
+                                       x: centerX + this.chart.offsetX,
+                                       y: centerY + this.chart.offsetY,
+                                       startAngle: startAngle,
+                                       endAngle: endAngle,
+                                       circumference: circumference,
+                                       outerRadius: outerRadius,
+                                       innerRadius: innerRadius,
+
+                                       backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
+                                       hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
+                                       borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
+                                       borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
+
+                                       label: helpers.getValueAtIndexOrDefault(this.getDataset().label, index, this.chart.data.labels[index])
+                               }
+                       });
+
+                       // Set correct angles if not resetting
+                       if (!reset) {
+
+                               if (index === 0) {
+                                       arc._model.startAngle = this.chart.options.rotation || (Math.PI * -0.5);
+                               } else {
+                                       arc._model.startAngle = this.getDataset().metaData[index - 1]._model.endAngle;
+                               }
+
+                               arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
+                       }
+
+                       arc.pivot();
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+                       helpers.each(this.getDataset().metaData, function(arc, index) {
+                               arc.transition(easingDecimal).draw();
+                       });
+               },
+
+               setHoverStyle: function(arc) {
+                       var dataset = this.chart.data.datasets[arc._datasetIndex];
+                       var index = arc._index;
+
+                       arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
+               },
+
+               removeHoverStyle: function(arc) {
+                       var dataset = this.chart.data.datasets[arc._datasetIndex];
+                       var index = arc._index;
+
+                       arc._model.backgroundColor = arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor);
+                       arc._model.borderColor = arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor);
+                       arc._model.borderWidth = arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth);
+               },
+
+               calculateCircumference: function(value) {
+                       if (this.getDataset().total > 0 && !isNaN(value)) {
+                               return (Math.PI * 1.999999) * (value / this.getDataset().total);
+                       } else {
+                               return 0;
+                       }
+               }
+       });
+};
+},{}],18:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.line = {
+               showLines: true,
+
+               hover: {
+                       mode: "label"
+               },
+
+               scales: {
+                       xAxes: [{
+                               type: "category",
+                               id: 'x-axis-0'
+                       }],
+                       yAxes: [{
+                               type: "linear",
+                               id: 'y-axis-0'
+                       }]
+               }
+       };
+
+
+       Chart.controllers.line = Chart.DatasetController.extend({
+               addElements: function() {
+
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+
+                       this.getDataset().metaDataset = this.getDataset().metaDataset || new Chart.elements.Line({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _points: this.getDataset().metaData
+                       });
+
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var point = new Chart.elements.Point({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       // Reset the point
+                       this.updateElement(point, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, point);
+
+                       // Make sure bezier control points are updated
+                       if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
+                               this.updateBezierControlPoints();
+               },
+
+               update: function update(reset) {
+                       var line = this.getDataset().metaDataset;
+                       var points = this.getDataset().metaData;
+
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var scaleBase;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               scaleBase = yScale.getPixelForValue(0);
+                       }
+
+                       // Update Line
+                       if (this.chart.options.showLines) {
+                               // Utility
+                               line._scale = yScale;
+                               line._datasetIndex = this.index;
+                               // Data
+                               line._children = points;
+                               // Model
+                               line._model = {
+                                       // Appearance
+                                       tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+                                       backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
+                                       borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
+                                       borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+                                       borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+                                       borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+                                       borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+                                       borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
+                                       fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+                                       // Scale
+                                       scaleTop: yScale.top,
+                                       scaleBottom: yScale.bottom,
+                                       scaleZero: scaleBase
+                               };
+                               line.pivot();
+                       }
+
+                       // Update Points
+                       helpers.each(points, function(point, index) {
+                               this.updateElement(point, index, reset);
+                       }, this);
+
+                       if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
+                               this.updateBezierControlPoints();
+               },
+
+               getPointBackgroundColor: function(point, index) {
+                       var backgroundColor = this.chart.options.elements.point.backgroundColor;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.backgroundColor) {
+                               backgroundColor = point.custom.backgroundColor;
+                       } else if (dataset.pointBackgroundColor) {
+                               backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor);
+                       } else if (dataset.backgroundColor) {
+                               backgroundColor = dataset.backgroundColor;
+                       }
+
+                       return backgroundColor;
+               },
+               getPointBorderColor: function(point, index) {
+                       var borderColor = this.chart.options.elements.point.borderColor;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.borderColor) {
+                               borderColor = point.custom.borderColor;
+                       } else if (dataset.pointBorderColor) {
+                               borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor);
+                       } else if (dataset.borderColor) {
+                               borderColor = dataset.borderColor;
+                       }
+
+                       return borderColor;
+               },
+               getPointBorderWidth: function(point, index) {
+                       var borderWidth = this.chart.options.elements.point.borderWidth;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.borderWidth !== undefined) {
+                               borderWidth = point.custom.borderWidth;
+                       } else if (dataset.pointBorderWidth !== undefined) {
+                               borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth);
+                       } else if (dataset.borderWidth !== undefined) {
+                               borderWidth = dataset.borderWidth;
+                       }
+
+                       return borderWidth;
+               },
+
+               updateElement: function(point, index, reset) {
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var scaleBase;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               scaleBase = yScale.getPixelForValue(0);
+                       }
+
+                       // Utility
+                       point._chart = this.chart.chart;
+                       point._xScale = xScale;
+                       point._yScale = yScale;
+                       point._datasetIndex = this.index;
+                       point._index = index;
+
+                       // Desired view properties
+                       point._model = {
+                               x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+                               y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+                               // Appearance
+                               tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+                               radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
+                               pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
+                               backgroundColor: this.getPointBackgroundColor(point, index),
+                               borderColor: this.getPointBorderColor(point, index),
+                               borderWidth: this.getPointBorderWidth(point, index),
+                               // Tooltip
+                               hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+                       };
+
+                       point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+               },
+
+               calculatePointY: function(value, index, datasetIndex, isCombo) {
+
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+
+                       if (yScale.options.stacked) {
+
+                               var sumPos = 0,
+                                       sumNeg = 0;
+
+                               for (var i = 0; i < datasetIndex; i++) {
+                                       var ds = this.chart.data.datasets[i];
+                                       if (ds.type === 'line' && helpers.isDatasetVisible(ds)) {
+                                               if (ds.data[index] < 0) {
+                                                       sumNeg += ds.data[index] || 0;
+                                               } else {
+                                                       sumPos += ds.data[index] || 0;
+                                               }
+                                       }
+                               }
+
+                               if (value < 0) {
+                                       return yScale.getPixelForValue(sumNeg + value);
+                               } else {
+                                       return yScale.getPixelForValue(sumPos + value);
+                               }
+                       }
+
+                       return yScale.getPixelForValue(value);
+               },
+
+               updateBezierControlPoints: function() {
+                       // Update bezier control points
+                       helpers.each(this.getDataset().metaData, function(point, index) {
+                               var controlPoints = helpers.splineCurve(
+                                       helpers.previousItem(this.getDataset().metaData, index)._model,
+                                       point._model,
+                                       helpers.nextItem(this.getDataset().metaData, index)._model,
+                                       point._model.tension
+                               );
+
+                               // Prevent the bezier going outside of the bounds of the graph
+                               point._model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, this.chart.chartArea.right), this.chart.chartArea.left);
+                               point._model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+
+                               point._model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, this.chart.chartArea.right), this.chart.chartArea.left);
+                               point._model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+
+                               // Now pivot the point for animation
+                               point.pivot();
+                       }, this);
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+
+                       // Transition Point Locations
+                       helpers.each(this.getDataset().metaData, function(point) {
+                               point.transition(easingDecimal);
+                       });
+
+                       // Transition and Draw the line
+                       if (this.chart.options.showLines)
+                               this.getDataset().metaDataset.transition(easingDecimal).draw();
+
+                       // Draw the points
+                       helpers.each(this.getDataset().metaData, function(point) {
+                               point.draw();
+                       });
+               },
+
+               setHoverStyle: function(point) {
+                       // Point
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
+                       point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
+               },
+
+               removeHoverStyle: function(point) {
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
+                       point._model.backgroundColor = this.getPointBackgroundColor(point, index);
+                       point._model.borderColor = this.getPointBorderColor(point, index);
+                       point._model.borderWidth = this.getPointBorderWidth(point, index);
+               }
+       });
+};
+
+},{}],19:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.polarArea = {
+
+               scale: {
+                       type: "radialLinear",
+                       lineArc: true // so that lines are circular
+               },
+
+               //Boolean - Whether to animate the rotation of the chart
+               animateRotate: true,
+               animateScale: true,
+
+               aspectRatio: 1,
+               legendCallback: function(chart) {
+                       var text = [];
+                       text.push('<ul class="' + chart.id + '-legend">');
+
+                       if (chart.data.datasets.length) {
+                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+                                       if (chart.data.labels[i]) {
+                                               text.push(chart.data.labels[i]);
+                                       }
+                                       text.push('</span></li>');
+                               }
+                       }
+
+                       text.push('</ul>');
+                       return text.join("");
+               },
+               legend: {
+                       labels: {
+                               generateLabels: function(data) {
+                                       if (data.labels.length && data.datasets.length) {
+                                               return data.labels.map(function(label, i) {
+                                                       return {
+                                                               text: label,
+                                                               fillStyle: data.datasets[0].backgroundColor[i],
+                                                               hidden: isNaN(data.datasets[0].data[i]),
+
+                                                               // Extra data used for toggling the correct item
+                                                               index: i
+                                                       };
+                                               });
+                                       } else {
+                                               return [];
+                                       }
+                               }
+                       },
+                       onClick: function(e, legendItem) {
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       dataset.metaHiddenData = dataset.metaHiddenData || [];
+                                       var idx = legendItem.index;
+
+                                       if (!isNaN(dataset.data[idx])) {
+                                               dataset.metaHiddenData[idx] = dataset.data[idx];
+                                               dataset.data[idx] = NaN;
+                                       } else if (!isNaN(dataset.metaHiddenData[idx])) {
+                                               dataset.data[idx] = dataset.metaHiddenData[idx];
+                                       }
+                               });
+
+                               this.chart.update();
+                       }
+               },
+
+               // Need to override these to give a nice default
+               tooltips: {
+                       callbacks: {
+                               title: function() {
+                                       return '';
+                               },
+                               label: function(tooltipItem, data) {
+                                       return data.labels[tooltipItem.index] + ': ' + tooltipItem.yLabel;
+                               }
+                       }
+               }
+       };
+
+       Chart.controllers.polarArea = Chart.DatasetController.extend({
+               linkScales: function() {
+                       // no scales for doughnut
+               },
+               addElements: function() {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Arc({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var arc = new Chart.elements.Arc({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       // Reset the point
+                       this.updateElement(arc, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, arc);
+               },
+               getVisibleDatasetCount: function getVisibleDatasetCount() {
+                       return helpers.where(this.chart.data.datasets, function(ds) {
+                               return helpers.isDatasetVisible(ds);
+                       }).length;
+               },
+
+               update: function update(reset) {
+                       var minSize = Math.min(this.chart.chartArea.right - this.chart.chartArea.left, this.chart.chartArea.bottom - this.chart.chartArea.top);
+                       this.chart.outerRadius = Math.max((minSize - this.chart.options.elements.arc.borderWidth / 2) / 2, 0);
+                       this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
+                       this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.getVisibleDatasetCount();
+
+                       this.getDataset().total = 0;
+                       helpers.each(this.getDataset().data, function(value) {
+                               this.getDataset().total += Math.abs(value);
+                       }, this);
+
+                       this.outerRadius = this.chart.outerRadius - (this.chart.radiusLength * this.index);
+                       this.innerRadius = this.outerRadius - this.chart.radiusLength;
+
+                       helpers.each(this.getDataset().metaData, function(arc, index) {
+                               this.updateElement(arc, index, reset);
+                       }, this);
+               },
+
+               updateElement: function(arc, index, reset) {
+                       var circumference = this.calculateCircumference(this.getDataset().data[index]);
+                       var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
+                       var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
+
+                       // If there is NaN data before us, we need to calculate the starting angle correctly.
+                       // We could be way more efficient here, but its unlikely that the polar area chart will have a lot of data
+                       var notNullIndex = 0;
+                       for (var i = 0; i < index; ++i) {
+                               if (!isNaN(this.getDataset().data[i])) {
+                                       ++notNullIndex;
+                               }
+                       }
+
+                       var startAngle = (-0.5 * Math.PI) + (circumference * notNullIndex);
+                       var endAngle = startAngle + circumference;
+
+                       var resetModel = {
+                               x: centerX,
+                               y: centerY,
+                               innerRadius: 0,
+                               outerRadius: this.chart.options.animateScale ? 0 : this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
+                               startAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : startAngle,
+                               endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle,
+
+                               backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
+                               borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
+                               borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
+
+                               label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
+                       };
+
+                       helpers.extend(arc, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+                               _scale: this.chart.scale,
+
+                               // Desired view properties
+                               _model: reset ? resetModel : {
+                                       x: centerX,
+                                       y: centerY,
+                                       innerRadius: 0,
+                                       outerRadius: this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
+                                       startAngle: startAngle,
+                                       endAngle: endAngle,
+
+                                       backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
+                                       borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
+                                       borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
+
+                                       label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
+                               }
+                       });
+
+                       arc.pivot();
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+                       helpers.each(this.getDataset().metaData, function(arc, index) {
+                               arc.transition(easingDecimal).draw();
+                       });
+               },
+
+               setHoverStyle: function(arc) {
+                       var dataset = this.chart.data.datasets[arc._datasetIndex];
+                       var index = arc._index;
+
+                       arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
+               },
+
+               removeHoverStyle: function(arc) {
+                       var dataset = this.chart.data.datasets[arc._datasetIndex];
+                       var index = arc._index;
+
+                       arc._model.backgroundColor = arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor);
+                       arc._model.borderColor = arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor);
+                       arc._model.borderWidth = arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth);
+               },
+
+               calculateCircumference: function(value) {
+                       if (isNaN(value)) {
+                               return 0;
+                       } else {
+                               // Count the number of NaN values
+                               var numNaN = helpers.where(this.getDataset().data, function(data) {
+                                       return isNaN(data);
+                               }).length;
+
+                               return (2 * Math.PI) / (this.getDataset().data.length - numNaN);
+                       }
+               }
+       });
+
+};
+},{}],20:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+
+       Chart.defaults.radar = {
+               scale: {
+                       type: "radialLinear"
+               },
+               elements: {
+                       line: {
+                               tension: 0 // no bezier in radar
+                       }
+               }
+       };
+
+       Chart.controllers.radar = Chart.DatasetController.extend({
+               linkScales: function() {
+                       // No need. Single scale only
+               },
+
+               addElements: function() {
+
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+
+                       this.getDataset().metaDataset = this.getDataset().metaDataset || new Chart.elements.Line({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _points: this.getDataset().metaData,
+                               _loop: true
+                       });
+
+                       helpers.each(this.getDataset().data, function(value, index) {
+                               this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
+                                       _chart: this.chart.chart,
+                                       _datasetIndex: this.index,
+                                       _index: index,
+                                       _model: {
+                                               x: 0, //xScale.getPixelForValue(null, index, true),
+                                               y: 0 //this.chartArea.bottom,
+                                       }
+                               });
+                       }, this);
+               },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var point = new Chart.elements.Point({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index
+                       });
+
+                       // Reset the point
+                       this.updateElement(point, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, point);
+
+                       // Make sure bezier control points are updated
+                       this.updateBezierControlPoints();
+               },
+
+               update: function update(reset) {
+
+                       var line = this.getDataset().metaDataset;
+                       var points = this.getDataset().metaData;
+
+                       var scale = this.chart.scale;
+                       var scaleBase;
+
+                       if (scale.min < 0 && scale.max < 0) {
+                               scaleBase = scale.getPointPositionForValue(0, scale.max);
+                       } else if (scale.min > 0 && scale.max > 0) {
+                               scaleBase = scale.getPointPositionForValue(0, scale.min);
+                       } else {
+                               scaleBase = scale.getPointPositionForValue(0, 0);
+                       }
+
+                       helpers.extend(this.getDataset().metaDataset, {
+                               // Utility
+                               _datasetIndex: this.index,
+                               // Data
+                               _children: this.getDataset().metaData,
+                               // Model
+                               _model: {
+                                       // Appearance
+                                       tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+                                       backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
+                                       borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
+                                       borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+                                       fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+                                       borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+                                       borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+                                       borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+                                       borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
+
+                                       // Scale
+                                       scaleTop: scale.top,
+                                       scaleBottom: scale.bottom,
+                                       scaleZero: scaleBase
+                               }
+                       });
+
+                       this.getDataset().metaDataset.pivot();
+
+                       // Update Points
+                       helpers.each(points, function(point, index) {
+                               this.updateElement(point, index, reset);
+                       }, this);
+
+
+                       // Update bezier control points
+                       this.updateBezierControlPoints();
+               },
+               updateElement: function(point, index, reset) {
+                       var pointPosition = this.chart.scale.getPointPositionForValue(index, this.getDataset().data[index]);
+
+                       helpers.extend(point, {
+                               // Utility
+                               _datasetIndex: this.index,
+                               _index: index,
+                               _scale: this.chart.scale,
+
+                               // Desired view properties
+                               _model: {
+                                       x: reset ? this.chart.scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
+                                       y: reset ? this.chart.scale.yCenter : pointPosition.y,
+
+                                       // Appearance
+                                       tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+                                       radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
+                                       backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
+                                       borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
+                                       borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
+                                       pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
+
+                                       // Tooltip
+                                       hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+                               }
+                       });
+
+                       point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+               },
+               updateBezierControlPoints: function() {
+                       helpers.each(this.getDataset().metaData, function(point, index) {
+                               var controlPoints = helpers.splineCurve(
+                                       helpers.previousItem(this.getDataset().metaData, index, true)._model,
+                                       point._model,
+                                       helpers.nextItem(this.getDataset().metaData, index, true)._model,
+                                       point._model.tension
+                               );
+
+                               // Prevent the bezier going outside of the bounds of the graph
+                               point._model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, this.chart.chartArea.right), this.chart.chartArea.left);
+                               point._model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+
+                               point._model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, this.chart.chartArea.right), this.chart.chartArea.left);
+                               point._model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+
+                               // Now pivot the point for animation
+                               point.pivot();
+                       }, this);
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+
+                       // Transition Point Locations
+                       helpers.each(this.getDataset().metaData, function(point, index) {
+                               point.transition(easingDecimal);
+                       });
+
+                       // Transition and Draw the line
+                       this.getDataset().metaDataset.transition(easingDecimal).draw();
+
+                       // Draw the points
+                       helpers.each(this.getDataset().metaData, function(point) {
+                               point.draw();
+                       });
+               },
+
+               setHoverStyle: function(point) {
+                       // Point
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
+                       point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
+                       point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
+               },
+
+               removeHoverStyle: function(point) {
+                       var dataset = this.chart.data.datasets[point._datasetIndex];
+                       var index = point._index;
+
+                       point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
+                       point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor);
+                       point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor);
+                       point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
+               }
+       });
+};
+},{}],21:[function(require,module,exports){
+/*global window: false */
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.animation = {
+               duration: 1000,
+               easing: "easeOutQuart",
+               onProgress: helpers.noop,
+               onComplete: helpers.noop
+       };
+
+       Chart.Animation = Chart.Element.extend({
+               currentStep: null, // the current animation step
+               numSteps: 60, // default number of steps
+               easing: "", // the easing to use for this animation
+               render: null, // render function used by the animation service
+
+               onAnimationProgress: null, // user specified callback to fire on each step of the animation
+               onAnimationComplete: null // user specified callback to fire when the animation finishes
+       });
+
+       Chart.animationService = {
+               frameDuration: 17,
+               animations: [],
+               dropFrames: 0,
+               request: null,
+               addAnimation: function(chartInstance, animationObject, duration, lazy) {
+
+                       if (!lazy) {
+                               chartInstance.animating = true;
+                       }
+
+                       for (var index = 0; index < this.animations.length; ++index) {
+                               if (this.animations[index].chartInstance === chartInstance) {
+                                       // replacing an in progress animation
+                                       this.animations[index].animationObject = animationObject;
+                                       return;
+                               }
+                       }
+
+                       this.animations.push({
+                               chartInstance: chartInstance,
+                               animationObject: animationObject
+                       });
+
+                       // If there are no animations queued, manually kickstart a digest, for lack of a better word
+                       if (this.animations.length === 1) {
+                               this.requestAnimationFrame();
+                       }
+               },
+               // Cancel the animation for a given chart instance
+               cancelAnimation: function(chartInstance) {
+                       var index = helpers.findIndex(this.animations, function(animationWrapper) {
+                               return animationWrapper.chartInstance === chartInstance;
+                       });
+
+                       if (index !== -1) {
+                               this.animations.splice(index, 1);
+                               chartInstance.animating = false;
+                       }
+               },
+               requestAnimationFrame: function() {
+                       var me = this;
+                       if (me.request === null) {
+                               // Skip animation frame requests until the active one is executed.
+                               // This can happen when processing mouse events, e.g. 'mousemove'
+                               // and 'mouseout' events will trigger multiple renders.
+                               me.request = helpers.requestAnimFrame.call(window, function() {
+                                       me.request = null;
+                                       me.startDigest();
+                               });
+                       }
+               },
+               startDigest: function() {
+
+                       var startTime = Date.now();
+                       var framesToDrop = 0;
+
+                       if (this.dropFrames > 1) {
+                               framesToDrop = Math.floor(this.dropFrames);
+                               this.dropFrames = this.dropFrames % 1;
+                       }
+
+                       var i = 0;
+                       while (i < this.animations.length) {
+                               if (this.animations[i].animationObject.currentStep === null) {
+                                       this.animations[i].animationObject.currentStep = 0;
+                               }
+
+                               this.animations[i].animationObject.currentStep += 1 + framesToDrop;
+
+                               if (this.animations[i].animationObject.currentStep > this.animations[i].animationObject.numSteps) {
+                                       this.animations[i].animationObject.currentStep = this.animations[i].animationObject.numSteps;
+                               }
+
+                               this.animations[i].animationObject.render(this.animations[i].chartInstance, this.animations[i].animationObject);
+                               if (this.animations[i].animationObject.onAnimationProgress && this.animations[i].animationObject.onAnimationProgress.call) {
+                                       this.animations[i].animationObject.onAnimationProgress.call(this.animations[i].chartInstance, this.animations[i]);
+                               }
+
+                               if (this.animations[i].animationObject.currentStep === this.animations[i].animationObject.numSteps) {
+                                       if (this.animations[i].animationObject.onAnimationComplete && this.animations[i].animationObject.onAnimationComplete.call) {
+                                               this.animations[i].animationObject.onAnimationComplete.call(this.animations[i].chartInstance, this.animations[i]);
+                                       }
+
+                                       // executed the last frame. Remove the animation.
+                                       this.animations[i].chartInstance.animating = false;
+
+                                       this.animations.splice(i, 1);
+                               } else {
+                                       ++i;
+                               }
+                       }
+
+                       var endTime = Date.now();
+                       var dropFrames = (endTime - startTime) / this.frameDuration;
+
+                       this.dropFrames += dropFrames;
+
+                       // Do we have more stuff to animate?
+                       if (this.animations.length > 0) {
+                               this.requestAnimationFrame();
+                       }
+               }
+       };
+};
+},{}],22:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+       //Create a dictionary of chart types, to allow for extension of existing types
+       Chart.types = {};
+
+       //Store a reference to each instance - allowing us to globally resize chart instances on window resize.
+       //Destroy method on the chart will remove the instance of the chart from this reference.
+       Chart.instances = {};
+
+       // Controllers available for dataset visualization eg. bar, line, slice, etc.
+       Chart.controllers = {};
+
+       // The main controller of a chart
+       Chart.Controller = function(instance) {
+
+               this.chart = instance;
+               this.config = instance.config;
+               this.options = this.config.options = helpers.configMerge(Chart.defaults.global, Chart.defaults[this.config.type], this.config.options || {});
+               this.id = helpers.uid();
+
+               Object.defineProperty(this, 'data', {
+                       get: function() {
+                               return this.config.data;
+                       }
+               });
+
+               //Add the chart instance to the global namespace
+               Chart.instances[this.id] = this;
+
+               if (this.options.responsive) {
+                       // Silent resize before chart draws
+                       this.resize(true);
+               }
+
+               this.initialize();
+
+               return this;
+       };
+
+       helpers.extend(Chart.Controller.prototype, {
+
+               initialize: function initialize() {
+
+                       // TODO
+                       // If BeforeInit(this) doesn't return false, proceed
+
+                       this.bindEvents();
+
+                       // Make sure controllers are built first so that each dataset is bound to an axis before the scales
+                       // are built
+                       this.ensureScalesHaveIDs();
+                       this.buildOrUpdateControllers();
+                       this.buildScales();
+                       this.buildSurroundingItems();
+                       this.updateLayout();
+                       this.resetElements();
+                       this.initToolTip();
+                       this.update();
+
+                       // TODO
+                       // If AfterInit(this) doesn't return false, proceed
+
+                       return this;
+               },
+
+               clear: function clear() {
+                       helpers.clear(this.chart);
+                       return this;
+               },
+
+               stop: function stop() {
+                       // Stops any current animation loop occuring
+                       Chart.animationService.cancelAnimation(this);
+                       return this;
+               },
+
+               resize: function resize(silent) {
+                       var canvas = this.chart.canvas;
+                       var newWidth = helpers.getMaximumWidth(this.chart.canvas);
+                       var newHeight = (this.options.maintainAspectRatio && isNaN(this.chart.aspectRatio) === false && isFinite(this.chart.aspectRatio) && this.chart.aspectRatio !== 0) ? newWidth / this.chart.aspectRatio : helpers.getMaximumHeight(this.chart.canvas);
+
+                       var sizeChanged = this.chart.width !== newWidth || this.chart.height !== newHeight;
+
+                       if (!sizeChanged)
+                               return this;
+
+                       canvas.width = this.chart.width = newWidth;
+                       canvas.height = this.chart.height = newHeight;
+
+                       helpers.retinaScale(this.chart);
+
+                       if (!silent) {
+                               this.stop();
+                               this.update(this.options.responsiveAnimationDuration);
+                       }
+
+                       return this;
+               },
+               ensureScalesHaveIDs: function ensureScalesHaveIDs() {
+                       var defaultXAxisID = 'x-axis-';
+                       var defaultYAxisID = 'y-axis-';
+
+                       if (this.options.scales) {
+                               if (this.options.scales.xAxes && this.options.scales.xAxes.length) {
+                                       helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) {
+                                               xAxisOptions.id = xAxisOptions.id || (defaultXAxisID + index);
+                                       });
+                               }
+
+                               if (this.options.scales.yAxes && this.options.scales.yAxes.length) {
+                                       // Build the y axes
+                                       helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) {
+                                               yAxisOptions.id = yAxisOptions.id || (defaultYAxisID + index);
+                                       });
+                               }
+                       }
+               },
+               buildScales: function buildScales() {
+                       // Map of scale ID to scale object so we can lookup later
+                       this.scales = {};
+
+                       // Build the x axes
+                       if (this.options.scales) {
+                               if (this.options.scales.xAxes && this.options.scales.xAxes.length) {
+                                       helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) {
+                                               var xType = helpers.getValueOrDefault(xAxisOptions.type, 'category');
+                                               var ScaleClass = Chart.scaleService.getScaleConstructor(xType);
+                                               if (ScaleClass) {
+                                                       var scale = new ScaleClass({
+                                                               ctx: this.chart.ctx,
+                                                               options: xAxisOptions,
+                                                               chart: this,
+                                                               id: xAxisOptions.id
+                                                       });
+
+                                                       this.scales[scale.id] = scale;
+                                               }
+                                       }, this);
+                               }
+
+                               if (this.options.scales.yAxes && this.options.scales.yAxes.length) {
+                                       // Build the y axes
+                                       helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) {
+                                               var yType = helpers.getValueOrDefault(yAxisOptions.type, 'linear');
+                                               var ScaleClass = Chart.scaleService.getScaleConstructor(yType);
+                                               if (ScaleClass) {
+                                                       var scale = new ScaleClass({
+                                                               ctx: this.chart.ctx,
+                                                               options: yAxisOptions,
+                                                               chart: this,
+                                                               id: yAxisOptions.id
+                                                       });
+
+                                                       this.scales[scale.id] = scale;
+                                               }
+                                       }, this);
+                               }
+                       }
+                       if (this.options.scale) {
+                               // Build radial axes
+                               var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type);
+                               if (ScaleClass) {
+                                       var scale = new ScaleClass({
+                                               ctx: this.chart.ctx,
+                                               options: this.options.scale,
+                                               chart: this
+                                       });
+
+                                       this.scale = scale;
+
+                                       this.scales.radialScale = scale;
+                               }
+                       }
+
+                       Chart.scaleService.addScalesToLayout(this);
+               },
+
+               buildSurroundingItems: function() {
+                       if (this.options.title) {
+                               this.titleBlock = new Chart.Title({
+                                       ctx: this.chart.ctx,
+                                       options: this.options.title,
+                                       chart: this
+                               });
+
+                               Chart.layoutService.addBox(this, this.titleBlock);
+                       }
+
+                       if (this.options.legend) {
+                               this.legend = new Chart.Legend({
+                                       ctx: this.chart.ctx,
+                                       options: this.options.legend,
+                                       chart: this
+                               });
+
+                               Chart.layoutService.addBox(this, this.legend);
+                       }
+               },
+
+               updateLayout: function() {
+                       Chart.layoutService.update(this, this.chart.width, this.chart.height);
+               },
+
+               buildOrUpdateControllers: function buildOrUpdateControllers() {
+                       var types = [];
+                       var newControllers = [];
+
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               if (!dataset.type) {
+                                       dataset.type = this.config.type;
+                               }
+
+                               var type = dataset.type;
+                               types.push(type);
+
+                               if (dataset.controller) {
+                                       dataset.controller.updateIndex(datasetIndex);
+                               } else {
+                                       dataset.controller = new Chart.controllers[type](this, datasetIndex);
+                                       newControllers.push(dataset.controller);
+                               }
+                       }, this);
+
+                       if (types.length > 1) {
+                               for (var i = 1; i < types.length; i++) {
+                                       if (types[i] !== types[i - 1]) {
+                                               this.isCombo = true;
+                                               break;
+                                       }
+                               }
+                       }
+
+                       return newControllers;
+               },
+
+               resetElements: function resetElements() {
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               dataset.controller.reset();
+                       });
+               },
+
+               update: function update(animationDuration, lazy) {
+                       // In case the entire data object changed
+                       this.tooltip._data = this.data;
+
+                       // Make sure dataset controllers are updated and new controllers are reset
+                       var newControllers = this.buildOrUpdateControllers();
+
+                       Chart.layoutService.update(this, this.chart.width, this.chart.height);
+
+                       // Can only reset the new controllers after the scales have been updated
+                       helpers.each(newControllers, function(controller) {
+                               controller.reset();
+                       });
+
+                       // Make sure all dataset controllers have correct meta data counts
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               dataset.controller.buildOrUpdateElements();
+                       });
+
+                       // This will loop through any data and do the appropriate element update for the type
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               dataset.controller.update();
+                       });
+                       this.render(animationDuration, lazy);
+               },
+
+               render: function render(duration, lazy) {
+
+                       if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) {
+                               var animation = new Chart.Animation();
+                               animation.numSteps = (duration || this.options.animation.duration) / 16.66; //60 fps
+                               animation.easing = this.options.animation.easing;
+
+                               // render function
+                               animation.render = function(chartInstance, animationObject) {
+                                       var easingFunction = helpers.easingEffects[animationObject.easing];
+                                       var stepDecimal = animationObject.currentStep / animationObject.numSteps;
+                                       var easeDecimal = easingFunction(stepDecimal);
+
+                                       chartInstance.draw(easeDecimal, stepDecimal, animationObject.currentStep);
+                               };
+
+                               // user events
+                               animation.onAnimationProgress = this.options.animation.onProgress;
+                               animation.onAnimationComplete = this.options.animation.onComplete;
+
+                               Chart.animationService.addAnimation(this, animation, duration, lazy);
+                       } else {
+                               this.draw();
+                               if (this.options.animation && this.options.animation.onComplete && this.options.animation.onComplete.call) {
+                                       this.options.animation.onComplete.call(this);
+                               }
+                       }
+                       return this;
+               },
+
+               draw: function(ease) {
+                       var easingDecimal = ease || 1;
+                       this.clear();
+
+                       // Draw all the scales
+                       helpers.each(this.boxes, function(box) {
+                               box.draw(this.chartArea);
+                       }, this);
+                       if (this.scale) {
+                               this.scale.draw();
+                       }
+
+                       // Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function
+                       this.chart.ctx.save();
+                       this.chart.ctx.beginPath();
+                       this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
+                       this.chart.ctx.clip();
+
+                       // Draw each dataset via its respective controller (reversed to support proper line stacking)
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               if (helpers.isDatasetVisible(dataset)) {
+                                       dataset.controller.draw(ease);
+                               }
+                       }, null, true);
+
+                       // Restore from the clipping operation
+                       this.chart.ctx.restore();
+
+                       // Finally draw the tooltip
+                       this.tooltip.transition(easingDecimal).draw();
+               },
+
+               // Get the single element that was clicked on
+               // @return : An object containing the dataset index and element index of the matching element. Also contains the rectangle that was draw
+               getElementAtEvent: function(e) {
+
+                       var eventPosition = helpers.getRelativePosition(e, this.chart);
+                       var elementsArray = [];
+
+                       helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                               if (helpers.isDatasetVisible(dataset)) {
+                                       helpers.each(dataset.metaData, function(element, index) {
+                                               if (element.inRange(eventPosition.x, eventPosition.y)) {
+                                                       elementsArray.push(element);
+                                                       return elementsArray;
+                                               }
+                                       });
+                               }
+                       });
+
+                       return elementsArray;
+               },
+
+               getElementsAtEvent: function(e) {
+                       var eventPosition = helpers.getRelativePosition(e, this.chart);
+                       var elementsArray = [];
+
+                       var found = (function() {
+                               if (this.data.datasets) {
+                                       for (var i = 0; i < this.data.datasets.length; i++) {
+                                               if (helpers.isDatasetVisible(this.data.datasets[i])) {
+                                                       for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
+                                                               if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
+                                                                       return this.data.datasets[i].metaData[j];
+                                                               }
+                                                       }
+                                               }
+                                       }
+                               }
+                       }).call(this);
+
+                       if (!found) {
+                               return elementsArray;
+                       }
+
+                       helpers.each(this.data.datasets, function(dataset, dsIndex) {
+                               if (helpers.isDatasetVisible(dataset)) {
+                                       elementsArray.push(dataset.metaData[found._index]);
+                               }
+                       });
+
+                       return elementsArray;
+               },
+
+               getDatasetAtEvent: function(e) {
+                       var elementsArray = this.getElementAtEvent(e);
+
+                       if (elementsArray.length > 0) {
+                               elementsArray = this.data.datasets[elementsArray[0]._datasetIndex].metaData;
+                       }
+
+                       return elementsArray;
+               },
+
+               generateLegend: function generateLegend() {
+                       return this.options.legendCallback(this);
+               },
+
+               destroy: function destroy() {
+                       this.clear();
+                       helpers.unbindEvents(this, this.events);
+                       helpers.removeResizeListener(this.chart.canvas.parentNode);
+
+                       // Reset canvas height/width attributes
+                       var canvas = this.chart.canvas;
+                       canvas.width = this.chart.width;
+                       canvas.height = this.chart.height;
+
+                       // if we scaled the canvas in response to a devicePixelRatio !== 1, we need to undo that transform here
+                       if (this.chart.originalDevicePixelRatio !== undefined) {
+                               this.chart.ctx.scale(1 / this.chart.originalDevicePixelRatio, 1 / this.chart.originalDevicePixelRatio);
+                       }
+
+                       // Reset to the old style since it may have been changed by the device pixel ratio changes
+                       canvas.style.width = this.chart.originalCanvasStyleWidth;
+                       canvas.style.height = this.chart.originalCanvasStyleHeight;
+
+                       delete Chart.instances[this.id];
+               },
+
+               toBase64Image: function toBase64Image() {
+                       return this.chart.canvas.toDataURL.apply(this.chart.canvas, arguments);
+               },
+
+               initToolTip: function initToolTip() {
+                       this.tooltip = new Chart.Tooltip({
+                               _chart: this.chart,
+                               _chartInstance: this,
+                               _data: this.data,
+                               _options: this.options
+                       }, this);
+               },
+
+               bindEvents: function bindEvents() {
+                       helpers.bindEvents(this, this.options.events, function(evt) {
+                               this.eventHandler(evt);
+                       });
+               },
+               eventHandler: function eventHandler(e) {
+                       this.lastActive = this.lastActive || [];
+                       this.lastTooltipActive = this.lastTooltipActive || [];
+
+                       // Find Active Elements for hover and tooltips
+                       if (e.type === 'mouseout') {
+                               this.active = [];
+                               this.tooltipActive = [];
+                       } else {
+
+                               var _this = this;
+                               var getItemsForMode = function(mode) {
+                                       switch (mode) {
+                                               case 'single':
+                                                       return _this.getElementAtEvent(e);
+                                               case 'label':
+                                                       return _this.getElementsAtEvent(e);
+                                               case 'dataset':
+                                                       return _this.getDatasetAtEvent(e);
+                                               default:
+                                                       return e;
+                                       }
+                               };
+
+                               this.active = getItemsForMode(this.options.hover.mode);
+                               this.tooltipActive = getItemsForMode(this.options.tooltips.mode);
+                       }
+
+                       // On Hover hook
+                       if (this.options.hover.onHover) {
+                               this.options.hover.onHover.call(this, this.active);
+                       }
+
+                       if (e.type === 'mouseup' || e.type === 'click') {
+                               if (this.options.onClick) {
+                                       this.options.onClick.call(this, e, this.active);
+                               }
+
+                               if (this.legend && this.legend.handleEvent) {
+                                       this.legend.handleEvent(e);
+                               }
+                       }
+
+                       var dataset;
+                       var index;
+
+                       // Remove styling for last active (even if it may still be active)
+                       if (this.lastActive.length) {
+                               switch (this.options.hover.mode) {
+                                       case 'single':
+                                               this.data.datasets[this.lastActive[0]._datasetIndex].controller.removeHoverStyle(this.lastActive[0], this.lastActive[0]._datasetIndex, this.lastActive[0]._index);
+                                               break;
+                                       case 'label':
+                                       case 'dataset':
+                                               for (var i = 0; i < this.lastActive.length; i++) {
+                                                       if (this.lastActive[i])
+                                                               this.data.datasets[this.lastActive[i]._datasetIndex].controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
+                                               }
+                                               break;
+                                       default:
+                                               // Don't change anything
+                               }
+                       }
+
+                       // Built in hover styling
+                       if (this.active.length && this.options.hover.mode) {
+                               switch (this.options.hover.mode) {
+                                       case 'single':
+                                               this.data.datasets[this.active[0]._datasetIndex].controller.setHoverStyle(this.active[0]);
+                                               break;
+                                       case 'label':
+                                       case 'dataset':
+                                               for (var j = 0; j < this.active.length; j++) {
+                                                       if (this.active[j])
+                                                               this.data.datasets[this.active[j]._datasetIndex].controller.setHoverStyle(this.active[j]);
+                                               }
+                                               break;
+                                       default:
+                                               // Don't change anything
+                               }
+                       }
+
+
+                       // Built in Tooltips
+                       if (this.options.tooltips.enabled || this.options.tooltips.custom) {
+
+                               // The usual updates
+                               this.tooltip.initialize();
+                               this.tooltip._active = this.tooltipActive;
+                               this.tooltip.update();
+                       }
+
+                       // Hover animations
+                       this.tooltip.pivot();
+
+                       if (!this.animating) {
+                               var changed;
+
+                               helpers.each(this.active, function(element, index) {
+                                       if (element !== this.lastActive[index]) {
+                                               changed = true;
+                                       }
+                               }, this);
+
+                               helpers.each(this.tooltipActive, function(element, index) {
+                                       if (element !== this.lastTooltipActive[index]) {
+                                               changed = true;
+                                       }
+                               }, this);
+
+                               // If entering, leaving, or changing elements, animate the change via pivot
+                               if ((this.lastActive.length !== this.active.length) ||
+                                       (this.lastTooltipActive.length !== this.tooltipActive.length) ||
+                                       changed) {
+
+                                       this.stop();
+
+                                       if (this.options.tooltips.enabled || this.options.tooltips.custom) {
+                                               this.tooltip.update(true);
+                                       }
+
+                                       // We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more
+                                       // memory than necessary.
+                                       this.render(this.options.hover.animationDuration, true);
+                               }
+                       }
+
+                       // Remember Last Actives
+                       this.lastActive = this.active;
+                       this.lastTooltipActive = this.tooltipActive;
+                       return this;
+               }
+       });
+};
+
+},{}],23:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       // Base class for all dataset controllers (line, bar, etc)
+       Chart.DatasetController = function(chart, datasetIndex) {
+               this.initialize.call(this, chart, datasetIndex);
+       };
+
+       helpers.extend(Chart.DatasetController.prototype, {
+               initialize: function(chart, datasetIndex) {
+                       this.chart = chart;
+                       this.index = datasetIndex;
+                       this.linkScales();
+                       this.addElements();
+               },
+               updateIndex: function(datasetIndex) {
+                       this.index = datasetIndex;
+               },
+
+               linkScales: function() {
+                       if (!this.getDataset().xAxisID) {
+                               this.getDataset().xAxisID = this.chart.options.scales.xAxes[0].id;
+                       }
+
+                       if (!this.getDataset().yAxisID) {
+                               this.getDataset().yAxisID = this.chart.options.scales.yAxes[0].id;
+                       }
+               },
+
+               getDataset: function() {
+                       return this.chart.data.datasets[this.index];
+               },
+
+               getScaleForId: function(scaleID) {
+                       return this.chart.scales[scaleID];
+               },
+
+               reset: function() {
+                       this.update(true);
+               },
+
+               buildOrUpdateElements: function buildOrUpdateElements() {
+                       // Handle the number of data points changing
+                       var numData = this.getDataset().data.length;
+                       var numMetaData = this.getDataset().metaData.length;
+
+                       // Make sure that we handle number of datapoints changing
+                       if (numData < numMetaData) {
+                               // Remove excess bars for data points that have been removed
+                               this.getDataset().metaData.splice(numData, numMetaData - numData);
+                       } else if (numData > numMetaData) {
+                               // Add new elements
+                               for (var index = numMetaData; index < numData; ++index) {
+                                       this.addElementAndReset(index);
+                               }
+                       }
+               },
+
+               // Controllers should implement the following
+               addElements: helpers.noop,
+               addElementAndReset: helpers.noop,
+               draw: helpers.noop,
+               removeHoverStyle: helpers.noop,
+               setHoverStyle: helpers.noop,
+               update: helpers.noop
+       });
+
+       Chart.DatasetController.extend = helpers.inherits;
+
+};
+},{}],24:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+  var helpers = Chart.helpers;
+
+  Chart.elements = {};
+
+  Chart.Element = function(configuration) {
+    helpers.extend(this, configuration);
+    this.initialize.apply(this, arguments);
+  };
+  helpers.extend(Chart.Element.prototype, {
+    initialize: function() {},
+    pivot: function() {
+      if (!this._view) {
+        this._view = helpers.clone(this._model);
+      }
+      this._start = helpers.clone(this._view);
+      return this;
+    },
+    transition: function(ease) {
+      if (!this._view) {
+        this._view = helpers.clone(this._model);
+      }
+
+      // No animation -> No Transition
+      if (ease === 1) {
+        this._view = this._model;
+        this._start = null;
+        return this;
+      }
+
+      if (!this._start) {
+        this.pivot();
+      }
+
+      helpers.each(this._model, function(value, key) {
+
+        if (key[0] === '_' || !this._model.hasOwnProperty(key)) {
+          // Only non-underscored properties
+        }
+
+        // Init if doesn't exist
+        else if (!this._view.hasOwnProperty(key)) {
+          if (typeof value === 'number' && !isNaN(this._view[key])) {
+            this._view[key] = value * ease;
+          } else {
+            this._view[key] = value;
+          }
+        }
+
+        // No unnecessary computations
+        else if (value === this._view[key]) {
+          // It's the same! Woohoo!
+        }
+
+        // Color transitions if possible
+        else if (typeof value === 'string') {
+          try {
+            var color = helpers.color(this._start[key]).mix(helpers.color(this._model[key]), ease);
+            this._view[key] = color.rgbString();
+          } catch (err) {
+            this._view[key] = value;
+          }
+        }
+        // Number transitions
+        else if (typeof value === 'number') {
+          var startVal = this._start[key] !== undefined && isNaN(this._start[key]) === false ? this._start[key] : 0;
+          this._view[key] = ((this._model[key] - startVal) * ease) + startVal;
+        }
+        // Everything else
+        else {
+          this._view[key] = value;
+        }
+      }, this);
+
+      return this;
+    },
+    tooltipPosition: function() {
+      return {
+        x: this._model.x,
+        y: this._model.y
+      };
+    },
+    hasValue: function() {
+      return helpers.isNumber(this._model.x) && helpers.isNumber(this._model.y);
+    }
+  });
+
+  Chart.Element.extend = helpers.inherits;
+
+};
+
+},{}],25:[function(require,module,exports){
+/*global window: false */
+/*global document: false */
+"use strict";
+
+var color = require('chartjs-color');
+
+module.exports = function(Chart) {
+
+       //Global Chart helpers object for utility methods and classes
+       var helpers = Chart.helpers = {};
+
+       //-- Basic js utility methods
+       helpers.each = function(loopable, callback, self, reverse) {
+               // Check to see if null or undefined firstly.
+               var i, len;
+               if (helpers.isArray(loopable)) {
+                       len = loopable.length;
+                       if (reverse) {
+                               for (i = len - 1; i >= 0; i--) {
+                                       callback.call(self, loopable[i], i);
+                               }
+                       } else {
+                               for (i = 0; i < len; i++) {
+                                       callback.call(self, loopable[i], i);
+                               }
+                       }
+               } else if (typeof loopable === 'object') {
+                       var keys = Object.keys(loopable);
+                       len = keys.length;
+                       for (i = 0; i < len; i++) {
+                               callback.call(self, loopable[keys[i]], keys[i]);
+                       }
+               }
+       };
+       helpers.clone = function(obj) {
+               var objClone = {};
+               helpers.each(obj, function(value, key) {
+                       if (obj.hasOwnProperty(key)) {
+                               if (helpers.isArray(value)) {
+                                       objClone[key] = value.slice(0);
+                               } else if (typeof value === 'object' && value !== null) {
+                                       objClone[key] = helpers.clone(value);
+                               } else {
+                                       objClone[key] = value;
+                               }
+                       }
+               });
+               return objClone;
+       };
+       helpers.extend = function(base) {
+               var len = arguments.length;
+               var additionalArgs = [];
+               for (var i = 1; i < len; i++) {
+                       additionalArgs.push(arguments[i]);
+               }
+               helpers.each(additionalArgs, function(extensionObject) {
+                       helpers.each(extensionObject, function(value, key) {
+                               if (extensionObject.hasOwnProperty(key)) {
+                                       base[key] = value;
+                               }
+                       });
+               });
+               return base;
+       };
+       // Need a special merge function to chart configs since they are now grouped
+       helpers.configMerge = function(_base) {
+               var base = helpers.clone(_base);
+               helpers.each(Array.prototype.slice.call(arguments, 1), function(extension) {
+                       helpers.each(extension, function(value, key) {
+                               if (extension.hasOwnProperty(key)) {
+                                       if (key === 'scales') {
+                                               // Scale config merging is complex. Add out own function here for that
+                                               base[key] = helpers.scaleMerge(base.hasOwnProperty(key) ? base[key] : {}, value);
+
+                                       } else if (key === 'scale') {
+                                               // Used in polar area & radar charts since there is only one scale
+                                               base[key] = helpers.configMerge(base.hasOwnProperty(key) ? base[key] : {}, Chart.scaleService.getScaleDefaults(value.type), value);
+                                       } else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) {
+                                               // In this case we have an array of objects replacing another array. Rather than doing a strict replace,
+                                               // merge. This allows easy scale option merging
+                                               var baseArray = base[key];
+
+                                               helpers.each(value, function(valueObj, index) {
+
+                                                       if (index < baseArray.length) {
+                                                               if (typeof baseArray[index] === 'object' && baseArray[index] !== null && typeof valueObj === 'object' && valueObj !== null) {
+                                                                       // Two objects are coming together. Do a merge of them.
+                                                                       baseArray[index] = helpers.configMerge(baseArray[index], valueObj);
+                                                               } else {
+                                                                       // Just overwrite in this case since there is nothing to merge
+                                                                       baseArray[index] = valueObj;
+                                                               }
+                                                       } else {
+                                                               baseArray.push(valueObj); // nothing to merge
+                                                       }
+                                               });
+
+                                       } else if (base.hasOwnProperty(key) && typeof base[key] === "object" && base[key] !== null && typeof value === "object") {
+                                               // If we are overwriting an object with an object, do a merge of the properties.
+                                               base[key] = helpers.configMerge(base[key], value);
+
+                                       } else {
+                                               // can just overwrite the value in this case
+                                               base[key] = value;
+                                       }
+                               }
+                       });
+               });
+
+               return base;
+       };
+       helpers.extendDeep = function(_base) {
+               return _extendDeep.apply(this, arguments);
+
+               function _extendDeep(dst) {
+                       helpers.each(arguments, function(obj) {
+                               if (obj !== dst) {
+                                       helpers.each(obj, function(value, key) {
+                                               if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
+                                                       _extendDeep(dst[key], value);
+                                               } else {
+                                                       dst[key] = value;
+                                               }
+                                       });
+                               }
+                       });
+                       return dst;
+               }
+       };
+       helpers.scaleMerge = function(_base, extension) {
+               var base = helpers.clone(_base);
+
+               helpers.each(extension, function(value, key) {
+                       if (extension.hasOwnProperty(key)) {
+                               if (key === 'xAxes' || key === 'yAxes') {
+                                       // These properties are arrays of items
+                                       if (base.hasOwnProperty(key)) {
+                                               helpers.each(value, function(valueObj, index) {
+                                                       var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
+                                                       var axisDefaults = Chart.scaleService.getScaleDefaults(axisType);
+                                                       if (index >= base[key].length || !base[key][index].type) {
+                                                               base[key].push(helpers.configMerge(axisDefaults, valueObj));
+                                                       } else if (valueObj.type && valueObj.type !== base[key][index].type) {
+                                                               // Type changed. Bring in the new defaults before we bring in valueObj so that valueObj can override the correct scale defaults
+                                                               base[key][index] = helpers.configMerge(base[key][index], axisDefaults, valueObj);
+                                                       } else {
+                                                               // Type is the same
+                                                               base[key][index] = helpers.configMerge(base[key][index], valueObj);
+                                                       }
+                                               });
+                                       } else {
+                                               base[key] = [];
+                                               helpers.each(value, function(valueObj) {
+                                                       var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
+                                                       base[key].push(helpers.configMerge(Chart.scaleService.getScaleDefaults(axisType), valueObj));
+                                               });
+                                       }
+                               } else if (base.hasOwnProperty(key) && typeof base[key] === "object" && base[key] !== null && typeof value === "object") {
+                                       // If we are overwriting an object with an object, do a merge of the properties.
+                                       base[key] = helpers.configMerge(base[key], value);
+
+                               } else {
+                                       // can just overwrite the value in this case
+                                       base[key] = value;
+                               }
+                       }
+               });
+
+               return base;
+       };
+       helpers.getValueAtIndexOrDefault = function(value, index, defaultValue) {
+               if (value === undefined || value === null) {
+                       return defaultValue;
+               }
+
+               if (helpers.isArray(value)) {
+                       return index < value.length ? value[index] : defaultValue;
+               }
+
+               return value;
+       };
+       helpers.getValueOrDefault = function(value, defaultValue) {
+               return value === undefined ? defaultValue : value;
+       };
+       helpers.indexOf = function(arrayToSearch, item) {
+               if (Array.prototype.indexOf) {
+                       return arrayToSearch.indexOf(item);
+               } else {
+                       for (var i = 0; i < arrayToSearch.length; i++) {
+                               if (arrayToSearch[i] === item)
+                                       return i;
+                       }
+                       return -1;
+               }
+       };
+       helpers.where = function(collection, filterCallback) {
+               var filtered = [];
+
+               helpers.each(collection, function(item) {
+                       if (filterCallback(item)) {
+                               filtered.push(item);
+                       }
+               });
+
+               return filtered;
+       };
+       helpers.findIndex = function(arrayToSearch, callback, thisArg) {
+               var index = -1;
+               if (Array.prototype.findIndex) {
+                       index = arrayToSearch.findIndex(callback, thisArg);
+               } else {
+                       for (var i = 0; i < arrayToSearch.length; ++i) {
+                               thisArg = thisArg !== undefined ? thisArg : arrayToSearch;
+
+                               if (callback.call(thisArg, arrayToSearch[i], i, arrayToSearch)) {
+                                       index = i;
+                                       break;
+                               }
+                       }
+               }
+
+               return index;
+       };
+       helpers.findNextWhere = function(arrayToSearch, filterCallback, startIndex) {
+               // Default to start of the array
+               if (startIndex === undefined || startIndex === null) {
+                       startIndex = -1;
+               }
+               for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
+                       var currentItem = arrayToSearch[i];
+                       if (filterCallback(currentItem)) {
+                               return currentItem;
+                       }
+               }
+       };
+       helpers.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex) {
+               // Default to end of the array
+               if (startIndex === undefined || startIndex === null) {
+                       startIndex = arrayToSearch.length;
+               }
+               for (var i = startIndex - 1; i >= 0; i--) {
+                       var currentItem = arrayToSearch[i];
+                       if (filterCallback(currentItem)) {
+                               return currentItem;
+                       }
+               }
+       };
+       helpers.inherits = function(extensions) {
+               //Basic javascript inheritance based on the model created in Backbone.js
+               var parent = this;
+               var ChartElement = (extensions && extensions.hasOwnProperty("constructor")) ? extensions.constructor : function() {
+                       return parent.apply(this, arguments);
+               };
+
+               var Surrogate = function() {
+                       this.constructor = ChartElement;
+               };
+               Surrogate.prototype = parent.prototype;
+               ChartElement.prototype = new Surrogate();
+
+               ChartElement.extend = helpers.inherits;
+
+               if (extensions) {
+                       helpers.extend(ChartElement.prototype, extensions);
+               }
+
+               ChartElement.__super__ = parent.prototype;
+
+               return ChartElement;
+       };
+       helpers.noop = function() {};
+       helpers.uid = (function() {
+               var id = 0;
+               return function() {
+                       return "chart-" + id++;
+               };
+       })();
+       helpers.warn = function(str) {
+               //Method for warning of errors
+               if (console && typeof console.warn === "function") {
+                       console.warn(str);
+               }
+       };
+       //-- Math methods
+       helpers.isNumber = function(n) {
+               return !isNaN(parseFloat(n)) && isFinite(n);
+       };
+       helpers.almostEquals = function(x, y, epsilon) {
+               return Math.abs(x - y) < epsilon;
+       };
+       helpers.max = function(array) {
+               return array.reduce(function(max, value) {
+                       if (!isNaN(value)) {
+                               return Math.max(max, value);
+                       } else {
+                               return max;
+                       }
+               }, Number.NEGATIVE_INFINITY);
+       };
+       helpers.min = function(array) {
+               return array.reduce(function(min, value) {
+                       if (!isNaN(value)) {
+                               return Math.min(min, value);
+                       } else {
+                               return min;
+                       }
+               }, Number.POSITIVE_INFINITY);
+       };
+       helpers.sign = function(x) {
+               if (Math.sign) {
+                       return Math.sign(x);
+               } else {
+                       x = +x; // convert to a number
+                       if (x === 0 || isNaN(x)) {
+                               return x;
+                       }
+                       return x > 0 ? 1 : -1;
+               }
+       };
+       helpers.log10 = function(x) {
+               if (Math.log10) {
+                       return Math.log10(x);
+               } else {
+                       return Math.log(x) / Math.LN10;
+               }
+       };
+       helpers.toRadians = function(degrees) {
+               return degrees * (Math.PI / 180);
+       };
+       helpers.toDegrees = function(radians) {
+               return radians * (180 / Math.PI);
+       };
+       // Gets the angle from vertical upright to the point about a centre.
+       helpers.getAngleFromPoint = function(centrePoint, anglePoint) {
+               var distanceFromXCenter = anglePoint.x - centrePoint.x,
+                       distanceFromYCenter = anglePoint.y - centrePoint.y,
+                       radialDistanceFromCenter = Math.sqrt(distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
+
+               var angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
+
+               if (angle < (-0.5 * Math.PI)) {
+                       angle += 2.0 * Math.PI; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
+               }
+
+               return {
+                       angle: angle,
+                       distance: radialDistanceFromCenter
+               };
+       };
+       helpers.aliasPixel = function(pixelWidth) {
+               return (pixelWidth % 2 === 0) ? 0 : 0.5;
+       };
+       helpers.splineCurve = function(firstPoint, middlePoint, afterPoint, t) {
+               //Props to Rob Spencer at scaled innovation for his post on splining between points
+               //http://scaledinnovation.com/analytics/splines/aboutSplines.html
+
+               // This function must also respect "skipped" points
+
+               var previous = firstPoint.skip ? middlePoint : firstPoint,
+                       current = middlePoint,
+                       next = afterPoint.skip ? middlePoint : afterPoint;
+
+               var d01 = Math.sqrt(Math.pow(current.x - previous.x, 2) + Math.pow(current.y - previous.y, 2));
+               var d12 = Math.sqrt(Math.pow(next.x - current.x, 2) + Math.pow(next.y - current.y, 2));
+
+               var s01 = d01 / (d01 + d12);
+               var s12 = d12 / (d01 + d12);
+
+               // If all points are the same, s01 & s02 will be inf
+               s01 = isNaN(s01) ? 0 : s01;
+               s12 = isNaN(s12) ? 0 : s12;
+
+               var fa = t * s01; // scaling factor for triangle Ta
+               var fb = t * s12;
+
+               return {
+                       previous: {
+                               x: current.x - fa * (next.x - previous.x),
+                               y: current.y - fa * (next.y - previous.y)
+                       },
+                       next: {
+                               x: current.x + fb * (next.x - previous.x),
+                               y: current.y + fb * (next.y - previous.y)
+                       }
+               };
+       };
+       helpers.nextItem = function(collection, index, loop) {
+               if (loop) {
+                       return index >= collection.length - 1 ? collection[0] : collection[index + 1];
+               }
+
+               return index >= collection.length - 1 ? collection[collection.length - 1] : collection[index + 1];
+       };
+       helpers.previousItem = function(collection, index, loop) {
+               if (loop) {
+                       return index <= 0 ? collection[collection.length - 1] : collection[index - 1];
+               }
+               return index <= 0 ? collection[0] : collection[index - 1];
+       };
+       // Implementation of the nice number algorithm used in determining where axis labels will go
+       helpers.niceNum = function(range, round) {
+               var exponent = Math.floor(helpers.log10(range));
+               var fraction = range / Math.pow(10, exponent);
+               var niceFraction;
+
+               if (round) {
+                       if (fraction < 1.5) {
+                               niceFraction = 1;
+                       } else if (fraction < 3) {
+                               niceFraction = 2;
+                       } else if (fraction < 7) {
+                               niceFraction = 5;
+                       } else {
+                               niceFraction = 10;
+                       }
+               } else {
+                       if (fraction <= 1.0) {
+                               niceFraction = 1;
+                       } else if (fraction <= 2) {
+                               niceFraction = 2;
+                       } else if (fraction <= 5) {
+                               niceFraction = 5;
+                       } else {
+                               niceFraction = 10;
+                       }
+               }
+
+               return niceFraction * Math.pow(10, exponent);
+       };
+       //Easing functions adapted from Robert Penner's easing equations
+       //http://www.robertpenner.com/easing/
+       var easingEffects = helpers.easingEffects = {
+               linear: function(t) {
+                       return t;
+               },
+               easeInQuad: function(t) {
+                       return t * t;
+               },
+               easeOutQuad: function(t) {
+                       return -1 * t * (t - 2);
+               },
+               easeInOutQuad: function(t) {
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * t * t;
+                       }
+                       return -1 / 2 * ((--t) * (t - 2) - 1);
+               },
+               easeInCubic: function(t) {
+                       return t * t * t;
+               },
+               easeOutCubic: function(t) {
+                       return 1 * ((t = t / 1 - 1) * t * t + 1);
+               },
+               easeInOutCubic: function(t) {
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * t * t * t;
+                       }
+                       return 1 / 2 * ((t -= 2) * t * t + 2);
+               },
+               easeInQuart: function(t) {
+                       return t * t * t * t;
+               },
+               easeOutQuart: function(t) {
+                       return -1 * ((t = t / 1 - 1) * t * t * t - 1);
+               },
+               easeInOutQuart: function(t) {
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * t * t * t * t;
+                       }
+                       return -1 / 2 * ((t -= 2) * t * t * t - 2);
+               },
+               easeInQuint: function(t) {
+                       return 1 * (t /= 1) * t * t * t * t;
+               },
+               easeOutQuint: function(t) {
+                       return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
+               },
+               easeInOutQuint: function(t) {
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * t * t * t * t * t;
+                       }
+                       return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
+               },
+               easeInSine: function(t) {
+                       return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
+               },
+               easeOutSine: function(t) {
+                       return 1 * Math.sin(t / 1 * (Math.PI / 2));
+               },
+               easeInOutSine: function(t) {
+                       return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
+               },
+               easeInExpo: function(t) {
+                       return (t === 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
+               },
+               easeOutExpo: function(t) {
+                       return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
+               },
+               easeInOutExpo: function(t) {
+                       if (t === 0) {
+                               return 0;
+                       }
+                       if (t === 1) {
+                               return 1;
+                       }
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * Math.pow(2, 10 * (t - 1));
+                       }
+                       return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
+               },
+               easeInCirc: function(t) {
+                       if (t >= 1) {
+                               return t;
+                       }
+                       return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
+               },
+               easeOutCirc: function(t) {
+                       return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
+               },
+               easeInOutCirc: function(t) {
+                       if ((t /= 1 / 2) < 1) {
+                               return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
+                       }
+                       return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+               },
+               easeInElastic: function(t) {
+                       var s = 1.70158;
+                       var p = 0;
+                       var a = 1;
+                       if (t === 0) {
+                               return 0;
+                       }
+                       if ((t /= 1) === 1) {
+                               return 1;
+                       }
+                       if (!p) {
+                               p = 1 * 0.3;
+                       }
+                       if (a < Math.abs(1)) {
+                               a = 1;
+                               s = p / 4;
+                       } else {
+                               s = p / (2 * Math.PI) * Math.asin(1 / a);
+                       }
+                       return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
+               },
+               easeOutElastic: function(t) {
+                       var s = 1.70158;
+                       var p = 0;
+                       var a = 1;
+                       if (t === 0) {
+                               return 0;
+                       }
+                       if ((t /= 1) === 1) {
+                               return 1;
+                       }
+                       if (!p) {
+                               p = 1 * 0.3;
+                       }
+                       if (a < Math.abs(1)) {
+                               a = 1;
+                               s = p / 4;
+                       } else {
+                               s = p / (2 * Math.PI) * Math.asin(1 / a);
+                       }
+                       return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
+               },
+               easeInOutElastic: function(t) {
+                       var s = 1.70158;
+                       var p = 0;
+                       var a = 1;
+                       if (t === 0) {
+                               return 0;
+                       }
+                       if ((t /= 1 / 2) === 2) {
+                               return 1;
+                       }
+                       if (!p) {
+                               p = 1 * (0.3 * 1.5);
+                       }
+                       if (a < Math.abs(1)) {
+                               a = 1;
+                               s = p / 4;
+                       } else {
+                               s = p / (2 * Math.PI) * Math.asin(1 / a);
+                       }
+                       if (t < 1) {
+                               return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
+                       }
+                       return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
+               },
+               easeInBack: function(t) {
+                       var s = 1.70158;
+                       return 1 * (t /= 1) * t * ((s + 1) * t - s);
+               },
+               easeOutBack: function(t) {
+                       var s = 1.70158;
+                       return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
+               },
+               easeInOutBack: function(t) {
+                       var s = 1.70158;
+                       if ((t /= 1 / 2) < 1) {
+                               return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
+                       }
+                       return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
+               },
+               easeInBounce: function(t) {
+                       return 1 - easingEffects.easeOutBounce(1 - t);
+               },
+               easeOutBounce: function(t) {
+                       if ((t /= 1) < (1 / 2.75)) {
+                               return 1 * (7.5625 * t * t);
+                       } else if (t < (2 / 2.75)) {
+                               return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75);
+                       } else if (t < (2.5 / 2.75)) {
+                               return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375);
+                       } else {
+                               return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375);
+                       }
+               },
+               easeInOutBounce: function(t) {
+                       if (t < 1 / 2) {
+                               return easingEffects.easeInBounce(t * 2) * 0.5;
+                       }
+                       return easingEffects.easeOutBounce(t * 2 - 1) * 0.5 + 1 * 0.5;
+               }
+       };
+       //Request animation polyfill - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+       helpers.requestAnimFrame = (function() {
+               return window.requestAnimationFrame ||
+                       window.webkitRequestAnimationFrame ||
+                       window.mozRequestAnimationFrame ||
+                       window.oRequestAnimationFrame ||
+                       window.msRequestAnimationFrame ||
+                       function(callback) {
+                               return window.setTimeout(callback, 1000 / 60);
+                       };
+       })();
+       helpers.cancelAnimFrame = (function() {
+               return window.cancelAnimationFrame ||
+                       window.webkitCancelAnimationFrame ||
+                       window.mozCancelAnimationFrame ||
+                       window.oCancelAnimationFrame ||
+                       window.msCancelAnimationFrame ||
+                       function(callback) {
+                               return window.clearTimeout(callback, 1000 / 60);
+                       };
+       })();
+       //-- DOM methods
+       helpers.getRelativePosition = function(evt, chart) {
+               var mouseX, mouseY;
+               var e = evt.originalEvent || evt,
+                       canvas = evt.currentTarget || evt.srcElement,
+                       boundingRect = canvas.getBoundingClientRect();
+
+               if (e.touches && e.touches.length > 0) {
+                       mouseX = e.touches[0].clientX;
+                       mouseY = e.touches[0].clientY;
+
+               } else {
+                       mouseX = e.clientX;
+                       mouseY = e.clientY;
+               }
+
+               // Scale mouse coordinates into canvas coordinates
+               // by following the pattern laid out by 'jerryj' in the comments of
+               // http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
+               var paddingLeft = parseFloat(helpers.getStyle(canvas, 'padding-left'));
+               var paddingTop = parseFloat(helpers.getStyle(canvas, 'padding-top'));
+               var paddingRight = parseFloat(helpers.getStyle(canvas, 'padding-right'));
+               var paddingBottom = parseFloat(helpers.getStyle(canvas, 'padding-bottom'));
+               var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
+               var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
+
+               // We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
+               // the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
+               mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
+               mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
+
+               return {
+                       x: mouseX,
+                       y: mouseY
+               };
+
+       };
+       helpers.addEvent = function(node, eventType, method) {
+               if (node.addEventListener) {
+                       node.addEventListener(eventType, method);
+               } else if (node.attachEvent) {
+                       node.attachEvent("on" + eventType, method);
+               } else {
+                       node["on" + eventType] = method;
+               }
+       };
+       helpers.removeEvent = function(node, eventType, handler) {
+               if (node.removeEventListener) {
+                       node.removeEventListener(eventType, handler, false);
+               } else if (node.detachEvent) {
+                       node.detachEvent("on" + eventType, handler);
+               } else {
+                       node["on" + eventType] = helpers.noop;
+               }
+       };
+       helpers.bindEvents = function(chartInstance, arrayOfEvents, handler) {
+               // Create the events object if it's not already present
+               if (!chartInstance.events)
+                       chartInstance.events = {};
+
+               helpers.each(arrayOfEvents, function(eventName) {
+                       chartInstance.events[eventName] = function() {
+                               handler.apply(chartInstance, arguments);
+                       };
+                       helpers.addEvent(chartInstance.chart.canvas, eventName, chartInstance.events[eventName]);
+               });
+       };
+       helpers.unbindEvents = function(chartInstance, arrayOfEvents) {
+               helpers.each(arrayOfEvents, function(handler, eventName) {
+                       helpers.removeEvent(chartInstance.chart.canvas, eventName, handler);
+               });
+       };
+
+       // Private helper function to convert max-width/max-height values that may be percentages into a number
+       function parseMaxStyle(styleValue, node, parentProperty) {
+               var valueInPixels;
+               if (typeof(styleValue) === 'string') {
+                       valueInPixels = parseInt(styleValue, 10);
+
+                       if (styleValue.indexOf('%') != -1) {
+                               // percentage * size in dimension
+                               valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
+                       }
+               } else {
+                       valueInPixels = styleValue;
+               }
+
+               return valueInPixels;
+       }
+
+       // Private helper to get a constraint dimension
+       // @param domNode : the node to check the constraint on
+       // @param maxStyle : the style that defines the maximum for the direction we are using (max-width / max-height)
+       // @param percentageProperty : property of parent to use when calculating width as a percentage
+       function getConstraintDimension(domNode, maxStyle, percentageProperty) {
+               var constrainedDimension;
+               var constrainedNode = document.defaultView.getComputedStyle(domNode)[maxStyle];
+               var constrainedContainer = document.defaultView.getComputedStyle(domNode.parentNode)[maxStyle];
+               var hasCNode = constrainedNode !== null && constrainedNode !== "none";
+               var hasCContainer = constrainedContainer !== null && constrainedContainer !== "none";
+
+               if (hasCNode || hasCContainer) {
+                       constrainedDimension = Math.min((hasCNode ? parseMaxStyle(constrainedNode, domNode, percentageProperty) : Number.POSITIVE_INFINITY), (hasCContainer ? parseMaxStyle(constrainedContainer, domNode.parentNode, percentageProperty) : Number.POSITIVE_INFINITY));
+               }
+               return constrainedDimension;
+       }
+       // returns Number or undefined if no constraint
+       helpers.getConstraintWidth = function(domNode) {
+               return getConstraintDimension(domNode, 'max-width', 'clientWidth');
+       };
+       // returns Number or undefined if no constraint
+       helpers.getConstraintHeight = function(domNode) {
+               return getConstraintDimension(domNode, 'max-height', 'clientHeight');
+       };
+       helpers.getMaximumWidth = function(domNode) {
+               var container = domNode.parentNode;
+               var padding = parseInt(helpers.getStyle(container, 'padding-left')) + parseInt(helpers.getStyle(container, 'padding-right'));
+
+               var w = container.clientWidth - padding;
+               var cw = helpers.getConstraintWidth(domNode);
+               if (cw !== undefined) {
+                       w = Math.min(w, cw);
+               }
+
+               return w;
+       };
+       helpers.getMaximumHeight = function(domNode) {
+               var container = domNode.parentNode;
+               var padding = parseInt(helpers.getStyle(container, 'padding-top')) + parseInt(helpers.getStyle(container, 'padding-bottom'));
+
+               var h = container.clientHeight - padding;
+               var ch = helpers.getConstraintHeight(domNode);
+               if (ch !== undefined) {
+                       h = Math.min(h, ch);
+               }
+
+               return h;
+       };
+       helpers.getStyle = function(el, property) {
+               return el.currentStyle ?
+                       el.currentStyle[property] :
+                       document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
+       };
+       helpers.retinaScale = function(chart) {
+               var ctx = chart.ctx;
+               var width = chart.canvas.width;
+               var height = chart.canvas.height;
+               var pixelRatio = chart.currentDevicePixelRatio = window.devicePixelRatio || 1;
+
+               if (pixelRatio !== 1) {
+                       ctx.canvas.height = height * pixelRatio;
+                       ctx.canvas.width = width * pixelRatio;
+                       ctx.scale(pixelRatio, pixelRatio);
+
+                       // Store the device pixel ratio so that we can go backwards in `destroy`.
+                       // The devicePixelRatio changes with zoom, so there are no guarantees that it is the same
+                       // when destroy is called
+                       chart.originalDevicePixelRatio = chart.originalDevicePixelRatio || pixelRatio;
+               }
+
+               ctx.canvas.style.width = width + 'px';
+               ctx.canvas.style.height = height + 'px';
+       };
+       //-- Canvas methods
+       helpers.clear = function(chart) {
+               chart.ctx.clearRect(0, 0, chart.width, chart.height);
+       };
+       helpers.fontString = function(pixelSize, fontStyle, fontFamily) {
+               return fontStyle + " " + pixelSize + "px " + fontFamily;
+       };
+       helpers.longestText = function(ctx, font, arrayOfStrings, cache) {
+               cache = cache || {};
+               cache.data = cache.data || {};
+               cache.garbageCollect = cache.garbageCollect || [];
+
+               if (cache.font !== font) {
+                       cache.data = {};
+                       cache.garbageCollect = [];
+                       cache.font = font;
+               }
+
+               ctx.font = font;
+               var longest = 0;
+               helpers.each(arrayOfStrings, function(string) {
+                       // Undefined strings should not be measured
+                       if (string !== undefined && string !== null) {
+                               var textWidth = cache.data[string];
+                               if (!textWidth) {
+                                       textWidth = cache.data[string] = ctx.measureText(string).width;
+                                       cache.garbageCollect.push(string);
+                               }
+
+                               if (textWidth > longest) {
+                                       longest = textWidth;
+                               }
+                       }
+               });
+
+               var gcLen = cache.garbageCollect.length / 2;
+               if (gcLen > arrayOfStrings.length) {
+                       for (var i = 0; i < gcLen; i++) {
+                               delete cache.data[cache.garbageCollect[i]];
+                       }
+                       cache.garbageCollect.splice(0, gcLen);
+               }
+
+               return longest;
+       };
+       helpers.drawRoundedRectangle = function(ctx, x, y, width, height, radius) {
+               ctx.beginPath();
+               ctx.moveTo(x + radius, y);
+               ctx.lineTo(x + width - radius, y);
+               ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+               ctx.lineTo(x + width, y + height - radius);
+               ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+               ctx.lineTo(x + radius, y + height);
+               ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+               ctx.lineTo(x, y + radius);
+               ctx.quadraticCurveTo(x, y, x + radius, y);
+               ctx.closePath();
+       };
+       helpers.color = function(c) {
+               if (!color) {
+                       console.log('Color.js not found!');
+                       return c;
+               }
+
+               /* global CanvasGradient */
+               if (c instanceof CanvasGradient) {
+                       return color(Chart.defaults.global.defaultColor);
+               }
+
+               return color(c);
+       };
+       helpers.addResizeListener = function(node, callback) {
+               // Hide an iframe before the node
+               var hiddenIframe = document.createElement('iframe');
+               var hiddenIframeClass = 'chartjs-hidden-iframe';
+
+               if (hiddenIframe.classlist) {
+                       // can use classlist
+                       hiddenIframe.classlist.add(hiddenIframeClass);
+               } else {
+                       hiddenIframe.setAttribute('class', hiddenIframeClass);
+               }
+
+               // Set the style
+               hiddenIframe.style.width = '100%';
+               hiddenIframe.style.display = 'block';
+               hiddenIframe.style.border = 0;
+               hiddenIframe.style.height = 0;
+               hiddenIframe.style.margin = 0;
+               hiddenIframe.style.position = 'absolute';
+               hiddenIframe.style.left = 0;
+               hiddenIframe.style.right = 0;
+               hiddenIframe.style.top = 0;
+               hiddenIframe.style.bottom = 0;
+
+               // Insert the iframe so that contentWindow is available
+               node.insertBefore(hiddenIframe, node.firstChild);
+
+               (hiddenIframe.contentWindow || hiddenIframe).onresize = function() {
+                       if (callback) {
+                               callback();
+                       }
+               };
+       };
+       helpers.removeResizeListener = function(node) {
+               var hiddenIframe = node.querySelector('.chartjs-hidden-iframe');
+
+               // Remove the resize detect iframe
+               if (hiddenIframe) {
+                       hiddenIframe.parentNode.removeChild(hiddenIframe);
+               }
+       };
+       helpers.isArray = function(obj) {
+               if (!Array.isArray) {
+                       return Object.prototype.toString.call(obj) === '[object Array]';
+               }
+               return Array.isArray(obj);
+       };
+       helpers.pushAllIfDefined = function(element, array) {
+               if (typeof element === "undefined") {
+                       return;
+               }
+
+               if (helpers.isArray(element)) {
+                       array.push.apply(array, element);
+               } else {
+                       array.push(element);
+               }
+       };
+       helpers.isDatasetVisible = function(dataset) {
+               return !dataset.hidden;
+       };
+       helpers.callCallback = function(fn, args, _tArg) {
+               if (fn && typeof fn.call === 'function') {
+                       fn.apply(_tArg, args);
+               }
+       };
+
+};
+
+},{"chartjs-color":6}],26:[function(require,module,exports){
+"use strict";
+
+module.exports = function() {
+
+       //Occupy the global variable of Chart, and create a simple base class
+       var Chart = function(context, config) {
+               this.config = config;
+
+               // Support a jQuery'd canvas element
+               if (context.length && context[0].getContext) {
+                       context = context[0];
+               }
+
+               // Support a canvas domnode
+               if (context.getContext) {
+                       context = context.getContext("2d");
+               }
+
+               this.ctx = context;
+               this.canvas = context.canvas;
+
+               // Figure out what the size of the chart will be.
+               // If the canvas has a specified width and height, we use those else
+               // we look to see if the canvas node has a CSS width and height.
+               // If there is still no height, fill the parent container
+               this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
+               this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
+
+               this.aspectRatio = this.width / this.height;
+
+               if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
+                       // If the canvas has no size, try and figure out what the aspect ratio will be.
+                       // Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
+                       // else use the canvas default ratio of 2
+                       this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
+               }
+
+               // Store the original style of the element so we can set it back
+               this.originalCanvasStyleWidth = context.canvas.style.width;
+               this.originalCanvasStyleHeight = context.canvas.style.height;
+
+               // High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
+               Chart.helpers.retinaScale(this);
+
+               if (config) {
+                       this.controller = new Chart.Controller(this);
+               }
+
+               // Always bind this so that if the responsive state changes we still work
+               var _this = this;
+               Chart.helpers.addResizeListener(context.canvas.parentNode, function() {
+                       if (_this.controller && _this.controller.config.options.responsive) {
+                               _this.controller.resize();
+                       }
+               });
+
+               return this.controller ? this.controller : this;
+
+       };
+
+       //Globally expose the defaults to allow for user updating/changing
+       Chart.defaults = {
+               global: {
+                       responsive: true,
+                       responsiveAnimationDuration: 0,
+                       maintainAspectRatio: true,
+                       events: ["mousemove", "mouseout", "click", "touchstart", "touchmove"],
+                       hover: {
+                               onHover: null,
+                               mode: 'single',
+                               animationDuration: 400
+                       },
+                       onClick: null,
+                       defaultColor: 'rgba(0,0,0,0.1)',
+                       defaultFontColor: '#666',
+                       defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+                       defaultFontSize: 12,
+                       defaultFontStyle: 'normal',
+                       showLines: true,
+
+                       // Element defaults defined in element extensions
+                       elements: {},
+
+                       // Legend callback string
+                       legendCallback: function(chart) {
+                               var text = [];
+                               text.push('<ul class="' + chart.id + '-legend">');
+                               for (var i = 0; i < chart.data.datasets.length; i++) {
+                                       text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
+                                       if (chart.data.datasets[i].label) {
+                                               text.push(chart.data.datasets[i].label);
+                                       }
+                                       text.push('</li>');
+                               }
+                               text.push('</ul>');
+
+                               return text.join("");
+                       }
+               }
+       };
+
+       return Chart;
+
+};
+
+},{}],27:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       // The layout service is very self explanatory.  It's responsible for the layout within a chart.
+       // Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need
+       // It is this service's responsibility of carrying out that layout.
+       Chart.layoutService = {
+               defaults: {},
+
+               // Register a box to a chartInstance. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins.
+               addBox: function(chartInstance, box) {
+                       if (!chartInstance.boxes) {
+                               chartInstance.boxes = [];
+                       }
+                       chartInstance.boxes.push(box);
+               },
+
+               removeBox: function(chartInstance, box) {
+                       if (!chartInstance.boxes) {
+                               return;
+                       }
+                       chartInstance.boxes.splice(chartInstance.boxes.indexOf(box), 1);
+               },
+
+               // The most important function
+               update: function(chartInstance, width, height) {
+
+                       if (!chartInstance) {
+                               return;
+                       }
+
+                       var xPadding = 0;
+                       var yPadding = 0;
+
+                       var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
+                               return box.options.position === "left";
+                       });
+                       var rightBoxes = helpers.where(chartInstance.boxes, function(box) {
+                               return box.options.position === "right";
+                       });
+                       var topBoxes = helpers.where(chartInstance.boxes, function(box) {
+                               return box.options.position === "top";
+                       });
+                       var bottomBoxes = helpers.where(chartInstance.boxes, function(box) {
+                               return box.options.position === "bottom";
+                       });
+
+                       // Boxes that overlay the chartarea such as the radialLinear scale
+                       var chartAreaBoxes = helpers.where(chartInstance.boxes, function(box) {
+                               return box.options.position === "chartArea";
+                       });
+
+                       function fullWidthSorter(a, b) {
+
+                       }
+
+                       // Ensure that full width boxes are at the very top / bottom
+                       topBoxes.sort(function(a, b) {
+                               return (b.options.fullWidth ? 1 : 0) - (a.options.fullWidth ? 1 : 0);
+                       });
+                       bottomBoxes.sort(function(a, b) {
+                               return (a.options.fullWidth ? 1 : 0) - (b.options.fullWidth ? 1 : 0);
+                       });
+
+                       // Essentially we now have any number of boxes on each of the 4 sides.
+                       // Our canvas looks like the following.
+                       // The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
+                       // B1 is the bottom axis
+                       // There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
+                       // These locations are single-box locations only, when trying to register a chartArea location that is already taken,
+                       // an error will be thrown.
+                       //
+                       // |----------------------------------------------------|
+                       // |                  T1 (Full Width)                   |
+                       // |----------------------------------------------------|
+                       // |    |    |                 T2                  |    |
+                       // |    |----|-------------------------------------|----|
+                       // |    |    | C1 |                           | C2 |    |
+                       // |    |    |----|                           |----|    |
+                       // |    |    |                                     |    |
+                       // | L1 | L2 |           ChartArea (C0)            | R1 |
+                       // |    |    |                                     |    |
+                       // |    |    |----|                           |----|    |
+                       // |    |    | C3 |                           | C4 |    |
+                       // |    |----|-------------------------------------|----|
+                       // |    |    |                 B1                  |    |
+                       // |----------------------------------------------------|
+                       // |                  B2 (Full Width)                   |
+                       // |----------------------------------------------------|
+                       //
+                       // What we do to find the best sizing, we do the following
+                       // 1. Determine the minimum size of the chart area.
+                       // 2. Split the remaining width equally between each vertical axis
+                       // 3. Split the remaining height equally between each horizontal axis
+                       // 4. Give each layout the maximum size it can be. The layout will return it's minimum size
+                       // 5. Adjust the sizes of each axis based on it's minimum reported size.
+                       // 6. Refit each axis
+                       // 7. Position each axis in the final location
+                       // 8. Tell the chart the final location of the chart area
+                       // 9. Tell any axes that overlay the chart area the positions of the chart area
+
+                       // Step 1
+                       var chartWidth = width - (2 * xPadding);
+                       var chartHeight = height - (2 * yPadding);
+                       var chartAreaWidth = chartWidth / 2; // min 50%
+                       var chartAreaHeight = chartHeight / 2; // min 50%
+
+                       // Step 2
+                       var verticalBoxWidth = (width - chartAreaWidth) / (leftBoxes.length + rightBoxes.length);
+
+                       // Step 3
+                       var horizontalBoxHeight = (height - chartAreaHeight) / (topBoxes.length + bottomBoxes.length);
+
+                       // Step 4
+                       var maxChartAreaWidth = chartWidth;
+                       var maxChartAreaHeight = chartHeight;
+                       var minBoxSizes = [];
+
+                       helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize);
+
+                       function getMinimumBoxSize(box) {
+                               var minSize;
+                               var isHorizontal = box.isHorizontal();
+
+                               if (isHorizontal) {
+                                       minSize = box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, horizontalBoxHeight);
+                                       maxChartAreaHeight -= minSize.height;
+                               } else {
+                                       minSize = box.update(verticalBoxWidth, chartAreaHeight);
+                                       maxChartAreaWidth -= minSize.width;
+                               }
+
+                               minBoxSizes.push({
+                                       horizontal: isHorizontal,
+                                       minSize: minSize,
+                                       box: box
+                               });
+                       }
+
+                       // At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could
+                       // be if the axes are drawn at their minimum sizes.
+
+                       // Steps 5 & 6
+                       var totalLeftBoxesWidth = xPadding;
+                       var totalRightBoxesWidth = xPadding;
+                       var totalTopBoxesHeight = yPadding;
+                       var totalBottomBoxesHeight = yPadding;
+
+                       // Update, and calculate the left and right margins for the horizontal boxes
+                       helpers.each(leftBoxes.concat(rightBoxes), fitBox);
+
+                       helpers.each(leftBoxes, function(box) {
+                               totalLeftBoxesWidth += box.width;
+                       });
+
+                       helpers.each(rightBoxes, function(box) {
+                               totalRightBoxesWidth += box.width;
+                       });
+
+                       // Set the Left and Right margins for the horizontal boxes
+                       helpers.each(topBoxes.concat(bottomBoxes), fitBox);
+
+                       // Function to fit a box
+                       function fitBox(box) {
+                               var minBoxSize = helpers.findNextWhere(minBoxSizes, function(minBoxSize) {
+                                       return minBoxSize.box === box;
+                               });
+
+                               if (minBoxSize) {
+                                       if (box.isHorizontal()) {
+                                               var scaleMargin = {
+                                                       left: totalLeftBoxesWidth,
+                                                       right: totalRightBoxesWidth,
+                                                       top: 0,
+                                                       bottom: 0
+                                               };
+
+                                               // Don't use min size here because of label rotation. When the labels are rotated, their rotation highly depends
+                                               // on the margin. Sometimes they need to increase in size slightly
+                                               box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2, scaleMargin);
+                                       } else {
+                                               box.update(minBoxSize.minSize.width, maxChartAreaHeight);
+                                       }
+                               }
+                       }
+
+                       // Figure out how much margin is on the top and bottom of the vertical boxes
+                       helpers.each(topBoxes, function(box) {
+                               totalTopBoxesHeight += box.height;
+                       });
+
+                       helpers.each(bottomBoxes, function(box) {
+                               totalBottomBoxesHeight += box.height;
+                       });
+
+                       // Let the left layout know the final margin
+                       helpers.each(leftBoxes.concat(rightBoxes), finalFitVerticalBox);
+
+                       function finalFitVerticalBox(box) {
+                               var minBoxSize = helpers.findNextWhere(minBoxSizes, function(minBoxSize) {
+                                       return minBoxSize.box === box;
+                               });
+
+                               var scaleMargin = {
+                                       left: 0,
+                                       right: 0,
+                                       top: totalTopBoxesHeight,
+                                       bottom: totalBottomBoxesHeight
+                               };
+
+                               if (minBoxSize) {
+                                       box.update(minBoxSize.minSize.width, maxChartAreaHeight, scaleMargin);
+                               }
+                       }
+
+                       // Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
+                       totalLeftBoxesWidth = xPadding;
+                       totalRightBoxesWidth = xPadding;
+                       totalTopBoxesHeight = yPadding;
+                       totalBottomBoxesHeight = yPadding;
+
+                       helpers.each(leftBoxes, function(box) {
+                               totalLeftBoxesWidth += box.width;
+                       });
+
+                       helpers.each(rightBoxes, function(box) {
+                               totalRightBoxesWidth += box.width;
+                       });
+
+                       helpers.each(topBoxes, function(box) {
+                               totalTopBoxesHeight += box.height;
+                       });
+                       helpers.each(bottomBoxes, function(box) {
+                               totalBottomBoxesHeight += box.height;
+                       });
+
+                       // Figure out if our chart area changed. This would occur if the dataset layout label rotation
+                       // changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
+                       // without calling `fit` again
+                       var newMaxChartAreaHeight = height - totalTopBoxesHeight - totalBottomBoxesHeight;
+                       var newMaxChartAreaWidth = width - totalLeftBoxesWidth - totalRightBoxesWidth;
+
+                       if (newMaxChartAreaWidth !== maxChartAreaWidth || newMaxChartAreaHeight !== maxChartAreaHeight) {
+                               helpers.each(leftBoxes, function(box) {
+                                       box.height = newMaxChartAreaHeight;
+                               });
+
+                               helpers.each(rightBoxes, function(box) {
+                                       box.height = newMaxChartAreaHeight;
+                               });
+
+                               helpers.each(topBoxes, function(box) {
+                                       box.width = newMaxChartAreaWidth;
+                               });
+
+                               helpers.each(bottomBoxes, function(box) {
+                                       box.width = newMaxChartAreaWidth;
+                               });
+
+                               maxChartAreaHeight = newMaxChartAreaHeight;
+                               maxChartAreaWidth = newMaxChartAreaWidth;
+                       }
+
+                       // Step 7 - Position the boxes
+                       var left = xPadding;
+                       var top = yPadding;
+                       var right = 0;
+                       var bottom = 0;
+
+                       helpers.each(leftBoxes.concat(topBoxes), placeBox);
+
+                       // Account for chart width and height
+                       left += maxChartAreaWidth;
+                       top += maxChartAreaHeight;
+
+                       helpers.each(rightBoxes, placeBox);
+                       helpers.each(bottomBoxes, placeBox);
+
+                       function placeBox(box) {
+                               if (box.isHorizontal()) {
+                                       box.left = box.options.fullWidth ? xPadding : totalLeftBoxesWidth;
+                                       box.right = box.options.fullWidth ? width - xPadding : totalLeftBoxesWidth + maxChartAreaWidth;
+                                       box.top = top;
+                                       box.bottom = top + box.height;
+
+                                       // Move to next point
+                                       top = box.bottom;
+
+                               } else {
+
+                                       box.left = left;
+                                       box.right = left + box.width;
+                                       box.top = totalTopBoxesHeight;
+                                       box.bottom = totalTopBoxesHeight + maxChartAreaHeight;
+
+                                       // Move to next point
+                                       left = box.right;
+                               }
+                       }
+
+                       // Step 8
+                       chartInstance.chartArea = {
+                               left: totalLeftBoxesWidth,
+                               top: totalTopBoxesHeight,
+                               right: totalLeftBoxesWidth + maxChartAreaWidth,
+                               bottom: totalTopBoxesHeight + maxChartAreaHeight
+                       };
+
+                       // Step 9
+                       helpers.each(chartAreaBoxes, function(box) {
+                               box.left = chartInstance.chartArea.left;
+                               box.top = chartInstance.chartArea.top;
+                               box.right = chartInstance.chartArea.right;
+                               box.bottom = chartInstance.chartArea.bottom;
+
+                               box.update(maxChartAreaWidth, maxChartAreaHeight);
+                       });
+               }
+       };
+};
+
+},{}],28:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.legend = {
+
+               display: true,
+               position: 'top',
+               fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+               reverse: false,
+
+               // a callback that will handle
+               onClick: function(e, legendItem) {
+                       var dataset = this.chart.data.datasets[legendItem.datasetIndex];
+                       dataset.hidden = !dataset.hidden;
+
+                       // We hid a dataset ... rerender the chart
+                       this.chart.update();
+               },
+
+               labels: {
+                       boxWidth: 40,
+                       padding: 10,
+                       // Generates labels shown in the legend
+                       // Valid properties to return:
+                       // text : text to display
+                       // fillStyle : fill of coloured box
+                       // strokeStyle: stroke of coloured box
+                       // hidden : if this legend item refers to a hidden item
+                       // lineCap : cap style for line
+                       // lineDash
+                       // lineDashOffset :
+                       // lineJoin :
+                       // lineWidth :
+                       generateLabels: function(data) {
+                               return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
+                                       return {
+                                               text: dataset.label,
+                                               fillStyle: dataset.backgroundColor,
+                                               hidden: dataset.hidden,
+                                               lineCap: dataset.borderCapStyle,
+                                               lineDash: dataset.borderDash,
+                                               lineDashOffset: dataset.borderDashOffset,
+                                               lineJoin: dataset.borderJoinStyle,
+                                               lineWidth: dataset.borderWidth,
+                                               strokeStyle: dataset.borderColor,
+
+                                               // Below is extra data used for toggling the datasets
+                                               datasetIndex: i
+                                       };
+                               }, this) : [];
+                       }
+               }
+       };
+
+       Chart.Legend = Chart.Element.extend({
+
+               initialize: function(config) {
+                       helpers.extend(this, config);
+
+                       // Contains hit boxes for each dataset (in dataset order)
+                       this.legendHitBoxes = [];
+
+                       // Are we in doughnut mode which has a different data type
+                       this.doughnutMode = false;
+               },
+
+               // These methods are ordered by lifecyle. Utilities then follow.
+               // Any function defined here is inherited by all legend types.
+               // Any function can be extended by the legend type
+
+               beforeUpdate: helpers.noop,
+               update: function(maxWidth, maxHeight, margins) {
+
+                       // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
+                       this.beforeUpdate();
+
+                       // Absorb the master measurements
+                       this.maxWidth = maxWidth;
+                       this.maxHeight = maxHeight;
+                       this.margins = margins;
+
+                       // Dimensions
+                       this.beforeSetDimensions();
+                       this.setDimensions();
+                       this.afterSetDimensions();
+                       // Labels
+                       this.beforeBuildLabels();
+                       this.buildLabels();
+                       this.afterBuildLabels();
+
+                       // Fit
+                       this.beforeFit();
+                       this.fit();
+                       this.afterFit();
+                       //
+                       this.afterUpdate();
+
+                       return this.minSize;
+
+               },
+               afterUpdate: helpers.noop,
+
+               //
+
+               beforeSetDimensions: helpers.noop,
+               setDimensions: function() {
+                       // Set the unconstrained dimension before label rotation
+                       if (this.isHorizontal()) {
+                               // Reset position before calculating rotation
+                               this.width = this.maxWidth;
+                               this.left = 0;
+                               this.right = this.width;
+                       } else {
+                               this.height = this.maxHeight;
+
+                               // Reset position before calculating rotation
+                               this.top = 0;
+                               this.bottom = this.height;
+                       }
+
+                       // Reset padding
+                       this.paddingLeft = 0;
+                       this.paddingTop = 0;
+                       this.paddingRight = 0;
+                       this.paddingBottom = 0;
+
+                       // Reset minSize
+                       this.minSize = {
+                               width: 0,
+                               height: 0
+                       };
+               },
+               afterSetDimensions: helpers.noop,
+
+               //
+
+               beforeBuildLabels: helpers.noop,
+               buildLabels: function() {
+                       this.legendItems = this.options.labels.generateLabels.call(this, this.chart.data);
+                       if(this.options.reverse){
+                               this.legendItems.reverse();
+                       }
+               },
+               afterBuildLabels: helpers.noop,
+
+               //
+
+               beforeFit: helpers.noop,
+               fit: function() {
+
+                       var ctx = this.ctx;
+                       var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+                       var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+                       // Reset hit boxes
+                       this.legendHitBoxes = [];
+
+                       // Width
+                       if (this.isHorizontal()) {
+                               this.minSize.width = this.maxWidth; // fill all the width
+                       } else {
+                               this.minSize.width = this.options.display ? 10 : 0;
+                       }
+
+                       // height
+                       if (this.isHorizontal()) {
+                               this.minSize.height = this.options.display ? 10 : 0;
+                       } else {
+                               this.minSize.height = this.maxHeight; // fill all the height
+                       }
+
+                       // Increase sizes here
+                       if (this.options.display) {
+                               if (this.isHorizontal()) {
+                                       // Labels
+
+                                       // Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
+                                       this.lineWidths = [0];
+                                       var totalHeight = this.legendItems.length ? fontSize + (this.options.labels.padding) : 0;
+
+                                       ctx.textAlign = "left";
+                                       ctx.textBaseline = 'top';
+                                       ctx.font = labelFont;
+
+                                       helpers.each(this.legendItems, function(legendItem, i) {
+                                               var width = this.options.labels.boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
+                                               if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) {
+                                                       totalHeight += fontSize + (this.options.labels.padding);
+                                                       this.lineWidths[this.lineWidths.length] = this.left;
+                                               }
+
+                                               // Store the hitbox width and height here. Final position will be updated in `draw`
+                                               this.legendHitBoxes[i] = {
+                                                       left: 0,
+                                                       top: 0,
+                                                       width: width,
+                                                       height: fontSize
+                                               };
+
+                                               this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding;
+                                       }, this);
+
+                                       this.minSize.height += totalHeight;
+
+                               } else {
+                                       // TODO vertical
+                               }
+                       }
+
+                       this.width = this.minSize.width;
+                       this.height = this.minSize.height;
+
+               },
+               afterFit: helpers.noop,
+
+               // Shared Methods
+               isHorizontal: function() {
+                       return this.options.position === "top" || this.options.position === "bottom";
+               },
+
+               // Actualy draw the legend on the canvas
+               draw: function() {
+                       if (this.options.display) {
+                               var ctx = this.ctx;
+                               var cursor = {
+                                       x: this.left + ((this.width - this.lineWidths[0]) / 2),
+                                       y: this.top + this.options.labels.padding,
+                                       line: 0
+                               };
+
+                               var fontColor = helpers.getValueOrDefault(this.options.labels.fontColor, Chart.defaults.global.defaultFontColor);
+                               var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+                               var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+                               var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+                               var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+                               // Horizontal
+                               if (this.isHorizontal()) {
+                                       // Labels
+                                       ctx.textAlign = "left";
+                                       ctx.textBaseline = 'top';
+                                       ctx.lineWidth = 0.5;
+                                       ctx.strokeStyle = fontColor; // for strikethrough effect
+                                       ctx.fillStyle = fontColor; // render in correct colour
+                                       ctx.font = labelFont;
+
+                                       helpers.each(this.legendItems, function(legendItem, i) {
+                                               var textWidth = ctx.measureText(legendItem.text).width;
+                                               var width = this.options.labels.boxWidth + (fontSize / 2) + textWidth;
+
+                                               if (cursor.x + width >= this.width) {
+                                                       cursor.y += fontSize + (this.options.labels.padding);
+                                                       cursor.line++;
+                                                       cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2);
+                                               }
+
+                                               // Set the ctx for the box
+                                               ctx.save();
+
+                                               var itemOrDefault = function(item, defaulVal) {
+                                                       return item !== undefined ? item : defaulVal;
+                                               };
+
+                                               ctx.fillStyle = itemOrDefault(legendItem.fillStyle, Chart.defaults.global.defaultColor);
+                                               ctx.lineCap = itemOrDefault(legendItem.lineCap, Chart.defaults.global.elements.line.borderCapStyle);
+                                               ctx.lineDashOffset = itemOrDefault(legendItem.lineDashOffset, Chart.defaults.global.elements.line.borderDashOffset);
+                                               ctx.lineJoin = itemOrDefault(legendItem.lineJoin, Chart.defaults.global.elements.line.borderJoinStyle);
+                                               ctx.lineWidth = itemOrDefault(legendItem.lineWidth, Chart.defaults.global.elements.line.borderWidth);
+                                               ctx.strokeStyle = itemOrDefault(legendItem.strokeStyle, Chart.defaults.global.defaultColor);
+
+                                               if (ctx.setLineDash) {
+                                                       // IE 9 and 10 do not support line dash
+                                                       ctx.setLineDash(itemOrDefault(legendItem.lineDash, Chart.defaults.global.elements.line.borderDash));
+                                               }
+
+                                               // Draw the box
+                                               ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
+                                               ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
+
+                                               ctx.restore();
+
+                                               this.legendHitBoxes[i].left = cursor.x;
+                                               this.legendHitBoxes[i].top = cursor.y;
+
+                                               // Fill the actual label
+                                               ctx.fillText(legendItem.text, this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y);
+
+                                               if (legendItem.hidden) {
+                                                       // Strikethrough the text if hidden
+                                                       ctx.beginPath();
+                                                       ctx.lineWidth = 2;
+                                                       ctx.moveTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y + (fontSize / 2));
+                                                       ctx.lineTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x + textWidth, cursor.y + (fontSize / 2));
+                                                       ctx.stroke();
+                                               }
+
+                                               cursor.x += width + (this.options.labels.padding);
+                                       }, this);
+                               } else {
+
+                               }
+                       }
+               },
+
+               // Handle an event
+               handleEvent: function(e) {
+                       var position = helpers.getRelativePosition(e, this.chart.chart);
+
+                       if (position.x >= this.left && position.x <= this.right && position.y >= this.top && position.y <= this.bottom) {
+                               // See if we are touching one of the dataset boxes
+                               for (var i = 0; i < this.legendHitBoxes.length; ++i) {
+                                       var hitBox = this.legendHitBoxes[i];
+
+                                       if (position.x >= hitBox.left && position.x <= hitBox.left + hitBox.width && position.y >= hitBox.top && position.y <= hitBox.top + hitBox.height) {
+                                               // Touching an element
+                                               if (this.options.onClick) {
+                                                       this.options.onClick.call(this, e, this.legendItems[i]);
+                                               }
+                                               break;
+                                       }
+                               }
+                       }
+               }
+       });
+
+};
+
+},{}],29:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.scale = {
+               display: true,
+
+               // grid line settings
+               gridLines: {
+                       display: true,
+                       color: "rgba(0, 0, 0, 0.1)",
+                       lineWidth: 1,
+                       drawOnChartArea: true,
+                       drawTicks: true,
+                       zeroLineWidth: 1,
+                       zeroLineColor: "rgba(0,0,0,0.25)",
+                       offsetGridLines: false
+               },
+
+               // scale label
+               scaleLabel: {
+                       // actual label
+                       labelString: '',
+
+                       // display property
+                       display: false
+               },
+
+               // label settings
+               ticks: {
+                       beginAtZero: false,
+                       maxRotation: 50,
+                       mirror: false,
+                       padding: 10,
+                       reverse: false,
+                       display: true,
+                       autoSkip: true,
+                       autoSkipPadding: 0,
+                       callback: function(value) {
+                               return '' + value;
+                       }
+               }
+       };
+
+       Chart.Scale = Chart.Element.extend({
+
+               // These methods are ordered by lifecyle. Utilities then follow.
+               // Any function defined here is inherited by all scale types.
+               // Any function can be extended by the scale type
+
+               beforeUpdate: function() {
+                       helpers.callCallback(this.options.beforeUpdate, [this]);
+               },
+               update: function(maxWidth, maxHeight, margins) {
+
+                       // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
+                       this.beforeUpdate();
+
+                       // Absorb the master measurements
+                       this.maxWidth = maxWidth;
+                       this.maxHeight = maxHeight;
+                       this.margins = helpers.extend({
+                               left: 0,
+                               right: 0,
+                               top: 0,
+                               bottom: 0
+                       }, margins);
+
+                       // Dimensions
+                       this.beforeSetDimensions();
+                       this.setDimensions();
+                       this.afterSetDimensions();
+
+                       // Data min/max
+                       this.beforeDataLimits();
+                       this.determineDataLimits();
+                       this.afterDataLimits();
+
+                       // Ticks
+                       this.beforeBuildTicks();
+                       this.buildTicks();
+                       this.afterBuildTicks();
+
+                       this.beforeTickToLabelConversion();
+                       this.convertTicksToLabels();
+                       this.afterTickToLabelConversion();
+
+                       // Tick Rotation
+                       this.beforeCalculateTickRotation();
+                       this.calculateTickRotation();
+                       this.afterCalculateTickRotation();
+                       // Fit
+                       this.beforeFit();
+                       this.fit();
+                       this.afterFit();
+                       //
+                       this.afterUpdate();
+
+                       return this.minSize;
+
+               },
+               afterUpdate: function() {
+                       helpers.callCallback(this.options.afterUpdate, [this]);
+               },
+
+               //
+
+               beforeSetDimensions: function() {
+                       helpers.callCallback(this.options.beforeSetDimensions, [this]);
+               },
+               setDimensions: function() {
+                       // Set the unconstrained dimension before label rotation
+                       if (this.isHorizontal()) {
+                               // Reset position before calculating rotation
+                               this.width = this.maxWidth;
+                               this.left = 0;
+                               this.right = this.width;
+                       } else {
+                               this.height = this.maxHeight;
+
+                               // Reset position before calculating rotation
+                               this.top = 0;
+                               this.bottom = this.height;
+                       }
+
+                       // Reset padding
+                       this.paddingLeft = 0;
+                       this.paddingTop = 0;
+                       this.paddingRight = 0;
+                       this.paddingBottom = 0;
+               },
+               afterSetDimensions: function() {
+                       helpers.callCallback(this.options.afterSetDimensions, [this]);
+               },
+
+               // Data limits
+               beforeDataLimits: function() {
+                       helpers.callCallback(this.options.beforeDataLimits, [this]);
+               },
+               determineDataLimits: helpers.noop,
+               afterDataLimits: function() {
+                       helpers.callCallback(this.options.afterDataLimits, [this]);
+               },
+
+               //
+               beforeBuildTicks: function() {
+                       helpers.callCallback(this.options.beforeBuildTicks, [this]);
+               },
+               buildTicks: helpers.noop,
+               afterBuildTicks: function() {
+                       helpers.callCallback(this.options.afterBuildTicks, [this]);
+               },
+
+               beforeTickToLabelConversion: function() {
+                       helpers.callCallback(this.options.beforeTickToLabelConversion, [this]);
+               },
+               convertTicksToLabels: function() {
+                       // Convert ticks to strings
+                       this.ticks = this.ticks.map(function(numericalTick, index, ticks) {
+                                       if (this.options.ticks.userCallback) {
+                                               return this.options.ticks.userCallback(numericalTick, index, ticks);
+                                       }
+                                       return this.options.ticks.callback(numericalTick, index, ticks);
+                               },
+                               this);
+               },
+               afterTickToLabelConversion: function() {
+                       helpers.callCallback(this.options.afterTickToLabelConversion, [this]);
+               },
+
+               //
+
+               beforeCalculateTickRotation: function() {
+                       helpers.callCallback(this.options.beforeCalculateTickRotation, [this]);
+               },
+               calculateTickRotation: function() {
+                       //Get the width of each grid by calculating the difference
+                       //between x offsets between 0 and 1.
+                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                       var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+                       this.ctx.font = tickLabelFont;
+
+                       var firstWidth = this.ctx.measureText(this.ticks[0]).width;
+                       var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
+                       var firstRotated;
+
+                       this.labelRotation = 0;
+                       this.paddingRight = 0;
+                       this.paddingLeft = 0;
+
+                       if (this.options.display) {
+                               if (this.isHorizontal()) {
+                                       this.paddingRight = lastWidth / 2 + 3;
+                                       this.paddingLeft = firstWidth / 2 + 3;
+
+                                       if (!this.longestTextCache) {
+                                               this.longestTextCache = {};
+                                       }
+                                       var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
+                                       var labelWidth = originalLabelWidth;
+                                       var cosRotation;
+                                       var sinRotation;
+
+                                       // Allow 3 pixels x2 padding either side for label readability
+                                       // only the index matters for a dataset scale, but we want a consistent interface between scales
+                                       var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6;
+
+                                       //Max label rotation can be set or default to 90 - also act as a loop counter
+                                       while (labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) {
+                                               cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
+                                               sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
+
+                                               firstRotated = cosRotation * firstWidth;
+
+                                               // We're right aligning the text now.
+                                               if (firstRotated + tickFontSize / 2 > this.yLabelWidth) {
+                                                       this.paddingLeft = firstRotated + tickFontSize / 2;
+                                               }
+
+                                               this.paddingRight = tickFontSize / 2;
+
+                                               if (sinRotation * originalLabelWidth > this.maxHeight) {
+                                                       // go back one step
+                                                       this.labelRotation--;
+                                                       break;
+                                               }
+
+                                               this.labelRotation++;
+                                               labelWidth = cosRotation * originalLabelWidth;
+                                       }
+                               }
+                       }
+
+                       if (this.margins) {
+                               this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0);
+                               this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0);
+                       }
+               },
+               afterCalculateTickRotation: function() {
+                       helpers.callCallback(this.options.afterCalculateTickRotation, [this]);
+               },
+
+               //
+
+               beforeFit: function() {
+                       helpers.callCallback(this.options.beforeFit, [this]);
+               },
+               fit: function() {
+
+                       this.minSize = {
+                               width: 0,
+                               height: 0
+                       };
+
+                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                       var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+                       var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+                       var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
+
+                       // Width
+                       if (this.isHorizontal()) {
+                               // subtract the margins to line up with the chartArea if we are a full width scale
+                               this.minSize.width = this.isFullWidth() ? this.maxWidth - this.margins.left - this.margins.right : this.maxWidth;
+                       } else {
+                               this.minSize.width = this.options.gridLines.display && this.options.display ? 10 : 0;
+                       }
+
+                       // height
+                       if (this.isHorizontal()) {
+                               this.minSize.height = this.options.gridLines.display && this.options.display ? 10 : 0;
+                       } else {
+                               this.minSize.height = this.maxHeight; // fill all the height
+                       }
+
+                       // Are we showing a title for the scale?
+                       if (this.options.scaleLabel.display) {
+                               if (this.isHorizontal()) {
+                                       this.minSize.height += (scaleLabelFontSize * 1.5);
+                               } else {
+                                       this.minSize.width += (scaleLabelFontSize * 1.5);
+                               }
+                       }
+
+                       if (this.options.ticks.display && this.options.display) {
+                               // Don't bother fitting the ticks if we are not showing them
+                               if (!this.longestTextCache) {
+                                       this.longestTextCache = {};
+                               }
+
+                               var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
+
+                               if (this.isHorizontal()) {
+                                       // A horizontal axis is more constrained by the height.
+                                       this.longestLabelWidth = largestTextWidth;
+
+                                       // TODO - improve this calculation
+                                       var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize;
+
+                                       this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
+                                       this.ctx.font = tickLabelFont;
+
+                                       var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
+                                       var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
+
+                                       // Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned which means that the right padding is dominated
+                                       // by the font height
+                                       var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
+                                       var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
+                                       this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
+                                       this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
+                               } else {
+                                       // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
+                                       var maxLabelWidth = this.maxWidth - this.minSize.width;
+
+                                       // Account for padding
+                                       if (!this.options.ticks.mirror) {
+                                               largestTextWidth += this.options.ticks.padding;
+                                       }
+
+                                       if (largestTextWidth < maxLabelWidth) {
+                                               // We don't need all the room
+                                               this.minSize.width += largestTextWidth;
+                                       } else {
+                                               // Expand to max size
+                                               this.minSize.width = this.maxWidth;
+                                       }
+
+                                       this.paddingTop = tickFontSize / 2;
+                                       this.paddingBottom = tickFontSize / 2;
+                               }
+                       }
+
+                       if (this.margins) {
+                               this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0);
+                               this.paddingTop = Math.max(this.paddingTop - this.margins.top, 0);
+                               this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0);
+                               this.paddingBottom = Math.max(this.paddingBottom - this.margins.bottom, 0);
+                       }
+
+                       this.width = this.minSize.width;
+                       this.height = this.minSize.height;
+
+               },
+               afterFit: function() {
+                       helpers.callCallback(this.options.afterFit, [this]);
+               },
+
+               // Shared Methods
+               isHorizontal: function() {
+                       return this.options.position === "top" || this.options.position === "bottom";
+               },
+               isFullWidth: function() {
+                       return (this.options.fullWidth);
+               },
+
+               // Get the correct value. NaN bad inputs, If the value type is object get the x or y based on whether we are horizontal or not
+               getRightValue: function getRightValue(rawValue) {
+                       // Null and undefined values first
+                       if (rawValue === null || typeof(rawValue) === 'undefined') {
+                               return NaN;
+                       }
+                       // isNaN(object) returns true, so make sure NaN is checking for a number
+                       if (typeof(rawValue) === 'number' && isNaN(rawValue)) {
+                               return NaN;
+                       }
+                       // If it is in fact an object, dive in one more level
+                       if (typeof(rawValue) === "object") {
+                               if (rawValue instanceof Date) {
+                                       return rawValue;
+                               } else {
+                                       return getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y);
+                               }
+                       }
+
+                       // Value is good, return it
+                       return rawValue;
+               },
+
+               // Used to get the value to display in the tooltip for the data at the given index
+               // function getLabelForIndex(index, datasetIndex)
+               getLabelForIndex: helpers.noop,
+
+               // Used to get data value locations.  Value can either be an index or a numerical value
+               getPixelForValue: helpers.noop,
+
+               // Used for tick location, should
+               getPixelForTick: function(index, includeOffset) {
+                       if (this.isHorizontal()) {
+                               var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                               var tickWidth = innerWidth / Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+                               var pixel = (tickWidth * index) + this.paddingLeft;
+
+                               if (includeOffset) {
+                                       pixel += tickWidth / 2;
+                               }
+
+                               var finalVal = this.left + Math.round(pixel);
+                               finalVal += this.isFullWidth() ? this.margins.left : 0;
+                               return finalVal;
+                       } else {
+                               var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                               return this.top + (index * (innerHeight / (this.ticks.length - 1)));
+                       }
+               },
+
+               // Utility for getting the pixel location of a percentage of scale
+               getPixelForDecimal: function(decimal /*, includeOffset*/ ) {
+                       if (this.isHorizontal()) {
+                               var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                               var valueOffset = (innerWidth * decimal) + this.paddingLeft;
+
+                               var finalVal = this.left + Math.round(valueOffset);
+                               finalVal += this.isFullWidth() ? this.margins.left : 0;
+                               return finalVal;
+                       } else {
+                               return this.top + (decimal * this.height);
+                       }
+               },
+
+               // Actualy draw the scale on the canvas
+               // @param {rectangle} chartArea : the area of the chart to draw full grid lines on
+               draw: function(chartArea) {
+                       if (this.options.display) {
+
+                               var setContextLineSettings;
+                               var isRotated = this.labelRotation !== 0;
+                               var skipRatio;
+                               var scaleLabelX;
+                               var scaleLabelY;
+                               var useAutoskipper = this.options.ticks.autoSkip;
+
+
+                               // figure out the maximum number of gridlines to show
+                               var maxTicks;
+
+                               if (this.options.ticks.maxTicksLimit) {
+                                       maxTicks = this.options.ticks.maxTicksLimit;
+                               }
+
+                               var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+                               var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                               var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+                               var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+                               var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+                               var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor);
+                               var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+                               var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+                               var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+                               var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
+
+                               var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
+                               var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
+                               var longestRotatedLabel = this.longestLabelWidth * cosRotation;
+                               var rotatedLabelHeight = tickFontSize * sinRotation;
+
+                               // Make sure we draw text in the correct color and font
+                               this.ctx.fillStyle = tickFontColor;
+
+                               if (this.isHorizontal()) {
+                                       setContextLineSettings = true;
+                                       var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - 10;
+                                       var yTickEnd = this.options.position === "bottom" ? this.top + 10 : this.bottom;
+                                       skipRatio = false;
+
+                                       if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
+                                               skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
+                                       }
+
+                                       // if they defined a max number of ticks,
+                                       // increase skipRatio until that number is met
+                                       if (maxTicks && this.ticks.length > maxTicks) {
+                                               while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
+                                                       if (!skipRatio) {
+                                                               skipRatio = 1;
+                                                       }
+                                                       skipRatio += 1;
+                                               }
+                                       }
+
+                                       if (!useAutoskipper) {
+                                               skipRatio = false;
+                                       }
+
+                                       helpers.each(this.ticks, function(label, index) {
+                                               // Blank ticks
+                                               var isLastTick = this.ticks.length === index + 1;
+
+                                               // Since we always show the last tick,we need may need to hide the last shown one before
+                                               var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
+                                               if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
+                                                       return;
+                                               }
+                                               var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
+                                               var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
+
+                                               if (this.options.gridLines.display) {
+                                                       if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
+                                                               // Draw the first index specially
+                                                               this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
+                                                               this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
+                                                               setContextLineSettings = true; // reset next time
+                                                       } else if (setContextLineSettings) {
+                                                               this.ctx.lineWidth = this.options.gridLines.lineWidth;
+                                                               this.ctx.strokeStyle = this.options.gridLines.color;
+                                                               setContextLineSettings = false;
+                                                       }
+
+                                                       xLineValue += helpers.aliasPixel(this.ctx.lineWidth);
+
+                                                       // Draw the label area
+                                                       this.ctx.beginPath();
+
+                                                       if (this.options.gridLines.drawTicks) {
+                                                               this.ctx.moveTo(xLineValue, yTickStart);
+                                                               this.ctx.lineTo(xLineValue, yTickEnd);
+                                                       }
+
+                                                       // Draw the chart area
+                                                       if (this.options.gridLines.drawOnChartArea) {
+                                                               this.ctx.moveTo(xLineValue, chartArea.top);
+                                                               this.ctx.lineTo(xLineValue, chartArea.bottom);
+                                                       }
+
+                                                       // Need to stroke in the loop because we are potentially changing line widths & colours
+                                                       this.ctx.stroke();
+                                               }
+
+                                               if (this.options.ticks.display) {
+                                                       this.ctx.save();
+                                                       this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10);
+                                                       this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
+                                                       this.ctx.font = tickLabelFont;
+                                                       this.ctx.textAlign = (isRotated) ? "right" : "center";
+                                                       this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
+                                                       this.ctx.fillText(label, 0, 0);
+                                                       this.ctx.restore();
+                                               }
+                                       }, this);
+
+                                       if (this.options.scaleLabel.display) {
+                                               // Draw the scale label
+                                               this.ctx.textAlign = "center";
+                                               this.ctx.textBaseline = 'middle';
+                                               this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour
+                                               this.ctx.font = scaleLabelFont;
+
+                                               scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
+                                               scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
+
+                                               this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
+                                       }
+
+                               } else {
+                                       setContextLineSettings = true;
+                                       var xTickStart = this.options.position === "right" ? this.left : this.right - 5;
+                                       var xTickEnd = this.options.position === "right" ? this.left + 5 : this.right;
+
+                                       helpers.each(this.ticks, function(label, index) {
+                                               // If the callback returned a null or undefined value, do not draw this line
+                                               if (label === undefined || label === null) {
+                                                       return;
+                                               }
+
+                                               var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
+
+                                               if (this.options.gridLines.display) {
+                                                       if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
+                                                               // Draw the first index specially
+                                                               this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
+                                                               this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
+                                                               setContextLineSettings = true; // reset next time
+                                                       } else if (setContextLineSettings) {
+                                                               this.ctx.lineWidth = this.options.gridLines.lineWidth;
+                                                               this.ctx.strokeStyle = this.options.gridLines.color;
+                                                               setContextLineSettings = false;
+                                                       }
+
+                                                       yLineValue += helpers.aliasPixel(this.ctx.lineWidth);
+
+                                                       // Draw the label area
+                                                       this.ctx.beginPath();
+
+                                                       if (this.options.gridLines.drawTicks) {
+                                                               this.ctx.moveTo(xTickStart, yLineValue);
+                                                               this.ctx.lineTo(xTickEnd, yLineValue);
+                                                       }
+
+                                                       // Draw the chart area
+                                                       if (this.options.gridLines.drawOnChartArea) {
+                                                               this.ctx.moveTo(chartArea.left, yLineValue);
+                                                               this.ctx.lineTo(chartArea.right, yLineValue);
+                                                       }
+
+                                                       // Need to stroke in the loop because we are potentially changing line widths & colours
+                                                       this.ctx.stroke();
+                                               }
+
+                                               if (this.options.ticks.display) {
+                                                       var xLabelValue;
+                                                       var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
+
+                                                       this.ctx.save();
+
+                                                       if (this.options.position === "left") {
+                                                               if (this.options.ticks.mirror) {
+                                                                       xLabelValue = this.right + this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "left";
+                                                               } else {
+                                                                       xLabelValue = this.right - this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "right";
+                                                               }
+                                                       } else {
+                                                               // right side
+                                                               if (this.options.ticks.mirror) {
+                                                                       xLabelValue = this.left - this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "right";
+                                                               } else {
+                                                                       xLabelValue = this.left + this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "left";
+                                                               }
+                                                       }
+
+                                                       this.ctx.translate(xLabelValue, yLabelValue);
+                                                       this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
+                                                       this.ctx.font = tickLabelFont;
+                                                       this.ctx.textBaseline = "middle";
+                                                       this.ctx.fillText(label, 0, 0);
+                                                       this.ctx.restore();
+                                               }
+                                       }, this);
+
+                                       if (this.options.scaleLabel.display) {
+                                               // Draw the scale label
+                                               scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
+                                               scaleLabelY = this.top + ((this.bottom - this.top) / 2);
+                                               var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
+
+                                               this.ctx.save();
+                                               this.ctx.translate(scaleLabelX, scaleLabelY);
+                                               this.ctx.rotate(rotation);
+                                               this.ctx.textAlign = "center";
+                                               this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour
+                                               this.ctx.font = scaleLabelFont;
+                                               this.ctx.textBaseline = 'middle';
+                                               this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);
+                                               this.ctx.restore();
+                                       }
+                               }
+
+                               // Draw the line at the edge of the axis
+                               this.ctx.lineWidth = this.options.gridLines.lineWidth;
+                               this.ctx.strokeStyle = this.options.gridLines.color;
+                               var x1 = this.left,
+                                       x2 = this.right,
+                                       y1 = this.top,
+                                       y2 = this.bottom;
+
+                               if (this.isHorizontal()) {
+                                       y1 = y2 = this.options.position === 'top' ? this.bottom : this.top;
+                                       y1 += helpers.aliasPixel(this.ctx.lineWidth);
+                                       y2 += helpers.aliasPixel(this.ctx.lineWidth);
+                               } else {
+                                       x1 = x2 = this.options.position === 'left' ? this.right : this.left;
+                                       x1 += helpers.aliasPixel(this.ctx.lineWidth);
+                                       x2 += helpers.aliasPixel(this.ctx.lineWidth);
+                               }
+
+                               this.ctx.beginPath();
+                               this.ctx.moveTo(x1, y1);
+                               this.ctx.lineTo(x2, y2);
+                               this.ctx.stroke();
+                       }
+               }
+       });
+};
+
+},{}],30:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.scaleService = {
+               // Scale registration object. Extensions can register new scale types (such as log or DB scales) and then
+               // use the new chart options to grab the correct scale
+               constructors: {},
+               // Use a registration function so that we can move to an ES6 map when we no longer need to support
+               // old browsers
+
+               // Scale config defaults
+               defaults: {},
+               registerScaleType: function(type, scaleConstructor, defaults) {
+                       this.constructors[type] = scaleConstructor;
+                       this.defaults[type] = helpers.clone(defaults);
+               },
+               getScaleConstructor: function(type) {
+                       return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined;
+               },
+               getScaleDefaults: function(type) {
+                       // Return the scale defaults merged with the global settings so that we always use the latest ones
+                       return this.defaults.hasOwnProperty(type) ? helpers.scaleMerge(Chart.defaults.scale, this.defaults[type]) : {};
+               },
+               addScalesToLayout: function(chartInstance) {
+                       // Adds each scale to the chart.boxes array to be sized accordingly
+                       helpers.each(chartInstance.scales, function(scale) {
+                               Chart.layoutService.addBox(chartInstance, scale);
+                       });
+               }
+       };
+};
+},{}],31:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.title = {
+               display: false,
+               position: 'top',
+               fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+
+               fontStyle: 'bold',
+               padding: 10,
+
+               // actual title
+               text: ''
+       };
+
+       Chart.Title = Chart.Element.extend({
+
+               initialize: function(config) {
+                       helpers.extend(this, config);
+                       this.options = helpers.configMerge(Chart.defaults.global.title, config.options);
+
+                       // Contains hit boxes for each dataset (in dataset order)
+                       this.legendHitBoxes = [];
+               },
+
+               // These methods are ordered by lifecyle. Utilities then follow.
+
+               beforeUpdate: helpers.noop,
+               update: function(maxWidth, maxHeight, margins) {
+
+                       // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
+                       this.beforeUpdate();
+
+                       // Absorb the master measurements
+                       this.maxWidth = maxWidth;
+                       this.maxHeight = maxHeight;
+                       this.margins = margins;
+
+                       // Dimensions
+                       this.beforeSetDimensions();
+                       this.setDimensions();
+                       this.afterSetDimensions();
+                       // Labels
+                       this.beforeBuildLabels();
+                       this.buildLabels();
+                       this.afterBuildLabels();
+
+                       // Fit
+                       this.beforeFit();
+                       this.fit();
+                       this.afterFit();
+                       //
+                       this.afterUpdate();
+
+                       return this.minSize;
+
+               },
+               afterUpdate: helpers.noop,
+
+               //
+
+               beforeSetDimensions: helpers.noop,
+               setDimensions: function() {
+                       // Set the unconstrained dimension before label rotation
+                       if (this.isHorizontal()) {
+                               // Reset position before calculating rotation
+                               this.width = this.maxWidth;
+                               this.left = 0;
+                               this.right = this.width;
+                       } else {
+                               this.height = this.maxHeight;
+
+                               // Reset position before calculating rotation
+                               this.top = 0;
+                               this.bottom = this.height;
+                       }
+
+                       // Reset padding
+                       this.paddingLeft = 0;
+                       this.paddingTop = 0;
+                       this.paddingRight = 0;
+                       this.paddingBottom = 0;
+
+                       // Reset minSize
+                       this.minSize = {
+                               width: 0,
+                               height: 0
+                       };
+               },
+               afterSetDimensions: helpers.noop,
+
+               //
+
+               beforeBuildLabels: helpers.noop,
+               buildLabels: helpers.noop,
+               afterBuildLabels: helpers.noop,
+
+               //
+
+               beforeFit: helpers.noop,
+               fit: function() {
+
+                       var ctx = this.ctx;
+                       var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+                       var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+                       // Width
+                       if (this.isHorizontal()) {
+                               this.minSize.width = this.maxWidth; // fill all the width
+                       } else {
+                               this.minSize.width = 0;
+                       }
+
+                       // height
+                       if (this.isHorizontal()) {
+                               this.minSize.height = 0;
+                       } else {
+                               this.minSize.height = this.maxHeight; // fill all the height
+                       }
+
+                       // Increase sizes here
+                       if (this.isHorizontal()) {
+
+                               // Title
+                               if (this.options.display) {
+                                       this.minSize.height += fontSize + (this.options.padding * 2);
+                               }
+                       } else {
+                               if (this.options.display) {
+                                       this.minSize.width += fontSize + (this.options.padding * 2);
+                               }
+                       }
+
+                       this.width = this.minSize.width;
+                       this.height = this.minSize.height;
+
+               },
+               afterFit: helpers.noop,
+
+               // Shared Methods
+               isHorizontal: function() {
+                       return this.options.position === "top" || this.options.position === "bottom";
+               },
+
+               // Actualy draw the title block on the canvas
+               draw: function() {
+                       if (this.options.display) {
+                               var ctx = this.ctx;
+                               var titleX, titleY;
+
+                               var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
+                               var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+                               var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+                               var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+                               var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+                               ctx.fillStyle = fontColor; // render in correct colour
+                               ctx.font = titleFont;
+
+                               // Horizontal
+                               if (this.isHorizontal()) {
+                                       // Title
+                                       ctx.textAlign = "center";
+                                       ctx.textBaseline = 'middle';
+
+                                       titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
+                                       titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
+
+                                       ctx.fillText(this.options.text, titleX, titleY);
+                               } else {
+
+                                       // Title
+                                       titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
+                                       titleY = this.top + ((this.bottom - this.top) / 2);
+                                       var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
+
+                                       ctx.save();
+                                       ctx.translate(titleX, titleY);
+                                       ctx.rotate(rotation);
+                                       ctx.textAlign = "center";
+                                       ctx.textBaseline = 'middle';
+                                       ctx.fillText(this.options.text, 0, 0);
+                                       ctx.restore();
+                               }
+                       }
+               }
+       });
+};
+},{}],32:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.tooltips = {
+               enabled: true,
+               custom: null,
+               mode: 'single',
+               backgroundColor: "rgba(0,0,0,0.8)",
+               titleFontStyle: "bold",
+               titleSpacing: 2,
+               titleMarginBottom: 6,
+               titleColor: "#fff",
+               titleAlign: "left",
+               bodySpacing: 2,
+               bodyColor: "#fff",
+               bodyAlign: "left",
+               footerFontStyle: "bold",
+               footerSpacing: 2,
+               footerMarginTop: 6,
+               footerColor: "#fff",
+               footerAlign: "left",
+               yPadding: 6,
+               xPadding: 6,
+               yAlign : 'center',
+               xAlign : 'center',
+               caretSize: 5,
+               cornerRadius: 6,
+               multiKeyBackground: '#fff',
+               callbacks: {
+                       // Args are: (tooltipItems, data)
+                       beforeTitle: helpers.noop,
+                       title: function(tooltipItems, data) {
+                               // Pick first xLabel for now
+                               var title = '';
+
+                               if (tooltipItems.length > 0) {
+                                       if (tooltipItems[0].xLabel) {
+                                               title = tooltipItems[0].xLabel;
+                                       } else if (data.labels.length > 0 && tooltipItems[0].index < data.labels.length) {
+                                               title = data.labels[tooltipItems[0].index];
+                                       }
+                               }
+
+                               return title;
+                       },
+                       afterTitle: helpers.noop,
+
+                       // Args are: (tooltipItems, data)
+                       beforeBody: helpers.noop,
+
+                       // Args are: (tooltipItem, data)
+                       beforeLabel: helpers.noop,
+                       label: function(tooltipItem, data) {
+                               var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
+                               return datasetLabel + ': ' + tooltipItem.yLabel;
+                       },
+                       afterLabel: helpers.noop,
+
+                       // Args are: (tooltipItems, data)
+                       afterBody: helpers.noop,
+
+                       // Args are: (tooltipItems, data)
+                       beforeFooter: helpers.noop,
+                       footer: helpers.noop,
+                       afterFooter: helpers.noop
+               }
+       };
+
+       // Helper to push or concat based on if the 2nd parameter is an array or not
+       function pushOrConcat(base, toPush) {
+               if (toPush) {
+                       if (helpers.isArray(toPush)) {
+                               base = base.concat(toPush);
+                       } else {
+                               base.push(toPush);
+                       }
+               }
+
+               return base;
+       }
+
+       Chart.Tooltip = Chart.Element.extend({
+               initialize: function() {
+                       var options = this._options;
+                       helpers.extend(this, {
+                               _model: {
+                                       // Positioning
+                                       xPadding: options.tooltips.xPadding,
+                                       yPadding: options.tooltips.yPadding,
+                                       xAlign : options.tooltips.yAlign,
+                                       yAlign : options.tooltips.xAlign,
+
+                                       // Body
+                                       bodyColor: options.tooltips.bodyColor,
+                                       _bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily),
+                                       _bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle),
+                                       _bodyAlign: options.tooltips.bodyAlign,
+                                       bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize),
+                                       bodySpacing: options.tooltips.bodySpacing,
+
+                                       // Title
+                                       titleColor: options.tooltips.titleColor,
+                                       _titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily),
+                                       _titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle),
+                                       titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize),
+                                       _titleAlign: options.tooltips.titleAlign,
+                                       titleSpacing: options.tooltips.titleSpacing,
+                                       titleMarginBottom: options.tooltips.titleMarginBottom,
+
+                                       // Footer
+                                       footerColor: options.tooltips.footerColor,
+                                       _footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily),
+                                       _footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle),
+                                       footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize),
+                                       _footerAlign: options.tooltips.footerAlign,
+                                       footerSpacing: options.tooltips.footerSpacing,
+                                       footerMarginTop: options.tooltips.footerMarginTop,
+
+                                       // Appearance
+                                       caretSize: options.tooltips.caretSize,
+                                       cornerRadius: options.tooltips.cornerRadius,
+                                       backgroundColor: options.tooltips.backgroundColor,
+                                       opacity: 0,
+                                       legendColorBackground: options.tooltips.multiKeyBackground
+                               }
+                       });
+               },
+
+               // Get the title
+               // Args are: (tooltipItem, data)
+               getTitle: function() {
+                       var beforeTitle = this._options.tooltips.callbacks.beforeTitle.apply(this, arguments),
+                               title = this._options.tooltips.callbacks.title.apply(this, arguments),
+                               afterTitle = this._options.tooltips.callbacks.afterTitle.apply(this, arguments);
+
+                       var lines = [];
+                       lines = pushOrConcat(lines, beforeTitle);
+                       lines = pushOrConcat(lines, title);
+                       lines = pushOrConcat(lines, afterTitle);
+
+                       return lines;
+               },
+
+               // Args are: (tooltipItem, data)
+               getBeforeBody: function() {
+                       var lines = this._options.tooltips.callbacks.beforeBody.apply(this, arguments);
+                       return helpers.isArray(lines) ? lines : lines !== undefined ? [lines] : [];
+               },
+
+               // Args are: (tooltipItem, data)
+               getBody: function(tooltipItems, data) {
+                       var lines = [];
+
+                       helpers.each(tooltipItems, function(bodyItem) {
+                               helpers.pushAllIfDefined(this._options.tooltips.callbacks.beforeLabel.call(this, bodyItem, data), lines);
+                               helpers.pushAllIfDefined(this._options.tooltips.callbacks.label.call(this, bodyItem, data), lines);
+                               helpers.pushAllIfDefined(this._options.tooltips.callbacks.afterLabel.call(this, bodyItem, data), lines);
+                       }, this);
+
+                       return lines;
+               },
+
+               // Args are: (tooltipItem, data)
+               getAfterBody: function() {
+                       var lines = this._options.tooltips.callbacks.afterBody.apply(this, arguments);
+                       return helpers.isArray(lines) ? lines : lines !== undefined ? [lines] : [];
+               },
+
+               // Get the footer and beforeFooter and afterFooter lines
+               // Args are: (tooltipItem, data)
+               getFooter: function() {
+                       var beforeFooter = this._options.tooltips.callbacks.beforeFooter.apply(this, arguments);
+                       var footer = this._options.tooltips.callbacks.footer.apply(this, arguments);
+                       var afterFooter = this._options.tooltips.callbacks.afterFooter.apply(this, arguments);
+
+                       var lines = [];
+                       lines = pushOrConcat(lines, beforeFooter);
+                       lines = pushOrConcat(lines, footer);
+                       lines = pushOrConcat(lines, afterFooter);
+
+                       return lines;
+               },
+
+               getAveragePosition: function(elements) {
+
+                       if (!elements.length) {
+                               return false;
+                       }
+
+                       var xPositions = [];
+                       var yPositions = [];
+
+                       helpers.each(elements, function(el) {
+                               if (el) {
+                                       var pos = el.tooltipPosition();
+                                       xPositions.push(pos.x);
+                                       yPositions.push(pos.y);
+                               }
+                       });
+
+                       var x = 0,
+                               y = 0;
+                       for (var i = 0; i < xPositions.length; i++) {
+                               x += xPositions[i];
+                               y += yPositions[i];
+                       }
+
+                       return {
+                               x: Math.round(x / xPositions.length),
+                               y: Math.round(y / xPositions.length)
+                       };
+
+               },
+
+               update: function(changed) {
+                       if (this._active.length) {
+                               this._model.opacity = 1;
+
+                               var element = this._active[0],
+                                       labelColors = [],
+                                       tooltipPosition;
+
+                               var tooltipItems = [];
+
+                               if (this._options.tooltips.mode === 'single') {
+                                       var yScale = element._yScale || element._scale; // handle radar || polarArea charts
+                                       tooltipItems.push({
+                                               xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '',
+                                               yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '',
+                                               index: element._index,
+                                               datasetIndex: element._datasetIndex
+                                       });
+                                       tooltipPosition = this.getAveragePosition(this._active);
+                               } else {
+                                       helpers.each(this._data.datasets, function(dataset, datasetIndex) {
+                                               if (!helpers.isDatasetVisible(dataset)) {
+                                                       return;
+                                               }
+                                               var currentElement = dataset.metaData[element._index];
+                                               if (currentElement) {
+                                                       var yScale = element._yScale || element._scale; // handle radar || polarArea charts
+
+                                                       tooltipItems.push({
+                                                               xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
+                                                               yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
+                                                               index: element._index,
+                                                               datasetIndex: datasetIndex
+                                                       });
+                                               }
+                                       }, null, element._yScale.options.stacked);
+
+                                       helpers.each(this._active, function(active) {
+                                               if (active) {
+                                                       labelColors.push({
+                                                               borderColor: active._view.borderColor,
+                                                               backgroundColor: active._view.backgroundColor
+                                                       });
+                                               }
+                                       }, null, element._yScale.options.stacked);
+
+                                       tooltipPosition = this.getAveragePosition(this._active);
+                                       tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
+                               }
+
+                               // Build the Text Lines
+                               helpers.extend(this._model, {
+                                       title: this.getTitle(tooltipItems, this._data),
+                                       beforeBody: this.getBeforeBody(tooltipItems, this._data),
+                                       body: this.getBody(tooltipItems, this._data),
+                                       afterBody: this.getAfterBody(tooltipItems, this._data),
+                                       footer: this.getFooter(tooltipItems, this._data)
+                               });
+
+                               helpers.extend(this._model, {
+                                       x: Math.round(tooltipPosition.x),
+                                       y: Math.round(tooltipPosition.y),
+                                       caretPadding: helpers.getValueOrDefault(tooltipPosition.padding, 2),
+                                       labelColors: labelColors
+                               });
+
+                               // We need to determine alignment of
+                               var tooltipSize = this.getTooltipSize(this._model);
+                               this.determineAlignment(tooltipSize); // Smart Tooltip placement to stay on the canvas
+
+                               helpers.extend(this._model, this.getBackgroundPoint(this._model, tooltipSize));
+                       } else {
+                               this._model.opacity = 0;
+                       }
+
+                       if (changed && this._options.tooltips.custom) {
+                               this._options.tooltips.custom.call(this, this._model);
+                       }
+
+                       return this;
+               },
+               getTooltipSize: function getTooltipSize(vm) {
+                       var ctx = this._chart.ctx;
+
+                       var size = {
+                               height: vm.yPadding * 2, // Tooltip Padding
+                               width: 0
+                       };
+                       var combinedBodyLength = vm.body.length + vm.beforeBody.length + vm.afterBody.length;
+
+                       size.height += vm.title.length * vm.titleFontSize; // Title Lines
+                       size.height += (vm.title.length - 1) * vm.titleSpacing; // Title Line Spacing
+                       size.height += vm.title.length ? vm.titleMarginBottom : 0; // Title's bottom Margin
+                       size.height += combinedBodyLength * vm.bodyFontSize; // Body Lines
+                       size.height += combinedBodyLength ? (combinedBodyLength - 1) * vm.bodySpacing : 0; // Body Line Spacing
+                       size.height += vm.footer.length ? vm.footerMarginTop : 0; // Footer Margin
+                       size.height += vm.footer.length * (vm.footerFontSize); // Footer Lines
+                       size.height += vm.footer.length ? (vm.footer.length - 1) * vm.footerSpacing : 0; // Footer Line Spacing
+
+                       // Width
+                       ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
+                       helpers.each(vm.title, function(line) {
+                               size.width = Math.max(size.width, ctx.measureText(line).width);
+                       });
+
+                       ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
+                       helpers.each(vm.beforeBody.concat(vm.afterBody), function(line) {
+                               size.width = Math.max(size.width, ctx.measureText(line).width);
+                       });
+                       helpers.each(vm.body, function(line) {
+                               size.width = Math.max(size.width, ctx.measureText(line).width + (this._options.tooltips.mode !== 'single' ? (vm.bodyFontSize + 2) : 0));
+                       }, this);
+
+                       ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
+                       helpers.each(vm.footer, function(line) {
+                               size.width = Math.max(size.width, ctx.measureText(line).width);
+                       });
+                       size.width += 2 * vm.xPadding;
+
+                       return size;
+               },
+               determineAlignment: function determineAlignment(size) {
+                       if (this._model.y < size.height) {
+                               this._model.yAlign = 'top';
+                       } else if (this._model.y > (this._chart.height - size.height)) {
+                               this._model.yAlign = 'bottom';
+                       }
+
+                       var lf, rf; // functions to determine left, right alignment
+                       var olf, orf; // functions to determine if left/right alignment causes tooltip to go outside chart
+                       var yf; // function to get the y alignment if the tooltip goes outside of the left or right edges
+                       var _this = this;
+                       var midX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right) / 2;
+                       var midY = (this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom) / 2;
+
+                       if (this._model.yAlign === 'center') {
+                               lf = function(x) {
+                                       return x <= midX;
+                               };
+                               rf = function(x) {
+                                       return x > midX;
+                               };
+                       } else {
+                               lf = function(x) {
+                                       return x <= (size.width / 2);
+                               };
+                               rf = function(x) {
+                                       return x >= (_this._chart.width - (size.width / 2));
+                               };
+                       }
+
+                       olf = function(x) {
+                               return x + size.width > _this._chart.width;
+                       };
+                       orf = function(x) {
+                               return x - size.width < 0;
+                       };
+                       yf = function(y) {
+                               return y <= midY ? 'top' : 'bottom';
+                       };
+
+                       if (lf(this._model.x)) {
+                               this._model.xAlign = 'left';
+
+                               // Is tooltip too wide and goes over the right side of the chart.?
+                               if (olf(this._model.x)) {
+                                       this._model.xAlign = 'center';
+                                       this._model.yAlign = yf(this._model.y);
+                               }
+                       } else if (rf(this._model.x)) {
+                               this._model.xAlign = 'right';
+
+                               // Is tooltip too wide and goes outside left edge of canvas?
+                               if (orf(this._model.x)) {
+                                       this._model.xAlign = 'center';
+                                       this._model.yAlign = yf(this._model.y);
+                               }
+                       }
+               },
+               getBackgroundPoint: function getBackgroundPoint(vm, size) {
+                       // Background Position
+                       var pt = {
+                               x: vm.x,
+                               y: vm.y
+                       };
+
+                       if (vm.xAlign === 'right') {
+                               pt.x -= size.width;
+                       } else if (vm.xAlign === 'center') {
+                               pt.x -= (size.width / 2);
+                       }
+
+                       if (vm.yAlign === 'top') {
+                               pt.y += vm.caretPadding + vm.caretSize;
+                       } else if (vm.yAlign === 'bottom') {
+                               pt.y -= size.height + vm.caretPadding + vm.caretSize;
+                       } else {
+                               pt.y -= (size.height / 2);
+                       }
+
+                       if (vm.yAlign === 'center') {
+                               if (vm.xAlign === 'left') {
+                                       pt.x += vm.caretPadding + vm.caretSize;
+                               } else if (vm.xAlign === 'right') {
+                                       pt.x -= vm.caretPadding + vm.caretSize;
+                               }
+                       } else {
+                               if (vm.xAlign === 'left') {
+                                       pt.x -= vm.cornerRadius + vm.caretPadding;
+                               } else if (vm.xAlign === 'right') {
+                                       pt.x += vm.cornerRadius + vm.caretPadding;
+                               }
+                       }
+
+                       return pt;
+               },
+               drawCaret: function drawCaret(tooltipPoint, size, opacity, caretPadding) {
+                       var vm = this._view;
+                       var ctx = this._chart.ctx;
+                       var x1, x2, x3;
+                       var y1, y2, y3;
+
+                       if (vm.yAlign === 'center') {
+                               // Left or right side
+                               if (vm.xAlign === 'left') {
+                                       x1 = tooltipPoint.x;
+                                       x2 = x1 - vm.caretSize;
+                                       x3 = x1;
+                               } else {
+                                       x1 = tooltipPoint.x + size.width;
+                                       x2 = x1 + vm.caretSize;
+                                       x3 = x1;
+                               }
+
+                               y2 = tooltipPoint.y + (size.height / 2);
+                               y1 = y2 - vm.caretSize;
+                               y3 = y2 + vm.caretSize;
+                       } else {
+                               if (vm.xAlign === 'left') {
+                                       x1 = tooltipPoint.x + vm.cornerRadius;
+                                       x2 = x1 + vm.caretSize;
+                                       x3 = x2 + vm.caretSize;
+                               } else if (vm.xAlign === 'right') {
+                                       x1 = tooltipPoint.x + size.width - vm.cornerRadius;
+                                       x2 = x1 - vm.caretSize;
+                                       x3 = x2 - vm.caretSize;
+                               } else {
+                                       x2 = tooltipPoint.x + (size.width / 2);
+                                       x1 = x2 - vm.caretSize;
+                                       x3 = x2 + vm.caretSize;
+                               }
+
+                               if (vm.yAlign === 'top') {
+                                       y1 = tooltipPoint.y;
+                                       y2 = y1 - vm.caretSize;
+                                       y3 = y1;
+                               } else {
+                                       y1 = tooltipPoint.y + size.height;
+                                       y2 = y1 + vm.caretSize;
+                                       y3 = y1;
+                               }
+                       }
+
+                       var bgColor = helpers.color(vm.backgroundColor);
+                       ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
+                       ctx.beginPath();
+                       ctx.moveTo(x1, y1);
+                       ctx.lineTo(x2, y2);
+                       ctx.lineTo(x3, y3);
+                       ctx.closePath();
+                       ctx.fill();
+               },
+               drawTitle: function drawTitle(pt, vm, ctx, opacity) {
+                       if (vm.title.length) {
+                               ctx.textAlign = vm._titleAlign;
+                               ctx.textBaseline = "top";
+                               
+                               var titleColor = helpers.color(vm.titleColor);
+                               ctx.fillStyle = titleColor.alpha(opacity * titleColor.alpha()).rgbString();
+                               ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
+
+                               helpers.each(vm.title, function(title, i) {
+                                       ctx.fillText(title, pt.x, pt.y);
+                                       pt.y += vm.titleFontSize + vm.titleSpacing; // Line Height and spacing
+
+                                       if (i + 1 === vm.title.length) {
+                                               pt.y += vm.titleMarginBottom - vm.titleSpacing; // If Last, add margin, remove spacing
+                                       }
+                               });
+                       }
+               },
+               drawBody: function drawBody(pt, vm, ctx, opacity) {
+                       ctx.textAlign = vm._bodyAlign;
+                       ctx.textBaseline = "top";
+
+                       var bodyColor = helpers.color(vm.bodyColor);
+                       ctx.fillStyle = bodyColor.alpha(opacity * bodyColor.alpha()).rgbString();
+                       ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
+
+                       // Before Body
+                       helpers.each(vm.beforeBody, function(beforeBody) {
+                               ctx.fillText(beforeBody, pt.x, pt.y);
+                               pt.y += vm.bodyFontSize + vm.bodySpacing;
+                       });
+
+                       helpers.each(vm.body, function(body, i) {
+                               // Draw Legend-like boxes if needed
+                               if (this._options.tooltips.mode !== 'single') {
+                                       // Fill a white rect so that colours merge nicely if the opacity is < 1
+                                       ctx.fillStyle = helpers.color(vm.legendColorBackground).alpha(opacity).rgbaString();
+                                       ctx.fillRect(pt.x, pt.y, vm.bodyFontSize, vm.bodyFontSize);
+
+                                       // Border
+                                       ctx.strokeStyle = helpers.color(vm.labelColors[i].borderColor).alpha(opacity).rgbaString();
+                                       ctx.strokeRect(pt.x, pt.y, vm.bodyFontSize, vm.bodyFontSize);
+
+                                       // Inner square
+                                       ctx.fillStyle = helpers.color(vm.labelColors[i].backgroundColor).alpha(opacity).rgbaString();
+                                       ctx.fillRect(pt.x + 1, pt.y + 1, vm.bodyFontSize - 2, vm.bodyFontSize - 2);
+
+                                       ctx.fillStyle = helpers.color(vm.bodyColor).alpha(opacity).rgbaString(); // Return fill style for text
+                               }
+
+                               // Body Line
+                               ctx.fillText(body, pt.x + (this._options.tooltips.mode !== 'single' ? (vm.bodyFontSize + 2) : 0), pt.y);
+
+                               pt.y += vm.bodyFontSize + vm.bodySpacing;
+                       }, this);
+
+                       // After Body
+                       helpers.each(vm.afterBody, function(afterBody) {
+                               ctx.fillText(afterBody, pt.x, pt.y);
+                               pt.y += vm.bodyFontSize;
+                       });
+
+                       pt.y -= vm.bodySpacing; // Remove last body spacing
+               },
+               drawFooter: function drawFooter(pt, vm, ctx, opacity) {
+                       if (vm.footer.length) {
+                               pt.y += vm.footerMarginTop;
+
+                               ctx.textAlign = vm._footerAlign;
+                               ctx.textBaseline = "top";
+                               
+                               var footerColor = helpers.color(vm.footerColor);
+                               ctx.fillStyle = footerColor.alpha(opacity * footerColor.alpha()).rgbString();
+                               ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
+
+                               helpers.each(vm.footer, function(footer) {
+                                       ctx.fillText(footer, pt.x, pt.y);
+                                       pt.y += vm.footerFontSize + vm.footerSpacing;
+                               });
+                       }
+               },
+               draw: function draw() {
+                       var ctx = this._chart.ctx;
+                       var vm = this._view;
+
+                       if (vm.opacity === 0) {
+                               return;
+                       }
+
+                       var caretPadding = vm.caretPadding;
+                       var tooltipSize = this.getTooltipSize(vm);
+                       var pt = {
+                               x: vm.x,
+                               y: vm.y
+                       };
+
+                       // IE11/Edge does not like very small opacities, so snap to 0
+                       var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity;
+
+                       if (this._options.tooltips.enabled) {
+                               // Draw Background
+                               var bgColor = helpers.color(vm.backgroundColor);
+                               ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
+                               helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
+                               ctx.fill();
+
+                               // Draw Caret
+                               this.drawCaret(pt, tooltipSize, opacity, caretPadding);
+
+                               // Draw Title, Body, and Footer
+                               pt.x += vm.xPadding;
+                               pt.y += vm.yPadding;
+
+                               // Titles
+                               this.drawTitle(pt, vm, ctx, opacity);
+
+                               // Body
+                               this.drawBody(pt, vm, ctx, opacity);
+
+                               // Footer
+                               this.drawFooter(pt, vm, ctx, opacity);
+                       }
+               }
+       });
+};
+
+},{}],33:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart, moment) {
+
+  var helpers = Chart.helpers;
+
+  Chart.defaults.global.elements.arc = {
+    backgroundColor: Chart.defaults.global.defaultColor,
+    borderColor: "#fff",
+    borderWidth: 2
+  };
+
+  Chart.elements.Arc = Chart.Element.extend({
+    inLabelRange: function(mouseX) {
+      var vm = this._view;
+
+      if (vm) {
+        return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
+      } else {
+        return false;
+      }
+    },
+    inRange: function(chartX, chartY) {
+
+      var vm = this._view;
+
+      if (vm) {
+        var pointRelativePosition = helpers.getAngleFromPoint(vm, {
+          x: chartX,
+          y: chartY
+        });
+
+        //Sanitise angle range
+        var startAngle = vm.startAngle;
+        var endAngle = vm.endAngle;
+        while (endAngle < startAngle) {
+          endAngle += 2.0 * Math.PI;
+        }
+        while (pointRelativePosition.angle > endAngle) {
+          pointRelativePosition.angle -= 2.0 * Math.PI;
+        }
+        while (pointRelativePosition.angle < startAngle) {
+          pointRelativePosition.angle += 2.0 * Math.PI;
+        }
+
+        //Check if within the range of the open/close angle
+        var betweenAngles = (pointRelativePosition.angle >= startAngle && pointRelativePosition.angle <= endAngle),
+          withinRadius = (pointRelativePosition.distance >= vm.innerRadius && pointRelativePosition.distance <= vm.outerRadius);
+
+        return (betweenAngles && withinRadius);
+      } else {
+        return false;
+      }
+    },
+    tooltipPosition: function() {
+      var vm = this._view;
+
+      var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2),
+        rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
+      return {
+        x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
+        y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
+      };
+    },
+    draw: function() {
+
+      var ctx = this._chart.ctx;
+      var vm = this._view;
+
+      ctx.beginPath();
+
+      ctx.arc(vm.x, vm.y, vm.outerRadius, vm.startAngle, vm.endAngle);
+
+      ctx.arc(vm.x, vm.y, vm.innerRadius, vm.endAngle, vm.startAngle, true);
+
+      ctx.closePath();
+      ctx.strokeStyle = vm.borderColor;
+      ctx.lineWidth = vm.borderWidth;
+
+      ctx.fillStyle = vm.backgroundColor;
+
+      ctx.fill();
+      ctx.lineJoin = 'bevel';
+
+      if (vm.borderWidth) {
+        ctx.stroke();
+      }
+    }
+  });
+};
+
+},{}],34:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.elements.line = {
+               tension: 0.4,
+               backgroundColor: Chart.defaults.global.defaultColor,
+               borderWidth: 3,
+               borderColor: Chart.defaults.global.defaultColor,
+               borderCapStyle: 'butt',
+               borderDash: [],
+               borderDashOffset: 0.0,
+               borderJoinStyle: 'miter',
+               fill: true // do we fill in the area between the line and its base axis
+       };
+
+       Chart.elements.Line = Chart.Element.extend({
+               lineToNextPoint: function(previousPoint, point, nextPoint, skipHandler, previousSkipHandler) {
+                       var ctx = this._chart.ctx;
+
+                       if (point._view.skip) {
+                               skipHandler.call(this, previousPoint, point, nextPoint);
+                       } else if (previousPoint._view.skip) {
+                               previousSkipHandler.call(this, previousPoint, point, nextPoint);
+                       } else if (point._view.tension === 0) {
+                               ctx.lineTo(point._view.x, point._view.y);
+                       } else {
+                               // Line between points
+                               ctx.bezierCurveTo(
+                                       previousPoint._view.controlPointNextX,
+                                       previousPoint._view.controlPointNextY,
+                                       point._view.controlPointPreviousX,
+                                       point._view.controlPointPreviousY,
+                                       point._view.x,
+                                       point._view.y
+                               );
+                       }
+               },
+
+               draw: function() {
+                       var _this = this;
+
+                       var vm = this._view;
+                       var ctx = this._chart.ctx;
+                       var first = this._children[0];
+                       var last = this._children[this._children.length - 1];
+
+                       function loopBackToStart(drawLineToCenter) {
+                               if (!first._view.skip && !last._view.skip) {
+                                       // Draw a bezier line from last to first
+                                       ctx.bezierCurveTo(
+                                               last._view.controlPointNextX,
+                                               last._view.controlPointNextY,
+                                               first._view.controlPointPreviousX,
+                                               first._view.controlPointPreviousY,
+                                               first._view.x,
+                                               first._view.y
+                                       );
+                               } else if (drawLineToCenter) {
+                                       // Go to center
+                                       ctx.lineTo(_this._view.scaleZero.x, _this._view.scaleZero.y);
+                               }
+                       }
+
+                       ctx.save();
+
+                       // If we had points and want to fill this line, do so.
+                       if (this._children.length > 0 && vm.fill) {
+                               // Draw the background first (so the border is always on top)
+                               ctx.beginPath();
+
+                               helpers.each(this._children, function(point, index) {
+                                       var previous = helpers.previousItem(this._children, index);
+                                       var next = helpers.nextItem(this._children, index);
+
+                                       // First point moves to it's starting position no matter what
+                                       if (index === 0) {
+                                               if (this._loop) {
+                                                       ctx.moveTo(vm.scaleZero.x, vm.scaleZero.y);
+                                               } else {
+                                                       ctx.moveTo(point._view.x, vm.scaleZero);
+                                               }
+
+                                               if (point._view.skip) {
+                                                       if (!this._loop) {
+                                                               ctx.moveTo(next._view.x, this._view.scaleZero);
+                                                       }
+                                               } else {
+                                                       ctx.lineTo(point._view.x, point._view.y);
+                                               }
+                                       } else {
+                                               this.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
+                                                       if (this._loop) {
+                                                               // Go to center
+                                                               ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y);
+                                                       } else {
+                                                               ctx.lineTo(previousPoint._view.x, this._view.scaleZero);
+                                                               ctx.moveTo(nextPoint._view.x, this._view.scaleZero);
+                                                       }
+                                               }, function(previousPoint, point) {
+                                                       // If we skipped the last point, draw a line to ourselves so that the fill is nice
+                                                       ctx.lineTo(point._view.x, point._view.y);
+                                               });
+                                       }
+                               }, this);
+
+                               // For radial scales, loop back around to the first point
+                               if (this._loop) {
+                                       loopBackToStart(true);
+                               } else {
+                                       //Round off the line by going to the base of the chart, back to the start, then fill.
+                                       ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero);
+                                       ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
+                               }
+
+                               ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
+                               ctx.closePath();
+                               ctx.fill();
+                       }
+
+                       // Now draw the line between all the points with any borders
+                       ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle;
+
+                       // IE 9 and 10 do not support line dash
+                       if (ctx.setLineDash) {
+                               ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash);
+                       }
+
+                       ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset;
+                       ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle;
+                       ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.line.borderWidth;
+                       ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
+                       ctx.beginPath();
+
+                       helpers.each(this._children, function(point, index) {
+                               var previous = helpers.previousItem(this._children, index);
+                               var next = helpers.nextItem(this._children, index);
+
+                               if (index === 0) {
+                                       ctx.moveTo(point._view.x, point._view.y);
+                               } else {
+                                       this.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
+                                               ctx.moveTo(nextPoint._view.x, nextPoint._view.y);
+                                       }, function(previousPoint, point) {
+                                               // If we skipped the last point, move up to our point preventing a line from being drawn
+                                               ctx.moveTo(point._view.x, point._view.y);
+                                       });
+                               }
+                       }, this);
+
+                       if (this._loop && this._children.length > 0) {
+                               loopBackToStart();
+                       }
+
+                       ctx.stroke();
+                       ctx.restore();
+               }
+       });
+};
+},{}],35:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.elements.point = {
+               radius: 3,
+               pointStyle: 'circle',
+               backgroundColor: Chart.defaults.global.defaultColor,
+               borderWidth: 1,
+               borderColor: Chart.defaults.global.defaultColor,
+               // Hover
+               hitRadius: 1,
+               hoverRadius: 4,
+               hoverBorderWidth: 1
+       };
+
+
+       Chart.elements.Point = Chart.Element.extend({
+               inRange: function(mouseX, mouseY) {
+                       var vm = this._view;
+
+                       if (vm) {
+                               var hoverRange = vm.hitRadius + vm.radius;
+                               return ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(hoverRange, 2));
+                       } else {
+                               return false;
+                       }
+               },
+               inLabelRange: function(mouseX) {
+                       var vm = this._view;
+
+                       if (vm) {
+                               return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2));
+                       } else {
+                               return false;
+                       }
+               },
+               tooltipPosition: function() {
+                       var vm = this._view;
+                       return {
+                               x: vm.x,
+                               y: vm.y,
+                               padding: vm.radius + vm.borderWidth
+                       };
+               },
+               draw: function() {
+
+                       var vm = this._view;
+                       var ctx = this._chart.ctx;
+
+
+                       if (vm.skip) {
+                               return;
+                       }
+
+                       if (typeof vm.pointStyle === 'object' && ((vm.pointStyle.toString() === '[object HTMLImageElement]') || (vm.pointStyle.toString() === '[object HTMLCanvasElement]'))) {
+                               ctx.drawImage(vm.pointStyle, vm.x - vm.pointStyle.width / 2, vm.y - vm.pointStyle.height / 2);
+                               return;
+                       }
+
+                       if (!isNaN(vm.radius) && vm.radius > 0) {
+
+                               ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
+                               ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, Chart.defaults.global.elements.point.borderWidth);
+
+                               ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
+
+                               var radius = vm.radius;
+
+                               var xOffset;
+                               var yOffset;
+
+                               switch (vm.pointStyle) {
+                                       // Default includes circle
+                                       default: ctx.beginPath();
+                                       ctx.arc(vm.x, vm.y, radius, 0, Math.PI * 2);
+                                       ctx.closePath();
+                                       ctx.fill();
+                                       break;
+                                       case 'triangle':
+                                                       ctx.beginPath();
+                                               var edgeLength = 3 * radius / Math.sqrt(3);
+                                               var height = edgeLength * Math.sqrt(3) / 2;
+                                               ctx.moveTo(vm.x - edgeLength / 2, vm.y + height / 3);
+                                               ctx.lineTo(vm.x + edgeLength / 2, vm.y + height / 3);
+                                               ctx.lineTo(vm.x, vm.y - 2 * height / 3);
+                                               ctx.closePath();
+                                               ctx.fill();
+                                               break;
+                                       case 'rect':
+                                                       ctx.fillRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               ctx.strokeRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               break;
+                                       case 'rectRot':
+                                                       ctx.translate(vm.x, vm.y);
+                                               ctx.rotate(Math.PI / 4);
+                                               ctx.fillRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               ctx.strokeRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               ctx.setTransform(1, 0, 0, 1, 0, 0);
+                                               break;
+                                       case 'cross':
+                                                       ctx.beginPath();
+                                               ctx.moveTo(vm.x, vm.y + radius);
+                                               ctx.lineTo(vm.x, vm.y - radius);
+                                               ctx.moveTo(vm.x - radius, vm.y);
+                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.closePath();
+                                               break;
+                                       case 'crossRot':
+                                                       ctx.beginPath();
+                                               xOffset = Math.cos(Math.PI / 4) * radius;
+                                               yOffset = Math.sin(Math.PI / 4) * radius;
+                                               ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
+                                               ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
+                                               ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
+                                               ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+                                               ctx.closePath();
+                                               break;
+                                       case 'star':
+                                                       ctx.beginPath();
+                                               ctx.moveTo(vm.x, vm.y + radius);
+                                               ctx.lineTo(vm.x, vm.y - radius);
+                                               ctx.moveTo(vm.x - radius, vm.y);
+                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               xOffset = Math.cos(Math.PI / 4) * radius;
+                                               yOffset = Math.sin(Math.PI / 4) * radius;
+                                               ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
+                                               ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
+                                               ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
+                                               ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+                                               ctx.closePath();
+                                               break;
+                                       case 'line':
+                                                       ctx.beginPath();
+                                               ctx.moveTo(vm.x - radius, vm.y);
+                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.closePath();
+                                               break;
+                                       case 'dash':
+                                                       ctx.beginPath();
+                                               ctx.moveTo(vm.x, vm.y);
+                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.closePath();
+                                               break;
+                               }
+
+                               ctx.stroke();
+                       }
+               }
+       });
+};
+},{}],36:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       Chart.defaults.global.elements.rectangle = {
+               backgroundColor: Chart.defaults.global.defaultColor,
+               borderWidth: 0,
+               borderColor: Chart.defaults.global.defaultColor,
+               borderSkipped: 'bottom'
+       };
+
+       Chart.elements.Rectangle = Chart.Element.extend({
+               draw: function() {
+
+                       var ctx = this._chart.ctx;
+                       var vm = this._view;
+
+                       var halfWidth = vm.width / 2,
+                               leftX = vm.x - halfWidth,
+                               rightX = vm.x + halfWidth,
+                               top = vm.base - (vm.base - vm.y),
+                               halfStroke = vm.borderWidth / 2;
+
+                       // Canvas doesn't allow us to stroke inside the width so we can
+                       // adjust the sizes to fit if we're setting a stroke on the line
+                       if (vm.borderWidth) {
+                               leftX += halfStroke;
+                               rightX -= halfStroke;
+                               top += halfStroke;
+                       }
+
+                       ctx.beginPath();
+
+                       ctx.fillStyle = vm.backgroundColor;
+                       ctx.strokeStyle = vm.borderColor;
+                       ctx.lineWidth = vm.borderWidth;
+
+                       // Corner points, from bottom-left to bottom-right clockwise
+                       // | 1 2 |
+                       // | 0 3 |
+                       var corners = [
+                               [leftX, vm.base],
+                               [leftX, top],
+                               [rightX, top],
+                               [rightX, vm.base]
+                       ];
+
+                       // Find first (starting) corner with fallback to 'bottom' 
+                       var borders = ['bottom', 'left', 'top', 'right'];
+                       var startCorner = borders.indexOf(vm.borderSkipped, 0);
+                       if (startCorner === -1)
+                               startCorner = 0;
+
+                       function cornerAt(index) {
+                               return corners[(startCorner + index) % 4];
+                       }
+
+                       // Draw rectangle from 'startCorner'
+                       ctx.moveTo.apply(ctx, cornerAt(0));
+                       for (var i = 1; i < 4; i++)
+                               ctx.lineTo.apply(ctx, cornerAt(i));
+
+                       ctx.fill();
+                       if (vm.borderWidth) {
+                               ctx.stroke();
+                       }
+               },
+               height: function() {
+                       var vm = this._view;
+                       return vm.base - vm.y;
+               },
+               inRange: function(mouseX, mouseY) {
+                       var vm = this._view;
+                       var inRange = false;
+
+                       if (vm) {
+                               if (vm.y < vm.base) {
+                                       inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base);
+                               } else {
+                                       inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y);
+                               }
+                       }
+
+                       return inRange;
+               },
+               inLabelRange: function(mouseX) {
+                       var vm = this._view;
+
+                       if (vm) {
+                               return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2);
+                       } else {
+                               return false;
+                       }
+               },
+               tooltipPosition: function() {
+                       var vm = this._view;
+                       return {
+                               x: vm.x,
+                               y: vm.y
+                       };
+               }
+       });
+
+};
+},{}],37:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+       // Default config for a category scale
+       var defaultConfig = {
+               position: "bottom"
+       };
+
+       var DatasetScale = Chart.Scale.extend({
+               buildTicks: function(index) {
+                       this.startIndex = 0;
+                       this.endIndex = this.chart.data.labels.length;
+                       var findIndex;
+
+                       if (this.options.ticks.min !== undefined) {
+                               // user specified min value
+                               findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.min);
+                               this.startIndex = findIndex !== -1 ? findIndex : this.startIndex;
+                       }
+
+                       if (this.options.ticks.max !== undefined) {
+                               // user specified max value
+                               findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.max);
+                               this.endIndex = findIndex !== -1 ? findIndex : this.endIndex;
+                       }
+
+                       // If we are viewing some subset of labels, slice the original array
+                       this.ticks = (this.startIndex === 0 && this.endIndex === this.chart.data.labels.length) ? this.chart.data.labels : this.chart.data.labels.slice(this.startIndex, this.endIndex + 1);
+               },
+
+               getLabelForIndex: function(index, datasetIndex) {
+                       return this.ticks[index];
+               },
+
+               // Used to get data value locations.  Value can either be an index or a numerical value
+               getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+                       // 1 is added because we need the length but we have the indexes
+                       var offsetAmt = Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+
+                       if (this.isHorizontal()) {
+                               var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                               var valueWidth = innerWidth / offsetAmt;
+                               var widthOffset = (valueWidth * (index - this.startIndex)) + this.paddingLeft;
+
+                               if (this.options.gridLines.offsetGridLines && includeOffset) {
+                                       widthOffset += (valueWidth / 2);
+                               }
+
+                               return this.left + Math.round(widthOffset);
+                       } else {
+                               var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                               var valueHeight = innerHeight / offsetAmt;
+                               var heightOffset = (valueHeight * (index - this.startIndex)) + this.paddingTop;
+
+                               if (this.options.gridLines.offsetGridLines && includeOffset) {
+                                       heightOffset += (valueHeight / 2);
+                               }
+
+                               return this.top + Math.round(heightOffset);
+                       }
+               },
+               getPixelForTick: function(index, includeOffset) {
+                       return this.getPixelForValue(this.ticks[index], index + this.startIndex, null, includeOffset);
+               }
+       });
+
+       Chart.scaleService.registerScaleType("category", DatasetScale, defaultConfig);
+
+};
+},{}],38:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       var defaultConfig = {
+               position: "left",
+               ticks: {
+                       callback: function(tickValue, index, ticks) {
+                               var delta = ticks[1] - ticks[0];
+
+                               // If we have a number like 2.5 as the delta, figure out how many decimal places we need
+                               if (Math.abs(delta) > 1) {
+                                       if (tickValue !== Math.floor(tickValue)) {
+                                               // not an integer
+                                               delta = tickValue - Math.floor(tickValue);
+                                       }
+                               }
+
+                               var logDelta = helpers.log10(Math.abs(delta));
+                               var tickString = '';
+
+                               if (tickValue !== 0) {
+                                       var numDecimal = -1 * Math.floor(logDelta);
+                                       numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
+                                       tickString = tickValue.toFixed(numDecimal);
+                               } else {
+                                       tickString = '0'; // never show decimal places for 0
+                               }
+
+                               return tickString;
+                       }
+               }
+       };
+
+       var LinearScale = Chart.Scale.extend({
+               determineDataLimits: function() {
+                       // First Calculate the range
+                       this.min = null;
+                       this.max = null;
+
+                       if (this.options.stacked) {
+                               var valuesPerType = {};
+                               var hasPositiveValues = false;
+                               var hasNegativeValues = false;
+
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       if (valuesPerType[dataset.type] === undefined) {
+                                               valuesPerType[dataset.type] = {
+                                                       positiveValues: [],
+                                                       negativeValues: []
+                                               };
+                                       }
+
+                                       // Store these per type
+                                       var positiveValues = valuesPerType[dataset.type].positiveValues;
+                                       var negativeValues = valuesPerType[dataset.type].negativeValues;
+
+                                       if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
+                                               helpers.each(dataset.data, function(rawValue, index) {
+
+                                                       var value = +this.getRightValue(rawValue);
+                                                       if (isNaN(value)) {
+                                                               return;
+                                                       }
+
+                                                       positiveValues[index] = positiveValues[index] || 0;
+                                                       negativeValues[index] = negativeValues[index] || 0;
+
+                                                       if (this.options.relativePoints) {
+                                                               positiveValues[index] = 100;
+                                                       } else {
+                                                               if (value < 0) {
+                                                                       hasNegativeValues = true;
+                                                                       negativeValues[index] += value;
+                                                               } else {
+                                                                       hasPositiveValues = true;
+                                                                       positiveValues[index] += value;
+                                                               }
+                                                       }
+                                               }, this);
+                                       }
+                               }, this);
+
+                               helpers.each(valuesPerType, function(valuesForType) {
+                                       var values = valuesForType.positiveValues.concat(valuesForType.negativeValues);
+                                       var minVal = helpers.min(values);
+                                       var maxVal = helpers.max(values);
+                                       this.min = this.min === null ? minVal : Math.min(this.min, minVal);
+                                       this.max = this.max === null ? maxVal : Math.max(this.max, maxVal);
+                               }, this);
+
+                       } else {
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
+                                               helpers.each(dataset.data, function(rawValue, index) {
+                                                       var value = +this.getRightValue(rawValue);
+                                                       if (isNaN(value)) {
+                                                               return;
+                                                       }
+
+                                                       if (this.min === null) {
+                                                               this.min = value;
+                                                       } else if (value < this.min) {
+                                                               this.min = value;
+                                                       }
+
+                                                       if (this.max === null) {
+                                                               this.max = value;
+                                                       } else if (value > this.max) {
+                                                               this.max = value;
+                                                       }
+                                               }, this);
+                                       }
+                               }, this);
+                       }
+
+                       // If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
+                       // do nothing since that would make the chart weird. If the user really wants a weird chart
+                       // axis, they can manually override it
+                       if (this.options.ticks.beginAtZero) {
+                               var minSign = helpers.sign(this.min);
+                               var maxSign = helpers.sign(this.max);
+
+                               if (minSign < 0 && maxSign < 0) {
+                                       // move the top up to 0
+                                       this.max = 0;
+                               } else if (minSign > 0 && maxSign > 0) {
+                                       // move the botttom down to 0
+                                       this.min = 0;
+                               }
+                       }
+
+                       if (this.options.ticks.min !== undefined) {
+                               this.min = this.options.ticks.min;
+                       } else if (this.options.ticks.suggestedMin !== undefined) {
+                               this.min = Math.min(this.min, this.options.ticks.suggestedMin);
+                       }
+
+                       if (this.options.ticks.max !== undefined) {
+                               this.max = this.options.ticks.max;
+                       } else if (this.options.ticks.suggestedMax !== undefined) {
+                               this.max = Math.max(this.max, this.options.ticks.suggestedMax);
+                       }
+
+                       if (this.min === this.max) {
+                               this.min--;
+                               this.max++;
+                       }
+               },
+               buildTicks: function() {
+
+                       // Then calulate the ticks
+                       this.ticks = [];
+
+                       // Figure out what the max number of ticks we can support it is based on the size of
+                       // the axis area. For now, we say that the minimum tick spacing in pixels must be 50
+                       // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
+                       // the graph
+
+                       var maxTicks;
+
+                       if (this.isHorizontal()) {
+                               maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.width / 50));
+                       } else {
+                               // The factor of 2 used to scale the font size has been experimentally determined.
+                               var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                               maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.height / (2 * tickFontSize)));
+                       }
+
+                       // Make sure we always have at least 2 ticks
+                       maxTicks = Math.max(2, maxTicks);
+
+                       // To get a "nice" value for the tick spacing, we will use the appropriately named
+                       // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
+                       // for details.
+
+                       var spacing;
+                       var fixedStepSizeSet = (this.options.ticks.fixedStepSize && this.options.ticks.fixedStepSize > 0) || (this.options.ticks.stepSize && this.options.ticks.stepSize > 0);
+                       if (fixedStepSizeSet) {
+                               spacing = helpers.getValueOrDefault(this.options.ticks.fixedStepSize, this.options.ticks.stepSize);
+                       } else {
+                               var niceRange = helpers.niceNum(this.max - this.min, false);
+                               spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
+                       }
+                       var niceMin = Math.floor(this.min / spacing) * spacing;
+                       var niceMax = Math.ceil(this.max / spacing) * spacing;
+                       var numSpaces = (niceMax - niceMin) / spacing;
+
+                       // If very close to our rounded value, use it.
+                       if (helpers.almostEquals(numSpaces, Math.round(numSpaces), spacing / 1000)) {
+                               numSpaces = Math.round(numSpaces);
+                       } else {
+                               numSpaces = Math.ceil(numSpaces);
+                       }
+
+                       // Put the values into the ticks array
+                       this.ticks.push(this.options.ticks.min !== undefined ? this.options.ticks.min : niceMin);
+                       for (var j = 1; j < numSpaces; ++j) {
+                               this.ticks.push(niceMin + (j * spacing));
+                       }
+                       this.ticks.push(this.options.ticks.max !== undefined ? this.options.ticks.max : niceMax);
+
+                       if (this.options.position === "left" || this.options.position === "right") {
+                               // We are in a vertical orientation. The top value is the highest. So reverse the array
+                               this.ticks.reverse();
+                       }
+
+                       // At this point, we need to update our max and min given the tick values since we have expanded the
+                       // range of the scale
+                       this.max = helpers.max(this.ticks);
+                       this.min = helpers.min(this.ticks);
+
+                       if (this.options.ticks.reverse) {
+                               this.ticks.reverse();
+
+                               this.start = this.max;
+                               this.end = this.min;
+                       } else {
+                               this.start = this.min;
+                               this.end = this.max;
+                       }
+               },
+               getLabelForIndex: function(index, datasetIndex) {
+                       return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+               },
+               convertTicksToLabels: function() {
+                       this.ticksAsNumbers = this.ticks.slice();
+                       this.zeroLineIndex = this.ticks.indexOf(0);
+
+                       Chart.Scale.prototype.convertTicksToLabels.call(this);
+               },
+               // Utils
+               getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+                       // This must be called after fit has been run so that
+                       //      this.left, this.top, this.right, and this.bottom have been defined
+                       var rightValue = +this.getRightValue(value);
+                       var pixel;
+                       var range = this.end - this.start;
+
+                       if (this.isHorizontal()) {
+                               var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                               pixel = this.left + (innerWidth / range * (rightValue - this.start));
+                               return Math.round(pixel + this.paddingLeft);
+                       } else {
+                               var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                               pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (rightValue - this.start));
+                               return Math.round(pixel);
+                       }
+               },
+               getPixelForTick: function(index, includeOffset) {
+                       return this.getPixelForValue(this.ticksAsNumbers[index], null, null, includeOffset);
+               }
+       });
+       Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);
+
+};
+},{}],39:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       var defaultConfig = {
+               position: "left",
+
+               // label settings
+               ticks: {
+                       callback: function(value, index, arr) {
+                               var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
+
+                               if (remain === 1 || remain === 2 || remain === 5 || index === 0 || index === arr.length - 1) {
+                                       return value.toExponential();
+                               } else {
+                                       return '';
+                               }
+                       }
+               }
+       };
+
+       var LogarithmicScale = Chart.Scale.extend({
+               determineDataLimits: function() {
+                       // Calculate Range
+                       this.min = null;
+                       this.max = null;
+
+                       if (this.options.stacked) {
+                               var valuesPerType = {};
+
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
+                                               if (valuesPerType[dataset.type] === undefined) {
+                                                       valuesPerType[dataset.type] = [];
+                                               }
+
+                                               helpers.each(dataset.data, function(rawValue, index) {
+                                                       var values = valuesPerType[dataset.type];
+                                                       var value = +this.getRightValue(rawValue);
+                                                       if (isNaN(value)) {
+                                                               return;
+                                                       }
+
+                                                       values[index] = values[index] || 0;
+
+                                                       if (this.options.relativePoints) {
+                                                               values[index] = 100;
+                                                       } else {
+                                                               // Don't need to split positive and negative since the log scale can't handle a 0 crossing
+                                                               values[index] += value;
+                                                       }
+                                               }, this);
+                                       }
+                               }, this);
+
+                               helpers.each(valuesPerType, function(valuesForType) {
+                                       var minVal = helpers.min(valuesForType);
+                                       var maxVal = helpers.max(valuesForType);
+                                       this.min = this.min === null ? minVal : Math.min(this.min, minVal);
+                                       this.max = this.max === null ? maxVal : Math.max(this.max, maxVal);
+                               }, this);
+
+                       } else {
+                               helpers.each(this.chart.data.datasets, function(dataset) {
+                                       if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
+                                               helpers.each(dataset.data, function(rawValue, index) {
+                                                       var value = +this.getRightValue(rawValue);
+                                                       if (isNaN(value)) {
+                                                               return;
+                                                       }
+
+                                                       if (this.min === null) {
+                                                               this.min = value;
+                                                       } else if (value < this.min) {
+                                                               this.min = value;
+                                                       }
+
+                                                       if (this.max === null) {
+                                                               this.max = value;
+                                                       } else if (value > this.max) {
+                                                               this.max = value;
+                                                       }
+                                               }, this);
+                                       }
+                               }, this);
+                       }
+
+                       this.min = this.options.ticks.min !== undefined ? this.options.ticks.min : this.min;
+                       this.max = this.options.ticks.max !== undefined ? this.options.ticks.max : this.max;
+
+                       if (this.min === this.max) {
+                               if (this.min !== 0 && this.min !== null) {
+                                       this.min = Math.pow(10, Math.floor(helpers.log10(this.min)) - 1);
+                                       this.max = Math.pow(10, Math.floor(helpers.log10(this.max)) + 1);
+                               } else {
+                                       this.min = 1;
+                                       this.max = 10;
+                               }
+                       }
+               },
+               buildTicks: function() {
+                       // Reset the ticks array. Later on, we will draw a grid line at these positions
+                       // The array simply contains the numerical value of the spots where ticks will be
+                       this.ticks = [];
+
+                       // Figure out what the max number of ticks we can support it is based on the size of
+                       // the axis area. For now, we say that the minimum tick spacing in pixels must be 50
+                       // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
+                       // the graph
+
+                       var tickVal = this.options.ticks.min !== undefined ? this.options.ticks.min : Math.pow(10, Math.floor(helpers.log10(this.min)));
+
+                       while (tickVal < this.max) {
+                               this.ticks.push(tickVal);
+
+                               var exp = Math.floor(helpers.log10(tickVal));
+                               var significand = Math.floor(tickVal / Math.pow(10, exp)) + 1;
+
+                               if (significand === 10) {
+                                       significand = 1;
+                                       ++exp;
+                               }
+
+                               tickVal = significand * Math.pow(10, exp);
+                       }
+
+                       var lastTick = this.options.ticks.max !== undefined ? this.options.ticks.max : tickVal;
+                       this.ticks.push(lastTick);
+
+                       if (this.options.position === "left" || this.options.position === "right") {
+                               // We are in a vertical orientation. The top value is the highest. So reverse the array
+                               this.ticks.reverse();
+                       }
+
+                       // At this point, we need to update our max and min given the tick values since we have expanded the
+                       // range of the scale
+                       this.max = helpers.max(this.ticks);
+                       this.min = helpers.min(this.ticks);
+
+                       if (this.options.ticks.reverse) {
+                               this.ticks.reverse();
+
+                               this.start = this.max;
+                               this.end = this.min;
+                       } else {
+                               this.start = this.min;
+                               this.end = this.max;
+                       }
+               },
+               convertTicksToLabels: function() {
+                       this.tickValues = this.ticks.slice();
+
+                       Chart.Scale.prototype.convertTicksToLabels.call(this);
+               },
+               // Get the correct tooltip label
+               getLabelForIndex: function(index, datasetIndex) {
+                       return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+               },
+               getPixelForTick: function(index, includeOffset) {
+                       return this.getPixelForValue(this.tickValues[index], null, null, includeOffset);
+               },
+               getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+                       var pixel;
+
+                       var newVal = +this.getRightValue(value);
+                       var range = helpers.log10(this.end) - helpers.log10(this.start);
+
+                       if (this.isHorizontal()) {
+
+                               if (newVal === 0) {
+                                       pixel = this.left + this.paddingLeft;
+                               } else {
+                                       var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                                       pixel = this.left + (innerWidth / range * (helpers.log10(newVal) - helpers.log10(this.start)));
+                                       pixel += this.paddingLeft;
+                               }
+                       } else {
+                               // Bottom - top since pixels increase downard on a screen
+                               if (newVal === 0) {
+                                       pixel = this.top + this.paddingTop;
+                               } else {
+                                       var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                                       pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (helpers.log10(newVal) - helpers.log10(this.start)));
+                               }
+                       }
+
+                       return pixel;
+               }
+
+       });
+       Chart.scaleService.registerScaleType("logarithmic", LogarithmicScale, defaultConfig);
+
+};
+},{}],40:[function(require,module,exports){
+"use strict";
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+
+       var defaultConfig = {
+               display: true,
+
+               //Boolean - Whether to animate scaling the chart from the centre
+               animate: true,
+               lineArc: false,
+               position: "chartArea",
+
+               angleLines: {
+                       display: true,
+                       color: "rgba(0, 0, 0, 0.1)",
+                       lineWidth: 1
+               },
+
+               // label settings
+               ticks: {
+                       //Boolean - Show a backdrop to the scale label
+                       showLabelBackdrop: true,
+
+                       //String - The colour of the label backdrop
+                       backdropColor: "rgba(255,255,255,0.75)",
+
+                       //Number - The backdrop padding above & below the label in pixels
+                       backdropPaddingY: 2,
+
+                       //Number - The backdrop padding to the side of the label in pixels
+                       backdropPaddingX: 2
+               },
+
+               pointLabels: {
+                       //Number - Point label font size in pixels
+                       fontSize: 10,
+
+                       //Function - Used to convert point labels
+                       callback: function(label) {
+                               return label;
+                       }
+               }
+       };
+
+       var LinearRadialScale = Chart.Scale.extend({
+               getValueCount: function() {
+                       return this.chart.data.labels.length;
+               },
+               setDimensions: function() {
+                       // Set the unconstrained dimension before label rotation
+                       this.width = this.maxWidth;
+                       this.height = this.maxHeight;
+                       this.xCenter = Math.round(this.width / 2);
+                       this.yCenter = Math.round(this.height / 2);
+
+                       var minSize = helpers.min([this.height, this.width]);
+                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                       this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
+               },
+               determineDataLimits: function() {
+                       this.min = null;
+                       this.max = null;
+
+                       helpers.each(this.chart.data.datasets, function(dataset) {
+                               if (helpers.isDatasetVisible(dataset)) {
+                                       helpers.each(dataset.data, function(rawValue, index) {
+                                               var value = +this.getRightValue(rawValue);
+                                               if (isNaN(value)) {
+                                                       return;
+                                               }
+
+                                               if (this.min === null) {
+                                                       this.min = value;
+                                               } else if (value < this.min) {
+                                                       this.min = value;
+                                               }
+
+                                               if (this.max === null) {
+                                                       this.max = value;
+                                               } else if (value > this.max) {
+                                                       this.max = value;
+                                               }
+                                       }, this);
+                               }
+                       }, this);
+
+                       // If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
+                       // do nothing since that would make the chart weird. If the user really wants a weird chart
+                       // axis, they can manually override it
+                       if (this.options.ticks.beginAtZero) {
+                               var minSign = helpers.sign(this.min);
+                               var maxSign = helpers.sign(this.max);
+
+                               if (minSign < 0 && maxSign < 0) {
+                                       // move the top up to 0
+                                       this.max = 0;
+                               } else if (minSign > 0 && maxSign > 0) {
+                                       // move the botttom down to 0
+                                       this.min = 0;
+                               }
+                       }
+
+                       if (this.options.ticks.min !== undefined) {
+                               this.min = this.options.ticks.min;
+                       } else if (this.options.ticks.suggestedMin !== undefined) {
+                               this.min = Math.min(this.min, this.options.ticks.suggestedMin);
+                       }
+
+                       if (this.options.ticks.max !== undefined) {
+                               this.max = this.options.ticks.max;
+                       } else if (this.options.ticks.suggestedMax !== undefined) {
+                               this.max = Math.max(this.max, this.options.ticks.suggestedMax);
+                       }
+
+                       if (this.min === this.max) {
+                               this.min--;
+                               this.max++;
+                       }
+               },
+               buildTicks: function() {
+
+
+                       this.ticks = [];
+
+                       // Figure out what the max number of ticks we can support it is based on the size of
+                       // the axis area. For now, we say that the minimum tick spacing in pixels must be 50
+                       // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
+                       // the graph
+                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                       var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize)));
+                       maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks
+
+                       // To get a "nice" value for the tick spacing, we will use the appropriately named
+                       // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
+                       // for details.
+
+                       var niceRange = helpers.niceNum(this.max - this.min, false);
+                       var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
+                       var niceMin = Math.floor(this.min / spacing) * spacing;
+                       var niceMax = Math.ceil(this.max / spacing) * spacing;
+
+                       var numSpaces = Math.ceil((niceMax - niceMin) / spacing);
+
+                       // Put the values into the ticks array
+                       this.ticks.push(this.options.ticks.min !== undefined ? this.options.ticks.min : niceMin);
+                       for (var j = 1; j < numSpaces; ++j) {
+                               this.ticks.push(niceMin + (j * spacing));
+                       }
+                       this.ticks.push(this.options.ticks.max !== undefined ? this.options.ticks.max : niceMax);
+
+                       // At this point, we need to update our max and min given the tick values since we have expanded the
+                       // range of the scale
+                       this.max = helpers.max(this.ticks);
+                       this.min = helpers.min(this.ticks);
+
+                       if (this.options.ticks.reverse) {
+                               this.ticks.reverse();
+
+                               this.start = this.max;
+                               this.end = this.min;
+                       } else {
+                               this.start = this.min;
+                               this.end = this.max;
+                       }
+
+                       this.zeroLineIndex = this.ticks.indexOf(0);
+               },
+               convertTicksToLabels: function() {
+                       Chart.Scale.prototype.convertTicksToLabels.call(this);
+
+                       // Point labels
+                       this.pointLabels = this.chart.data.labels.map(this.options.pointLabels.callback, this);
+               },
+               getLabelForIndex: function(index, datasetIndex) {
+                       return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+               },
+               fit: function() {
+                       /*
+                        * Right, this is really confusing and there is a lot of maths going on here
+                        * The gist of the problem is here: https://gist.github.com/nnnick/696cc9c55f4b0beb8fe9
+                        *
+                        * Reaction: https://dl.dropboxusercontent.com/u/34601363/toomuchscience.gif
+                        *
+                        * Solution:
+                        *
+                        * We assume the radius of the polygon is half the size of the canvas at first
+                        * at each index we check if the text overlaps.
+                        *
+                        * Where it does, we store that angle and that index.
+                        *
+                        * After finding the largest index and angle we calculate how much we need to remove
+                        * from the shape radius to move the point inwards by that x.
+                        *
+                        * We average the left and right distances to get the maximum shape radius that can fit in the box
+                        * along with labels.
+                        *
+                        * Once we have that, we can find the centre point for the chart, by taking the x text protrusion
+                        * on each side, removing that from the size, halving it and adding the left x protrusion width.
+                        *
+                        * This will mean we have a shape fitted to the canvas, as large as it can be with the labels
+                        * and position it in the most space efficient manner
+                        *
+                        * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
+                        */
+
+                       var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+                       var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
+
+                       // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
+                       // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
+                       var largestPossibleRadius = helpers.min([(this.height / 2 - pointLabelFontSize - 5), this.width / 2]),
+                               pointPosition,
+                               i,
+                               textWidth,
+                               halfTextWidth,
+                               furthestRight = this.width,
+                               furthestRightIndex,
+                               furthestRightAngle,
+                               furthestLeft = 0,
+                               furthestLeftIndex,
+                               furthestLeftAngle,
+                               xProtrusionLeft,
+                               xProtrusionRight,
+                               radiusReductionRight,
+                               radiusReductionLeft,
+                               maxWidthRadius;
+                       this.ctx.font = pointLabeFont;
+
+                       for (i = 0; i < this.getValueCount(); i++) {
+                               // 5px to space the text slightly out - similar to what we do in the draw function.
+                               pointPosition = this.getPointPosition(i, largestPossibleRadius);
+                               textWidth = this.ctx.measureText(this.pointLabels[i] ? this.pointLabels[i] : '').width + 5;
+                               if (i === 0 || i === this.getValueCount() / 2) {
+                                       // If we're at index zero, or exactly the middle, we're at exactly the top/bottom
+                                       // of the radar chart, so text will be aligned centrally, so we'll half it and compare
+                                       // w/left and right text sizes
+                                       halfTextWidth = textWidth / 2;
+                                       if (pointPosition.x + halfTextWidth > furthestRight) {
+                                               furthestRight = pointPosition.x + halfTextWidth;
+                                               furthestRightIndex = i;
+                                       }
+                                       if (pointPosition.x - halfTextWidth < furthestLeft) {
+                                               furthestLeft = pointPosition.x - halfTextWidth;
+                                               furthestLeftIndex = i;
+                                       }
+                               } else if (i < this.getValueCount() / 2) {
+                                       // Less than half the values means we'll left align the text
+                                       if (pointPosition.x + textWidth > furthestRight) {
+                                               furthestRight = pointPosition.x + textWidth;
+                                               furthestRightIndex = i;
+                                       }
+                               } else if (i > this.getValueCount() / 2) {
+                                       // More than half the values means we'll right align the text
+                                       if (pointPosition.x - textWidth < furthestLeft) {
+                                               furthestLeft = pointPosition.x - textWidth;
+                                               furthestLeftIndex = i;
+                                       }
+                               }
+                       }
+
+                       xProtrusionLeft = furthestLeft;
+                       xProtrusionRight = Math.ceil(furthestRight - this.width);
+
+                       furthestRightAngle = this.getIndexAngle(furthestRightIndex);
+                       furthestLeftAngle = this.getIndexAngle(furthestLeftIndex);
+
+                       radiusReductionRight = xProtrusionRight / Math.sin(furthestRightAngle + Math.PI / 2);
+                       radiusReductionLeft = xProtrusionLeft / Math.sin(furthestLeftAngle + Math.PI / 2);
+
+                       // Ensure we actually need to reduce the size of the chart
+                       radiusReductionRight = (helpers.isNumber(radiusReductionRight)) ? radiusReductionRight : 0;
+                       radiusReductionLeft = (helpers.isNumber(radiusReductionLeft)) ? radiusReductionLeft : 0;
+
+                       this.drawingArea = Math.round(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2);
+                       this.setCenterPoint(radiusReductionLeft, radiusReductionRight);
+               },
+               setCenterPoint: function(leftMovement, rightMovement) {
+
+                       var maxRight = this.width - rightMovement - this.drawingArea,
+                               maxLeft = leftMovement + this.drawingArea;
+
+                       this.xCenter = Math.round(((maxLeft + maxRight) / 2) + this.left);
+                       // Always vertically in the centre as the text height doesn't change
+                       this.yCenter = Math.round((this.height / 2) + this.top);
+               },
+
+               getIndexAngle: function(index) {
+                       var angleMultiplier = (Math.PI * 2) / this.getValueCount();
+                       // Start from the top instead of right, so remove a quarter of the circle
+
+                       return index * angleMultiplier - (Math.PI / 2);
+               },
+               getDistanceFromCenterForValue: function(value) {
+                       if (value === null) {
+                               return 0; // null always in center
+                       }
+
+                       // Take into account half font size + the yPadding of the top value
+                       var scalingFactor = this.drawingArea / (this.max - this.min);
+                       if (this.options.reverse) {
+                               return (this.max - value) * scalingFactor;
+                       } else {
+                               return (value - this.min) * scalingFactor;
+                       }
+               },
+               getPointPosition: function(index, distanceFromCenter) {
+                       var thisAngle = this.getIndexAngle(index);
+                       return {
+                               x: Math.round(Math.cos(thisAngle) * distanceFromCenter) + this.xCenter,
+                               y: Math.round(Math.sin(thisAngle) * distanceFromCenter) + this.yCenter
+                       };
+               },
+               getPointPositionForValue: function(index, value) {
+                       return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
+               },
+               draw: function() {
+                       if (this.options.display) {
+                               var ctx = this.ctx;
+                               helpers.each(this.ticks, function(label, index) {
+                                       // Don't draw a centre value (if it is minimum)
+                                       if (index > 0 || this.options.reverse) {
+                                               var yCenterOffset = this.getDistanceFromCenterForValue(this.ticks[index]);
+                                               var yHeight = this.yCenter - yCenterOffset;
+
+                                               // Draw circular lines around the scale
+                                               if (this.options.gridLines.display) {
+                                                       ctx.strokeStyle = this.options.gridLines.color;
+                                                       ctx.lineWidth = this.options.gridLines.lineWidth;
+
+                                                       if (this.options.lineArc) {
+                                                               // Draw circular arcs between the points
+                                                               ctx.beginPath();
+                                                               ctx.arc(this.xCenter, this.yCenter, yCenterOffset, 0, Math.PI * 2);
+                                                               ctx.closePath();
+                                                               ctx.stroke();
+                                                       } else {
+                                                               // Draw straight lines connecting each index
+                                                               ctx.beginPath();
+                                                               for (var i = 0; i < this.getValueCount(); i++) {
+                                                                       var pointPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.ticks[index]));
+                                                                       if (i === 0) {
+                                                                               ctx.moveTo(pointPosition.x, pointPosition.y);
+                                                                       } else {
+                                                                               ctx.lineTo(pointPosition.x, pointPosition.y);
+                                                                       }
+                                                               }
+                                                               ctx.closePath();
+                                                               ctx.stroke();
+                                                       }
+                                               }
+
+                                               if (this.options.ticks.display) {
+                                                       var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+                                                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                                                       var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+                                                       var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+                                                       var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+                                                       ctx.font = tickLabelFont;
+
+                                                       if (this.options.ticks.showLabelBackdrop) {
+                                                               var labelWidth = ctx.measureText(label).width;
+                                                               ctx.fillStyle = this.options.ticks.backdropColor;
+                                                               ctx.fillRect(
+                                                                       this.xCenter - labelWidth / 2 - this.options.ticks.backdropPaddingX,
+                                                                       yHeight - tickFontSize / 2 - this.options.ticks.backdropPaddingY,
+                                                                       labelWidth + this.options.ticks.backdropPaddingX * 2,
+                                                                       tickFontSize + this.options.ticks.backdropPaddingY * 2
+                                                               );
+                                                       }
+
+                                                       ctx.textAlign = 'center';
+                                                       ctx.textBaseline = "middle";
+                                                       ctx.fillStyle = tickFontColor;
+                                                       ctx.fillText(label, this.xCenter, yHeight);
+                                               }
+                                       }
+                               }, this);
+
+                               if (!this.options.lineArc) {
+                                       ctx.lineWidth = this.options.angleLines.lineWidth;
+                                       ctx.strokeStyle = this.options.angleLines.color;
+
+                                       for (var i = this.getValueCount() - 1; i >= 0; i--) {
+                                               if (this.options.angleLines.display) {
+                                                       var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max));
+                                                       ctx.beginPath();
+                                                       ctx.moveTo(this.xCenter, this.yCenter);
+                                                       ctx.lineTo(outerPosition.x, outerPosition.y);
+                                                       ctx.stroke();
+                                                       ctx.closePath();
+                                               }
+                                               // Extra 3px out for some label spacing
+                                               var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
+                                               
+                                               var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor);
+                                               var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+                                               var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+                                               var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+                                               var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
+
+                                               ctx.font = pointLabeFont;
+                                               ctx.fillStyle = pointLabelFontColor;
+
+                                               var labelsCount = this.pointLabels.length,
+                                                       halfLabelsCount = this.pointLabels.length / 2,
+                                                       quarterLabelsCount = halfLabelsCount / 2,
+                                                       upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
+                                                       exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
+                                               if (i === 0) {
+                                                       ctx.textAlign = 'center';
+                                               } else if (i === halfLabelsCount) {
+                                                       ctx.textAlign = 'center';
+                                               } else if (i < halfLabelsCount) {
+                                                       ctx.textAlign = 'left';
+                                               } else {
+                                                       ctx.textAlign = 'right';
+                                               }
+
+                                               // Set the correct text baseline based on outer positioning
+                                               if (exactQuarter) {
+                                                       ctx.textBaseline = 'middle';
+                                               } else if (upperHalf) {
+                                                       ctx.textBaseline = 'bottom';
+                                               } else {
+                                                       ctx.textBaseline = 'top';
+                                               }
+
+                                               ctx.fillText(this.pointLabels[i] ? this.pointLabels[i] : '', pointLabelPosition.x, pointLabelPosition.y);
+                                       }
+                               }
+                       }
+               }
+       });
+       Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale, defaultConfig);
+
+};
+},{}],41:[function(require,module,exports){
+/*global window: false */
+"use strict";
+
+var moment = require('moment');
+moment = typeof(moment) === 'function' ? moment : window.moment;
+
+module.exports = function(Chart) {
+
+       var helpers = Chart.helpers;
+       var time = {
+               units: [{
+                       name: 'millisecond',
+                       steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
+               }, {
+                       name: 'second',
+                       steps: [1, 2, 5, 10, 30]
+               }, {
+                       name: 'minute',
+                       steps: [1, 2, 5, 10, 30]
+               }, {
+                       name: 'hour',
+                       steps: [1, 2, 3, 6, 12]
+               }, {
+                       name: 'day',
+                       steps: [1, 2, 5]
+               }, {
+                       name: 'week',
+                       maxStep: 4
+               }, {
+                       name: 'month',
+                       maxStep: 3
+               }, {
+                       name: 'quarter',
+                       maxStep: 4
+               }, {
+                       name: 'year',
+                       maxStep: false
+               }]
+       };
+
+       var defaultConfig = {
+               position: "bottom",
+
+               time: {
+                       parser: false, // false == a pattern string from http://momentjs.com/docs/#/parsing/string-format/ or a custom callback that converts its argument to a moment
+                       format: false, // DEPRECATED false == date objects, moment object, callback or a pattern string from http://momentjs.com/docs/#/parsing/string-format/
+                       unit: false, // false == automatic or override with week, month, year, etc.
+                       round: false, // none, or override with week, month, year, etc.
+                       displayFormat: false, // DEPRECATED
+
+                       // defaults to unit's corresponding unitFormat below or override using pattern string from http://momentjs.com/docs/#/displaying/format/
+                       displayFormats: {
+                               'millisecond': 'h:mm:ss.SSS a', // 11:20:01.123 AM,
+                               'second': 'h:mm:ss a', // 11:20:01 AM
+                               'minute': 'h:mm:ss a', // 11:20:01 AM
+                               'hour': 'MMM D, hA', // Sept 4, 5PM
+                               'day': 'll', // Sep 4 2015
+                               'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
+                               'month': 'MMM YYYY', // Sept 2015
+                               'quarter': '[Q]Q - YYYY', // Q3
+                               'year': 'YYYY' // 2015
+                       }
+               },
+               ticks: {
+                       autoSkip: false
+               }
+       };
+
+       var TimeScale = Chart.Scale.extend({
+               initialize: function() {
+                       if (!moment) {
+                               throw new Error('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com');
+                       }
+
+                       Chart.Scale.prototype.initialize.call(this);
+               },
+               getLabelMoment: function(datasetIndex, index) {
+                       return this.labelMoments[datasetIndex][index];
+               },
+               determineDataLimits: function() {
+                       this.labelMoments = [];
+
+                       // Only parse these once. If the dataset does not have data as x,y pairs, we will use
+                       // these
+                       var scaleLabelMoments = [];
+                       if (this.chart.data.labels && this.chart.data.labels.length > 0) {
+                               helpers.each(this.chart.data.labels, function(label, index) {
+                                       var labelMoment = this.parseTime(label);
+                                       if (this.options.time.round) {
+                                               labelMoment.startOf(this.options.time.round);
+                                       }
+                                       scaleLabelMoments.push(labelMoment);
+                               }, this);
+
+                               this.firstTick = moment.min.call(this, scaleLabelMoments);
+                               this.lastTick = moment.max.call(this, scaleLabelMoments);
+                       } else {
+                               this.firstTick = null;
+                               this.lastTick = null;
+                       }
+
+                       helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
+                               var momentsForDataset = [];
+
+                               if (typeof dataset.data[0] === 'object') {
+                                       helpers.each(dataset.data, function(value, index) {
+                                               var labelMoment = this.parseTime(this.getRightValue(value));
+                                               if (this.options.time.round) {
+                                                       labelMoment.startOf(this.options.time.round);
+                                               }
+                                               momentsForDataset.push(labelMoment);
+
+                                               // May have gone outside the scale ranges, make sure we keep the first and last ticks updated
+                                               this.firstTick = this.firstTick !== null ? moment.min(this.firstTick, labelMoment) : labelMoment;
+                                               this.lastTick = this.lastTick !== null ? moment.max(this.lastTick, labelMoment) : labelMoment;
+                                       }, this);
+                               } else {
+                                       // We have no labels. Use the ones from the scale
+                                       momentsForDataset = scaleLabelMoments;
+                               }
+
+                               this.labelMoments.push(momentsForDataset);
+                       }, this);
+
+                       // Set these after we've done all the data
+                       if (this.options.time.min) {
+                               this.firstTick = this.parseTime(this.options.time.min);
+                       }
+
+                       if (this.options.time.max) {
+                               this.lastTick = this.parseTime(this.options.time.max);
+                       }
+
+                       // We will modify these, so clone for later
+                       this.firstTick = (this.firstTick || moment()).clone();
+                       this.lastTick = (this.lastTick || moment()).clone();
+               },
+               buildTicks: function(index) {
+
+                       this.ctx.save();
+                       var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+                       var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+                       var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+                       var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+                       this.ctx.font = tickLabelFont;
+
+                       this.ticks = [];
+                       this.unitScale = 1; // How much we scale the unit by, ie 2 means 2x unit per step
+                       this.scaleSizeInUnits = 0; // How large the scale is in the base unit (seconds, minutes, etc)
+
+                       // Set unit override if applicable
+                       if (this.options.time.unit) {
+                               this.tickUnit = this.options.time.unit || 'day';
+                               this.displayFormat = this.options.time.displayFormats[this.tickUnit];
+                               this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
+                               this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, 1);
+                       } else {
+                               // Determine the smallest needed unit of the time
+                               var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom);
+
+                               // Crude approximation of what the label length might be
+                               var tempFirstLabel = this.tickFormatFunction(this.firstTick, 0, []);
+                               var tickLabelWidth = this.ctx.measureText(tempFirstLabel).width;
+                               var cosRotation = Math.cos(helpers.toRadians(this.options.ticks.maxRotation));
+                               var sinRotation = Math.sin(helpers.toRadians(this.options.ticks.maxRotation));
+                               tickLabelWidth = (tickLabelWidth * cosRotation) + (tickFontSize * sinRotation);
+                               var labelCapacity = innerWidth / (tickLabelWidth);
+
+                               // Start as small as possible
+                               this.tickUnit = 'millisecond';
+                               this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
+                               this.displayFormat = this.options.time.displayFormats[this.tickUnit];
+
+                               var unitDefinitionIndex = 0;
+                               var unitDefinition = time.units[unitDefinitionIndex];
+
+                               // While we aren't ideal and we don't have units left
+                               while (unitDefinitionIndex < time.units.length) {
+                                       // Can we scale this unit. If `false` we can scale infinitely
+                                       this.unitScale = 1;
+
+                                       if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.scaleSizeInUnits / labelCapacity) < helpers.max(unitDefinition.steps)) {
+                                               // Use one of the prefedined steps
+                                               for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
+                                                       if (unitDefinition.steps[idx] >= Math.ceil(this.scaleSizeInUnits / labelCapacity)) {
+                                                               this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, unitDefinition.steps[idx]);
+                                                               break;
+                                                       }
+                                               }
+
+                                               break;
+                                       } else if ((unitDefinition.maxStep === false) || (Math.ceil(this.scaleSizeInUnits / labelCapacity) < unitDefinition.maxStep)) {
+                                               // We have a max step. Scale this unit
+                                               this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, Math.ceil(this.scaleSizeInUnits / labelCapacity));
+                                               break;
+                                       } else {
+                                               // Move to the next unit up
+                                               ++unitDefinitionIndex;
+                                               unitDefinition = time.units[unitDefinitionIndex];
+
+                                               this.tickUnit = unitDefinition.name;
+                                               this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
+                                               this.displayFormat = this.options.time.displayFormats[unitDefinition.name];
+                                       }
+                               }
+                       }
+
+                       var roundedStart;
+
+                       // Only round the first tick if we have no hard minimum
+                       if (!this.options.time.min) {
+                               this.firstTick.startOf(this.tickUnit);
+                               roundedStart = this.firstTick;
+                       } else {
+                               roundedStart = this.firstTick.clone().startOf(this.tickUnit);
+                       }
+
+                       // Only round the last tick if we have no hard maximum
+                       if (!this.options.time.max) {
+                               this.lastTick.endOf(this.tickUnit);
+                       }
+
+                       this.smallestLabelSeparation = this.width;
+
+                       helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
+                               for (var i = 1; i < this.labelMoments[datasetIndex].length; i++) {
+                                       this.smallestLabelSeparation = Math.min(this.smallestLabelSeparation, this.labelMoments[datasetIndex][i].diff(this.labelMoments[datasetIndex][i - 1], this.tickUnit, true));
+                               }
+                       }, this);
+
+                       // Tick displayFormat override
+                       if (this.options.time.displayFormat) {
+                               this.displayFormat = this.options.time.displayFormat;
+                       }
+
+                       // first tick. will have been rounded correctly if options.time.min is not specified
+                       this.ticks.push(this.firstTick.clone());
+
+                       // For every unit in between the first and last moment, create a moment and add it to the ticks tick
+                       for (var i = 1; i < this.scaleSizeInUnits; ++i) {
+                               var newTick = roundedStart.clone().add(i, this.tickUnit);
+
+                               // Are we greater than the max time
+                               if (this.options.time.max && newTick.diff(this.lastTick, this.tickUnit, true) >= 0) {
+                                       break;
+                               }
+
+                               if (i % this.unitScale === 0) {
+                                       this.ticks.push(newTick);
+                               }
+                       }
+
+                       // Always show the right tick
+                       if (this.ticks[this.ticks.length - 1].diff(this.lastTick, this.tickUnit) !== 0 || this.scaleSizeInUnits === 0) {
+                       // this is a weird case. If the <max> option is the same as the end option, we can't just diff the times because the tick was created from the roundedStart
+                       // but the last tick was not rounded.
+                               if (this.options.time.max) {
+                                       this.ticks.push(this.lastTick.clone());
+                                       this.scaleSizeInUnits = this.lastTick.diff(this.ticks[0], this.tickUnit, true);
+                               } else {
+                                       this.scaleSizeInUnits = Math.ceil(this.scaleSizeInUnits / this.unitScale) * this.unitScale;
+                                       this.ticks.push(this.firstTick.clone().add(this.scaleSizeInUnits, this.tickUnit));
+                                       this.lastTick = this.ticks[this.ticks.length - 1].clone();
+                               }
+                       }
+                       this.ctx.restore();
+               },
+               // Get tooltip label
+               getLabelForIndex: function(index, datasetIndex) {
+                       var label = this.chart.data.labels && index < this.chart.data.labels.length ? this.chart.data.labels[index] : '';
+
+                       if (typeof this.chart.data.datasets[datasetIndex].data[0] === 'object') {
+                               label = this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+                       }
+
+                       // Format nicely
+                       if (this.options.time.tooltipFormat) {
+                               label = this.parseTime(label).format(this.options.time.tooltipFormat);
+                       }
+
+                       return label;
+               },
+               // Function to format an individual tick mark
+               tickFormatFunction: function tickFormatFunction(tick, index, ticks) {
+                       var formattedTick = tick.format(this.displayFormat);
+
+                       if (this.options.ticks.userCallback) {
+                               return this.options.ticks.userCallback(formattedTick, index, ticks);
+                       } else {
+                               return formattedTick;
+                       }
+               },
+               convertTicksToLabels: function() {
+                       this.ticks = this.ticks.map(this.tickFormatFunction, this);
+               },
+               getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+                       var labelMoment = this.getLabelMoment(datasetIndex, index);
+
+                       if (labelMoment) {
+                               var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
+
+                               var decimal = offset / this.scaleSizeInUnits;
+
+                               if (this.isHorizontal()) {
+                                       var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                                       var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
+                                       var valueOffset = (innerWidth * decimal) + this.paddingLeft;
+
+                                       return this.left + Math.round(valueOffset);
+                               } else {
+                                       var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                                       var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
+                                       var heightOffset = (innerHeight * decimal) + this.paddingTop;
+
+                                       return this.top + Math.round(heightOffset);
+                               }
+                       }
+               },
+               parseTime: function(label) {
+                       if (typeof this.options.time.parser === 'string') {
+                               return moment(label, this.options.time.parser);
+                       }
+                       if (typeof this.options.time.parser === 'function') {
+                               return this.options.time.parser(label);
+                       }
+                       // Date objects
+                       if (typeof label.getMonth === 'function' || typeof label === 'number') {
+                               return moment(label);
+                       }
+                       // Moment support
+                       if (label.isValid && label.isValid()) {
+                               return label;
+                       }
+                       // Custom parsing (return an instance of moment)
+                       if (typeof this.options.time.format !== 'string' && this.options.time.format.call) {
+                               console.warn("options.time.format is deprecated and replaced by options.time.parser. See http://nnnick.github.io/Chart.js/docs-v2/#scales-time-scale");
+                               return this.options.time.format(label);
+                       }
+                       // Moment format parsing
+                       return moment(label, this.options.time.format);
+               }
+       });
+       Chart.scaleService.registerScaleType("time", TimeScale, defaultConfig);
+
+};
+
+},{"moment":1}]},{},[7]);

diff --git a/docs/javascript/bulma.js b/docs/javascript/bulma.js
new file mode 100644 (file)
index 0000000..457a4c1
--- /dev/null
+++ b/docs/javascript/bulma.js
@@ -0,0 +1,58 @@
+jQuery(document).ready(function ($) {
+
+  var $toggle = $('#nav-toggle');
+  var $menu = $('#nav-menu');
+
+  $toggle.click(function() {
+    $(this).toggleClass('is-active');
+    $menu.toggleClass('is-active');
+  });
+
+  $('.modal-button').click(function() {
+    var target = $(this).data('target');
+    $('html').addClass('is-clipped');
+    $(target).addClass('is-active');
+  });
+
+  $('.modal-background, .modal-close').click(function() {
+    $('html').removeClass('is-clipped');
+    $(this).parent().removeClass('is-active');
+  });
+
+  $('.modal-card-head .delete, .modal-card-foot .button').click(function() {
+    $('html').removeClass('is-clipped');
+    $('#modal-ter').removeClass('is-active');
+  });
+
+  var $highlights = $('.highlight');
+
+  $highlights.each(function() {
+    var $el = $(this);
+    var copy = '<button class="copy">Copy</button>';
+    var expand = '<button class="expand">Expand</button>';
+    $el.append(copy);
+
+    if ($el.find('pre code').innerHeight() > 600) {
+      $el.append(expand);
+    }
+  });
+
+  var $highlightButtons = $('.highlight .copy, .highlight .expand');
+
+  $highlightButtons.hover(function() {
+    $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
+  }, function() {
+    $(this).parent().css('box-shadow', 'none');
+  });
+
+  $('.highlight .expand').click(function() {
+    $(this).parent().children('pre').css('max-height', 'none');
+  });
+
+  new Clipboard('.copy', {
+    target: function(trigger) {
+      return trigger.previousSibling;
+    }
+  });
+
+});

diff --git a/docs/javascript/clipboard.min.js b/docs/javascript/clipboard.min.js
new file mode 100644 (file)
index 0000000..35c4e1b
--- /dev/null
+++ b/docs/javascript/clipboard.min.js
@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v1.5.9
+ * https://zenorocha.github.io/clipboard.js
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,o){function r(c,s){if(!n[c]){if(!e[c]){var a="function"==typeof require&&require;if(!s&&a)return a(c,!0);if(i)return i(c,!0);var l=new Error("Cannot find module '"+c+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[c]={exports:{}};e[c][0].call(u.exports,function(t){var n=e[c][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[c].exports}for(var i="function"==typeof require&&require,c=0;c<o.length;c++)r(o[c]);return r}({1:[function(t,e,n){var o=t("matches-selector");e.exports=function(t,e,n){for(var r=n?t:t.parentNode;r&&r!==document;){if(o(r,e))return r;r=r.parentNode}}},{"matches-selector":5}],2:[function(t,e,n){function o(t,e,n,o,i){var c=r.apply(this,arguments);return t.addEventListener(n,c,i),{destroy:function(){t.removeEventListener(n,c,i)}}}function r(t,e,n,o){return function(n){n.delegateTarget=i(n.target,e,!0),n.delegateTarget&&o.call(t,n)}}var i=t("closest");e.exports=o},{closest:1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){var e=Object.prototype.toString.call(t);return"[object Function]"===e}},{}],4:[function(t,e,n){function o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!s.string(e))throw new TypeError("Second argument must be a String");if(!s.fn(n))throw new TypeError("Third argument must be a Function");if(s.node(t))return r(t,e,n);if(s.nodeList(t))return i(t,e,n);if(s.string(t))return c(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function r(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function i(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function c(t,e,n){return a(document.body,t,e,n)}var s=t("./is"),a=t("delegate");e.exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function o(t,e){if(i)return i.call(t,e);for(var n=t.parentNode.querySelectorAll(e),o=0;o<n.length;++o)if(n[o]==t)return!0;return!1}var r=Element.prototype,i=r.matchesSelector||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector;e.exports=o},{}],6:[function(t,e,n){function o(t){var e;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,t.value.length),e=t.value;else{t.hasAttribute("contenteditable")&&t.focus();var n=window.getSelection(),o=document.createRange();o.selectNodeContents(t),n.removeAllRanges(),n.addRange(o),e=n.toString()}return e}e.exports=o},{}],7:[function(t,e,n){function o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function o(){r.off(t,o),e.apply(n,arguments)}var r=this;return o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;for(o;r>o;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,c=o.length;c>i;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},e.exports=o},{}],8:[function(e,n,o){!function(r,i){if("function"==typeof t&&t.amd)t(["module","select"],i);else if("undefined"!=typeof o)i(n,e("select"));else{var c={exports:{}};i(c,r.select),r.clipboardAction=c.exports}}(this,function(t,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=n(e),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),s=function(){function t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return t.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function t(){if(this.text&&this.target)throw new Error('Multiple attributes declared, use either "target" or "text"');if(this.text)this.selectFake();else{if(!this.target)throw new Error('Missing required attributes, use either "target" or "text"');this.selectTarget()}},t.prototype.selectFake=function t(){var e=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandler=document.body.addEventListener("click",function(){return e.removeFake()}),this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="fixed",this.fakeElem.style[n?"right":"left"]="-9999px",this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,r.default)(this.fakeElem),this.copyText()},t.prototype.removeFake=function t(){this.fakeHandler&&(document.body.removeEventListener("click"),this.fakeHandler=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function t(){this.selectedText=(0,r.default)(this.target),this.copyText()},t.prototype.copyText=function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(n){e=!1}this.handleResult(e)},t.prototype.handleResult=function t(e){e?this.emitter.emit("success",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}):this.emitter.emit("error",{action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})},t.prototype.clearSelection=function t(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},t.prototype.destroy=function t(){this.removeFake()},c(t,[{key:"action",set:function t(){var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!==("undefined"==typeof e?"undefined":i(e))||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');this._target=e}},get:function t(){return this._target}}]),t}();t.exports=s})},{select:6}],9:[function(e,n,o){!function(r,i){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],i);else if("undefined"!=typeof o)i(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var c={exports:{}};i(c,r.clipboardAction,r.tinyEmitter,r.goodListener),r.clipboard=c.exports}}(this,function(t,e,n,o){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var l=r(e),u=r(n),f=r(o),d=function(t){function e(n,o){i(this,e);var r=c(this,t.call(this));return r.resolveOptions(o),r.listenClick(n),r}return s(e,t),e.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText},e.prototype.listenClick=function t(e){var n=this;this.listener=(0,f.default)(e,"click",function(t){return n.onClick(t)})},e.prototype.onClick=function t(e){var n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})},e.prototype.defaultAction=function t(e){return a("action",e)},e.prototype.defaultTarget=function t(e){var n=a("target",e);return n?document.querySelector(n):void 0},e.prototype.defaultText=function t(e){return a("text",e)},e.prototype.destroy=function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)},e}(u.default);t.exports=d})},{"./clipboard-action":8,"good-listener":4,"tiny-emitter":7}]},{},[9])(9)});
\ No newline at end of file

diff --git a/docs/javascript/index.js b/docs/javascript/index.js
new file mode 100644 (file)
index 0000000..b9ea77c
--- /dev/null
+++ b/docs/javascript/index.js
@@ -0,0 +1,46 @@
+jQuery(document).ready(function ($) {
+
+  var $grid = $('#grid');
+  var $columns = $grid.children('.column');
+  var showing = 5;
+  var $markup = $('#markup code');
+  var $message = $('#message');
+  var $add = $('#add');
+  var $remove = $('#remove');
+
+  function showColumns() {
+    if (showing === 13) {
+      $message.show();
+    } else {
+      $message.hide();
+    }
+
+    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+
+    $columns.hide();
+    $columns.slice(0, showing).show();
+
+    $markup.html('<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>');
+    $markup.append('\n');
+
+    for(i = 0; i < showing; i++) {
+      $markup.append('  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
+      $markup.append(i + 1);
+      $markup.append('<span class="nt">&lt;/div&gt;</span>');
+      $markup.append('\n');
+    }
+
+    $markup.append('<span class="nt">&lt;/div&gt;</span>');
+  }
+
+  $add.click(function() {
+    showing++;
+    showColumns();
+  });
+
+  $remove.click(function() {
+    showing--;
+    showColumns();
+  });
+
+});

diff --git a/docs/javascript/jquery-2.2.0.min.js b/docs/javascript/jquery-2.2.0.min.js
new file mode 100644 (file)
index 0000000..06ac263
--- /dev/null
+++ b/docs/javascript/jquery-2.2.0.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v2.2.0 | (c) jQuery Foundation | jquery.org/license */
+!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="2.2.0",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!k.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=d.createElement("script"),b.text=a,d.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:h.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(d=e.call(arguments,2),f=function(){return a.apply(b||this,d.concat(e.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=la(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=ma(b);function pa(){}pa.prototype=d.filters=d.pseudos,d.setFilters=new pa,g=fa.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=R.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=S.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(Q," ")}),h=h.slice(c.length));for(g in d.filter)!(e=W[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fa.error(a):z(a,i).slice(0)};function qa(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return h.call(b,a)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&f.parentNode&&(this.length=1,this[0]=f),this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?void 0!==c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?h.call(n(a),this[0]):h.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||n.uniqueSort(e),D.test(a)&&e.reverse()),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){n.each(b,function(b,c){n.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==n.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return n.each(arguments,function(a,b){var c;while((c=n.inArray(b,f,c))>-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.removeEventListener("DOMContentLoaded",J),a.removeEventListener("load",J),n.ready()}n.ready.promise=function(b){return I||(I=n.Deferred(),"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(n.ready):(d.addEventListener("DOMContentLoaded",J),a.addEventListener("load",J))),I.promise(b)},n.ready.promise();var K=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)K(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},L=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function M(){this.expando=n.expando+M.uid++}M.uid=1,M.prototype={register:function(a,b){var c=b||{};return a.nodeType?a[this.expando]=c:Object.defineProperty(a,this.expando,{value:c,writable:!0,configurable:!0}),a[this.expando]},cache:function(a){if(!L(a))return{};var b=a[this.expando];return b||(b={},L(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[b]=c;else for(d in b)e[d]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=a[this.expando];if(void 0!==f){if(void 0===b)this.register(a);else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in f?d=[b,e]:(d=e,d=d in f?[d]:d.match(G)||[])),c=d.length;while(c--)delete f[d[c]]}(void 0===b||n.isEmptyObject(f))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!n.isEmptyObject(b)}};var N=new M,O=new M,P=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Q=/[A-Z]/g;function R(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Q,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:P.test(c)?n.parseJSON(c):c}catch(e){}O.set(a,b,c);
+}else c=void 0;return c}n.extend({hasData:function(a){return O.hasData(a)||N.hasData(a)},data:function(a,b,c){return O.access(a,b,c)},removeData:function(a,b){O.remove(a,b)},_data:function(a,b,c){return N.access(a,b,c)},_removeData:function(a,b){N.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=O.get(f),1===f.nodeType&&!N.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),R(f,d,e[d])));N.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){O.set(this,a)}):K(this,function(b){var c,d;if(f&&void 0===b){if(c=O.get(f,a)||O.get(f,a.replace(Q,"-$&").toLowerCase()),void 0!==c)return c;if(d=n.camelCase(a),c=O.get(f,d),void 0!==c)return c;if(c=R(f,d,void 0),void 0!==c)return c}else d=n.camelCase(a),this.each(function(){var c=O.get(this,d);O.set(this,d,b),a.indexOf("-")>-1&&void 0!==c&&O.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){O.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=N.get(a,b),c&&(!d||n.isArray(c)?d=N.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return N.get(a,c)||N.access(a,c,{empty:n.Callbacks("once memory").add(function(){N.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=N.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var S=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=new RegExp("^(?:([+-])=|)("+S+")([a-z%]*)$","i"),U=["Top","Right","Bottom","Left"],V=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)};function W(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return n.css(a,b,"")},i=h(),j=c&&c[3]||(n.cssNumber[b]?"":"px"),k=(n.cssNumber[b]||"px"!==j&&+i)&&T.exec(n.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,n.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var X=/^(?:checkbox|radio)$/i,Y=/<([\w:-]+)/,Z=/^$|\/(?:java|ecma)script/i,$={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};$.optgroup=$.option,$.tbody=$.tfoot=$.colgroup=$.caption=$.thead,$.th=$.td;function _(a,b){var c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function aa(a,b){for(var c=0,d=a.length;d>c;c++)N.set(a[c],"globalEval",!b||N.get(b[c],"globalEval"))}var ba=/<|&#?\w+;/;function ca(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],o=0,p=a.length;p>o;o++)if(f=a[o],f||0===f)if("object"===n.type(f))n.merge(m,f.nodeType?[f]:f);else if(ba.test(f)){g=g||l.appendChild(b.createElement("div")),h=(Y.exec(f)||["",""])[1].toLowerCase(),i=$[h]||$._default,g.innerHTML=i[1]+n.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;n.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",o=0;while(f=m[o++])if(d&&n.inArray(f,d)>-1)e&&e.push(f);else if(j=n.contains(f.ownerDocument,f),g=_(l.appendChild(f),"script"),j&&aa(g),c){k=0;while(f=g[k++])Z.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),l.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",l.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var da=/^key/,ea=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,fa=/^([^.]*)(?:\.(.+)|)/;function ga(){return!0}function ha(){return!1}function ia(){try{return d.activeElement}catch(a){}}function ja(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ja(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=ha;else if(!e)return this;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return"undefined"!=typeof n&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(G)||[""],j=b.length;while(j--)h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.hasData(a)&&N.get(a);if(r&&(i=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&N.remove(a,"handle events")}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(N.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.rnamespace||a.rnamespace.test(g.namespace))&&(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!==this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget detail eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,e,f,g=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||d,e=c.documentElement,f=c.body,a.pageX=b.clientX+(e&&e.scrollLeft||f&&f.scrollLeft||0)-(e&&e.clientLeft||f&&f.clientLeft||0),a.pageY=b.clientY+(e&&e.scrollTop||f&&f.scrollTop||0)-(e&&e.clientTop||f&&f.clientTop||0)),a.which||void 0===g||(a.which=1&g?1:2&g?3:4&g?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,e,f=a.type,g=a,h=this.fixHooks[f];h||(this.fixHooks[f]=h=ea.test(f)?this.mouseHooks:da.test(f)?this.keyHooks:{}),e=h.props?this.props.concat(h.props):this.props,a=new n.Event(g),b=e.length;while(b--)c=e[b],a[c]=g[c];return a.target||(a.target=d),3===a.target.nodeType&&(a.target=a.target.parentNode),h.filter?h.filter(a,g):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==ia()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===ia()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?ga:ha):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={constructor:n.Event,isDefaultPrevented:ha,isPropagationStopped:ha,isImmediatePropagationStopped:ha,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ga,a&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ga,a&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ga,a&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),n.fn.extend({on:function(a,b,c,d){return ja(this,a,b,c,d)},one:function(a,b,c,d){return ja(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=ha),this.each(function(){n.event.remove(this,a,c,b)})}});var ka=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,la=/<script|<style|<link/i,ma=/checked\s*(?:[^=]|=\s*.checked.)/i,na=/^true\/(.*)/,oa=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function pa(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a:a}function qa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function ra(a){var b=na.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function sa(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(N.hasData(a)&&(f=N.access(a),g=N.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}O.hasData(a)&&(h=O.access(a),i=n.extend({},h),O.set(b,i))}}function ta(a,b){var c=b.nodeName.toLowerCase();"input"===c&&X.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}function ua(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&ma.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),ua(f,b,c,d)});if(o&&(e=ca(b,a[0].ownerDocument,!1,a,d),g=e.firstChild,1===e.childNodes.length&&(e=g),g||d)){for(h=n.map(_(e,"script"),qa),i=h.length;o>m;m++)j=e,m!==p&&(j=n.clone(j,!0,!0),i&&n.merge(h,_(j,"script"))),c.call(a[m],j,m);if(i)for(k=h[h.length-1].ownerDocument,n.map(h,ra),m=0;i>m;m++)j=h[m],Z.test(j.type||"")&&!N.access(j,"globalEval")&&n.contains(k,j)&&(j.src?n._evalUrl&&n._evalUrl(j.src):n.globalEval(j.textContent.replace(oa,"")))}return a}function va(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(_(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&aa(_(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(ka,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=_(h),f=_(a),d=0,e=f.length;e>d;d++)ta(f[d],g[d]);if(b)if(c)for(f=f||_(a),g=g||_(h),d=0,e=f.length;e>d;d++)sa(f[d],g[d]);else sa(a,h);return g=_(h,"script"),g.length>0&&aa(g,!i&&_(a,"script")),h},cleanData:function(a){for(var b,c,d,e=n.event.special,f=0;void 0!==(c=a[f]);f++)if(L(c)){if(b=c[N.expando]){if(b.events)for(d in b.events)e[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);c[N.expando]=void 0}c[O.expando]&&(c[O.expando]=void 0)}}}),n.fn.extend({domManip:ua,detach:function(a){return va(this,a,!0)},remove:function(a){return va(this,a)},text:function(a){return K(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.appendChild(a)}})},prepend:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(_(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return K(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!la.test(a)&&!$[(Y.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(_(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return ua(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(_(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),f=e.length-1,h=0;f>=h;h++)c=h===f?this:this.clone(!0),n(e[h])[b](c),g.apply(d,c.get());return this.pushStack(d)}});var wa,xa={HTML:"block",BODY:"block"};function ya(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function za(a){var b=d,c=xa[a];return c||(c=ya(a,b),"none"!==c&&c||(wa=(wa||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=wa[0].contentDocument,b.write(),b.close(),c=ya(a,b),wa.detach()),xa[a]=c),c}var Aa=/^margin/,Ba=new RegExp("^("+S+")(?!px)[a-z%]+$","i"),Ca=function(b){var c=b.ownerDocument.defaultView;return c.opener||(c=a),c.getComputedStyle(b)},Da=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e},Ea=d.documentElement;!function(){var b,c,e,f,g=d.createElement("div"),h=d.createElement("div");if(h.style){h.style.backgroundClip="content-box",h.cloneNode(!0).style.backgroundClip="",l.clearCloneStyle="content-box"===h.style.backgroundClip,g.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",g.appendChild(h);function i(){h.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",h.innerHTML="",Ea.appendChild(g);var d=a.getComputedStyle(h);b="1%"!==d.top,f="2px"===d.marginLeft,c="4px"===d.width,h.style.marginRight="50%",e="4px"===d.marginRight,Ea.removeChild(g)}n.extend(l,{pixelPosition:function(){return i(),b},boxSizingReliable:function(){return null==c&&i(),c},pixelMarginRight:function(){return null==c&&i(),e},reliableMarginLeft:function(){return null==c&&i(),f},reliableMarginRight:function(){var b,c=h.appendChild(d.createElement("div"));return c.style.cssText=h.style.cssText="-webkit-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",h.style.width="1px",Ea.appendChild(g),b=!parseFloat(a.getComputedStyle(c).marginRight),Ea.removeChild(g),h.removeChild(c),b}})}}();function Fa(a,b,c){var d,e,f,g,h=a.style;return c=c||Ca(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),!l.pixelMarginRight()&&Ba.test(g)&&Aa.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Ga(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Ha=/^(none|table(?!-c[ea]).+)/,Ia={position:"absolute",visibility:"hidden",display:"block"},Ja={letterSpacing:"0",fontWeight:"400"},Ka=["Webkit","O","Moz","ms"],La=d.createElement("div").style;function Ma(a){if(a in La)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ka.length;while(c--)if(a=Ka[c]+b,a in La)return a}function Na(a,b,c){var d=T.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Oa(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+U[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+U[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+U[f]+"Width",!0,e))):(g+=n.css(a,"padding"+U[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+U[f]+"Width",!0,e)));return g}function Pa(b,c,e){var f=!0,g="width"===c?b.offsetWidth:b.offsetHeight,h=Ca(b),i="border-box"===n.css(b,"boxSizing",!1,h);if(d.msFullscreenElement&&a.top!==a&&b.getClientRects().length&&(g=Math.round(100*b.getBoundingClientRect()[c])),0>=g||null==g){if(g=Fa(b,c,h),(0>g||null==g)&&(g=b.style[c]),Ba.test(g))return g;f=i&&(l.boxSizingReliable()||g===b.style[c]),g=parseFloat(g)||0}return g+Oa(b,c,e||(i?"border":"content"),f,h)+"px"}function Qa(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=N.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&V(d)&&(f[g]=N.access(d,"olddisplay",za(d.nodeName)))):(e=V(d),"none"===c&&e||N.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Fa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=T.exec(c))&&e[1]&&(c=W(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(n.cssNumber[h]?"":"px")),l.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Fa(a,b,d)),"normal"===e&&b in Ja&&(e=Ja[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?Ha.test(n.css(a,"display"))&&0===a.offsetWidth?Da(a,Ia,function(){return Pa(a,b,d)}):Pa(a,b,d):void 0},set:function(a,c,d){var e,f=d&&Ca(a),g=d&&Oa(a,b,d,"border-box"===n.css(a,"boxSizing",!1,f),f);return g&&(e=T.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=n.css(a,b)),Na(a,c,g)}}}),n.cssHooks.marginLeft=Ga(l.reliableMarginLeft,function(a,b){return b?(parseFloat(Fa(a,"marginLeft"))||a.getBoundingClientRect().left-Da(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px":void 0}),n.cssHooks.marginRight=Ga(l.reliableMarginRight,function(a,b){return b?Da(a,{display:"inline-block"},Fa,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+U[d]+b]=f[d]||f[d-2]||f[0];return e}},Aa.test(a)||(n.cssHooks[a+b].set=Na)}),n.fn.extend({css:function(a,b){return K(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=Ca(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Qa(this,!0)},hide:function(){return Qa(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){V(this)?n(this).show():n(this).hide()})}});function Ra(a,b,c,d,e){return new Ra.prototype.init(a,b,c,d,e)}n.Tween=Ra,Ra.prototype={constructor:Ra,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||n.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Ra.propHooks[this.prop];return a&&a.get?a.get(this):Ra.propHooks._default.get(this)},run:function(a){var b,c=Ra.propHooks[this.prop];return this.options.duration?this.pos=b=n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ra.propHooks._default.set(this),this}},Ra.prototype.init.prototype=Ra.prototype,Ra.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[n.cssProps[a.prop]]&&!n.cssHooks[a.prop]?a.elem[a.prop]=a.now:n.style(a.elem,a.prop,a.now+a.unit)}}},Ra.propHooks.scrollTop=Ra.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},n.fx=Ra.prototype.init,n.fx.step={};var Sa,Ta,Ua=/^(?:toggle|show|hide)$/,Va=/queueHooks$/;function Wa(){return a.setTimeout(function(){Sa=void 0}),Sa=n.now()}function Xa(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=U[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ya(a,b,c){for(var d,e=(_a.tweeners[b]||[]).concat(_a.tweeners["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Za(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&V(a),q=N.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?N.get(a,"olddisplay")||za(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Ua.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?za(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=N.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;N.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ya(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function $a(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function _a(a,b,c){var d,e,f=0,g=_a.prefilters.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Sa||Wa(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{},easing:n.easing._default},c),originalProperties:b,originalOptions:c,startTime:Sa||Wa(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for($a(k,j.opts.specialEasing);g>f;f++)if(d=_a.prefilters[f].call(j,a,k,j.opts))return n.isFunction(d.stop)&&(n._queueHooks(j.elem,j.opts.queue).stop=n.proxy(d.stop,d)),d;return n.map(k,Ya,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(_a,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return W(c.elem,a,T.exec(b),c),c}]},tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.match(G);for(var c,d=0,e=a.length;e>d;d++)c=a[d],_a.tweeners[c]=_a.tweeners[c]||[],_a.tweeners[c].unshift(b)},prefilters:[Za],prefilter:function(a,b){b?_a.prefilters.unshift(a):_a.prefilters.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(V).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=_a(this,n.extend({},a),f);(e||N.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=N.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Va.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=N.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Xa(b,!0),a,d,e)}}),n.each({slideDown:Xa("show"),slideUp:Xa("hide"),slideToggle:Xa("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(Sa=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),Sa=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Ta||(Ta=a.setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){a.clearInterval(Ta),Ta=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(b,c){return b=n.fx?n.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",l.checkOn=""!==a.value,l.optSelected=c.selected,b.disabled=!0,l.optDisabled=!c.disabled,a=d.createElement("input"),a.value="t",a.type="radio",l.radioValue="t"===a.value}();var ab,bb=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return K(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),e=n.attrHooks[b]||(n.expr.match.bool.test(b)?ab:void 0)),void 0!==c?null===c?void n.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=n.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!l.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(G);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)}}),ab={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=bb[b]||n.find.attr;bb[b]=function(a,b,d){var e,f;return d||(f=bb[b],bb[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,bb[b]=f),e}});var cb=/^(?:input|select|textarea|button)$/i,db=/^(?:a|area)$/i;n.fn.extend({prop:function(a,b){return K(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&n.isXMLDoc(a)||(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b];
+},propHooks:{tabIndex:{get:function(a){var b=n.find.attr(a,"tabindex");return b?parseInt(b,10):cb.test(a.nodeName)||db.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),l.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var eb=/[\t\r\n\f]/g;function fb(a){return a.getAttribute&&a.getAttribute("class")||""}n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,fb(this)))});if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,fb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):n.isFunction(a)?this.each(function(c){n(this).toggleClass(a.call(this,c,fb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=n(this),f=a.match(G)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(void 0===a||"boolean"===c)&&(b=fb(this),b&&N.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":N.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+fb(c)+" ").replace(eb," ").indexOf(b)>-1)return!0;return!1}});var gb=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(gb,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){return n.trim(a.value)}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],(c.selected||i===e)&&(l.optDisabled?!c.disabled:null===c.getAttribute("disabled"))&&(!c.parentNode.disabled||!n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(n.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>-1:void 0}},l.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var hb=/^(?:focusinfocus|focusoutblur)$/;n.extend(n.event,{trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!hb.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),l=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},f||!o.trigger||o.trigger.apply(e,c)!==!1)){if(!f&&!o.noBubble&&!n.isWindow(e)){for(j=o.delegateType||q,hb.test(j+q)||(h=h.parentNode);h;h=h.parentNode)p.push(h),i=h;i===(e.ownerDocument||d)&&p.push(i.defaultView||i.parentWindow||a)}g=0;while((h=p[g++])&&!b.isPropagationStopped())b.type=g>1?j:o.bindType||q,m=(N.get(h,"events")||{})[b.type]&&N.get(h,"handle"),m&&m.apply(h,c),m=l&&h[l],m&&m.apply&&L(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=q,f||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!L(e)||l&&n.isFunction(e[q])&&!n.isWindow(e)&&(i=e[l],i&&(e[l]=null),n.event.triggered=q,e[q](),n.event.triggered=void 0,i&&(e[l]=i)),b.result}},simulate:function(a,b,c){var d=n.extend(new n.Event,c,{type:a,isSimulated:!0});n.event.trigger(d,null,b),d.isDefaultPrevented()&&c.preventDefault()}}),n.fn.extend({trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),l.focusin="onfocusin"in a,l.focusin||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a))};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=N.access(d,b);e||d.addEventListener(a,c,!0),N.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=N.access(d,b)-1;e?N.access(d,b,e):(d.removeEventListener(a,c,!0),N.remove(d,b))}}});var ib=a.location,jb=n.now(),kb=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return(!c||c.getElementsByTagName("parsererror").length)&&n.error("Invalid XML: "+b),c};var lb=/#.*$/,mb=/([?&])_=[^&]*/,nb=/^(.*?):[ \t]*([^\r\n]*)$/gm,ob=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,pb=/^(?:GET|HEAD)$/,qb=/^\/\//,rb={},sb={},tb="*/".concat("*"),ub=d.createElement("a");ub.href=ib.href;function vb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(G)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function wb(a,b,c,d){var e={},f=a===sb;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function xb(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function yb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function zb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:ib.href,type:"GET",isLocal:ob.test(ib.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":tb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?xb(xb(a,n.ajaxSettings),b):xb(n.ajaxSettings,a)},ajaxPrefilter:vb(rb),ajaxTransport:vb(sb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m=n.ajaxSetup({},c),o=m.context||m,p=m.context&&(o.nodeType||o.jquery)?n(o):n.event,q=n.Deferred(),r=n.Callbacks("once memory"),s=m.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,getResponseHeader:function(a){var b;if(2===v){if(!h){h={};while(b=nb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===v?g:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return v||(a=u[c]=u[c]||a,t[a]=b),this},overrideMimeType:function(a){return v||(m.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>v)for(b in a)s[b]=[s[b],a[b]];else x.always(a[x.status]);return this},abort:function(a){var b=a||w;return e&&e.abort(b),z(0,b),this}};if(q.promise(x).complete=r.add,x.success=x.done,x.error=x.fail,m.url=((b||m.url||ib.href)+"").replace(lb,"").replace(qb,ib.protocol+"//"),m.type=c.method||c.type||m.method||m.type,m.dataTypes=n.trim(m.dataType||"*").toLowerCase().match(G)||[""],null==m.crossDomain){j=d.createElement("a");try{j.href=m.url,j.href=j.href,m.crossDomain=ub.protocol+"//"+ub.host!=j.protocol+"//"+j.host}catch(y){m.crossDomain=!0}}if(m.data&&m.processData&&"string"!=typeof m.data&&(m.data=n.param(m.data,m.traditional)),wb(rb,m,c,x),2===v)return x;k=n.event&&m.global,k&&0===n.active++&&n.event.trigger("ajaxStart"),m.type=m.type.toUpperCase(),m.hasContent=!pb.test(m.type),f=m.url,m.hasContent||(m.data&&(f=m.url+=(kb.test(f)?"&":"?")+m.data,delete m.data),m.cache===!1&&(m.url=mb.test(f)?f.replace(mb,"$1_="+jb++):f+(kb.test(f)?"&":"?")+"_="+jb++)),m.ifModified&&(n.lastModified[f]&&x.setRequestHeader("If-Modified-Since",n.lastModified[f]),n.etag[f]&&x.setRequestHeader("If-None-Match",n.etag[f])),(m.data&&m.hasContent&&m.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",m.contentType),x.setRequestHeader("Accept",m.dataTypes[0]&&m.accepts[m.dataTypes[0]]?m.accepts[m.dataTypes[0]]+("*"!==m.dataTypes[0]?", "+tb+"; q=0.01":""):m.accepts["*"]);for(l in m.headers)x.setRequestHeader(l,m.headers[l]);if(m.beforeSend&&(m.beforeSend.call(o,x,m)===!1||2===v))return x.abort();w="abort";for(l in{success:1,error:1,complete:1})x[l](m[l]);if(e=wb(sb,m,c,x)){if(x.readyState=1,k&&p.trigger("ajaxSend",[x,m]),2===v)return x;m.async&&m.timeout>0&&(i=a.setTimeout(function(){x.abort("timeout")},m.timeout));try{v=1,e.send(t,z)}catch(y){if(!(2>v))throw y;z(-1,y)}}else z(-1,"No Transport");function z(b,c,d,h){var j,l,t,u,w,y=c;2!==v&&(v=2,i&&a.clearTimeout(i),e=void 0,g=h||"",x.readyState=b>0?4:0,j=b>=200&&300>b||304===b,d&&(u=yb(m,x,d)),u=zb(m,u,x,j),j?(m.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(n.lastModified[f]=w),w=x.getResponseHeader("etag"),w&&(n.etag[f]=w)),204===b||"HEAD"===m.type?y="nocontent":304===b?y="notmodified":(y=u.state,l=u.data,t=u.error,j=!t)):(t=y,(b||!y)&&(y="error",0>b&&(b=0))),x.status=b,x.statusText=(c||y)+"",j?q.resolveWith(o,[l,y,x]):q.rejectWith(o,[x,y,t]),x.statusCode(s),s=void 0,k&&p.trigger(j?"ajaxSuccess":"ajaxError",[x,m,j?l:t]),r.fireWith(o,[x,y]),k&&(p.trigger("ajaxComplete",[x,m]),--n.active||n.event.trigger("ajaxStop")))}return x},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax(n.extend({url:a,type:b,dataType:e,data:c,success:d},n.isPlainObject(a)&&a))}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return n.isFunction(a)?this.each(function(b){n(this).wrapInner(a.call(this,b))}):this.each(function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return!n.expr.filters.visible(a)},n.expr.filters.visible=function(a){return a.offsetWidth>0||a.offsetHeight>0||a.getClientRects().length>0};var Ab=/%20/g,Bb=/\[\]$/,Cb=/\r?\n/g,Db=/^(?:submit|button|image|reset|file)$/i,Eb=/^(?:input|select|textarea|keygen)/i;function Fb(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||Bb.test(a)?d(a,e):Fb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Fb(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Fb(c,a[c],b,e);return d.join("&").replace(Ab,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Eb.test(this.nodeName)&&!Db.test(a)&&(this.checked||!X.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(Cb,"\r\n")}}):{name:b.name,value:c.replace(Cb,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Gb={0:200,1223:204},Hb=n.ajaxSettings.xhr();l.cors=!!Hb&&"withCredentials"in Hb,l.ajax=Hb=!!Hb,n.ajaxTransport(function(b){var c,d;return l.cors||Hb&&!b.crossDomain?{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Gb[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=n("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Ib=[],Jb=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Ib.pop()||n.expando+"_"+jb++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Jb.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Jb.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Jb,"$1"+e):b.jsonp!==!1&&(b.url+=(kb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?n(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Ib.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),l.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||(l.createHTMLDocument?d.implementation.createHTMLDocument(""):d);var e=x.exec(a),f=!c&&[];return e?[b.createElement(e[1])]:(e=ca([a],b,f),f&&f.length&&n(f).remove(),n.merge([],e.childNodes))};var Kb=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Kb)return Kb.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(g,f||[a.responseText,b,a])})}),this},n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};function Lb(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,n.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(e=d.getBoundingClientRect(),c=Lb(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0)-a.scrollTop(),d.left+=n.css(a[0],"borderLeftWidth",!0)-a.scrollLeft()),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Ea})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;n.fn[a]=function(d){return K(this,function(a,d,e){var f=Lb(a);return void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=Ga(l.pixelPosition,function(a,c){return c?(c=Fa(a,b),Ba.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return K(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)},size:function(){return this.length}}),n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Mb=a.jQuery,Nb=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Nb),b&&a.jQuery===n&&(a.jQuery=Mb),n},b||(a.jQuery=a.$=n),n});

diff --git a/docs/templates.html b/docs/templates.html
new file mode 100644 (file)
index 0000000..432c2ad
--- /dev/null
+++ b/docs/templates.html
@@ -0,0 +1,51 @@
+---
+layout: default
+route: templates
+---
+
+<section class="hero is-primary">
+  <div class="hero-head">
+    <div class="container">
+      {% include header.html %}
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Templates
+      </h1>
+      <h2 class="subtitle">
+        <strong>Free</strong> HTML templates that make use of Bulma <strong>out of the box</strong>
+      </h2>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container">
+    <div class="columns is-multiline">
+      <div class="column is-one-third">
+        <a class="box" href="{{ site.baseurl }}/templates/everything.html">
+          <h3 class="title is-4">Everything</h3>
+          <h4 class="subtitle is-5">All Bulma elements on one page</h4>
+          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+        </a>
+      </div>
+      <div class="column is-one-third">
+        <a class="box" href="{{ site.baseurl }}/templates/business.html">
+          <h3 class="title is-4">Business</h3>
+          <h4 class="subtitle is-5">Classic business homepage</h4>
+          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+        </a>
+      </div>
+      <div class="column is-one-third">
+        <a class="box" href="{{ site.baseurl }}/templates/welcome.html">
+          <h3 class="title is-4">Welcome</h3>
+          <h4 class="subtitle is-5">Simple one-page introduction</h4>
+          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/thank-you.html b/docs/thank-you.html
new file mode 100644 (file)
index 0000000..5d04196
--- /dev/null
+++ b/docs/thank-you.html
@@ -0,0 +1,17 @@
+---
+layout: default
+route: index
+---
+
+<section class="hero is-fullheight is-success has-text-centered">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Thank you!
+      </h1>
+      <h2 class="subtitle">
+        Go back to the <a href="{{ site.baseurl }}">homepage</a>
+      </h2>
+    </div>
+  </div>
+</section>

diff --git a/docs/tiles.html b/docs/tiles.html
new file mode 100644 (file)
index 0000000..15c0803
--- /dev/null
+++ b/docs/tiles.html
@@ -0,0 +1,788 @@
+---
+layout: default
+route: tiles
+---
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tiles</h1>
+    <h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
+
+    <div class="content">
+      <p>To build intricate 2-dimensional, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
+    </div>
+
+{% highlight html %}
+<div class="tile">
+  <!-- The magical tile element! -->
+</div>
+{% endhighlight %}
+
+    <div class="content">
+      <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
+      <ul>
+        <li>
+          <strong>3 contextual</strong> modifiers
+          <ul>
+            <li><code>is-ancestor</code></li>
+            <li><code>is-parent</code></li>
+            <li><code>is-child</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>1 directional</strong> modifier
+          <ul>
+            <li><code>is-vertical</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>12 horizontal size</strong> modifiers
+          <ul>
+            <li>from <code>is-1</code></li>
+            <li>to <code>is-12</code></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <h3 class="title">How it works: Nesting</h3>
+    <div class="content">
+      <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <!-- All other tile elemnts -->
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>
+          You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
+          <br>
+          For example, <code>is-4</code> will take up 2/3 of the horizontal space:
+        </p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4">
+    <!-- 1/3 -->
+  </div>
+  <div class="tile">
+    <!-- This tile will take the rest: 2/3 -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical">
+    <div class="tile">
+      <!-- Top tile -->
+    </div>
+    <div class="tile">
+      <!-- Bottom tile -->
+    </div>
+  </div>
+  <div class="tile">
+    <!-- This tile will take up the whole vertical space -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="content">
+          <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
+          <ul>
+            <li>add <em>any</em> class you want, like <code>box</code></li>
+            <li>add the <code>is-child</code> modifier on the tile</li>
+            <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
+          </ul>
+        </div>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-4 is-vertical is-parent">
+        <div class="tile is-child box">
+          <p class="title">One</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+        <div class="tile is-child box">
+          <p class="title">Two</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <div class="tile is-child box">
+          <p class="title">Three</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+      <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+      <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Nesting requirements</h3>
+
+    <article class="message is-danger">
+      <div class="message-header">
+        3 levels deep at least...
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+└───tile is-parent
+    |
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <article class="message is-success">
+      <div class="message-header">
+        ...but more levels if you want!
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You can however nest tiles more deeply than that, and mix it up!</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+├───tile is-vertical is-8
+|   |
+|   ├───tile
+|   |   |
+|   |   ├───tile is-parent is-vertical
+|   |   |   ├───tile is-child
+|   |   |   └───tile is-child
+|   |   |
+|   |   └───tile is-parent
+|   |       └───tile is-child
+|   |
+|   └───tile is-parent
+|       └───tile is-child
+|
+└───tile is-parent
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <!-- Put any content you want -->
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <!-- Put any content you want -->
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">3 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Hello World</p>
+          <p class="subtitle">What is up?</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Foo</p>
+          <p class="subtitle">Bar</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Third column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="http://placehold.it/640x480">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Side column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-8">
+        <article class="tile is-child box">
+          <p class="title">Main column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Hello World</p>
+      <p class="subtitle">What is up?</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Foo</p>
+      <p class="subtitle">Bar</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Third column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Top box</p>
+        </article>
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Bottom box</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Middle box</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="http://placehold.it/640x480">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <p class="title">Wide column</p>
+        <p class="subtitle">Aligned with the right column</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Tall column</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Side column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-8">
+    <article class="tile is-child box">
+      <p class="title">Main column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">4 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">One</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Two</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Three</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Four</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-9">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Five</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-8 is-vertical">
+            <div class="tile">
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Six</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Seven</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+            </div>
+            <div class="tile is-parent">
+              <article class="tile is-child box">
+                <p class="title">Eight</p>
+                <p class="subtitle">Subtitle</p>
+              </article>
+            </div>
+          </div>
+        </div>
+        <div class="tile">
+          <div class="tile is-8 is-parent">
+            <article class="tile is-child box">
+              <p class="title">Nine</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Ten</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Eleven</p>
+            <p class="subtitle">Subtitle</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Twelve</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-6">
+        <article class="tile is-child box">
+          <p class="title">Thirteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Fourteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">One</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Two</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Three</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Four</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-9">
+    <div class="tile">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Five</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-8 is-vertical">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Six</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Seven</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Eight</p>
+            <p class="subtitle">Subtitle</p>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-8 is-parent">
+        <article class="tile is-child box">
+          <p class="title">Nine</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Ten</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Eleven</p>
+        <p class="subtitle">Subtitle</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Twelve</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-6">
+    <article class="tile is-child box">
+      <p class="title">Thirteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Fourteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/package.json b/package.json
index 3e3061a7860dd55170cbe1b2b8402641d2c75f00..de90e659d94380ec30ce8010e9e33f2c71b68eaa 100644 (file)
--- a/package.json
+++ b/package.json
@@ -27,11 +27,20 @@
     "postcss-cli": "^2.5.1"
   },
   "scripts": {
-    "autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
-    "build": "npm run clean && npm run build-sass && npm run autoprefix",
+    "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix",
+    "build-autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
+    "build-clean": "rm -rf css",
     "build-sass": "node-sass --output-style expanded --source-map true --output css/ bulma.sass --outFile css/bulma.css",
-    "clean": "rm -rf css",
+    "docs": "npm run docs-sass && npm run docs-autoprefix",
+    "docs-autoprefix": "postcss --use autoprefixer --output docs/css/bulma-docs.css docs/css/bulma-docs.css",
+    "docs-sass": "node-sass --output-style expanded --output docs/css/ docs/bulma-docs.sass --outFile docs/css/bulma-docs.css",
     "pre-push": "npm run build && git add css && git commit --amend --no-edit",
-    "start": "npm run build-sass -- --watch"
-  }
+    "start": "npm run build-sass -- --watch",
+    "start-docs": "npm run docs-sass -- --watch"
+  },
+  "files": [
+    "css",
+    "sass",
+    "bulma.sass"
+  ]
 }

diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
index 68c964c032790fd6d34e4c2cec535f769abb728c..b4108db846c78d641daa70336d3bda2a2c901ee4 100644 (file)
--- a/sass/base/helpers.sass
+++ b/sass/base/helpers.sass
@@ -100,5 +100,8 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-marginless
   margin: 0 !important
 
+.is-paddingless
+  padding: 0 !important
+
 .is-unselectable
   @extend .unselectable

diff --git a/sass/components/media.sass b/sass/components/media.sass
index cf36578f5f5eb3b91a5b52e999e6816ee2961bef..5d3cd00264dded4daab294e6dcbd4688476c84b2 100644 (file)
--- a/sass/components/media.sass
+++ b/sass/components/media.sass
@@ -23,6 +23,7 @@
 
 .media-content
   flex-grow: 1
+  flex-shrink: 1
   text-align: left
 
 .media

diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index a54a7529186c7cc5986585a7454d19e75758a31f..a032977362e64bf0d07f2cbf074cddc4e87a3251 100644 (file)
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -25,8 +25,6 @@
 
 .modal-card
   @extend .modal-content
-  background-color: $white
-  border-radius: $radius-large
   display: flex
   flex-direction: column
   max-height: calc(100vh - 40px)
@@ -44,21 +42,28 @@
 
 .modal-card-head
   border-bottom: 1px solid $border
+  border-top-left-radius: $radius-large
+  border-top-right-radius: $radius-large
 
 .modal-card-title
   color: $text-strong
   flex-grow: 1
+  flex-shrink: 0
   font-size: $size-4
   line-height: 1
 
 .modal-card-foot
+  border-bottom-left-radius: $radius-large
+  border-bottom-right-radius: $radius-large
   border-top: 1px solid $border
   .button
     &:not(:last-child)
       margin-right: 10px
 
 .modal-card-body
+  background-color: $white
   flex-grow: 1
+  flex-shrink: 1
   overflow: auto
   padding: 20px
 

diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 1523d81448339760b8b8ffa4de18f93714ce480d..c8b2803456182b65da653c821a015c1efb38257f 100644 (file)
--- a/sass/components/nav.sass
+++ b/sass/components/nav.sass
@@ -13,6 +13,7 @@
   padding: 10px
   a
     flex-grow: 1
+    flex-shrink: 0
   img
     max-height: 24px
   .button + .button
@@ -72,6 +73,7 @@ a.nav-item
   display: flex
   flex-basis: 0
   flex-grow: 1
+  flex-shrink: 0
   justify-content: flex-start
   overflow: hidden
   overflow-x: auto
@@ -91,6 +93,7 @@ a.nav-item
     display: flex
     flex-basis: 0
     flex-grow: 1
+    flex-shrink: 0
     justify-content: flex-end
 
 // Main container

diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass
index a595c484fa2936b489571226226a57fc0780e33b..63cddc11661916f52e6461c33c3261e9e8213cb8 100644 (file)
--- a/sass/components/pagination.sass
+++ b/sass/components/pagination.sass
@@ -17,6 +17,7 @@
     align-items: center
     display: flex
     flex-grow: 1
+    flex-shrink: 0
     justify-content: center
   // Responsiveness
   +mobile
@@ -27,6 +28,7 @@
         margin-left: 10px
     li
       flex-grow: 1
+      flex-shrink: 0
     ul
       margin-top: 10px
   +tablet

diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index 5d17df37ec54de83c670fbaf9be79d8d37361272..b676dee6232a2031f29737af627ee00a02498377 100644 (file)
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -31,6 +31,7 @@
     border-bottom: 1px solid $border
     display: flex
     flex-grow: 1
+    flex-shrink: 0
     justify-content: flex-start
     &.is-left
       padding-right: 10px
@@ -73,6 +74,7 @@
   &.is-fullwidth
     li
       flex-grow: 1
+      flex-shrink: 0
   &.is-toggle
     a
       border: 1px solid $border

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 6ebbb1566ff860357ed7d40674fab9d98f0e0f9a..b4518b2b2fe49cf75cc69006889afb24a11ae292 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -127,7 +127,9 @@
   +mobile
     margin-bottom: 5px
   +tablet
+    flex-basis: 0
     flex-grow: 1
+    flex-shrink: 0
     margin-right: 20px
     padding-top: 7px
     text-align: right
@@ -162,6 +164,7 @@
           border-radius: 0 $radius $radius 0
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 0
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -171,6 +174,7 @@
       .input,
       .select
         flex-grow: 1
+        flex-shrink: 0
   &.has-icon
     & > .fa
       +fa(14px, 24px)
@@ -234,6 +238,7 @@
         margin-right: 10px
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 0
     &.is-grouped-centered
       justify-content: center
     &.is-grouped-right
@@ -243,7 +248,9 @@
       display: flex
       & > .control
         display: flex
+        flex-basis: 0
         flex-grow: 5
+        flex-shrink: 1
   &.is-loading
     &:after
       @extend .loader

diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 1ab13ed07d12e7200445c5f4fb4977cf836793d6..e92b4def8643b2edd4a176e7a0b0689ffe16c286 100644 (file)
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -39,9 +39,10 @@
 
 .hero-body
   flex-grow: 1
+  flex-shrink: 0
   padding: 40px 20px
   // Responsiveness
-  +desktop
+  +from(1240px)
     padding-left: 0
     padding-right: 0
 
@@ -144,3 +145,4 @@
       display: flex
       & > .container
         flex-grow: 1
+        flex-shrink: 0