/*------------------------------------*\
	GRID.INUIT.CSS
\*------------------------------------*/





/*
grid.inuit.css is an inuit.css igloo
igloos are CSS plugins which extend the inuit.css framework
They are released under the Apache License, Version 2.0 -- http://www.apache.org/licenses/LICENSE-2.0

@inuitcss
inuitcss.com
*/





/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
*/
.wrapper{
	width:1000px; /* resp */
	margin:0 auto;
	padding:0 10px;/* resp */
}

/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
*/
.grids{
	clear:both;
	max-width:1000px; /* resp */
	margin:0 0 0 -20px; /* resp */
	list-style:none; /* So we can make grids out of lists */
}

/*
Here we are using an attribute selector to detect the string 'grid-' in an element's class.
This works by assuming that anything we call grid-<n> we also want to be a grid item. It means less code and less for you to remember!

Ensure any grid item's FIRST class is a grid-<n> class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/
[class^="grid-"]{
	float:left;
	margin:0 10px 0 0;/* resp */
}
.grids [class^="grid-"]{
	margin:0 0 0 10px;/* resp */
}

.grid-1{ width:40px }
.grid-2{ width:180px;} /*resp */
.grid-3{ width:200px } /* resp */
.grid-4{ width:210px;}/* resp */
.grid-5{ width:270px } /* resp */
.grid-6{ width:370px } /* resp */
.grid-7{ width:400px }
.grid-8{ width:470px } 
.grid-9{ width:560px }/* resp */
.grid-10{ width:560px }/* resp */
.grid-11{ width:649px }/* resp */
.grid-12{ width:700px }/* resp */
.grid-12a {width: 750px; }/* resp */
.grid-13{ width:770px }/* resp */

.grid-14{ width:820px }/* resp */
.grid-15{ width:880px }/* resp */
.grid-16{ width:950px }/* resp */
.grid-17{ width:370px }/* resp */

@media only screen and (max-width : 639px) {
	.wrapper{
		width:100%; 
		margin:0 auto;
		padding:0;
	}
	.grids{
		clear:both;
		width:100%; 
		margin:0 0 0 0; 
		list-style:none;
	}
	[class^="grid-"]{
		float:left;
		margin:0 0 0 0;
	}
	.grids [class^="grid-"]{
		margin:0 0 0 0;
	}
	.grid-2{ width:100%; display:none; }
	.grid-3{ display:none; width:100%;} 
	.grid-4{ width:100%; }
	.grid-5{ width:100% }
	.grid-6{ width:100% }
	.grid-7{ width:400% }
	.grid-8{ width:100% }
	.grid-9{ width:100% }
	.grid-10{ width:100% }
	.grid-11{ width:100% }
	.grid-12{ width:100% }
	.grid-12a {width:100%; }
	.grid-13{ width:100% }
	.grid-14{ width:100% }
	.grid-15{ width:100% }
	.grid-16{ width:100%; margin:0 }
	.grid-17{ width:50% }

}

@media only screen and (min-width : 640px) and (max-width:1000px) {
.wrapper{
		width:100%; 
		margin:0 auto;
		padding:0;
	}
	.grids{
		clear:both;
		width:100%; 
		margin:0 0 0 0; 
		list-style:none;
	}
	[class^="grid-"]{
		float:left;
		margin:0 0 0 0;
	}
	.grids [class^="grid-"]{
		margin:0 0 0 0;
	}
	.grid-2{ display:none;} 
	.grid-3{ width:100%;}  
	.grid-4{ width:30%;}/*introduce lh nav*/
	.grid-5{ width:100% }
	.grid-6{ width:100%;}
	.grid-7{ width:100% }
	.grid-8{ width:100% }
	.grid-9{ width:100% }
	.grid-10{ width:100%}
	.grid-11{ width:100% }
	.grid-12{ width:100% }
	.grid-12a {width:100%; }
	.grid-13{ width:70%}/* adjust for lh nav*/
	.grid-14{ width:100% }
	.grid-15{ width:100% }
	.grid-16{ width:100%; margin:0 }
	.grid-17{ width:50% }

}