diff --git a/.gitignore b/.gitignore
index 5ebd21a..e8a1786 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 #################
 ## Eclipse
 #################
+.sass-cache
 
 *.pydevproject
 .project
diff --git a/knacss.scss b/knacss.scss
deleted file mode 100644
index 0324e9d..0000000
--- a/knacss.scss
+++ /dev/null
@@ -1,702 +0,0 @@
-/**
- * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations
- * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
- */
-
-
-/* ----------------------------- */
-/*       Table of content        */
-/* ----------------------------- */
-/*
- *  0 - Mixins and variables
- *  1 - Reset
- *  2 - Layout and modules
- *  3 - Header
- *  4 - Sidebar
- *  5 - Footer
- *  6 - Forms
- *  7 - Main
- *  8 - IEfix
- *  9 - Print
- * 10 - Desktop medias
- * 11 - Mobile
- */
-
-/* Compass imports */
-@import "compass/css3/images";
-@import "compass/css3";
-
-/* ----------------------------- */
-/* ==Mixins & variables          */
-/* ----------------------------- */
-
-/**
- * REM mixin with PX fallback 
- * @include rem('font-size', 1.4) outputs:
- * font-size: 14px;
- * font-size: 1.4rem;
- */
-@mixin rem($property, $val) {
-    #{$property}: ($val * 10) + px;
-    #{$property}: $val + rem;
-}
-
-/**
- * Mixin handling media queries breakpoints 
- * Usage:
- * @include breakpoint(small) { ... }
- * Can be used INSIDE a rule
- */
-@mixin breakpoint($point) {
-    @if $point == small {
-        @media (max-width: 45em) { @content; }
-    }
-    @if $point == medium {
-        @media (max-width: 55em) { @content; }
-    }
-    @if $point == large {
-        @media (min-width: 55em) { @content; } 
-    }
-}
-
-/** 
- * Mixin making easier absolute/fixed positioning 
- * Usage:
- * @include position(0, 0, 0, 0, absolute);
- * Currently unused. Only here for posterity.
- */
-@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) {
-	top: $top;
-	right: $right;
-	bottom: $bottom;
-	left: $left;
-	position: $position;
-}
-
-/**
- * Function to parse int a value 
- * parseInt(15px) returns 15
- * Value must be unquoted
- */
-@function parseInt($number) {
-  @return $number / ($number * 0 + 1);
-}
-
-/**
- * Mixin handling width-helpers classes 
- * Usage:
- * @include w(100px) -> .w100p { width: 100px; }
- * @include w(60%)   -> .w60   { width: 60%;   }
- * Also handles media-queries
- * If value >= 60% or 600px, becomes "auto" on tablets
- * If value >= 30% or 300px, becomes "auto" on mobiles
- * Change variables below to suit your needs
- */
-
-$valuePercentTablet: 60;
-$valuePercentMobile: 30; 
-$valuePixelTablet: 600;
-$valuePixelMobile: 300;
-
-@mixin w($val, $modifier: '') {
-	$int: parseInt($val);
-	$unit: unit($val);
-	$className: floor($int);
-	@if $unit == '%' {
-		#{'.w#{$className}'} {
-			#{$modifier}width: $val;	
-			
-			@if $int >= $valuePercentTablet {
-				@include breakpoint(medium) {
-					width: auto;
-				}
-			}
-			
-			@if $int >= $valuePercentMobile {
-				@include breakpoint(small) {
-					width: auto;
-				}
-			}
-		}
-	} @else if $unit == 'px' {
-		#{'.w#{$className}p'} {
-			#{$modifier}width: $val;
-		
-			@if $int >= $valuePixelTablet {
-				@include breakpoint(medium) {
-					width: auto;
-				}
-			}
-
-			@if $int >= $valuePixelMobile {
-				@include breakpoint(small) {
-					width: auto;
-				}
-			}
-		}
-	}  
-}
-
-
-/* ----------------------------- */
-/* ==Reset                       */
-/* ----------------------------- */
-
-/**
- * Base font-size
- * corresponds to 10px 
- * adapted to rem unit 
- */
-html {
-	font-size: 62.5%;
-	/* Orientation iOS font-size fix */
-	@media (orientation: landscape) and (max-device-width: 768px) {
-		-webkit-text-size-adjust: 100%;
-	}
-}
-
-body {
-	background: white;
-	color: black;
-	font-family: "Century Gothic", helvetica, arial, sans-serif;
-	@include rem('font-size', 1.4); /* equiv 14px */
-	line-height: 1.5; /* 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 {
-	@include rem('font-size', 1.4); /* equiv 14px */
-	line-height: 1.5;
-	margin: .75em 0 0;
-}
-
-/**
- * Titles from h1 (.h1-like) to h6 (.h6-like)
- * h1: 26px;
- * h2: 24px;
- * h3: 22px;
- * h4: 20px;
- * h5: 18px;
- * h6: 16px; 
- */
-$j: 2.6; $k: 2.25;
-@for $i from 1 through 6 {
-	#{'h#{$i}'}, #{'.h#{$i}-like'} {
-		@include rem('font-size', $j);
-		@include rem('line-height', $k);
-		font-weight: normal; 
-	}
-	$j: $j - 0.2; $k: $k + 0.2;
-	@if $i == 3 { $k: 1.45; }
-}
-
-/**
- * Alternate font-sizing 
- * .smaller: 10px;
- * .small  : 12px;
- * .medium : 14px;
- * .big    : 16px;
- * .bigger : 18px;
- * .biggest: 20px;
- */
-$l: 1;
-$sizes: smaller, small, medium, big, bigger, biggest;
-@each $size in $sizes {
-	#{'.#{$size}'} { 
-		@include rem('font-size', $l);
-	}
-	$l: $l + 0.2;
-}
-
-/* Soft reset */
-html, body,
-textarea, label
-figure {
-	margin: 0;
-	padding: 0;
-}
-ul, ol {
-	padding-left: 2em;
-}
-code, pre, samp {
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-}
-code  { line-height: 1em; }
-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, ul, ol {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}
-
-/* Max width */
-img, table, td, blockquote, code, pre, textarea, input, video {
-	max-width: 100%;
-}
-
-/* You shall not pass */
-div, textarea, table, td, th, code, pre, samp {
-	word-wrap: break-word;
-	@include hyphens(auto);
-}
-
-/* Pictures */
-img {
-	width: auto;
-	height: auto;
-	vertical-align: middle;
-}
-a img { border: 0; }
-
-/* Scripts */
-body > script { display: none !important; }
-
-/* Skip-links */
-.skip-links {
-	position: absolute;
-	
-	a {
-		position: absolute;
-		left: -9999px;
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-
-		&:focus {
-			position: static;
-		}
-	}
-}
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/**
- * Switching box-model for all elements 
- * Content-box: width = width + padding + border
- * Padding-box: width = width + padding
- * Border-box : width = width (FUCK YEAH!)
- */
-* {
-	@include box-sizing(border-box);
-}
-
-/**
- * 1. Include this rule to trigger hasLayout and contain floats.
- * 2. The space content is one way to avoid an Opera bug when the
- *    contenteditable attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that are clearfixed.
- * 3. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-.clearfix {
-	*zoom: 1;           /* 1 */
-
-	&:after, &:before {
-		content : ' ';  /* 2 */
-		display: table; /* 3 */
-	}
-
-	&:after {
-		clear: both;
-	}
-}
-
-/* Clearfix blocks that must contain floats */
-.line, .mod {
-	@extend .clearfix;
-}
-
-/* Clear blocks that needs to be placed under floats */
-.clear, .line, .row {
-	clear: both;
-}
-
-/**
- * Float layout
- * ------------
- * Tutorial : http://knacss.com/demos/tutoriel.html 
- */
-
-/* Module, contains floats (.item is the same) */
-.mod, .item { 
-	overflow: hidden;
-}
-
-/**
- * Table layout
- * ------------
- */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-
-	@include breakpoint(small) {
-		display: block !important;
-		width: 100% !important;
-	}
-}
-.row > *,
-.col {
-	display: table-cell;
-	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; }
-
-/* Simply inline-block */
-.inbl {
-	@include inline-block(top); /* All browsers back to IE6 */
-	margin-right: -.25em;
-}
-
-/**
- * Grids
- * -----
- */
-
-/* Equal grids with 2% gutter */
-[class*=grid] > * {float: left; } /* direct childrens are floating */
-[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
-.grid2 > * { width: 49%; }
-.grid3 > * { width: 32%; }
-.grid4 > * { width: 23.5%; }
-.grid5 > * { width: 18.4%; }
-.grid6 > * { width: 15%; }
-
-/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66%; }
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 32%; }
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 23.5%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 74.5%; }
-
-/**
- * Blocks widths (percentage and pixels) 
- * + media queries automagically handled
- */
-
-/**
- * .w10  to .w100  (step 10) and
- * .w100 to .w1000 (step 100)
- */
-@for $i from 1 through 10 {
-  @include w($i*10%);
-  @include w($i*100px);
-}
-
-/**
- * Additional not-round numbers
- * Add more to the list to suit your needs
- */
-$runClasses: 25%, 33.33%, 50%, 66.66%, 75%, 50px, 150px, 960px;
-@each $class in $runClasses {
-	@include w($class);
-}
-
-/**
- * You can even prefix width with
- * 'max-' or 'min-' to handle min/max-width
- */
-@include w(960px, 'max-');
-
-/**
- * Spacing helpers
- * p = padding
- * m = margin
- * a = all
- * t = top
- * r = right
- * b = bottom
- * l = left
- * s = small  (10px)
- * m = medium (20px)
- * l = large  (30px)
- * n = 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: 10px; }
-.ma2, .mam { margin: 20px; }
-.ma3, .mal { margin: 30px; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: 10px; }
-.mt2, .mtm { margin-top: 20px; }
-.mt3, .mtl { margin-top: 30px; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: 10px; }
-.mr2, .mrm { margin-right: 20px; }
-.mr3, .mrl { margin-right: 30px; }
-.mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: 10px; }
-.mb2, .mbm { margin-bottom: 20px; }
-.mb3, .mbl { margin-bottom: 30px; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: 10px; }
-.ml2, .mlm { margin-left: 20px; }
-.ml3, .mll { margin-left: 30px; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: 10px; }
-.pt2, .ptm { padding-top: 20px; }
-.pt3, .ptl { padding-top: 30px; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: 10px; }
-.pr2, .prm { padding-right: 20px; }
-.pr3, .prl { padding-right: 30px; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: 10px; }
-.pb2, .pbm { padding-bottom: 20px; }
-.pb3, .pbl { padding-bottom: 30px; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: 10px; }
-.pl2, .plm { padding-left: 20px; }
-.pl3, .pll { padding-left: 30px; }
-
-/* Hidden yet accessible content */
-.visually-hidden { 
-	position: absolute !important; 
-	overflow: hidden; 
-	clip: rect(0 0 0 0); 
-	height :  1px !important; 
-	width  :  1px !important; 
-	margin : -1px !important; 
-	padding:  0   !important; 
-	border: none; 
-}
-
-.desktop-hidden { /* Hidden on desktop */
-	@include breakpoint(large) {
-		display: none;
-	}
-}  
-.mobile-hidden  { /* Hidden on mobile */
-	@include breakpoint(small) {
-		display: none;
-	} 
-}					
-.tablet-hidden  { /* Hidden on tablets */
-	@include breakpoint(medium) {
-		display: none;
-	} 
-} 	
-
-/* ----------------------------- */
-/* ==Header						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Sidebar 					 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Footer						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Forms						 */
-/* ----------------------------- */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle; /* @bugfix alignment */
-}
-textarea {
-	resize: vertical;
-	font-family: inherit;
-}
-
-/* ----------------------------- */
-/* ==Main 						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==IEfix 						 */
-/* ----------------------------- */
-
-
-.ie67 {
-	/* 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 {
-		display: inline;
-		zoom: 1;
-	}
-
-	/**
-	 * Add a slash at the end of this comment
-	 * to enable box-sizing for IE6/IE7
-	 * @source https://github.com/Schepp/box-sizing-polyfill 
-	 *
-
-	* {
-		behavior: url(/js/boxsizing.htc);
-	}	
-
-	/**/
-}
-
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-
-/* ----------------------------- */
-/* ==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;
-	}
-}
-
-/* ----------------------------- */
-/* ==Desktop medias 			 */
-/* ----------------------------- */
-
-@include breakpoint(large) {
-	/**
-	 * Here go rules for big resources and big screens
-	 * e.g. background-images, font-faces, etc. 
-	 */
-}
-
-/* ----------------------------- */
-/* ==Mobile 					 */
-/* ----------------------------- */
-
-/* quick tablet reset */
-@include breakpoint(medium) {
-	/* responsive widths for medium (m) screens, like tablets */
-	.m25 { width: 25%; }
-	.m33 { width: 33.3333%; }
-	.m50 { width: 50%; }
-	.m66 { width: 66.6666%; }
-	.m75 { width: 75%; }
-	.m100 {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-}
-
-/* quick smartphone reset */
-@include breakpoint(small) {
-	.mod,
-	.item,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	/* responsive widths for tiny (t) screens, like smartphones */
-	.t25 { width: 25%; }
-	.t33 { width: 33.3333%; }
-	.t50 { width: 50%; }
-	.t66 { width: 66.6666%; }
-	.t75 { width: 75%; }
-	.t100 { 
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	thead { display: none; }
-}
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* Style adjustments for retina devices */
-}
\ No newline at end of file
diff --git a/sass/forms.scss b/sass/forms.scss
new file mode 100644
index 0000000..e34fc36
--- /dev/null
+++ b/sass/forms.scss
@@ -0,0 +1,123 @@
+/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/**
+ * Thanks to HTML5boilerplate
+ * Source: github.com/nathansmith/formalize and www.sitepen.com 
+ */
+
+
+/**
+ * Buttons 
+ */
+.btn { 
+	@include inline-block();
+}
+
+.btn.alternate {}
+.btn.highlight {}
+.login   	   {}
+.logout  	   {}
+.primary	   {}
+.warning 	   {}
+.error  	   {}
+.success	   {}
+
+/** 
+ * Form elements
+ */
+label { 
+	@include inline-block(middle);
+	cursor: pointer;
+}
+
+legend {
+	border: 0;
+	white-space: normal;
+}
+
+button,
+input,
+select {
+	font-family: "Century Gothic", helvetica, arial, sans-serif;
+	font-size: 100%;
+	margin: 0;
+	vertical-align: middle;
+}
+
+/**
+ * 1. Removes default vertical scrollbar on empty textarea in IE6/7/8/9
+ * 2. Prevents horizontal resizing
+ */
+textarea {
+	overflow: auto;   /* 1 */
+	min-height: 5em;
+	font-size: 1.75em;
+	vertical-align: top;
+	resize: vertical; /* 2 */
+}
+
+/**
+ * 1. Clickable input types in iOS
+ * 2. Corrects inner spacing displayed oddly in IE7
+ */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	cursor: pointer;
+	-webkit-appearance: button; /* 1 */
+	*overflow: visible;         /* 2 */
+}
+
+/**
+ * 1. Corrects excess space around these inputs in IE8/9
+ * 2. Corrects excess space around these inputs in IE7
+ */
+input[type="checkbox"],
+input[type="radio"] {
+	padding: 0;    /* 1 */
+	*width: 13px;  /* 2 */
+	*height: 13px; /* 2 */
+}
+
+input[type="search"] { 
+	-webkit-appearance: textfield;
+}
+
+/**
+ * Add a slash at the end of this comment
+ * if select styling bugs on WebKit *
+ select { -webkit-appearance: none; } /**/
+
+/**
+ * Removes 'x' on right of search input when text is entered
+ */
+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, textarea {
+	&:-moz-placeholder { color: #777; }
+}
+
+/**
+ * Removes inner padding and border in FF3+ 
+ */
+button, 
+input[type='button'], 
+input[type='reset'],
+input[type='submit'] {
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
diff --git a/sass/grids.scss b/sass/grids.scss
new file mode 100644
index 0000000..8cc70b6
--- /dev/null
+++ b/sass/grids.scss
@@ -0,0 +1,35 @@
+/* ----------------------------- */
+/* ==grids                       */
+/* ----------------------------- */
+
+/**
+ * Equal grids with 2% gutter 
+ * 1. Direct childrens are floating
+ * 2. Gutter
+ */
+[class*=grid] > * {
+	float: left; /* 1 */
+
+	+ * {
+		margin-left: 2%; /* 2 */
+	}
+}
+
+.grid2 > * { width: 49%; }
+.grid3 > * { width: 32%; }
+.grid4 > * { width: 23.5%; }
+.grid5 > * { width: 18.4%; }
+.grid6 > * { width: 15%; }
+
+/**
+ * Unequal grids (1-2, 2-1, 1-3 and 3-1) 
+ */
+.grid2-1 > *:first-child,
+.grid1-2 > * + * { width: 66%; }
+.grid1-2 > *:first-child,
+.grid2-1 > * + * { width: 32%; }
+.grid1-3 > *:first-child,
+.grid3-1 > * + * { width: 23.5%; }
+.grid3-1 > *:first-child,
+.grid1-3 > * + * { width: 74.5%; }
+
diff --git a/sass/icons.scss b/sass/icons.scss
new file mode 100644
index 0000000..442e44c
--- /dev/null
+++ b/sass/icons.scss
@@ -0,0 +1,255 @@
+/* ----------------------------- */
+/* ==icons and bullets           */
+/* ----------------------------- */
+
+.icon {
+  @include inline-block();
+}
+
+/**
+ * 1. Future proof; prevent screen-reader from reading it
+ */
+.icon:before,
+.icon > li:before,
+.icon.after:after,
+.icon.after > li:after {
+  content: "";
+  @include inline-block(middle);
+  position: relative; 
+  top: -.1em;
+  margin: 0 .3em 0 0;
+  font: 1.4em/1 sans-serif;
+  color: #000;
+  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
+  speak: none; /* 1 */
+}
+
+@media (min-device-width: 768px) {
+  .icon:before,
+  .icon > li:before,
+  .icon.after:after,
+  .icon.after > li:after {
+    font: 1em/0.6 sans-serif;
+    -webkit-transform: rotateZ(0.05deg);
+  }
+}
+
+.icon.after,
+.icon.after > li {
+  &:after {
+    margin: 0 0 0 8px;
+  }
+}
+
+ul.icon {
+  display: block;
+}
+
+ul.icon > li {
+  list-style: none;
+}
+
+ul.icon:before,
+ul.icon.after:after {
+  content:""
+}
+
+.icon.after,
+.icon.after > li {
+  &:before {
+    content: "" !important
+  }
+}
+
+.icon-rate:before, 
+.icon-rate > li:before,
+.icon-rate.after:after, 
+.icon-rate.after > li:after {
+  content: "\2605";
+}
+
+.icon-unrate:before, 
+.icon-unrate > li:before,
+.icon-unrate.after:after, 
+.icon-unrate.after > li:after {
+  content: "\2606";
+}
+
+.icon-check:before, 
+.icon-check > li:before,
+.icon-check.after:after, 
+.icon-check.after > li:after {
+  content: "\2713";
+}
+
+.icon-uncheck:before, 
+.icon-uncheck > li:before,
+.icon-uncheck.after:after, 
+.icon-uncheck.after > li:after {
+  content: "\2717";
+}
+
+.icon-cloud:before, 
+.icon-cloud > li:before,
+.icon-cloud.after:after, 
+.icon-cloud.after > li:after {
+  content: "\2601";
+}
+
+.icon-dl:before, 
+.icon-dl > li:before,
+.icon-dl.after:after, 
+.icon-dl.after > li:after {
+  content: "\21E3";
+  font-weight: bold;
+}
+
+.icon-cross:before, 
+.icon-cross > li:before,
+.icon-cross.after:after, 
+.icon-cross.after > li:after {
+  content: "\2716";
+  font-weight: bold;
+}
+
+.icon-arrow1:before, 
+.icon-arrow1 > li:before,
+.icon-arrow1.after:after, 
+.icon-arrow1.after > li:after {
+  content: "\2192";
+  position: relative; top: -0.15em;
+}
+
+.icon-arrow2:before, 
+.icon-arrow2 > li:before,
+.icon-arrow2.after:after, 
+.icon-arrow2.after > li:after {
+  content: "\279E";
+}
+
+.icon-arrow3:before, 
+.icon-arrow3 > li:before,
+.icon-arrow3.after:after, 
+.icon-arrow3.after > li:after {
+  content: "\279A";
+}
+
+.icon-bracket1:before, 
+.icon-bracket1 > li:before,
+.icon-bracket1.after:after, 
+.icon-bracket1.after > li:after {
+  content: "\2039";
+  font-weight: bold;
+  font-size: 1.6em;
+  position: relative; 
+  top: -.15em;
+}
+
+.icon-bracket2:before, 
+.icon-bracket2 > li:before,
+.icon-bracket2.after:after, 
+.icon-bracket2.after > li:after {
+  content: "\203A";
+  font-weight: bold;
+  font-size: 1.6em;
+  position: relative; top: -0.15em;
+}
+
+.icon-up:before, 
+.icon-up > li:before,
+.icon-up.after:after, 
+.icon-up.after > li:after {
+  content: "\25B2";
+}
+
+.icon-down:before, 
+.icon-down > li:before,
+.icon-down.after:after, 
+.icon-down.after > li:after {
+  content: "\25BC";
+}
+
+.icon-bull:before, 
+.icon-bull > li:before,
+.icon-bull.after:after, 
+.icon-bull.after > li:after {
+  content: "\2022";
+  font-size: 1.2em;
+  top: -0.05em;
+}
+
+.icon-bull2:before, 
+.icon-bull2 > li:before,
+.icon-bull2.after:after, 
+.icon-bull2.after > li:after {
+  content: "\25E6";
+  top: -0.05em;
+}
+
+.icon-bull3:before, 
+.icon-bull3 > li:before,
+.icon-bull3.after:after, 
+.icon-bull3.after > li:after {
+  content: "\2023";
+  font-size: 1.6em;
+  top: -0.05em;
+}
+
+.icon-nav:before, 
+.icon-nav > li:before,
+.icon-nav.after:after, 
+.icon-nav.after > li:after {
+  content: "\2261";
+  font-weight: bold;
+  font-size: 1.6em;
+}
+
+.icon-losange:before, 
+.icon-losange > li:before,
+.icon-losange.after:after, 
+.icon-losange.after > li:after {
+  content: "\25C6";
+}
+
+.icon-asteri:before, 
+.icon-asteri > li:before,
+.icon-asteri.after:after, 
+.icon-asteri.after > li:after {
+  content: "\2731";
+  font-weight: bold;
+}
+
+.icon-mail:before, 
+.icon-mail > li:before,
+.icon-mail.after:after, 
+.icon-mail.after > li:after {
+  content: "\2709";
+  font-size: 1.6em;
+  top: -.05em;
+}
+
+ol.styled {
+  counter-reset: styled;
+} 
+
+ol.styled > li {
+    list-style-type: none;
+    counter-increment: styled;
+    margin-bottom: .3em;
+}
+
+ol.styled > li:before {
+    content: counter(styled); 
+    display: inline-block;
+    width: 1em; height: 1em;
+    line-height: 1;
+    padding: 2px;
+    margin-right: .4em;
+    vertical-align: middle;
+    background: rgba(0,0,0,.5);
+    border-radius: 50%;
+    font-size: .9em;
+    text-align: center;
+    text-indent: -0.1em;
+    color: white;		
+}
\ No newline at end of file
diff --git a/sass/knacss.scss b/sass/knacss.scss
new file mode 100644
index 0000000..aaa2622
--- /dev/null
+++ b/sass/knacss.scss
@@ -0,0 +1,612 @@
+/*
+* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
+* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
+*/
+
+/* Compass imports */
+@import "compass/css3";
+
+/* ----------------------------- */
+/* ==helpers */
+/* ----------------------------- */
+
+/**
+ * Mixin handling REM with PX fallback
+ * Takes either PX or REM as input
+ * Outputs both in appropriate order
+ */
+@mixin rem($property, $values) {
+  $px : (); 
+  $rem: ();
+  
+  @each $value in $values { 
+   
+    @if $value == 0 or $value == auto { 
+      $px : append($px , $value);
+      $rem: append($rem, $value);
+    }
+    
+    @else { 
+      $unit: unit($value);
+      $val: $value / ($value * 0 + 1);
+      
+      @if $unit == "px" { 
+        $px : append($px,  $value);
+        $rem: append($rem, ($val / 10 + rem));
+      }
+      
+      @if $unit == "rem" {
+        $px : append($px,  ($val * 10 + px));
+        $rem: append($rem, $value);
+      }
+    }
+  }
+  
+  #{$property}: $px;
+  #{$property}: $rem; 
+}
+
+@mixin r($breakpoint) {
+	@if $breakpoint == "large"  {
+		@media (min-width: 1280px) { @content; }
+	}
+	@if $breakpoint == "medium" {
+		@media (max-width: 768px)  { @content; }
+	}
+	@if $breakpoint == "small"  {
+		@media (max-width: 640px)  { @content; }
+	}
+}
+
+/**
+ * Clearfix
+ */
+.clearfix:after {
+	content: '';
+	clear: both;
+	display: table;
+}
+
+/**
+ * Hidden yet accessible content
+ */
+.visuallyhidden {
+    clip: rect(0 0 0 0);
+    width:   1px;
+    height:  1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    border:  0;
+    position: absolute;
+}
+
+/* ----------------------------- */
+/* ==reset */
+/* ----------------------------- */
+
+/**
+ * 1. Base font-size (corresponds to 10px) adapted to REM unit 
+ * 2. Orientation iOS font-size fix
+ */
+html {
+	font-size: 62.5%; /* 1 */
+	@media (orientation: landscape) and (max-device-width: 768px) {
+		-webkit-text-size-adjust: 100%; /* 2 */
+	}
+}
+
+body {
+	background-color: #fff;
+	color: #000;
+	font-family: "Century Gothic", helvetica, arial, sans-serif;
+	@include rem('font-size', 14px);
+	line-height: 1.5;
+}
+
+/**
+ * Font-sizing for content
+ * Preserves vertical-rythm
+ * Source: http://soqr.fr/vertical-rhythm/ 
+ */
+p, ul, ol, dl,
+blockquote, pre,
+td, th,
+label, textarea,
+caption, details, figure, hgroup {
+	@include rem('font-size', 14px);
+	line-height: 1.5;
+	margin: .75em 0 0;
+}
+
+h1, .h1-like,
+h2, .h2-like,
+h3, .h3-like,
+h4, .h4-like,
+h5, .h5-like,
+h6, .h6-like {
+	font-weight: normal;
+	@include rem('margin', 21px 0 0 0);
+}
+
+h1, .h1-like, 
+h2, .h2-like,
+h3, .h3-like {
+	@include rem('line-height', 42px 0 0 0);
+}
+
+h4, .h4-like,
+h5, .h5-like,
+h6, .h6-like {
+	@include rem('line-height', 21px 0 0 0);
+}
+
+h1, .h1-like { @include rem('font-size', 26px); }
+h2, .h2-like { @include rem('font-size', 24px); }
+h3, .h3-like { @include rem('font-size', 22px); }
+h4, .h4-like { @include rem('font-size', 20px); }
+h5, .h5-like { @include rem('font-size', 18px); }
+h6, .h6-like { @include rem('font-size', 16px); }
+
+/* alternate font-sizing */
+.smaller	 { @include rem('font-size', 10px); }
+.small   	 { @include rem('font-size', 12px); }
+.medium 	 { @include rem('font-size', 14px); }
+.big     	 { @include rem('font-size', 16px); }
+.bigger  	 { @include rem('font-size', 18px); }
+.biggest 	 { @include rem('font-size', 20px); }
+
+/**
+ * Soft reset 
+ */
+html, body,
+textarea,
+figure, label {
+	margin: 0;
+	padding: 0;
+}
+
+ul, ol {
+	padding-left: 2em;
+}
+
+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; 
+}
+
+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, ul, ol {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+/**
+ * Prevents those to break out of their container
+ */
+img, table, td, 
+blockquote, code, pre, 
+textarea, input, video {
+	max-width: 100%;
+}
+
+/**
+ * You shall not pass 
+ */
+div, textarea, 
+table, td, th, 
+code, pre, samp {
+	word-wrap: break-word;
+	@include hyphens(auto);
+}
+
+/**
+ * Pictures 
+ */
+img {
+	height: auto;
+	vertical-align: middle;
+
+	/* Gmap3 max-width bug fix on images */
+	#map_canvas &,
+	.gmnoprint & {
+		max-width: none;
+	}
+
+	a & {
+		border: 0;
+	}
+}
+
+/* scripts */
+body > script { display: none !important; }
+
+/* skip-links */
+.skip-links {
+	position: absolute;
+
+	a {
+		position: absolute;
+		left: -7000px;
+		padding: 0.5em;
+		background: #000;
+		color:#fff;
+		text-decoration: none;
+
+		&:focus {
+			position: static;
+		}
+	}
+}
+
+/* ----------------------------- */
+/* ==layout and modules */
+/* ----------------------------- */
+
+/**
+ * Switching box-model for all elements
+ * 1. ...and pseudo-elements 
+ */
+*, 
+*:after, /* 1 */
+*:before {
+	@include box-sizing(border-box);
+}
+
+/**
+ * Float layout
+ * module, contains floats (.item is the same) 
+ */
+.mod, .item { 
+	overflow: hidden;
+}
+
+/** 
+ * Blocks that needs to be placed under floats 
+ */
+.clear, .line, .row {
+	clear: both;
+}
+
+/**
+ * Blocks that must contain floats 
+ */
+.clearfix, .line, .mod {
+	@extend .clearfix;
+}
+
+/**
+ * Table layout 
+ */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/**
+ * Inline-blocks
+ */
+.inbl {
+	@include inline-block(top);
+	margin-right: -.25em;
+}
+
+/**
+ * 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 {
+	-webkit-box-flox: 1;
+       -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  { float: left;  }
+.right { float: right; }
+
+img.left { margin-right: 1em; }
+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 
+ * (percentages and pixels) 
+ */
+.w10    { width: 10%; }
+.w20    { width: 20%; }
+.w25    { width: 25%; }
+.w30    { width: 30%; }
+.w33    { width: 33.333%; }
+.w40    { width: 40%; }
+.w50    { width: 50%; }
+.w60    { width: 60%; }
+.w66    { width: 66.666%; }
+.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, 0 = small(10px), medium(20px), large(30px), zero or none(0)
+ * Source: https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
+ */
+.m-reset, .ma0 { margin: 0 !important; }
+.p-reset, .pa0 { padding: 0 !important; }
+.ma1, .mas { margin: 10px !important; }
+.ma2, .mam { margin: 20px !important; }
+.ma3, .mal { margin: 30px !important; }
+.pa1, .pas { padding: 10px; }
+.pa2, .pam { padding: 20px; }
+.pa3, .pal { padding: 30px; }
+
+.mt0, .mtn { margin-top: 0 !important; }
+.mt1, .mts { margin-top: 10px !important; }
+.mt2, .mtm { margin-top: 20px !important; }
+.mt3, .mtl { margin-top: 30px !important; }
+.mr0, .mrn { margin-right: 0; }
+.mr1, .mrs { margin-right: 10px; }
+.mr2, .mrm { margin-right: 20px; }
+.mr3, .mrl { margin-right: 30px; }
+.mb0, .mbn { margin-bottom: 0 !important; }
+.mb1, .mbs { margin-bottom: 10px !important; }
+.mb2, .mbm { margin-bottom: 20px !important; }
+.mb3, .mbl { margin-bottom: 30px !important; }
+.ml0, .mln { margin-left: 0; }
+.ml1, .mls { margin-left: 10px; }
+.ml2, .mlm { margin-left: 20px; }
+.ml3, .mll { margin-left: 30px; }
+
+.pt0, .ptn { padding-top: 0; }
+.pt1, .pts { padding-top: 10px; }
+.pt2, .ptm { padding-top: 20px; }
+.pt3, .ptl { padding-top: 30px; }
+.pr0, .prn { padding-right: 0; }
+.pr1, .prs { padding-right: 10px; }
+.pr2, .prm { padding-right: 20px; }
+.pr3, .prl { padding-right: 30px; }
+.pb0, .pbn { padding-bottom: 0; }
+.pb1, .pbs { padding-bottom: 10px; }
+.pb2, .pbm { padding-bottom: 20px; }
+.pb3, .pbl { padding-bottom: 30px; }
+.pl0, .pln { padding-left: 0; }
+.pl1, .pls { padding-left: 10px; }
+.pl2, .plm { padding-left: 20px; }
+.pl3, .pll { padding-left: 30px; }
+
+
+
+.desktop-hidden { display: none; } /* hidden on desktop */
+
+/* ----------------------------- */
+/* ==header */
+/* ----------------------------- */
+
+/* ----------------------------- */
+/* ==sidebar */
+/* ----------------------------- */
+
+/* ----------------------------- */
+/* ==footer */
+/* ----------------------------- */
+
+/* ----------------------------- */
+/* ==forms */
+/* ----------------------------- */
+form,
+fieldset {
+	border: none;
+}
+
+/**
+ * 1. Bugfix alignment
+ */
+input,
+button, select,
+label, .btn {
+	vertical-align: middle; /* 1 */
+	font-family: inherit;
+}
+
+/**
+ * 1. Prevents horizontal resizing
+ */
+textarea {
+	resize: vertical; /* 1 */
+	font-family: inherit;
+}
+
+/* ----------------------------- */
+/* ==main */
+/* ----------------------------- */
+
+/* ----------------------------- */
+/* ==iefix */
+/* ----------------------------- */
+
+/* HasLayout for IE6/IE7 */
+.ie67 {
+	.clearfix, .line, .mod, .row, .col {
+		zoom: 1;
+	}
+
+	/* Warning: .col needs a width on IE6/IE7 */
+	.col {
+		display: inline;
+		zoom: 1;
+	}
+
+	/**
+	 * Add a slash at the end of this comment
+	 * If you want to enable box-sizing for IE6/IE7
+	 * with a polyfill 
+	 * Source: https://github.com/Schepp/box-sizing-polyfill *	
+	* {
+		behavior: url(/js/boxsizing.htc);
+	}
+	/**/
+}
+
+/**
+ * 1. Bugfixes for IE8
+ */
+.ie8 img {
+	width: auto; /* 1 */
+}
+
+/* ----------------------------- */
+/* ==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;
+	}
+}
\ No newline at end of file
diff --git a/sass/print.scss b/sass/print.scss
new file mode 100644
index 0000000..abc2008
--- /dev/null
+++ b/sass/print.scss
@@ -0,0 +1,73 @@
+/* ----------------------------- */
+/* ==print                       */
+/* ----------------------------- */
+
+@media print {
+	body {
+		width: auto !important;
+		margin: auto !important;
+		font-family: serif;
+		font-size: 12pt;
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+
+	h1, h2, h3, h4, h5, h6,
+	blockquote, p
+	ul, ol {
+		color: #000  !important;
+		margin: auto !important;
+	}
+
+	/**
+	 * Displays possible .print elements
+	 */
+	.print {
+		display: block;
+	}
+
+	/**
+	 * 1. No orphans
+	 * 2. No widows
+	 */
+	p,
+	blockquote {
+		orphans: 3; /* 1 */
+		widows:  3; /* 2 */
+	}
+
+	/**
+	 * Prevents breaks inside these elements
+	 */
+	blockquote,
+	ul, ol {
+		page-break-inside: avoid;
+	}
+
+	/**
+	 * Forces page break before main headers
+	 */
+	h1 {
+		page-break-before: always;
+	}
+
+	/**
+	 * Prevents breaks after these elements
+	 */
+	h1, h2, h3,
+	caption {
+		page-break-after: avoid;
+	}
+
+	/**
+	 * 1. Displays url after link
+	 */
+	a {
+		color: #000 !important;
+		text-decoration: underline !important;
+		
+		&[href]:after {
+			content: " (" attr(href) ")"; /* 1 */
+		}
+	}
+}
\ No newline at end of file
diff --git a/sass/rwd.scss b/sass/rwd.scss
new file mode 100644
index 0000000..5ac40bb
--- /dev/null
+++ b/sass/rwd.scss
@@ -0,0 +1,222 @@
+/* ----------------------------- */
+/* ==desktop and retina medias   */
+/* ----------------------------- */
+
+@include r(medium) {
+	/* Here go rules for big resources and big screens 
+	 * like: background-images, font-faces, etc. 
+	 */
+}
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1),
+only screen and (        min-device-pixel-ratio: 2),
+only screen and (                min-resolution: 192dpi),
+only screen and (                min-resolution: 2dppx) { 
+  /* Retina-specific stuff here */
+}
+
+
+/* ---------------------------------- */
+/* ==Responsive large / medium / tiny */
+/* ---------------------------------- */
+
+@include r(large) {
+
+	/* Layouts for large (l) screens */
+	.large-hidden,
+	.tablet-hidden { display: none  !important; }
+	.large-visible { display: block !important; }
+	
+	.large-no-float { float: none; }
+	
+	.large-inbl {
+		@include inline-block(top);
+		float: none;
+	}
+	
+	.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,
+	.large-man { margin: 0 !important; }
+}
+
+@include r(medium) {
+
+	/* quick tablet reset */
+	.w60,
+	.w66,
+	.w70,
+	.w75,
+	.w80,
+	.w90,
+	.w100,
+	.w600p,
+	.w700p,
+	.w800p,
+	.w960p,
+	.mw960p,
+	.medium-wauto { width: auto; } 
+
+	/* layouts for medium (m) screens */
+	.medium-hidden,
+	.tablet-hidden  { display: none  !important; }
+	.medium-visible { display: block !important; }
+
+	.medium-no-float {float: none; }
+
+	.medium-inbl {
+		@include inline-block(top);
+		float: none;
+	}
+
+	.medium-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+
+	.medium-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+
+	/* widths for medium (m) screens */
+	.medium-w25 { width: 25% !important; }
+	.medium-w33 { width: 33.3333% !important; }
+	.medium-w50 { width: 50% !important; }
+	.medium-w66 { width: 66.6666% !important; }
+	.medium-w75 { width: 75% !important; }
+
+	.medium-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 medium (m) screens */
+	.medium-ma0,
+	.medium-man { margin: 0 !important; }
+
+	/* Responsive grids */
+	.grid4 > * {width: 49% !important; } 
+	.grid4 > :first-child + * + * {margin-left: 0 !important;}
+	.grid6 > * {width: 32% !important; }  
+	.grid6 > :first-child + * + * + * {margin-left: 0 !important;}
+}
+
+@include r(small) {
+
+	/* Quick smartphone reset */
+	.mod,
+	.item,
+	.col,
+	fieldset {
+		display: block  !important;
+		float: none 	!important;
+		clear: none 	!important;
+		width: auto 	!important;
+		margin-left:  0 !important;
+		margin-right: 0 !important;
+		border: 0;
+	}
+
+	.w30,
+	.w33, 
+	.w40,
+	.w50,
+	.w300p,
+	.w400p,
+	.w500p {
+		width: auto;
+	}
+
+	.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 {
+		@include inline-block(top);
+		float: none;
+	}
+
+	.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,
+	.tiny-man { margin: 0 !important; }
+}
\ No newline at end of file
diff --git a/sass/table.scss b/sass/table.scss
new file mode 100644
index 0000000..c7b0fbf
--- /dev/null
+++ b/sass/table.scss
@@ -0,0 +1,89 @@
+/* ----------------------------- */
+/* ==tables                      */
+/* ----------------------------- */
+$border: 1px solid #ccc;
+
+table,
+.table {
+	max-width : 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	vertical-align: top;
+}
+
+table {
+	width: 100%;
+}
+
+.table {
+	display: table;
+}
+
+caption {
+	padding: 10px;
+	color: #555;
+	font-style: italic;	
+}
+
+table { 
+	border: $border;
+}
+
+tr > * + * {
+	border-left: $border;
+}
+
+th,
+td {
+	padding: .3em .8em;
+	text-align: left;
+	border-bottom: $border;
+}
+
+td {
+	color: #333;
+}
+
+/**
+ * Alternate tables 
+ */
+.alternate { 
+	border: 0;
+
+	tbody { border: $border; }
+
+	thead tr > * + * { border-left: 0; }
+	tbody tr > * + * { border-left: $border; }
+}
+
+/** 
+ * Alternate-vert tables 
+ */
+.alternate-vert { 
+	border: 0;
+	border-right: $border;
+
+	tr > :first-child {
+		border-bottom: 0;
+	}
+
+	tr > * + * {
+		border-top: $border;
+	}
+}
+
+/**
+ * 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