diff --git a/css/knacss.css b/css/knacss.css
index b89697c..ba72b64 100644
--- a/css/knacss.css
+++ b/css/knacss.css
@@ -1,5 +1,5 @@
 /*
-* www.KNACSS.com V2.7 (2013-08) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ 
 */
 
diff --git a/less/01-base.less b/less/01-base.less
new file mode 100644
index 0000000..294e15a
--- /dev/null
+++ b/less/01-base.less
@@ -0,0 +1,417 @@
+
+/* ----------------------------- */
+/* ==reset                       */
+/* ----------------------------- */
+
+/* base font-size corresponds to 10px and is adapted to rem unit */
+html {
+	font-size: 62.5%;
+}
+body {
+	background-color: #fff;
+	color: #000;
+	font-family: @fontstack1;
+	font-size: ((@basefont / 10) + 0em);
+	line-height: @l-h; // adapt to your design
+}
+
+/* font-sizing for content */
+/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
+p,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption,
+details, 
+figure, 
+hgroup {
+	.flow(@basefont);
+}
+h1, .h1-like {
+	.flow(32); // equiv 32px
+}
+h2, .h2-like {
+	.flow(28); // equiv 28px
+}
+h3, .h3-like {
+	.flow(24); // equiv 24px
+}
+h4, .h4-like {
+	.flow(20); // equiv 20px
+}
+h5, .h5-like {
+	.flow(18); // equiv 18px
+}
+h6, .h6-like {
+	.flow(16); // equiv 16px
+}
+
+/* alternate font-sizing */
+.smaller {
+	.pxtoem (10); /* equiv 10px */
+}
+.small {
+	.pxtoem (12); /* equiv 12px */
+}
+.big {
+	.pxtoem (16); /* equiv 16px */
+}
+.bigger {
+	.pxtoem (18); /* equiv 18px */
+}
+.biggest {
+	.pxtoem (20); /* equiv 20px */
+}
+
+/* soft reset */
+html,
+body,
+textarea,
+figure,
+label {
+	margin: 0;
+	padding: 0;
+}
+ul,
+ol {
+	padding-left: 2em;
+}
+ul.unstyled {
+	list-style: none;
+}
+code, 
+pre,
+samp,
+kbd {
+	white-space: pre-wrap;
+	font-family: @fontstack2;
+	line-height: 1em;
+}
+code, kbd, mark {
+	border-radius: 2px;
+}
+em {
+	font-style: italic;
+}
+strong {
+	font-weight: bold;
+}
+i,
+b {
+	font-style: normal;
+	font-weight: normal;
+}
+kbd {
+	padding: 0 2px;
+	border: 1px solid #999;
+}
+code {
+	padding: 2px 4px;
+	background: rgba(0,0,0,.04);
+	color: #b11; 
+}
+mark {
+	padding:2px 4px;
+	background: #ff0;
+}
+table { margin-bottom: 1.5em; }
+
+/* avoid top margins on first content element */
+p, ul, ol, dl,
+blockquote, pre,
+h1, h2, h3, h4, h5, h6 {
+	&:first-child {
+		margin-top: 0;
+	}
+}
+
+/* avoid margins on nested elements */
+li p,
+li ul,
+li ol {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* max values */
+img, table, td, blockquote, code, pre, textarea, input, video {
+	max-width: 100%;
+}
+
+/* pictures */
+img {
+	height: auto;
+	vertical-align: middle;
+}
+/* Gmap3 max-width bug fix on images */
+.gm-style img,
+.gmnoscreen img,
+.gmnoprint img {max-width: none !important;}
+
+a img { border: 0; }
+
+/* scripts */
+body > script {display: none !important;}
+
+/* skip-links */
+.skip-links {
+	position: absolute;
+
+	a {
+		position: absolute;
+		left: -7000px;
+		padding: 0.5em;
+		background: black;
+		color: white;
+		text-decoration: none;
+	
+		&:focus {
+			position: static;
+		}
+	}
+}
+
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* switching box model for all elements */
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* 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,
+.mod: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 elements */
+.left {
+	float: left;
+}
+img.left {
+	margin-right: 1em;
+}
+
+/* right elements */
+.right {
+	float: right;
+}
+img.right {
+	margin-left: 1em;
+}
+
+img.left, img.right {
+	margin-bottom: 5px;
+}
+
+.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; }
+
+/* spacing helpers
+p,m = padding,margin
+a,t,r,b,l = all,top,right,bottom,left
+s,m,l,n = small(10px),medium(20px),large(30px),none(0)
+source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
+*/
+.m-reset, .ma0 { margin: 0; }
+.p-reset, .pa0 { padding: 0; }
+.ma1, .mas { margin: @smallvalue; }
+.ma2, .mam { margin: @mediumvalue; }
+.ma3, .mal { margin: @largevalue; }
+.pa1, .pas { padding: @smallvalue; }
+.pa2, .pam { padding: @mediumvalue; }
+.pa3, .pal { padding: @largevalue; }
+
+.mt0, .mtn { margin-top: 0; }
+.mt1, .mts { margin-top: @smallvalue; }
+.mt2, .mtm { margin-top: @mediumvalue; }
+.mt3, .mtl { margin-top: @largevalue; }
+.mr0, .mrn { margin-right: 0; }
+.mr1, .mrs { margin-right: @smallvalue; }
+.mr2, .mrm { margin-right: @mediumvalue; }
+.mr3, .mrl { margin-right: @largevalue; }
+.mb0, .mbn { margin-bottom: 0; }
+.mb1, .mbs { margin-bottom: @smallvalue; }
+.mb2, .mbm { margin-bottom: @mediumvalue; }
+.mb3, .mbl { margin-bottom: @largevalue; }
+.ml0, .mln { margin-left: 0; }
+.ml1, .mls { margin-left: @smallvalue; }
+.ml2, .mlm { margin-left: @mediumvalue; }
+.ml3, .mll { margin-left: @largevalue; }
+
+.pt0, .ptn { padding-top: 0; }
+.pt1, .pts { padding-top: @smallvalue; }
+.pt2, .ptm { padding-top: @mediumvalue; }
+.pt3, .ptl { padding-top: @largevalue; }
+.pr0, .prn { padding-right: 0; }
+.pr1, .prs { padding-right: @smallvalue; }
+.pr2, .prm { padding-right: @mediumvalue; }
+.pr3, .prl { padding-right: @largevalue; }
+.pb0, .pbn { padding-bottom: 0; }
+.pb1, .pbs { padding-bottom: @smallvalue; }
+.pb2, .pbm { padding-bottom: @mediumvalue; }
+.pb3, .pbl { padding-bottom: @largevalue; }
+.pl0, .pln { padding-left: 0; }
+.pl1, .pls { padding-left: @smallvalue; }
+.pl2, .plm { padding-left: @mediumvalue; }
+.pl3, .pll { padding-left: @largevalue; }
+
+/* hiding content */
+.visually-hidden {
+	position: absolute;
+	left: -7000px;
+	overflow: hidden;
+}
+[dir=rtl] .visually-hidden {
+	left: auto;
+	right: -7000px;
+}
+
+/* hidden on desktop */
+.desktop-hidden { display: none; } 
+/* hidden on mobile */
+.mobile-hidden { display: block; } 
+
+
+/* ----------------------------- */
+/* ==iefix                       */
+/* ----------------------------- */
+
+/* haslayout for IE6/IE7 */
+.ie67 .clearfix,
+.ie67 .line,
+.ie67 .mod,
+.ie67 .row,
+.ie67 .col {
+	zoom: 1;
+}
+
+/* inline-block and table-cell for IE6/IE7 */
+/* warning: .col needs width on IE6/IE7 */
+.ie67 .btn,
+.ie67 .col,
+.ie67 .inbl {
+	display: inline;
+	zoom: 1;
+}
+.ie8 img {
+	width: auto; /* @bugfix for IE8 */
+}
+
+/* Active box-sizing for IE6/IE7 */
+/* @source https://github.com/Schepp/box-sizing-polyfill */
+/*
+.ie67 * {
+	behavior: url(/js/boxsizing.htc);
+}
+*/
+
+/* ----------------------------- */
+/* ==print                       */
+/* ----------------------------- */
+
+/* quick print reset */
+@media print {
+	p,
+	blockquote {
+		orphans: 2;
+		widows: 2;
+	}
+	blockquote,
+	ul,
+	ol {
+		page-break-inside: avoid;
+	}
+	h1,
+	h2,
+	h3,
+	caption {
+		page-break-after: avoid;
+	}
+}
+
+/* debug helper */
+.knacss-debug {
+	background: pink;
+	outline: 3px solid maroon;
+}
\ No newline at end of file
diff --git a/less/02-grids.less b/less/02-grids.less
new file mode 100644
index 0000000..e91fd3f
--- /dev/null
+++ b/less/02-grids.less
@@ -0,0 +1,68 @@
+
+/* grids inspired from SUIT https://github.com/suitcss/suit */
+
+.grid {overflow: hidden;}
+.grid > * {
+	display: block;
+	padding: 0;
+	margin: 0 (@gutter/2); /* half gutter value */
+	text-align: left;
+	letter-spacing: -0.31em;
+	text-rendering: optimizespeed;
+}
+/* Opera hack */
+.opera:-o-prefocus,
+.grid > * {word-spacing: -0.43em;}
+
+.grid > * > * {
+	width: 100%;
+	display: inline-block;
+	padding: 0 (@gutter/2); /* half gutter value */
+	vertical-align: top;
+	text-align: left;
+	letter-spacing: normal;
+	word-spacing: normal;
+	text-rendering: auto;
+	*display: inline; *zoom: 1; /* IE67 hack */
+}
+
+.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: @largescreen) {
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {width: 33.333%}
+}
+@media (max-width: @smallscreen) {
+	.grid3 > *,
+	.grid4 > *,
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {width: 50%}
+}
+@media (max-width: @tinyscreen) {
+	.grid > * > * {width: 100%}
+}
\ No newline at end of file
diff --git a/less/03-tables.less b/less/03-tables.less
new file mode 100644
index 0000000..66f1bf5
--- /dev/null
+++ b/less/03-tables.less
@@ -0,0 +1,78 @@
+
+/* ----------------------------- */
+/* ==tables                      */
+/* ----------------------------- */
+
+table,
+.table {
+	max-width : 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	vertical-align: top;
+}
+table {
+	width: 100%;
+}
+.table {
+	display: table;
+}
+table#recaptcha_table,
+table.table-auto {
+	table-layout:auto;
+}
+caption {
+	padding: 10px;
+	color: #555;
+	font-style: italic;	
+}
+table { 
+	border: 1px solid #ccc;
+}
+tr > * + * {
+	border-left: 1px solid #ccc;
+}
+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, .05);
+}
+
+/* striped-vert tables */
+.striped-vert tr > :first-child {
+	background: #eee;
+	background: rgba(0, 0, 0, .05);
+}
\ No newline at end of file
diff --git a/less/04-forms.less b/less/04-forms.less
new file mode 100644
index 0000000..01b46ab
--- /dev/null
+++ b/less/04-forms.less
@@ -0,0 +1,87 @@
+
+/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize 
+* and www.sitepen.com
+*/
+
+/* buttons */
+.btn {
+	display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+	border: none;
+}
+input,
+button,
+select,
+label,
+.btn {
+	vertical-align: middle;
+	font-family: inherit;
+	font-size: inherit;
+}
+label { 
+	display: inline-block;
+	vertical-align: middle;
+	cursor: pointer;
+}
+legend {
+	border: 0;
+	white-space: normal;
+}
+textarea {
+	overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+	min-height: 5em;
+	vertical-align: top;
+	font-family: inherit;
+	font-size: inherit;
+	resize: vertical;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	cursor: pointer;
+	-webkit-appearance: button; /* 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;
+}
+
+/* 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,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+	display: none;
+}
+::-webkit-input-placeholder {
+	color: #777;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+	color: #777;
+}
+
+/* Removes inner padding and border in FF3+ */
+button::-moz-focus-inner,
+input[type='button']::-moz-focus-inner,
+input[type='reset']::-moz-focus-inner,
+input[type='submit']::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
\ No newline at end of file
diff --git a/less/05-icons.less b/less/05-icons.less
new file mode 100644
index 0000000..02f43f8
--- /dev/null
+++ b/less/05-icons.less
@@ -0,0 +1,139 @@
+
+/* ----------------------------- */
+/* ==icons and bullets	         */
+/* ----------------------------- */
+
+.icon {display: inline-block;}
+
+.icon:before,
+.icon.after:after {
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	position: relative; top: -.1em;
+	margin: 0 0.3em 0 0;
+	font: 1.4em/1 sans-serif;
+	color: #000;
+	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
+	speak: none;
+}
+
+@media (min-device-width: @smallscreen) {
+	.icon:before,
+	.icon.after:after {
+	font: 1em/0.6 sans-serif;
+	-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";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+.icon-bracket2:before,
+.icon-bracket2.after:after {
+	content: "\203A";
+	font-weight: bold;
+	font-size: 1.6em;
+	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";
+	font-size: 1.6em;
+	top: -.05em;
+}
diff --git a/less/06-rwd.less b/less/06-rwd.less
new file mode 100644
index 0000000..87fcbd6
--- /dev/null
+++ b/less/06-rwd.less
@@ -0,0 +1,205 @@
+
+/* ----------------------------- */
+/* ==desktop and retina medias   */
+/* ----------------------------- */
+
+@media (min-width: @smallscreen) {
+/* 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 */
+/* ---------------------------------- */
+
+@media (min-width: @largescreen) {
+
+	/* layouts for large (l) screens */
+	.large-hidden,
+	.tablet-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 (l) 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 {
+		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 (l) screens */
+	.large-ma0 { margin: 0 !important; }
+}
+
+@media (max-width: @smallscreen) {
+
+	/* quick tablet reset */
+	.w600p,
+	.w700p,
+	.w800p,
+	.w960p,
+	.mw960p,
+	.small-wauto {
+		width: auto;
+		float: none;
+	} 
+
+	/* layouts for medium (m) screens */
+	.small-hidden,
+	.tablet-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;
+	}
+
+	/* you shall not pass */
+	div, textarea, table, td, th, code, pre, samp {
+		word-wrap: break-word;
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		-o-hyphens: auto;
+		hyphens: auto;
+	}
+
+	/* widths for small (s) 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  {
+		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 (s) screens */
+	.small-ma0 { margin: 0 !important; }
+
+	/* Responsive grids */
+	.grid4 > * {.grid(2);} 
+	.grid4 > :first-child + * + * {margin-left: 0}
+
+	.grid6 > * {.grid(3);}  
+	.grid6 > :first-child + * + * + * {margin-left: 0}
+}
+
+@media (max-width: @tinyscreen) {
+
+	/* quick smartphone reset */
+	.mod,
+	.col,
+	fieldset {
+		display: block !important;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;
+	}
+	.w300p,
+	.w400p,
+	.w500p {
+		width: auto;
+		float: none;
+	}
+	.row { 
+		display: block !important;
+		width: 100% !important;
+	}
+
+	/* layouts for tiny (t) screens */
+	.tiny-hidden,
+	.phone-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 (t) 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 { 
+		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 (t) screens */
+	.tiny-ma0 { margin: 0 !important; }
+}
+
+/* orientation iOS font-size fix */
+@media (orientation: landscape) and (max-device-width: @smallscreen) {
+	html,
+	body {
+		-webkit-text-size-adjust: 100%;
+	}
+}
\ No newline at end of file
diff --git a/less/07-flexbox.less b/less/07-flexbox.less
new file mode 100644
index 0000000..80f65f5
--- /dev/null
+++ b/less/07-flexbox.less
@@ -0,0 +1,54 @@
+
+/* flexbox layout */
+.flex {
+	display : -webkit-box;
+	display : -moz-box;
+	display: -ms-flexbox;
+	display : -webkit-flex;
+	display : flex;
+}
+.flex-h {
+	-webkit-box-orient: horizontal;
+	-moz-box-orient: horizontal;
+	-webkit-flex-direction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+}
+.flex-v {
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+.flex-fluid {
+	-moz-box-flex: 1;
+	-webkit-flex: 1;
+	-moz-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+}
+.flex-start {
+	-webkit-box-ordinal-group: -1;
+	-moz-box-ordinal-group: 0;
+	-ms-flex-order : -1;
+	-webkit-order : -1;
+	-moz-order : -1;
+	order : -1;
+}
+.flex-mid {
+	-webkit-box-ordinal-group: 1;
+	-moz-box-ordinal-group: 1;
+	-ms-flex-order : 1;
+	-webkit-order : 1;
+	-moz-order : 1;
+	order : 1;
+}
+.flex-end {
+	-webkit-box-ordinal-group: 42;
+	-moz-box-ordinal-group: 42;
+	-ms-flex-order : 42;
+	-webkit-order : 42;
+	-moz-order : 42;
+	order : 42;
+}
\ No newline at end of file
diff --git a/less/08-print.less b/less/08-print.less
new file mode 100644
index 0000000..8fd63fa
--- /dev/null
+++ b/less/08-print.less
@@ -0,0 +1,69 @@
+/* quick print reset */
+@media print {
+	* {
+		background: transparent !important;
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+	body {
+		width: auto !important;
+		margin: auto !important;
+		font-family: serif;
+		font-size: 12pt;
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	blockquote,
+	ul,
+	ol {
+		color: #000 !important;
+		margin: auto !important;
+	}
+	.print {
+		display: block; /* displaying .print elements */
+	}
+	img { 
+		-webkit-filter: grayscale(100%);
+		-moz-filter: grayscale(100%);
+		-ms-filter: grayscale(100%);
+		-o-filter: grayscale(100%);
+		filter: grayscale(100%);
+	}
+	p,
+	blockquote {
+		orphans: 3; /* no orphans */
+		widows: 3; /* no widows */
+	}
+	blockquote,
+	ul,
+	ol {
+		page-break-inside: avoid; /* no breaks inside these elements */
+	}
+	h1 {
+		page-break-before: always; /* page break before main headers */
+	}
+	h1,
+	h2,
+	h3,
+	caption {
+		page-break-after: avoid; /* no breaks after these elements */
+	}
+	a {
+		color: #000 !important;
+		text-decoration: underline !important;
+	}
+	a[href]:after {
+		content: " (" attr(href) ")"; /* displaying URLs */
+	}
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+}
\ No newline at end of file
diff --git a/less/knacss.less b/less/knacss.less
index 9d245bb..ccf9264 100644
--- a/less/knacss.less
+++ b/less/knacss.less
@@ -1,20 +1,22 @@
 /*
-* www.KNACSS.com V2.7b (2013-08) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
 */
 
 // LESS values : adapt them to your design
-@basefont     : 14; // if "14" then 1em = 14px
-@l-h          : 1.5; // equiv line-height 1.5em
-@smallvalue   : 10px; // small value for margins / paddings
-@mediumvalue  : 20px; // medium value for margins / paddings
-@largevalue   : 30px; // large value for margins / paddings
-@tinyscreen   : 480px; // tiny screens media query
-@smallscreen : 768px; // small screens media query
-@largescreen  : 1280px; // large screens media query
-@gutter       : 20px; // gutter value (%, px, em, rem, etc) for grid layouts
+@basefont		: 14; // if "14" then 1em = 14px
+@l-h			: 1.5; // equiv line-height 1.5em
+@smallvalue		: 10px; // small value for margins / paddings
+@mediumvalue	: 20px; // medium value for margins / paddings
+@largevalue		: 30px; // large value for margins / paddings
+@tinyscreen		: 480px; // tiny screens media query
+@smallscreen	: 768px; // small screens media query
+@largescreen	: 1280px; // large screens media query
+@gutter			: 20px; // gutter value (%, px, em, rem, etc) for grid layouts
+@fontstack1		: "helvetica, arial, sans-serif"; // common font
+@fontstack2		: "consolas, 'DejaVu Sans Mono', courier, monospace"; // monospace font
 
-// LESS functions : don't touch ;)
+// LESS functions : don't touch or you'll be banned ;)
 .pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);}
 .line (@fontsize) {line-height: (@l-h *2 / (@fontsize / @basefont) + 0em)}
 .mtop (@fontsize) {margin: (@l-h / (@fontsize / @basefont) + 0em) 0 0}
@@ -30,840 +32,23 @@
         margin-bottom: 0;
 }
 
-/* ----------------------------- */
-/* ==reset                       */
-/* ----------------------------- */
-
-/* base font-size corresponds to 10px and is adapted to rem unit */
-html {
-	font-size: 62.5%;
-}
-body {
-	background-color: #fff;
-	color: #000;
-	font-family: helvetica, arial, sans-serif;
-	font-size: ((@basefont / 10) + 0em);
-	line-height: @l-h; // adapt to your design
-}
-
-/* font-sizing for content */
-/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
-p,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details, 
-figure, 
-hgroup {
-	.flow(@basefont);
-}
-h1, .h1-like {
-	.flow(32); // equiv 32px
-}
-h2, .h2-like {
-	.flow(28); // equiv 28px
-}
-h3, .h3-like {
-	.flow(24); // equiv 24px
-}
-h4, .h4-like {
-	.flow(20); // equiv 20px
-}
-h5, .h5-like {
-	.flow(18); // equiv 18px
-}
-h6, .h6-like {
-	.flow(16); // equiv 16px
-}
-
-/* alternate font-sizing */
-.smaller {
-	.pxtoem (10); /* equiv 10px */
-}
-.small {
-	.pxtoem (12); /* equiv 12px */
-}
-.big {
-	.pxtoem (16); /* equiv 16px */
-}
-.bigger {
-	.pxtoem (18); /* equiv 18px */
-}
-.biggest {
-	.pxtoem (20); /* equiv 20px */
-}
-
-/* soft reset */
-html,
-body,
-textarea,
-figure,
-label {
-	margin: 0;
-	padding: 0;
-}
-ul,
-ol {
-	padding-left: 2em;
-}
-ul.unstyled {
-	list-style: none;
-}
-code, 
-pre,
-samp,
-kbd {
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-	line-height: 1em;
-}
-code, kbd, mark {
-	border-radius: 2px;
-}
-em {
-	font-style: italic;
-}
-strong {
-	font-weight: bold;
-}
-i,
-b {
-	font-style: normal;
-	font-weight: normal;
-}
-kbd {
-	padding: 0 2px;
-	border: 1px solid #999;
-}
-code {
-	padding: 2px 4px;
-	background: rgba(0,0,0,.04);
-	color: #b11; 
-}
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-table { margin-bottom: 1.5em; }
-
-/* avoid top margins on first content element */
-p, ul, ol, dl,
-blockquote, pre,
-h1, h2, h3, h4, h5, h6 {
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-/* avoid margins on nested elements */
-li p,
-li ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
-	max-width: 100%;
-}
-
-/* pictures */
-img {
-	height: auto;
-	vertical-align: middle;
-}
-/* Gmap3 max-width bug fix on images */
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {max-width: none !important;}
-
-a img { border: 0; }
-
-/* scripts */
-body > script {display: none !important;}
-
-/* skip-links */
-.skip-links {
-	position: absolute;
-
-	a {
-		position: absolute;
-		left: -7000px;
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-	
-		&:focus {
-			position: static;
-		}
-	}
-}
+// LESS base styles
+@import "01-base.less";
 
 /* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* 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,
-.mod: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;
-}
-
-/* flexbox layout */
-.flex {
-	display : -webkit-box;
-	display : -moz-box;
-	display: -ms-flexbox;
-	display : -webkit-flex;
-	display : flex;
-}
-.flex-h {
-	-webkit-box-orient: horizontal;
-	-moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	-ms-flex-direction: row;
-	flex-direction: row;
-}
-.flex-v {
-	-webkit-box-orient: vertical;
-	-moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	-ms-flex-direction: column;
-	flex-direction: column;
-}
-.flex-fluid {
-	-moz-box-flex: 1;
-	-webkit-flex: 1;
-	-moz-flex: 1;
-	-ms-flex: 1;
-	flex: 1;
-}
-.flex-start {
-	-webkit-box-ordinal-group: -1;
-	-moz-box-ordinal-group: 0;
-	-ms-flex-order : -1;
-	-webkit-order : -1;
-	-moz-order : -1;
-	order : -1;
-}
-.flex-mid {
-	-webkit-box-ordinal-group: 1;
-	-moz-box-ordinal-group: 1;
-	-ms-flex-order : 1;
-	-webkit-order : 1;
-	-moz-order : 1;
-	order : 1;
-}
-.flex-end {
-	-webkit-box-ordinal-group: 42;
-	-moz-box-ordinal-group: 42;
-	-ms-flex-order : 42;
-	-webkit-order : 42;
-	-moz-order : 42;
-	order : 42;
-}
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left elements */
-.left {
-	float: left;
-}
-img.left {
-	margin-right: 1em;
-}
-
-/* right elements */
-.right {
-	float: right;
-}
-img.right {
-	margin-left: 1em;
-}
-
-img.left, img.right {
-	margin-bottom: 5px;
-}
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-
-.grid {overflow: hidden;}
-.grid > * {
-	display: block;
-	padding: 0;
-	margin: 0 (@gutter/2); /* half gutter value */
-	text-align: left;
-	letter-spacing: -0.31em;
-	text-rendering: optimizespeed;
-}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {word-spacing: -0.43em;}
-
-.grid > * > * {
-	width: 100%;
-	display: inline-block;
-	padding: 0 (@gutter/2); /* half gutter value */
-	vertical-align: top;
-	text-align: left;
-	letter-spacing: normal;
-	word-spacing: normal;
-	text-rendering: auto;
-	*display: inline; *zoom: 1; /* IE67 hack */
-}
-
-.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: @largescreen) {
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 33.333%}
-}
-@media (max-width: @smallscreen) {
-	.grid3 > *,
-	.grid4 > *,
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 50%}
-}
-@media (max-width: @tinyscreen) {
-	.grid > * > * {width: 100%}
-}
-
-/* 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; }
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n = small(10px),medium(20px),large(30px),none(0)
-source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
-*/
-.m-reset, .ma0 { margin: 0; }
-.p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: @smallvalue; }
-.ma2, .mam { margin: @mediumvalue; }
-.ma3, .mal { margin: @largevalue; }
-.pa1, .pas { padding: @smallvalue; }
-.pa2, .pam { padding: @mediumvalue; }
-.pa3, .pal { padding: @largevalue; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: @smallvalue; }
-.mt2, .mtm { margin-top: @mediumvalue; }
-.mt3, .mtl { margin-top: @largevalue; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: @smallvalue; }
-.mr2, .mrm { margin-right: @mediumvalue; }
-.mr3, .mrl { margin-right: @largevalue; }
-.mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: @smallvalue; }
-.mb2, .mbm { margin-bottom: @mediumvalue; }
-.mb3, .mbl { margin-bottom: @largevalue; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: @smallvalue; }
-.ml2, .mlm { margin-left: @mediumvalue; }
-.ml3, .mll { margin-left: @largevalue; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: @smallvalue; }
-.pt2, .ptm { padding-top: @mediumvalue; }
-.pt3, .ptl { padding-top: @largevalue; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: @smallvalue; }
-.pr2, .prm { padding-right: @mediumvalue; }
-.pr3, .prl { padding-right: @largevalue; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: @smallvalue; }
-.pb2, .pbm { padding-bottom: @mediumvalue; }
-.pb3, .pbl { padding-bottom: @largevalue; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: @smallvalue; }
-.pl2, .plm { padding-left: @mediumvalue; }
-.pl3, .pll { padding-left: @largevalue; }
-
-/* hiding content */
-.visually-hidden {
-	position: absolute;
-	left: -7000px;
-	overflow: hidden;
-}
-[dir=rtl] .visually-hidden {
-	left: auto;
-	right: -7000px;
-}
-
-/* hidden on desktop */
-.desktop-hidden { display: none; } 
-/* hidden on mobile */
-.mobile-hidden { display: block; } 
-
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize 
-* and www.sitepen.com
-*/
-
-/* buttons */
-.btn {
-	display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle;
-	font-family: inherit;
-	font-size: inherit;
-}
-label { 
-	display: inline-block;
-	vertical-align: middle;
-	cursor: pointer;
-}
-legend {
-	border: 0;
-	white-space: normal;
-}
-textarea {
-	overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-	min-height: 5em;
-	vertical-align: top;
-	font-family: inherit;
-	font-size: inherit;
-	resize: vertical;
-}
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-	cursor: pointer;
-	-webkit-appearance: button; /* 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;
-}
-
-/* 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,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-	display: none;
-}
-::-webkit-input-placeholder {
-	color: #777;
-}
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-	color: #777;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}
-
-/* ----------------------------- */
-/* ==iefix                       */
-/* ----------------------------- */
-
-/* haslayout for IE6/IE7 */
-.ie67 .clearfix,
-.ie67 .line,
-.ie67 .mod,
-.ie67 .row,
-.ie67 .col {
-	zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs width on IE6/IE7 */
-.ie67 .btn,
-.ie67 .col,
-.ie67 .inbl {
-	display: inline;
-	zoom: 1;
-}
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-	behavior: url(/js/boxsizing.htc);
-}
-*/
-
-/* ----------------------------- */
-/* ==print                       */
-/* ----------------------------- */
-
-/* quick print reset */
-@media print {
-	p,
-	blockquote {
-		orphans: 2;
-		widows: 2;
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid;
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid;
-	}
-}
-
-/* debug helper */
-.knacss-debug {
-	background: pink;
-	outline: 3px solid maroon;
-}
-
-/* ----------------------------- */
-/* ==own stylesheet               */
+/* ==own stylesheet              */
 /* ----------------------------- */
 
 /* Here should go your own CSS styles */
-/* You can link them with an @import or, better for webperf, just paste them here */
-
-/* @import url(my-styles.css); */
+/* You can link them with an LESS @import */
+/* @import "my-styles.less"; */
 
 
-/* ----------------------------- */
-/* ==desktop and retina medias   */
-/* ----------------------------- */
-
-@media (min-width: @smallscreen) {
-/* 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 */
-/* ---------------------------------- */
-
-@media (min-width: @largescreen) {
-
-	/* layouts for large (l) screens */
-	.large-hidden,
-	.tablet-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 (l) 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 {
-		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 (l) screens */
-	.large-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: @smallscreen) {
-
-	/* quick tablet reset */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p,
-	.small-wauto {
-		width: auto;
-		float: none;
-	} 
-
-	/* layouts for medium (m) screens */
-	.small-hidden,
-	.tablet-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;
-	}
-
-	/* you shall not pass */
-	div, textarea, table, td, th, code, pre, samp {
-		word-wrap: break-word;
-		-webkit-hyphens: auto;
-		-moz-hyphens: auto;
-		-ms-hyphens: auto;
-		-o-hyphens: auto;
-		hyphens: auto;
-	}
-
-	/* widths for small (s) 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  {
-		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 (s) screens */
-	.small-ma0 { margin: 0 !important; }
-
-	/* Responsive grids */
-	.grid4 > * {.grid(2);} 
-	.grid4 > :first-child + * + * {margin-left: 0}
-
-	.grid6 > * {.grid(3);}  
-	.grid6 > :first-child + * + * + * {margin-left: 0}
-}
-
-@media (max-width: @tinyscreen) {
-
-	/* quick smartphone reset */
-	.mod,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	.w300p,
-	.w400p,
-	.w500p {
-		width: auto;
-		float: none;
-	}
-	.row { 
-		display: block !important;
-		width: 100% !important;
-	}
-
-	/* layouts for tiny (t) screens */
-	.tiny-hidden,
-	.phone-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 (t) 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 { 
-		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 (t) screens */
-	.tiny-ma0 { margin: 0 !important; }
-}
-
-/* orientation iOS font-size fix */
-@media (orientation: landscape) and (max-device-width: @smallscreen) {
-	html,
-	body {
-		-webkit-text-size-adjust: 100%;
-	}
-}
\ No newline at end of file
+// LESS files : chose the ones you need
+@import "02-grids.less";
+@import "03-tables.less"; 
+@import "04-forms.less";
+@import "05-icons.less";
+@import "06-rwd.less";
+@import "07-flexbox.less"; 
+@import "08-print.less";
\ No newline at end of file