retouches finales

css/01-base.css

@@ -1,52 +1,70 @@
 /*!
-* www.KNACSS.com V2.9.4 (2014-04) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
+
 /* ----------------------------- */
+
 /* == soft reset                 */
+
 /* ----------------------------- */
+
 /* switching box model for all elements */
+
 * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
 /* soft reset */
+
 html,
 body {
   margin: 0;
   padding: 0;
 }
+
 ul,
 ol {
   padding-left: 2em;
 }
+
 ul.unstyled {
   list-style: none;
 }
+
 img {
   height: auto;
   vertical-align: middle;
   border: 0;
 }
+
 audio,
 canvas,
 video {
   display: inline-block;
 }
+
 svg:not(:root) {
   overflow: hidden;
 }
-figure {
+
-  margin: 0;
-}
 /* ----------------------------- */
+
 /* == typography                 */
+
 /* ----------------------------- */
-/* base font-size corresponds to 10px and is adapted to rem unit */
+
+/* base font-size corresponds to "10px" and is adapted to rem unit */
+
 html {
   font-size: 62.5%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
+
 body {
   background-color: #ffffff;
   color: #000000;
@@ -54,9 +72,11 @@ body {
   font-size: 1.4em;
   line-height: 1.5;
 }
+
 /* font-sizing for content */
-/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
+
 p,
+.p-like,
 ul,
 ol,
 dl,
@@ -70,68 +90,63 @@ caption,
 details,
 figure,
 hgroup {
-  margin-top: .75em;
-  margin-bottom: 0;
-  line-height: 1.5;
-}
-h1,
-.h1-like {
-  margin-top: 0.65625em;
-  margin-bottom: 0;
-  font-size: 3.2rem;
-  line-height: 1.3125;
-}
-h2,
-.h2-like {
   margin-top: 0.75em;
   margin-bottom: 0;
-  font-size: 2.8rem;
   line-height: 1.5;
 }
+
+h1,
+.h1-like {
+  font-size: 3.2rem;
+}
+
+h2,
+.h2-like {
+  font-size: 2.8rem;
+}
+
 h3,
 .h3-like {
-  margin-top: 0.875em;
-  margin-bottom: 0;
   font-size: 2.4rem;
-  line-height: 1.75;
 }
+
 h4,
 .h4-like {
-  margin-top: 1.05em;
-  margin-bottom: 0;
   font-size: 2rem;
-  line-height: 1.05;
 }
+
 h5,
 .h5-like {
-  margin-top: 1.16666667em;
-  margin-bottom: 0;
   font-size: 1.8rem;
-  line-height: 1.16666667;
 }
+
 h6,
 .h6-like {
-  margin-top: 1.3125em;
-  margin-bottom: 0;
   font-size: 1.6rem;
-  line-height: 1.3125;
 }
+
 /* alternate font-sizing */
+
 .smaller {
-  font-size: 0.71428571em;
+  font-size: 0.71em;
 }
+
 .small {
-  font-size: 0.85714286em;
+  font-size: 0.86em;
 }
+
 .big {
-  font-size: 1.14285714em;
+  font-size: 1.14em;
 }
+
 .bigger {
-  font-size: 1.28571429em;
+  font-size: 1.29em;
 }
+
 .biggest {
-  font-size: 1.42857143em;
+  font-size: 1.43em;
 }
+
 code,
 pre,
 samp,
@@ -142,16 +157,42 @@ kbd {
   font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
   line-height: normal;
 }
-em {
+
+em,
+.em,
+address,
+cite,
+dfn,
+i,
+var {
   font-style: italic;
 }
-strong {
+
+.no-em {
+  font-style: normal;
+}
+
+strong,
+.strong {
   font-weight: bold;
 }
+
+.no-strong {
+  font-weight: normal;
+}
+
+small,
+sub,
+sup {
+  font-size: smaller;
+}
+
 /* ----------------------------- */
+
 /* == hiding content             */
+
 /* ----------------------------- */
-/* hiding content */
+
 .visually-hidden {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
@@ -159,11 +200,39 @@ strong {
   height: 1px;
   width: 1px;
 }
+
+body > script {
+  display: none !important;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .no-small-screen {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .no-large-screen {
+    display: none;
+  }
+}
+
 /* ----------------------------- */
+
 /* == browsers consistency       */
+
 /* ----------------------------- */
+
 /* avoid top margins on first content element */
+
 p:first-child,
+.p-like:first-child,
 ul:first-child,
 ol:first-child,
 dl:first-child,
@@ -177,14 +246,19 @@ h5:first-child,
 h6:first-child {
   margin-top: 0;
 }
+
 /* avoid margins on nested elements */
+
 li p,
+li .p-like,
 li ul,
 li ol {
   margin-top: 0;
   margin-bottom: 0;
 }
+
 /* max values */
+
 img,
 table,
 td,
@@ -196,345 +270,389 @@ input,
 video {
   max-width: 100%;
 }
+
 /* margin-bottom on tables */
+
 table {
   margin-bottom: 2em;
 }
-/* scripts */
+
-body > script {
-  display: none !important;
-}
 /* ----------------------------- */
+
 /* ==layout and modules          */
+
 /* ----------------------------- */
+
 /* float layout */
+
 /* module, gains superpower "BFC" Block Formating Context */
+
 .mod {
   overflow: hidden;
 }
+
 /* blocks that needs to be placed under floats */
+
 .clear,
 .line,
 .row {
   clear: both;
 }
+
 /* blocks that must contain floats */
+
 .clearfix:after,
 .line:after {
   content: "";
   display: table;
   clear: both;
 }
+
 /* table layout */
+
 .row {
   display: table;
   table-layout: fixed;
   width: 100%;
 }
+
 .row > *,
 .col {
   display: table-cell;
   vertical-align: top;
 }
+
 /* inline-block */
+
 .inbl {
   display: inline-block;
   vertical-align: top;
 }
+
 /* alignments (blocks and inline) */
+
 /* ------------------------------ */
+
 /* left (or starting) elements */
+
 .left,
 .start {
   float: left;
 }
+
 img.left,
 img.start {
   margin-right: 1em;
 }
+
 /* right (or ending) elements */
+
 .right,
 .end {
   float: right;
 }
+
 img.right,
 img.end {
   margin-left: 1em;
 }
+
 img.left,
 img.right,
 img.start,
 img.end {
   margin-bottom: 0.5em;
 }
+
 .center {
   margin-left: auto;
   margin-right: auto;
 }
+
 .txtleft {
   text-align: left;
 }
+
 .txtright {
   text-align: right;
 }
+
 .txtcenter {
   text-align: center;
 }
-/* blocks widths (percentage and pixels) */
+
 .w10 {
   width: 10%;
 }
+
 .w20 {
   width: 20%;
 }
+
 .w25 {
   width: 25%;
 }
+
 .w30 {
   width: 30%;
 }
+
 .w33 {
   width: 33.3333%;
 }
+
 .w40 {
   width: 40%;
 }
+
 .w50 {
   width: 50%;
 }
+
 .w60 {
   width: 60%;
 }
+
 .w66 {
   width: 66.6666%;
 }
+
 .w70 {
   width: 70%;
 }
+
 .w75 {
   width: 75%;
 }
+
 .w80 {
   width: 80%;
 }
+
 .w90 {
   width: 90%;
 }
+
 .w100 {
   width: 100%;
 }
+
 .w50p {
   width: 50px;
 }
+
 .w100p {
   width: 100px;
 }
+
 .w150p {
   width: 150px;
 }
+
 .w200p {
   width: 200px;
 }
+
 .w300p {
   width: 300px;
 }
+
 .w400p {
   width: 400px;
 }
+
 .w500p {
   width: 500px;
 }
+
 .w600p {
   width: 600px;
 }
+
 .w700p {
   width: 700px;
 }
+
 .w800p {
   width: 800px;
 }
+
 .w960p {
   width: 960px;
 }
+
 .mw960p {
   max-width: 960px;
 }
+
 .w1140p {
   width: 1140px;
 }
+
 .mw1140p {
   max-width: 1140px;
 }
+
 .wauto {
   width: auto;
 }
-/* spacing helpers
+
-	p,m = padding,margin
+.man {
-	a,t,r,b,l = all,top,right,bottom,left
-	s,m,l,n = small, medium, large, none
-	*/
-.m-reset,
-.ma0 {
   margin: 0;
 }
-.p-reset,
+
-.pa0 {
+.pan {
   padding: 0;
 }
-.ma1,
+
 .mas {
   margin: 1em;
 }
-.ma2,
+
 .mam {
   margin: 2em;
 }
-.ma3,
+
 .mal {
   margin: 4em;
 }
-.pa1,
+
 .pas {
   padding: 1em;
 }
-.pa2,
+
 .pam {
   padding: 2em;
 }
-.pa3,
+
 .pal {
   padding: 4em;
 }
-.mt0,
+
 .mtn {
   margin-top: 0;
 }
-.mt1,
+
 .mts {
   margin-top: 1em;
 }
-.mt2,
+
 .mtm {
   margin-top: 2em;
 }
-.mt3,
+
 .mtl {
   margin-top: 4em;
 }
-.mr0,
+
 .mrn {
   margin-right: 0;
 }
-.mr1,
+
 .mrs {
   margin-right: 1em;
 }
-.mr2,
+
 .mrm {
   margin-right: 2em;
 }
-.mr3,
+
 .mrl {
   margin-right: 4em;
 }
-.mb0,
+
 .mbn {
   margin-bottom: 0;
 }
-.mb1,
+
 .mbs {
   margin-bottom: 1em;
 }
-.mb2,
+
 .mbm {
   margin-bottom: 2em;
 }
-.mb3,
+
 .mbl {
   margin-bottom: 4em;
 }
-.ml0,
+
 .mln {
   margin-left: 0;
 }
-.ml1,
+
 .mls {
   margin-left: 1em;
 }
-.ml2,
+
 .mlm {
   margin-left: 2em;
 }
-.ml3,
+
 .mll {
   margin-left: 4em;
 }
-.pt0,
+
 .ptn {
   padding-top: 0;
 }
-.pt1,
+
 .pts {
   padding-top: 1em;
 }
-.pt2,
+
 .ptm {
   padding-top: 2em;
 }
-.pt3,
+
 .ptl {
   padding-top: 4em;
 }
-.pr0,
+
 .prn {
   padding-right: 0;
 }
-.pr1,
+
 .prs {
   padding-right: 1em;
 }
-.pr2,
+
 .prm {
   padding-right: 2em;
 }
-.pr3,
+
 .prl {
   padding-right: 4em;
 }
-.pb0,
+
 .pbn {
   padding-bottom: 0;
 }
-.pb1,
+
 .pbs {
   padding-bottom: 1em;
 }
-.pb2,
+
 .pbm {
   padding-bottom: 2em;
 }
-.pb3,
+
 .pbl {
   padding-bottom: 4em;
 }
-.pl0,
+
 .pln {
   padding-left: 0;
 }
-.pl1,
+
 .pls {
   padding-left: 1em;
 }
-.pl2,
+
 .plm {
   padding-left: 2em;
 }
-.pl3,
+
 .pll {
   padding-left: 4em;
 }
-/* debug helper */
-.knacss-debug {
-  background: pink;
-  outline: 3px solid maroon;
-}

css/02-grids.css

@@ -1,85 +1,111 @@
 /* ---------------------------------- */
+
 /* ==classic grids                    */
+
 /* .. use it when gutter size matters */
+
 /* ---------------------------------- */
+
 /* grids inspired from SUIT https://github.com/suitcss/suit */
-/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
+
 .grid {
+  /* overall container of grids */
   overflow: hidden;
-  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
 }
+
 .grid > * {
+  /* global styles for direct child ex. .grid3 */
   display: block;
   padding: 0;
   margin-left: -20px;
   /* gutter value */
   text-align: left;
-  letter-spacing: -0.31em;
-  text-rendering: optimizespeed;
 }
+
+.grid > * > * {
+  /* global styles for each "cell" */
+  display: inline-block;
+  padding-left: -20px;
+  /* gutter value */
+  margin-left: 0;
+  vertical-align: top;
+}
+
+/* whitespace fixing for modern browsers including IE9+ */
+
+:root .grid {
+  font-size: 0;
+}
+
+:root .grid > * > * {
+  font-size: 14px;
+  /* fallback for Opera Mini */
+  font-size: 1.4rem;
+}
+
 /* Opera hack */
+
 .opera:-o-prefocus,
 .grid > * {
   word-spacing: -0.43em;
 }
-.grid > * > * {
+
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-  /* IE67 hack */
-  width: 100%;
-  padding-left: 20px;
-  /* gutter value */
-  margin-left: 0;
-  vertical-align: top;
-  text-align: left;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-rendering: auto;
-  font-family: Helvetica, Arial, sans-serif;
-}
 .grid2 > * {
   width: 50%;
 }
+
 .grid3 > * {
   width: 33.333%;
 }
+
 .grid4 > * {
   width: 25%;
 }
+
 .grid5 > * {
   width: 20%;
 }
+
 .grid6 > * {
   width: 16.667%;
 }
+
 .grid8 > * {
   width: 12.5%;
 }
+
 .grid10 > * {
   width: 10%;
 }
+
 .grid12 > * {
   width: 8.333%;
 }
+
 /* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
+
 .grid2-1 > *:first-child,
 .grid1-2 > * + * {
   width: 66.666%;
 }
+
 .grid1-2 > *:first-child,
 .grid2-1 > * + * {
   width: 33.333%;
 }
+
 .grid1-3 > *:first-child,
 .grid3-1 > * + * {
   width: 25%;
 }
+
 .grid3-1 > *:first-child,
 .grid1-3 > * + * {
   width: 75%;
 }
+
 /* Responsiv-o-matic */
+
 @media (max-width: 1024px) {
   .grid5 > *,
   .grid6 > *,
@@ -89,6 +115,7 @@
     width: 33.333%;
   }
 }
+
 @media (max-width: 480px) {
   .grid3 > *,
   .grid4 > *,
@@ -100,67 +127,90 @@
     width: 50%;
   }
 }
+
 @media (max-width: 320px) {
   .grid > * > * {
     width: 100% !important;
   }
 }
+
 /* ---------------------------------- */
+
 /* ==autogrids                        */
+
 /* .. to automatically justify blocs  */
+
 /* ---------------------------------- */
+
 /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
 [class*="autogrid"] {
+  /* container of autogrids */
   text-align: justify;
-  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
-  letter-spacing: -0.31em;
-  text-rendering: optimizespeed;
-}
-/* Opera hack */
-[class*="autogrid"]:-o-prefocus {
-  word-spacing: -0.43em;
 }
+
 [class*="autogrid"]:after {
   content: "";
   display: inline-block;
   width: 100%;
 }
+
 [class*="autogrid"] > * {
   display: inline-block;
-  *display: inline;
-  zoom: 1;
-  /* ie6 ie7 hack */
-  font-family: Helvetica, Arial, sans-serif;
-  letter-spacing: normal;
-  word-spacing: normal;
   vertical-align: top;
   text-align: left;
-  text-rendering: auto;
 }
+
+/* whitespace fixing for modern browsers including IE9+ */
+
+:root [class*="autogrid"] {
+  font-size: 0;
+}
+
+:root [class*="autogrid"] > * > * {
+  font-size: 14px;
+  /* fallback for Opera Mini */
+  font-size: 1.4rem;
+}
+
+/* Opera hack */
+
+[class*="autogrid"]:-o-prefocus {
+  word-spacing: -0.43em;
+}
+
 .autogrid2 > * {
   width: 49%;
 }
+
 .autogrid3 > * {
   width: 32%;
 }
+
 .autogrid4 > * {
   width: 23.6%;
 }
+
 .autogrid5 > * {
   width: 19%;
 }
+
 .autogrid6 > * {
   width: 15%;
 }
+
 .autogrid8 > * {
   width: 10.8%;
 }
+
 .autogrid10 > * {
   width: 9%;
 }
+
 .autogrid12 > * {
   width: 6.4%;
 }
+
 @media (max-width: 1024px) {
   .autogrid5 > *,
   .autogrid6 > *,
@@ -170,6 +220,7 @@
     width: 32%;
   }
 }
+
 @media (max-width: 480px) {
   .autogrid5 > *,
   .autogrid6 > *,
@@ -179,6 +230,7 @@
     width: 49%;
   }
 }
+
 @media (max-width: 320px) {
   [class*="autogrid"] > * {
     width: 100%;

css/03-tables.css

@@ -6,14 +6,12 @@
 
 table,
 .table {
+  width: 100%;
   max-width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   vertical-align: top;
-}
+  border: 1px solid #ccc;
-
-table {
-  width: 100%;
 }
 
 .table {
@@ -26,73 +24,17 @@ table.table-auto {
 }
 
 caption {
-  padding: 10px;
+  padding: 1em;
   color: #555;
   font-style: italic;
 }
 
-table {
+td,
-  border: 1px solid #ccc;
+th {
-}
+  padding: 0.3em 0.8em;
-
+  border: 1px #aaa dotted;
-tr > * + * {
+  vertical-align: top;
-  border-left: 1px solid #ccc;
+  min-width: 2em;
-}
+  cursor: default;
-
-th,
-td {
-  padding: .3em .8em;
   text-align: left;
-  border-bottom: 1px solid #ccc;
-}
-
-td {
-  color: #333;
-}
-
-/* alternate tables */
-
-.alternate {
-  border: 0;
-}
-
-.alternate tbody {
-  border: 1px solid #ccc;
-}
-
-.alternate thead tr > * + * {
-  border-left: 0;
-}
-
-.alternate tbody tr > * + * {
-  border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-
-.alternate-vert {
-  border: 0;
-  border-right: 1px solid #ccc;
-}
-
-.alternate-vert tr > :first-child {
-  border-bottom: 0;
-}
-
-.alternate-vert tr > * + * {
-  border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-
-.striped tbody tr:nth-child(odd) {
-  background: #eee;
-  background: rgba(0, 0, 0, 0.05);
-}
-
-/* striped-vert tables */
-
-.striped-vert tr > :first-child {
-  background: #eee;
-  background: rgba(0, 0, 0, 0.05);
 }

css/04-forms.css

@@ -44,8 +44,6 @@ legend {
 }
 
 textarea {
-  overflow: auto;
-  /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
   min-height: 5em;
   vertical-align: top;
   font-family: inherit;
@@ -62,12 +60,6 @@ input[type="submit"] {
   /* clickable input types in iOS */
 }
 
-input[type="checkbox"],
-input[type="radio"] {
-  padding: 0;
-  /* Corrects excess space around these inputs in IE8/9 */
-}
-
 input[type="search"] {
   -webkit-appearance: textfield;
 }

css/05-icons.css

@@ -1,9 +1,13 @@
 /* ----------------------------- */
+
 /* ==icons and bullets	         */
+
 /* ----------------------------- */
+
 .icon {
   display: inline-block;
 }
+
 .icon:before,
 .icon.after:after {
   content: "";
@@ -17,6 +21,7 @@
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
   speak: none;
 }
+
 @media (min-device-width: 480px) {
   .icon:before,
   .icon.after:after {
@@ -24,56 +29,69 @@
     -webkit-transform: rotateZ(0.05deg);
   }
 }
+
 .icon.after:after {
   margin: 0 0 0 8px;
 }
+
 .icon.after:before {
   content: "" !important;
 }
+
 .icon-rate:before,
 .icon-rate.after:after {
   content: "\2605";
 }
+
 .icon-unrate:before,
 .icon-unrate.after:after {
   content: "\2606";
 }
+
 .icon-check:before,
 .icon-check.after:after {
   content: "\2713";
 }
+
 .icon-uncheck:before,
 .icon-uncheck.after:after {
   content: "\2717";
 }
+
 .icon-cloud:before,
 .icon-cloud.after:after {
   content: "\2601";
 }
+
 .icon-dl:before,
 .icon-dl.after:after {
   content: "\21E3";
   font-weight: bold;
 }
+
 .icon-cross:before,
 .icon-cross.after:after {
   content: "\2716";
   font-weight: bold;
 }
+
 .icon-arrow1:before,
 .icon-arrow1.after:after {
   content: "\2192";
   position: relative;
   top: -0.15em;
 }
+
 .icon-arrow2:before,
 .icon-arrow2.after:after {
   content: "\279E";
 }
+
 .icon-arrow3:before,
 .icon-arrow3.after:after {
   content: "\279A";
 }
+
 .icon-bracket1:before,
 .icon-bracket1.after:after {
   content: "\2039";
@@ -82,6 +100,7 @@
   position: relative;
   top: -0.15em;
 }
+
 .icon-bracket2:before,
 .icon-bracket2.after:after {
   content: "\203A";
@@ -90,45 +109,54 @@
   position: relative;
   top: -0.15em;
 }
+
 .icon-up:before,
 .icon-up.after:after {
   content: "\25B2";
 }
+
 .icon-down:before,
 .icon-down.after:after {
   content: "\25BC";
 }
+
 .icon-bull:before,
 .icon-bull.after:after {
   content: "\2022";
   font-size: 1.2em;
   top: -0.05em;
 }
+
 .icon-bull2:before,
 .icon-bull2.after:after {
   content: "\25E6";
   top: -0.05em;
 }
+
 .icon-bull3:before,
 .icon-bull3.after:after {
   content: "\2023";
   font-size: 1.6em;
   top: -0.05em;
 }
+
 .icon-nav:before,
 .icon-nav.after:after {
   content: "\2261";
   font-weight: bold;
 }
+
 .icon-losange:before,
 .icon-losange.after:after {
   content: "\25C6";
 }
+
 .icon-asteri:before,
 .icon-asteri.after:after {
   content: "\2731";
   font-weight: bold;
 }
+
 .icon-mail:before,
 .icon-mail.after:after {
   content: "\2709";

css/06-rwd.css

@@ -1,56 +1,77 @@
 /* ----------------------------- */
-/* ==desktop and retina medias   */
+
+/* ==desktop and HD devices      */
+
 /* ----------------------------- */
+
 @media (min-width: 480px) {
   /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
 }
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
   /* Style adjustments for retina devices */
 }
+
 /* ---------------------------------- */
-/* ==Responsive large / medium / tiny */
+
+/* ==Responsive large / small / tiny  */
+
 /* ---------------------------------- */
+
 @media (min-width: 1024px) {
   /* layouts for large screens */
+
   .large-hidden {
     display: none !important;
   }
+
   .large-visible {
     display: block !important;
   }
+
   .large-no-float {
     float: none;
   }
+
   .large-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .large-row {
     display: table;
     table-layout: fixed;
     width: 100% !important;
   }
+
   .large-col {
     display: table-cell;
     vertical-align: top;
   }
+
   /* widths for large screens */
+
   .large-w25 {
     width: 25% !important;
   }
+
   .large-w33 {
     width: 33.3333% !important;
   }
+
   .large-w50 {
     width: 50% !important;
   }
+
   .large-w66 {
     width: 66.6666% !important;
   }
+
   .large-w75 {
     width: 75% !important;
   }
+
   .large-w100,
   .large-wauto {
     display: block !important;
@@ -61,13 +82,17 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for large screens */
-  .large-ma0 {
+
+  .large-man {
     margin: 0 !important;
   }
 }
+
 @media (max-width: 480px) {
   /* quick reset in small resolution and less */
+
   .w600p,
   .w700p,
   .w800p,
@@ -76,46 +101,60 @@
     width: auto;
     float: none;
   }
+
   /* layouts for small screens */
+
   .small-hidden {
     display: none !important;
   }
+
   .small-visible {
     display: block !important;
   }
+
   .small-no-float {
     float: none;
   }
+
   .small-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .small-row {
     display: table !important;
     table-layout: fixed !important;
     width: 100% !important;
   }
+
   .small-col {
     display: table-cell !important;
     vertical-align: top !important;
   }
+
   /* widths for small screens */
+
   .small-w25 {
     width: 25% !important;
   }
+
   .small-w33 {
     width: 33.3333% !important;
   }
+
   .small-w50 {
     width: 50% !important;
   }
+
   .small-w66 {
     width: 66.6666% !important;
   }
+
   .small-w75 {
     width: 75% !important;
   }
+
   .small-w100,
   .small-wauto {
     display: block !important;
@@ -126,13 +165,21 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for small screens */
-  .small-ma0 {
+
+  .small-man {
     margin: 0 !important;
   }
+
+  .small-pan {
+    padding: 0 !important;
+  }
 }
+
 @media (max-width: 320px) {
   /* quick tiny resolution reset */
+
   .mod,
   .col,
   fieldset {
@@ -144,65 +191,83 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   .w300p,
   .w400p,
   .w500p {
     width: auto;
     float: none;
   }
+
   .row {
     display: block !important;
     width: 100% !important;
   }
+
   /* layouts for tiny screens */
+
   .tiny-hidden {
     display: none !important;
   }
+
   .tiny-visible {
     display: block !important;
   }
+
   .tiny-no-float {
     float: none;
   }
+
   .tiny-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .tiny-row {
     display: table !important;
     table-layout: fixed !important;
     width: 100% !important;
   }
+
   .tiny-col {
     display: table-cell !important;
     vertical-align: top !important;
   }
+
   th,
   td {
     display: block !important;
     width: auto !important;
     text-align: left !important;
   }
+
   thead {
     display: none;
   }
+
   /* widths for tiny screens */
+
   .tiny-w25 {
     width: 25% !important;
   }
+
   .tiny-w33 {
     width: 33.3333% !important;
   }
+
   .tiny-w50 {
     width: 50% !important;
   }
+
   .tiny-w66 {
     width: 66.6666% !important;
   }
+
   .tiny-w75 {
     width: 75% !important;
   }
+
   .tiny-w100,
   .tiny-wauto {
     display: block !important;
@@ -213,8 +278,14 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for tiny screens */
-  .tiny-ma0 {
+
+  .tiny-man {
     margin: 0 !important;
   }
+
+  .tiny-pan {
+    padding: 0 !important;
+  }
 }

css/09-booleans.css

@@ -1,77 +1,13 @@
-/* Google Gmap3 bug fix on images */
+/* ----------------------------- */
-.gm-style img {
+
-  height: 100%;
+/* ==booleans                    */
-}
+
-:not(.gm-style) img {
+/* ----------------------------- */
-  height: auto;
+
-}
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-  max-width: none !important;
-}
-/* IE678 support */
-.ie678 h1,
-.ie678 .h1-like {
-  font-size: 2.28571429em;
-}
-.ie678 h2,
-.ie678 .h2-like {
-  font-size: 2em;
-}
-.ie678 h3,
-.ie678 .h3-like {
-  font-size: 1.71428571em;
-}
-.ie678 h4,
-.ie678 .h4-like {
-  font-size: 1.42857143em;
-}
-.ie678 h5,
-.ie678 .h5-like {
-  font-size: 1.28571429em;
-}
-.ie678 h6,
-.ie678 .h6-like {
-  font-size: 1.14285714em;
-}
-.ie678 img {
-  width: auto;
-  /* @bugfix for IE8 */
-}
-.ie678 .gm-style img {
-  height: 100%;
-}
-/* hasLayout for IE6/IE7 */
-.clearfix,
-.line,
-.mod,
-.row,
-.col {
-  *zoom: 1;
-}
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs width on IE6/IE7 */
-.btn,
-.col,
-.inbl {
-  *display: inline;
-  *zoom: 1;
-}
-.visually-hidden {
-  *clip: rect(1px 1px 1px 1px);
-}
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-	.ie67 * {
-		behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
-	}
-	*/
-/* styling skip links */
 .skip-links {
   position: absolute;
 }
+
 .skip-links a {
   position: absolute;
   left: -7000px;
@@ -80,11 +16,14 @@
   color: white;
   text-decoration: none;
 }
+
 .skip-links a:focus {
   position: static;
 }
+
 @media (max-width: 480px) {
   /* you shall not pass */
+
   div,
   textarea,
   table,
@@ -94,69 +33,9 @@
   pre,
   samp {
     word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
     hyphens: auto;
   }
 }
-/* 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: none;
-  background: none;
-  color: inherit;
-  border-radius: 0;
-}
-mark {
-  padding: 2px 4px;
-  background: #ff0;
-}
-sup,
-sub {
-  vertical-align: 0;
-  position: relative;
-}
-sup {
-  bottom: 1ex;
-}
-sub {
-  top: .5ex;
-}
-blockquote {
-  margin-left: 0;
-  padding-left: 1em;
-  border-left: 4px solid rgba(0, 0, 0, 0.15);
-  font-style: italic;
-}
-q {
-  font-style: normal;
-}
-q,
-.q {
-  quotes: "“\00a0" "\00a0”";
-}
-q:lang(fr),
-.q: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;
-}

css/10-gmaps.css

@@ -0,0 +1,19 @@
+/* ----------------------------- */
+
+/* ==gmaps support               */
+
+/* ----------------------------- */
+
+.gm-style img {
+  height: 100%;
+}
+
+:not(.gm-style) img {
+  height: auto;
+}
+
+.gm-style img,
+.gmnoscreen img,
+.gmnoprint img {
+  max-width: none !important;
+}

css/11-ie.css

@@ -0,0 +1,93 @@
+/* ----------------------------- */
+
+/* ==IE6, IE7, IE8 support       */
+
+/* ----------------------------- */
+
+.ie678 h1,
+.ie678 .h1-like {
+  font-size: 2.29em;
+}
+
+.ie678 h2,
+.ie678 .h2-like {
+  font-size: 2em;
+}
+
+.ie678 h3,
+.ie678 .h3-like {
+  font-size: 1.71em;
+}
+
+.ie678 h4,
+.ie678 .h4-like {
+  font-size: 1.43em;
+}
+
+.ie678 h5,
+.ie678 .h5-like {
+  font-size: 1.29em;
+}
+
+.ie678 h6,
+.ie678 .h6-like {
+  font-size: 1.14em;
+}
+
+.ie678 img {
+  width: auto;
+  /* @bugfix for IE8 */
+}
+
+.ie678 .gm-style img {
+  height: 100%;
+}
+
+.clearfix,
+.line,
+.mod,
+.row,
+.col {
+  *zoom: 1;
+}
+
+.btn,
+.col,
+.inbl {
+  *display: inline;
+  *zoom: 1;
+}
+
+.visually-hidden {
+  *clip: rect(1px 1px 1px 1px);
+}
+
+.ie8 .grid > *,
+.ie8 [class*="autogrid"] > * {
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+}
+
+.ie8 .grid > * > *,
+.ie8 [class*="autogrid"] > * > * {
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-rendering: auto;
+}
+
+.grid > * > *,
+[class*="autogrid"] > * > * {
+  *display: inline;
+  *zoom: 1;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  padding: 0;
+  /* Corrects excess space around these inputs in IE8/9 */
+}
+
+textarea {
+  overflow: auto;
+  /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+}

css/12-styling.css

@@ -0,0 +1,119 @@
+/* ----------------------------- */
+
+/* ==minor stylings              */
+
+/* ----------------------------- */
+
+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: none;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+
+mark {
+  padding: 2px 4px;
+  background: #ff0;
+}
+
+sup,
+sub {
+  vertical-align: 0;
+  position: relative;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: 0.5ex;
+}
+
+blockquote {
+  margin-left: 0;
+  padding-left: 1em;
+  border-left: 4px solid rgba(0, 0, 0, 0.15);
+  font-style: italic;
+}
+
+q {
+  font-style: normal;
+}
+
+q,
+.q {
+  quotes: "“\00a0" "\00a0”";
+}
+
+q:lang(fr),
+.q: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;
+}
+
+.alternate {
+  border: 0;
+}
+
+.alternate tbody {
+  border: 1px solid #ccc;
+}
+
+.alternate thead tr > * + * {
+  border-left: 0;
+}
+
+.alternate tbody tr > * + * {
+  border-left: 1px solid #ccc;
+}
+
+.alternate-vert {
+  border: 0;
+  border-right: 1px solid #ccc;
+}
+
+.alternate-vert tr > :first-child {
+  border-bottom: 0;
+}
+
+.alternate-vert tr > * + * {
+  border-top: 1px solid #ccc;
+}
+
+.striped tbody tr:nth-child(odd) {
+  background: #eee;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.striped-vert tr > :first-child {
+  background: #eee;
+  background: rgba(0, 0, 0, 0.05);
+}