From 7a8701c929ee0429ee680be3969ee4d58fdd7390 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Mon, 6 Mar 2017 17:35:08 +0100
Subject: [PATCH] create folder and files in rep styl

---
 styl/config/_breakpoints.styl   |   9 +
 styl/config/_mixins.styl        |  33 +++
 styl/config/_variables.styl     |  50 ++++
 styl/grids/_grillade.styl       | 293 ++++++++++++++++++++++
 styl/knacss.styl                |  64 +++++
 styl/library/_base.styl         | 169 +++++++++++++
 styl/library/_forms.styl        |  99 ++++++++
 styl/library/_misc.styl         |  46 ++++
 styl/library/_print.styl        |  83 +++++++
 styl/library/_styling.styl      |  97 ++++++++
 styl/library/_tables.styl       |  25 ++
 styl/objects/_autogrid.styl     |  19 ++
 styl/objects/_media.styl        |  18 ++
 styl/utilities/_helpers.styl    | 278 +++++++++++++++++++++
 styl/utilities/_layout.styl     |  98 ++++++++
 styl/utilities/_responsive.styl | 230 ++++++++++++++++++
 styl/vendor/_normalize.styl     | 419 ++++++++++++++++++++++++++++++++
 17 files changed, 2030 insertions(+)
 create mode 100644 styl/config/_breakpoints.styl
 create mode 100644 styl/config/_mixins.styl
 create mode 100644 styl/config/_variables.styl
 create mode 100644 styl/grids/_grillade.styl
 create mode 100644 styl/knacss.styl
 create mode 100644 styl/library/_base.styl
 create mode 100644 styl/library/_forms.styl
 create mode 100644 styl/library/_misc.styl
 create mode 100644 styl/library/_print.styl
 create mode 100644 styl/library/_styling.styl
 create mode 100644 styl/library/_tables.styl
 create mode 100644 styl/objects/_autogrid.styl
 create mode 100644 styl/objects/_media.styl
 create mode 100644 styl/utilities/_helpers.styl
 create mode 100644 styl/utilities/_layout.styl
 create mode 100644 styl/utilities/_responsive.styl
 create mode 100644 styl/vendor/_normalize.styl

diff --git a/styl/config/_breakpoints.styl b/styl/config/_breakpoints.styl
new file mode 100644
index 0000000..e1e9221
--- /dev/null
+++ b/styl/config/_breakpoints.styl
@@ -0,0 +1,9 @@
+// Responsive breakpoints variables
+
+// Warning : you should use your own values, regardless of the devices
+// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
+tiny         = 543px // or 'em' if you prefer, of course
+small        = 767px
+medium       = 991px
+large        = 1199px
+extra-large  = 1439px
diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl
new file mode 100644
index 0000000..16dd059
--- /dev/null
+++ b/styl/config/_mixins.styl
@@ -0,0 +1,33 @@
+// Additionnal "utility" breakpoints aliases
+// ex. @include respond-to("medium-up") {...}
+breakpoint(bp)
+  if bp == 'tiny'
+    return '(max-width: {tiny})'
+  else if bp == 'small'
+    return '(max-width: {small})'
+  else if bp == 'medium'
+    return '(max-width: {medium})'
+  else if bp == 'large'
+    return '(max-width: {large})'
+  else if bp == 'extra-large'
+    return '(max-width: {extra-large})'
+  else if bp == 'tiny-up'
+    return '(min-width: {tiny + 1})'
+  else if bp == 'small-up'
+    return '(min-width: {small + 1})'
+  else if bp == 'medium-up'
+    return '(min-width: {medium + 1})'
+  else if bp == 'large-up'
+    return '(min-width: {large + 1})'
+  else if bp == 'extra-large-up'
+    return '(min-width: {extra-large + 1})'
+  else if bp == 'retina'
+    return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
+
+
+/*
+respond-to(value)
+  string = breakpoint(value)
+  @media screen and {string}
+    {block}
+*/
diff --git a/styl/config/_variables.styl b/styl/config/_variables.styl
new file mode 100644
index 0000000..7ddde94
--- /dev/null
+++ b/styl/config/_variables.styl
@@ -0,0 +1,50 @@
+// Config file and project variables
+
+// font sizes
+base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
+line-height    = 1.5 // equiv line-height 1.5
+h1-size        = 3.2rem // equiv "32px"
+h2-size        = 2.8rem // equiv "28px"
+h3-size        = 2.4rem // equiv "24px"
+h4-size        = 2.0rem // equiv "20px"
+h5-size        = 1.8rem // equiv "18px"
+h6-size        = 1.6rem // equiv "16px"
+
+// font stacks
+font-stack-common    = sans-serif // common font
+font-stack-headings  = sans-serif // headings font
+font-stack-monospace = consolas, courier, monospace // monospace font
+
+// color scheme
+color1    = #000
+color2    = #fff
+color3    = #333
+color4    = #000
+color5    = #6FA939
+
+// colors used in project
+base-color       = color1
+link-color       = color3
+base-background  = color2
+// If you don't want any effect on focused/hovered links,
+// comment variable below or make it equal to either link-color or false or null
+link-hover-color = color4
+brand-primary    = color5
+
+
+// spacings (choose unit you prefer)
+tiny-value             = .5rem // tiny value for margins / paddings
+tiny-plus-value        = .7rem // tiny+ value for margins / paddings
+small-value            = 1rem // small value for margins / paddings
+small-plus-value       = 1.5rem // small+ value for margins / paddings
+medium-value           = 2rem // medium value for margins / paddings
+medium-plus-value      = 3rem // medium+ value for margins / paddings
+large-value            = 4rem // large value for margins / paddings
+large-plus-value       = 6rem // large value for margins / paddings
+extra-large-value      = 8rem // extra large value for margins / paddings
+extra-large-plus-value = 12rem // extra large value for margins / paddings
+ultra-large-value      = 16rem // ultra large value for margins / paddings
+ultra-large-plus-value = 20rem // ultra large value for margins / paddings
+
+//kna-namespace (default : null)
+kna-namespace = null;
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
new file mode 100644
index 0000000..5c7f34d
--- /dev/null
+++ b/styl/grids/_grillade.styl
@@ -0,0 +1,293 @@
+/* ---------------------------------- */
+/* ==Grillade : Simple Grid System    */
+/* ---------------------------------- */
+/* Doc : http://grillade.knacss.com */
+// gutter values for grid layouts. Unit can be: %, px, em, rem
+grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
+// IEfixing, see
+// https://github.com/alsacreations/KNACSS/issues/133;
+iefix = 0.01px
+
+tiny         = 543px
+small        = 767px
+medium       = 991px
+large        = 1199px
+extra-large  = 1439px
+
+displayFlex()
+  display: -webkit-box
+  display: -ms-flexbox
+  display: flex
+
+@media (min-width: tiny + 1)
+  [class*=" grid-"]
+  [class^="grid-"]
+    displayFlex()
+    -webkit-box-orient: horizontal
+    -webkit-box-direction: normal
+    flex-direction: row
+    flex-wrap: wrap
+    & > *
+      box-sizing: border-box
+      min-width: 0
+      min-height: 0
+
+// Multi-line grid constructor
+// example : .grid-perso { @include grid(12, 3rem); }
+grid(grid-number = 1, own-gutter = 0)
+  & > *
+    width: calc(100% / grid-number - iefix)
+
+  for key, size in grid-gutters
+    &.has-gutter{key}
+      margin-right: -(size / 2)
+      margin-left: -(size / 2)
+      & > *
+        width: calc(100% / grid-number - size - iefix)
+        margin-right size / 2
+        margin-left size / 2
+
+  if own-gutter != 0
+    margin-right: own-gutter / 2
+    margin-left: own-gutter / 2
+
+// Mono-line grid constructor (.grid)
+@media (min-width: tiny + 1)
+  .grid
+  .grid--reverse
+    displayFlex()
+    & > *
+      flex: 1 1 0%
+      box-sizing: border-box
+      min-width: 0
+      min-height: 0
+
+    for key, size in grid-gutters
+      &.has-gutter{key} > * + *
+        margin-left: size - iefix
+
+// Constructing grids : will be compiled in CSS
+@media (min-width: tiny + 1)
+  for i in 2..12
+    grid-selector = 'grid-%s' % i
+    [class*={grid-selector}] > *
+      grid(i, 0)
+
+.push {
+  margin-left: auto !important;
+}
+
+.pull {
+  margin-right: auto !important;
+}
+
+.item-first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.item-last {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+/*[class*="grid-"][class*="--reverse"] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}*/
+
+/*@media (min-width: 544px) {
+  .full {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 1 - 0.01px);
+  }
+  .has-gutter .full {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  .has-gutter-l .full {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .full {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  .one-half {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 2 - 0.01px);
+  }
+  .has-gutter .one-half {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-half {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-half {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  .one-third {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 3 - 0.01px);
+  }
+  .has-gutter .one-third {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-third {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-third {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  .one-quarter {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 4 - 0.01px);
+  }
+  .has-gutter .one-quarter {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-quarter {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-quarter {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+  .one-fifth {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 5 - 0.01px);
+  }
+  .has-gutter .one-fifth {
+    width: calc(100% / 5 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-fifth {
+    width: calc(100% / 5 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-fifth {
+    width: calc(100% / 5 - 4rem - 0.01px);
+  }
+  .one-sixth {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 6 - 0.01px);
+  }
+  .has-gutter .one-sixth {
+    width: calc(100% / 6 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-sixth {
+    width: calc(100% / 6 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-sixth {
+    width: calc(100% / 6 - 4rem - 0.01px);
+  }
+  .two-thirds {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 3 * 2 - 0.01px);
+  }
+  .has-gutter .two-thirds {
+    width: calc(100% / 3 * 2 - 1rem - 0.01px);
+  }
+  .has-gutter-l .two-thirds {
+    width: calc(100% / 3 * 2 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .two-thirds {
+    width: calc(100% / 3 * 2 - 4rem - 0.01px);
+  }
+  .three-quarters {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 4 * 3 - 0.01px);
+  }
+  .has-gutter .three-quarters {
+    width: calc(100% / 4 * 3 - 1rem - 0.01px);
+  }
+  .has-gutter-l .three-quarters {
+    width: calc(100% / 4 * 3 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .three-quarters {
+    width: calc(100% / 4 * 3 - 4rem - 0.01px);
+  }
+  .five-sixths {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 6 * 5 - 0.01px);
+  }
+  .has-gutter .five-sixths {
+    width: calc(100% / 6 * 5 - 1rem - 0.01px);
+  }
+  .has-gutter-l .five-sixths {
+    width: calc(100% / 6 * 5 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .five-sixths {
+    width: calc(100% / 6 * 5 - 4rem - 0.01px);
+  }
+}*/
+
+/* Responsive Small Breakpoint */
+/*
+@media (min-width: 544px) and (max-width: 991px) {
+  [class*="-small-1"] > * {
+    width: calc(100% / 1 - 0.01px);
+  }
+  [class*="-small-1"].has-gutter > * {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  [class*="-small-1"].has-gutter-l > * {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  [class*="-small-1"].has-gutter-xl > * {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  [class*="-small-2"] > * {
+    width: calc(100% / 2 - 0.01px);
+  }
+  [class*="-small-2"].has-gutter > * {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  [class*="-small-2"].has-gutter-l > * {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  [class*="-small-2"].has-gutter-xl > * {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  [class*="-small-3"] > * {
+    width: calc(100% / 3 - 0.01px);
+  }
+  [class*="-small-3"].has-gutter > * {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  [class*="-small-3"].has-gutter-l > * {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  [class*="-small-3"].has-gutter-xl > * {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  [class*="-small-4"] > * {
+    width: calc(100% / 4 - 0.01px);
+  }
+  [class*="-small-4"].has-gutter > * {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  [class*="-small-4"].has-gutter-l > * {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  [class*="-small-4"].has-gutter-xl > * {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+}
+*/
diff --git a/styl/knacss.styl b/styl/knacss.styl
new file mode 100644
index 0000000..0374b38
--- /dev/null
+++ b/styl/knacss.styl
@@ -0,0 +1,64 @@
+/*!
+* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+/* ----------------------------- */
+/* ==Table Of Content            */
+/* ----------------------------- */
+
+/* 1- Normalize (basic reset) */
+/* 2- Base (basic styles) */
+/* 3- Print (print quick reset) */
+/* 4- Stylings (minor stylings) */
+/* 5- Misc (skip links, hyphens) */
+/* 6- Tables (data tables consistency) */
+/* 7- Forms (forms consistency) */
+/* 8- Media object */
+/* 9- Autogrid object */
+/* 10- Global Layout (alignment, modules, positionning) */
+/* 11- Helpers (width and spacers helpers) */
+/* (12- WordPress reset (disabled by default)) */
+/* 13- Responsive (Responsive Web Design helpers) */
+/* 14- Grid Layout (grillade) */
+
+/* ---------------------------------- */
+/* ==Normalize (basic reset)          */
+/* ---------------------------------- */
+
+@import 'vendor/_normalize.styl' // normalize (basic reset)
+
+// WARNING : you should comment the following @import (variables)
+// and move variables file from knacss folder to your own project folder!
+@import 'config/_variables.styl'
+@import 'config/_breakpoints.styl'
+@import 'config/_mixins.styl'
+
+// Libraries
+@import 'library/_base.styl' // basic styles
+@import 'library/_print.styl' // print quick reset
+@import 'library/_styling.styl' // minor stylings
+@import 'library/_misc.styl'; // skip links, hyphens
+@import 'library/_tables.styl'; // data tables consistency
+@import 'library/_forms.styl'; // forms consistency
+
+// Objects
+@import 'objects/_media.styl'; // media object
+@import 'objects/_autogrid.styl'; // media autogrid
+
+// Utilities
+@import 'utilities/_layout.styl'; // alignment, modules, positionning
+@import 'utilities/_helpers.styl'; // width and spacers helpers
+@import 'utilities/_responsive.styl'; // Responsive Web Design helpers
+
+// Grids
+@import 'grids/_grillade.styl'; // grids
+
+
+/* ----------------------------- */
+/* ==Own stylesheet              */
+/* ----------------------------- */
+
+/* Here should go your own CSS styles */
+// You can also link them with a Sass @import
+// @import "my-styles";
diff --git a/styl/library/_base.styl b/styl/library/_base.styl
new file mode 100644
index 0000000..646a1a0
--- /dev/null
+++ b/styl/library/_base.styl
@@ -0,0 +1,169 @@
+/* ----------------------------- */
+/* ==Base (basic styles)         */
+/* ----------------------------- */
+
+/* switching to border-box model for all elements */
+html
+  box-sizing border-box
+
+*
+  box-sizing inherit
+
+html
+  /* set base font-size to equiv "10px", which is adapted to rem unit */
+  font-size 62.5%
+  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
+  /* thanks to @guardian, @victorbritopro and @eQRoeil */
+  font-size calc(1em * 0.625)
+
+body
+  font-size base-font-size
+  background-color base-background
+  color base-color
+  font-family font-stack-common
+  line-height line-height
+
+a
+  color link-color
+
+  // No styling on focus/hover if there's no effect. Avoids to then have to
+  // override it countless times. See Issue #232
+  if link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
+    &:focus,
+    &:hover,
+    &:active
+      color link-hover-color
+
+ul
+ol
+  padding-left 2em
+
+img
+  vertical-align middle
+
+blockquote
+figure
+  margin-left 0
+  margin-right 0
+
+/* font-sizing for content */
+p
+.{kna-namespace}p-like
+ul
+ol
+dl
+blockquote
+pre
+td
+th
+label
+textarea
+caption
+details
+figure
+  margin-top 0.75em
+  margin-bottom 0
+  line-height line-height
+
+h1 .{kna-namespace}h1-like
+  font-size h1-size
+  if font-stack-headings is defined && font-stack-headings != font-stack-common
+    font-family font-stack-headings
+
+h2 .{kna-namespace}h2-like
+  font-size h2-size
+  if font-stack-headings is defined && font-stack-headings != font-stack-common
+    font-family font-stack-headings
+
+h3 .{kna-namespace}h3-like
+  font-size h3-size
+
+h4 .{kna-namespace}h4-like
+  font-size h4-size
+
+h5 .{kna-namespace}h5-like
+  font-size h5-size
+
+h6 .{kna-namespace}h6-like
+  font-size h6-size
+
+/* alternate font-sizing */
+.{kna-namespace}smaller
+  font-size 0.6em
+
+.{kna-namespace}small
+  font-size 0.8em
+
+.{kna-namespace}big
+  font-size 1.2em
+
+.{kna-namespace}bigger
+  font-size: 1.5em
+
+.{kna-namespace}biggest
+  font-size 2em
+
+code
+pre
+samp
+kbd
+  /* IE fix */
+  white-space pre-line
+  white-space pre-wrap
+  font-family font-stack-monospace
+  line-height normal
+
+em
+.{kna-namespace}italic
+address
+cite
+i
+var
+  font-style italic
+
+/* avoid top margins on first content element */
+p
+.{kna-namespace}p-like
+ul
+ol
+dl
+blockquote
+pre
+h1
+.{kna-namespace}h1-like
+h2
+.{kna-namespace}h2-like
+h3
+.{kna-namespace}h3-like
+h4
+.{kna-namespace}h4-like
+h5
+.{kna-namespace}h5-like
+h6
+.{kna-namespace}h6-like
+  &:first-child
+    margin-top 0
+
+/* avoid margins on nested elements */
+li p
+li .{kna-namespace}p-like
+li ul
+li ol
+  margin-top 0
+  margin-bottom 0
+
+/* max values */
+img
+table
+td
+blockquote
+code
+pre
+textarea
+input
+video
+svg
+  max-width 100%
+
+img
+  height auto
diff --git a/styl/library/_forms.styl b/styl/library/_forms.styl
new file mode 100644
index 0000000..0830e75
--- /dev/null
+++ b/styl/library/_forms.styl
@@ -0,0 +1,99 @@
+/* ----------------------------- */
+/* ==Forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+
+/* buttons */
+.{kna-namespace}btn
+  display inline-block
+
+/* forms items */
+form
+fieldset
+  border none
+
+input
+button
+select
+label
+.{kna-namespace}btn
+  font-family inherit
+  font-size inherit
+
+button
+input
+optgroup
+select
+textarea
+  color base-color
+
+label
+  vertical-align middle
+  cursor pointer
+
+legend
+  border 0
+  white-space normal
+
+textarea
+  min-height 5em
+  vertical-align top
+  font-family inherit
+  font-size inherit
+  resize vertical
+
+select
+  -webkit-appearance menulist-button
+
+/* if select styling bugs on WebKit */
+/* select { -webkit-appearance: none; } */
+
+/* 'x' appears on right of search input when text is entered. This removes it */
+input[type="search"]
+  &::-webkit-search-decoration
+  &::-webkit-search-cancel-button
+  &::-webkit-search-results-button
+  &::-webkit-search-results-decoration
+    display: none
+
+::-webkit-input-placeholder
+  color #777
+
+input:-moz-placeholder
+textarea:-moz-placeholder
+  color #777
+
+.{kna-namespace}btn
+input[type="button"]
+button
+  &:focus
+    -webkit-tap-highlight-color transparent
+    -webkit-user-select none
+    -moz-user-select none
+    -ms-user-select none
+    user-select none
+
+/* unstyled forms */
+
+button
+input[type="button"]
+input[type="submit"]
+input[type="reset"]
+  &.{kna-namespace}unstyled
+    padding 0
+    border none
+    line-height 1
+    text-align left
+    background none
+    border-radius 0
+    box-shadow none
+    -webkit-appearance none
+    -moz-appearance none
+    appearance none
+
+    &:focus
+      box-shadow none
+      outline none
diff --git a/styl/library/_misc.styl b/styl/library/_misc.styl
new file mode 100644
index 0000000..e69a384
--- /dev/null
+++ b/styl/library/_misc.styl
@@ -0,0 +1,46 @@
+/* ----------------------------- */
+/* ==Misc (skip links, hyphens)  */
+/* ----------------------------- */
+
+/* styling skip links */
+.{kna-namespace}skip-links
+  position absolute
+
+  & a
+    position absolute
+    overflow hidden
+    clip rect(1px, 1px, 1px, 1px)
+    padding 0.5em
+    background black
+    color white
+    text-decoration none
+
+    &:focus
+      position static
+      overflow visible
+      clip auto
+
+// hyphens on tiny screens
+@media (max-width: tiny)
+  /* you shall not pass */
+  div
+  textarea
+  table
+  td
+  th
+  code
+  pre
+  samp
+    word-wrap break-word
+    hyphens auto
+
+// use .no-wrapping to disallow hyphens on tiny screens
+@media (max-width: tiny)
+  .no-wrapping
+    word-wrap normal
+    hyphens manual
+
+// SVG width IE fix
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  img[src$=".svg"]
+    width 100%
diff --git a/styl/library/_print.styl b/styl/library/_print.styl
new file mode 100644
index 0000000..723c4c0
--- /dev/null
+++ b/styl/library/_print.styl
@@ -0,0 +1,83 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print
+  *
+    background transparent !important
+    box-shadow none !important
+    text-shadow none !important
+
+  body
+    width auto
+    margin auto
+    font-family serif
+    font-size 12pt
+
+  p
+  .{kna-namespace}p-like
+  h1
+  .{kna-namespace}h1-like
+  h2
+  .{kna-namespace}h2-like
+  h3
+  .{kna-namespace}h3-like
+  h4
+  .{kna-namespace}h4-like
+  h5
+  .{kna-namespace}h5-like
+  h6
+  .{kna-namespace}h6-like
+  blockquote
+  ul
+  ol
+    color #000
+    margin auto
+
+  .{kna-namespace}print
+    display block
+
+  .{kna-namespace}no-print
+    display none
+
+  /* no orphans, no widows */
+  p
+  .{kna-namespace}p-like
+  blockquote
+    orphans 3
+    widows 3
+
+  /* no breaks inside these elements */
+  blockquote
+  ul
+  ol
+    page-break-inside avoid
+
+  /* page break before main headers
+  h1
+  .h1-like
+    page-break-before always
+  */
+
+  /* no breaks after these elements */
+  h1
+  .{kna-namespace}h1-like
+  h2
+  .{kna-namespace}h2-like
+  h3
+  .{kna-namespace}h3-like
+  caption
+    page-break-after avoid
+
+  a
+    color #000
+
+  /* displaying URLs
+  a[href]::after
+    content " (" attr(href) ")"
+  */
+
+  a[href^="javascript:"]
+  a[href^="#"]
+    &::after
+      content: ""
diff --git a/styl/library/_styling.styl b/styl/library/_styling.styl
new file mode 100644
index 0000000..216c02f
--- /dev/null
+++ b/styl/library/_styling.styl
@@ -0,0 +1,97 @@
+/* ----------------------------- */
+/* ==Stylings (minor stylings)   */
+/* ----------------------------- */
+
+/* styling elements */
+code
+kbd
+mark
+  border-radius 2px
+
+kbd
+  padding 0 2px
+  border 1px solid #999
+
+code
+  padding 2px 4px
+  background rgba(0, 0, 0, 0.04)
+  color #b11
+
+pre code
+  padding 0
+  background none
+  color inherit
+  border-radius 0
+
+mark
+  padding 2px 4px
+
+sup
+sub
+  vertical-align 0
+
+sup
+  bottom 1ex
+
+sub
+  top 0.5ex
+
+blockquote
+  position relative
+  padding-left 3em
+  min-height 2em
+
+blockquote::before
+  content "\201C"
+  position absolute
+  left 0
+  top 0
+  font-family georgia, serif
+  font-size 5em
+  height .4em
+  line-height .9
+  color rgba(0, 0, 0, .3)
+
+blockquote > footer
+  margin-top .75em
+  font-size 0.9em
+  color rgba(0, 0, 0, .7)
+
+  &::before
+    content "\2014 \0020"
+
+q
+  font-style normal
+
+q
+.{kna-namespace}q
+  quotes: "“\00a0" "\00a0”"
+
+  &:lang(fr)
+    quotes "«\00a0" "\00a0»"
+
+hr
+  display block
+  clear both
+  height 1px
+  margin 1em 0 2em
+  padding 0
+  border 0
+  color #ccc
+  background-color #ccc
+
+/* tables */
+table
+.{kna-namespace}table
+  border 1px solid #ccc
+
+caption
+  padding small-value
+  color #555
+  font-style italic
+
+td
+th
+  padding 0.3em 0.8em
+  border 1px #aaa dotted
+  text-align left
diff --git a/styl/library/_tables.styl b/styl/library/_tables.styl
new file mode 100644
index 0000000..6556957
--- /dev/null
+++ b/styl/library/_tables.styl
@@ -0,0 +1,25 @@
+/* ----------------------------- */
+/* ==Tables                      */
+/* ----------------------------- */
+
+table
+.{kna-namespace}table
+  width 100%
+  max-width 100%
+  table-layout fixed
+  border-collapse collapse
+  vertical-align top
+  margin-bottom medium-value
+
+.{kna-namespace}table
+  display table
+
+#recaptcha_table
+.{kna-namespace}table-auto
+  table-layout auto
+
+td
+th
+  vertical-align top
+  min-width medium-value
+  cursor default
diff --git a/styl/objects/_autogrid.styl b/styl/objects/_autogrid.styl
new file mode 100644
index 0000000..8383f8a
--- /dev/null
+++ b/styl/objects/_autogrid.styl
@@ -0,0 +1,19 @@
+/* Autogrid object */
+/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
+@media (min-width: (tiny + 1))
+  [class^="autogrid"]
+  [class*=" autogrid"]
+    display flex
+
+  [class^="autogrid"] > *
+  [class*=" autogrid"] > *
+    flex 1
+    min-width 0 /* avoid min-width:auto */
+
+/* Autogrid variants */
+@media (min-width: (tiny + 1))
+  .has-gutter > *:not(:first-child)
+    margin-left 1rem
+
+  [class*="--reverse"]
+    flex-direction: row-reverse
diff --git a/styl/objects/_media.styl b/styl/objects/_media.styl
new file mode 100644
index 0000000..04ca114
--- /dev/null
+++ b/styl/objects/_media.styl
@@ -0,0 +1,18 @@
+/* Media object */
+/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
+@media (min-width: (tiny + 1))
+  .o-media
+    display flex
+    align-items flex-start
+
+  .o-media-content
+    flex 1
+    min-width 0 /* avoid min-width:auto */
+
+/* Media variants */
+@media (min-width: (tiny + 1))
+  .o-media--reverse
+    flex-direction row-reverse
+
+  .o-media-figure--center
+    align-self center
diff --git a/styl/utilities/_helpers.styl b/styl/utilities/_helpers.styl
new file mode 100644
index 0000000..175074a
--- /dev/null
+++ b/styl/utilities/_helpers.styl
@@ -0,0 +1,278 @@
+/* ---------------------------------- */
+/* ==Helpers                          */
+/* ---------------------------------- */
+
+/* State Helpers */
+/* ------------- */
+
+/* invisible for all */
+.is-hidden
+[hidden]
+  display none
+
+/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+.visually-hidden
+  position absolute !important
+  border 0 !important
+  height 1px !important
+  width 1px !important
+  padding 0 !important
+  overflow hidden !important
+  clip rect(0, 0, 0, 0) !important
+
+.is-disabled
+[disabled]
+  opacity 0.5
+  pointer-events none
+  cursor not-allowed
+  filter grayscale(1)
+
+
+ul
+  &.is-unstyled
+  &.unstyled
+    list-style none
+    padding-left 0
+
+/* Width Helpers */
+/* ------------- */
+
+/* blocks widths (percentage and pixels) */
+.{kna-namespace}w10
+  width 10%
+
+.{kna-namespace}w20
+  width 20%
+
+.{kna-namespace}w25
+  width 25%
+
+.{kna-namespace}w30
+  width 30%
+
+.{kna-namespace}w33
+  width 33.3333%
+
+.{kna-namespace}w40
+  width 40%
+
+.{kna-namespace}w50
+  width 50%
+
+.{kna-namespace}w60
+  width 60%
+
+.{kna-namespace}w66
+  width 66.6666%
+
+.{kna-namespace}w70
+  width 70%
+
+.{kna-namespace}w75
+  width 75%
+
+.{kna-namespace}w80
+  width 80%
+
+.{kna-namespace}w90
+  width 90%
+
+.{kna-namespace}w100
+  width 100%
+
+.{kna-namespace}w50p
+  width 50px
+
+.{kna-namespace}w100p
+  width 100px
+
+.{kna-namespace}w150p
+  width 150px
+
+.{kna-namespace}w200p
+  width 200px
+
+.{kna-namespace}w300p
+  width 300px
+
+@media (min-width: 401px)
+  .{kna-namespace}w400p
+    width 400px
+
+  .{kna-namespace}w500p
+    width 500px
+
+  .{kna-namespace}w600p
+    width 600px
+
+@media (min-width: 701px)
+
+  .{kna-namespace}w700p
+    width 700px
+
+  .{kna-namespace}w800p
+    width 800px
+
+@media (min-width: 961px)
+  .{kna-namespace}w960p
+    width 960px
+
+  .{kna-namespace}mw960p
+    max-width 960px
+
+  .{kna-namespace}w1140p
+    width 1140px
+
+  .{kna-namespace}mw1140p
+    max-width 1140px
+
+.{kna-namespace}wauto
+  width auto
+
+/* Spacing Helpers */
+/* --------------- */
+
+.{kna-namespace}man
+.{kna-namespace}ma0
+  margin 0
+
+.{kna-namespace}pan
+.{kna-namespace}pa0
+  padding 0
+
+.{kna-namespace}mas
+  margin small-value
+
+.{kna-namespace}mam
+  margin medium-value
+
+.{kna-namespace}mal
+  margin large-value
+
+.{kna-namespace}pas
+  padding small-value
+
+.{kna-namespace}pam
+  padding medium-value
+
+.{kna-namespace}pal
+  padding large-value
+
+.{kna-namespace}mtn
+.{kna-namespace}mt0
+  margin-top 0
+
+.{kna-namespace}mts
+  margin-top small-value
+
+.{kna-namespace}mtm
+  margin-top medium-value
+
+.{kna-namespace}mtl
+  margin-top large-value
+
+.{kna-namespace}mrn
+.{kna-namespace}mr0
+  margin-right 0
+
+.{kna-namespace}mrs
+  margin-right small-value
+
+.{kna-namespace}mrm
+  margin-right medium-value
+
+.{kna-namespace}mrl
+  margin-right large-value
+
+.{kna-namespace}mbn
+.{kna-namespace}mb0
+  margin-bottom 0
+
+.{kna-namespace}mbs
+  margin-bottom small-value
+
+.{kna-namespace}mbm
+  margin-bottom medium-value
+
+.{kna-namespace}mbl
+  margin-bottom large-value
+
+.{kna-namespace}mln
+.{kna-namespace}ml0
+  margin-left 0
+
+.{kna-namespace}mls
+  margin-left small-value
+
+.{kna-namespace}mlm
+  margin-left medium-value
+
+.{kna-namespace}mll
+  margin-left large-value
+
+.{kna-namespace}mauto
+  margin auto
+
+.{kna-namespace}mtauto
+  margin-top auto
+
+.{kna-namespace}mrauto
+  margin-right auto
+
+.{kna-namespace}mbauto
+  margin-bottom auto
+
+.{kna-namespace}mlauto
+  margin-left: auto
+
+.{kna-namespace}ptn
+.{kna-namespace}pt0
+  padding-top 0
+
+.{kna-namespace}pts
+  padding-top small-value
+
+.{kna-namespace}ptm
+  padding-top medium-value
+
+.{kna-namespace}ptl
+  padding-top large-value
+
+.{kna-namespace}prn
+.{kna-namespace}pr0
+  padding-right 0
+
+.{kna-namespace}prs
+  padding-right small-value
+
+.{kna-namespace}prm
+  padding-right medium-value
+
+.{kna-namespace}prl
+  padding-right large-value
+
+.{kna-namespace}pbn
+.{kna-namespace}pb0
+  padding-bottom 0
+
+.{kna-namespace}pbs
+  padding-bottom small-value
+
+.{kna-namespace}pbm
+  padding-bottom medium-value
+
+.{kna-namespace}pbl
+  padding-bottom large-value
+
+.{kna-namespace}pln
+.{kna-namespace}pl0
+  padding-left 0
+
+.{kna-namespace}pls
+  padding-left small-value
+
+.{kna-namespace}plm
+  padding-left medium-value
+
+.{kna-namespace}pll
+  padding-left large-value
diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl
new file mode 100644
index 0000000..4bae1a2
--- /dev/null
+++ b/styl/utilities/_layout.styl
@@ -0,0 +1,98 @@
+/* ----------------------------- */
+/* ==Global Layout               */
+/* ----------------------------- */
+
+/* module, gains superpower "BFC" Block Formating Context */
+.mod
+.bfc
+  overflow hidden
+
+/* blocks that needs to be placed under floats */
+.clear
+  clear both
+
+/* blocks that must contain floats */
+.clearfix
+  &::after
+    content ""
+    display table
+    clear both
+    border-collapse collapse
+
+/* simple blocks alignment */
+.{kna-namespace}left
+  margin-right auto
+
+.{kna-namespace}right
+  margin-left auto
+
+.{kna-namespace}center
+  margin-left auto
+  margin-right auto
+
+/* text and contents alignment */
+.{kna-namespace}txtleft
+  text-align left
+
+.{kna-namespace}txtright
+  text-align right
+
+.{kna-namespace}txtcenter
+  text-align center
+
+/* floating elements */
+.{kna-namespace}fl
+  float left
+
+img.{kna-namespace}fl
+  margin-right small-value
+
+.{kna-namespace}fr
+  float right
+
+img.{kna-namespace}fr
+  margin-left small-value
+
+img.{kna-namespace}fl
+img.{kna-namespace}fr
+  margin-bottom tiny-value
+
+/* inline-block */
+.{kna-namespace}inbl
+  display inline-block
+  vertical-align top
+
+/* flexbox layout
+http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
+*/
+
+[class*="{kna-namespace}flex-container"]
+.{kna-namespace}flex-container
+  display flex
+  flex-wrap wrap
+
+.{kna-namespace}flex-container-h
+  flex-direction row
+
+.{kna-namespace}flex-container-v
+  flex-direction column
+
+.{kna-namespace}flex-item-fluid
+  flex 1
+  min-width 0
+
+.{kna-namespace}flex-item-first
+.{kna-namespace}item-first
+  order -1
+
+.{kna-namespace}flex-item-medium
+.{kna-namespace}item-medium
+  order 0
+
+.{kna-namespace}flex-item-last
+.{kna-namespace}item-last
+  order 1
+
+.{kna-namespace}flex-item-center
+.{kna-namespace}item-center
+  margin auto
diff --git a/styl/utilities/_responsive.styl b/styl/utilities/_responsive.styl
new file mode 100644
index 0000000..4996461
--- /dev/null
+++ b/styl/utilities/_responsive.styl
@@ -0,0 +1,230 @@
+/* -------------------------- */
+/* ==Responsive helpers       */
+/* -------------------------- */
+
+/* large screens */
+/* ------------- */
+
+@media (min-width: (medium + 1))
+
+  /* layouts for large screens */
+  .{kna-namespace}large-hidden
+    display none !important
+
+  .{kna-namespace}large-visible
+    display block !important
+
+  .{kna-namespace}large-no-float
+    float none
+
+  .{kna-namespace}large-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for large screens */
+  .{kna-namespace}large-w25
+    width 25% !important
+
+  .{kna-namespace}large-w33
+    width 33.333333% !important
+
+  .{kna-namespace}large-w50
+    width 50% !important
+
+  .{kna-namespace}large-w66
+    width 66.666666% !important
+
+  .{kna-namespace}large-w75
+    width 75% !important
+
+  .{kna-namespace}large-w100
+  .{kna-namespace}large-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for large screens */
+  .{kna-namespace}large-man
+  .{kna-namespace}large-ma0
+    margin 0 !important
+
+/* medium screens */
+/* -------------- */
+
+@media (min-width: (small + 1)) and (max-width: large)
+
+  /* layouts for medium screens */
+  .{kna-namespace}medium-hidden
+    display none !important
+
+  .{kna-namespace}medium-visible
+    display block !important
+
+  .{kna-namespace}medium-no-float
+    float none
+
+  .{kna-namespace}medium-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for medium screens */
+  .{kna-namespace}medium-w25
+    width 25% !important
+
+  .{kna-namespace}medium-w33
+    width 33.333333% !important
+
+  .{kna-namespace}medium-w50
+    width 50% !important
+
+  .{kna-namespace}medium-w66
+    width 66.666666% !important
+
+  .{kna-namespace}medium-w75
+    width 75% !important
+
+  .{kna-namespace}medium-w100
+  .{kna-namespace}medium-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for medium screens */
+  .{kna-namespace}medium-man
+  .{kna-namespace}medium-ma0
+    margin 0 !important
+
+/* small screens */
+/* ------------- */
+
+@media (min-width: (tiny + 1)) and (max-width: small)
+
+  /* layouts for small screens */
+  .{kna-namespace}small-hidden
+    display none !important
+
+  .{kna-namespace}small-visible
+    display block !important
+
+  .{kna-namespace}small-no-float
+    float none
+
+  .{kna-namespace}small-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for small screens */
+  .{kna-namespace}small-w25
+    width 25% !important
+
+  .{kna-namespace}small-w33
+    width 33.333333% !important
+
+  .{kna-namespace}small-w50
+    width 50% !important
+
+  .{kna-namespace}small-w66
+    width 66.666666% !important
+
+  .{kna-namespace}small-w75
+    width 75% !important
+
+  .{kna-namespace}small-w100
+  .{kna-namespace}small-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for small screens */
+  .{kna-namespace}small-man
+  .{kna-namespace}small-ma0
+    margin 0 !important
+
+  .{kna-namespace}small-pan
+  .{kna-namespace}small-pa0
+    padding 0 !important
+
+/* tiny screens */
+/* ------------ */
+
+@media (max-width: tiny)
+
+  /* quick small resolution reset */
+  .{kna-namespace}mod
+  .{kna-namespace}col
+  fieldset
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  .{kna-namespace}flex-container
+    flex-direction column
+
+  /* layouts for tiny screens */
+  .{kna-namespace}tiny-hidden
+    display none !important
+
+  .{kna-namespace}tiny-visible
+    display block !important
+
+  .{kna-namespace}tiny-no-float
+    float none
+
+  .{kna-namespace}tiny-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for tiny screens */
+  .{kna-namespace}tiny-w25
+    width 25% !important
+
+  .{kna-namespace}tiny-w33
+    width 33.333333% !important
+
+  .{kna-namespace}tiny-w50
+    width 50% !important
+
+  .{kna-namespace}tiny-w66
+    width 66.666666% !important
+
+  .{kna-namespace}tiny-w75
+    width 75% !important
+
+  .{kna-namespace}tiny-w100
+  .{kna-namespace}tiny-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for tiny screens */
+  .{kna-namespace}tiny-man
+  .{kna-namespace}tiny-ma0
+    margin 0 !important
+
+  .{kna-namespace}tiny-pan
+  .{kna-namespace}tiny-pa0
+    padding 0 !important
diff --git a/styl/vendor/_normalize.styl b/styl/vendor/_normalize.styl
new file mode 100644
index 0000000..18ddf7f
--- /dev/null
+++ b/styl/vendor/_normalize.styl
@@ -0,0 +1,419 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}