/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */


/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc);
	/*	If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}


/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
.container {
	max-width: 800px;
	margin: 0 auto;
}



/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after,
.col:after,
.clr:after,
.group:after {
	content: "";
	display: table;
	clear: both;
}

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row {
	padding-bottom: 0em;
}


/* DEFAULT COLUMN STYLES */
.col {
	display: block;
	float: left;
	width: 100%;
}

@media ( min-width : 700px ) {
	.gutters .col {
		margin-left: 2%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}

	.span-1 { width: 8.33333333333%; }
	.span-2 { width: 16.6666666667%; }
	.span-3 { width: 25%; }
	.span-4 { width: 33.3333333333%; }
	.span-5 { width: 41.6666666667%; }
	.span-6 { width: 50%; }
	.span-7 { width: 58.3333333333%; }
	.span-8 { width: 66.6666666667%; }
	.span-9 { width: 75%; }
	.span-10 { width: 83.3333333333%; }
	.span-11 { width: 91.6666666667%; }
	.span-12 { width: 100%; }

	.gutters .span-1 { width: 6.5%; }
	.gutters .span-2 { width: 15.0%; }
	.gutters .span-3 { width: 23.5%; }
	.gutters .span-4 { width: 32.0%; }
	.gutters .span-5 { width: 40.5%; }
	.gutters .span-6 { width: 49.0%; }
	.gutters .span-7 { width: 57.5%; }
	.gutters .span-8 { width: 66.0%; }
	.gutters .span-9 { width: 74.5%; }
	.gutters .span-10 { width: 83.0%; }
	.gutters .span-11 { width: 91.5%; }
	.gutters .span-12 { width: 100%; }
}