/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
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;
	list-style:none;
	margin:0px  auto;
	padding:10px 0 40px 10px;
	max-width: 1120px;
	position: relative;
	background-color: transparent;
	z-index:100;
-moz-box-shadow: 2px 0px 10px #B1B1B1;
	-webkit-box-shadow: 2px 0px 10px #B1B1B1;
	box-shadow: 2px 0px 10px #B1B1B1;
}
.grids1{
	clear:both;
	list-style:none;
	margin:0px  auto;
	padding:10px;
	max-width: 1120px;
	position: relative;
	background-color: transparent;
	z-index:100;
}

/*
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- 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- class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/
[class^="grid-"]{
	float:left;
	margin:0 0% 0 0;
}
.grids [class^="grid-"]{
	margin:0 %;
}
[class^="grid1-"]{
	float:left;
	margin:0 0% 0 0;
}
.grids [class^="grid1-"]{
	margin:0 %;
}

/*
Nested grids won't work with fluid layouts :(
*/

.grid-1{
	width:3.571%;
}
.grid-2{ width:9.821%;margin: 0 0 0 2em; }
.grid-3{ width:16.071% }
.grid-4{
	width:22.321%;
	margin-left: 1em;
}
.grid-5{
	width:28.571%;
	margin: 0 ;
}
.grid-6{
	width:34.821%;
	margin: 0 0 0 2em;
	
}
.grid-7{
	width:41.071%;
	margin: 0 0 0 2em;
	
}
.grid-8{
	width:47.321%;
	margin: 0;
}
.grid-9{
	width:53.571%;
	margin: 0 0 0 2em;
}
.grid-10{
	width:59.821%;
	margin-left: 0em;
}
.grid-11{margin-left:2em;
	width:66.071%;
}
 
.grid-12{
	width:72.321%;margin-left: 2em;
}
.grid-13{ width:78.571% }
.grid-14{ width:84.821% }
.grid-15{ width:91.071% ;margin: 0 0 0 2em;}
.grid-16{ width:100%; margin:0; }